diff --git a/.gitignore b/.gitignore index f877de2550..8792496601 100644 --- a/.gitignore +++ b/.gitignore @@ -39,11 +39,3 @@ yarn-error.log* # vercel .vercel - -# themes -public/themes/soho-light/ -public/themes/soho-dark/ -public/themes/viva-light/ -public/themes/viva-dark/ -public/themes/mira/ -public/themes/nano/ diff --git a/CHANGELOG.md b/CHANGELOG.md index e67cdefbcc..0c4915a461 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,61 @@ # Changelog +## [9.0.0-beta.1](https://github.com/primefaces/primereact/tree/9.0.0-beta.1) + +[Full Changelog](https://github.com/primefaces/primereact/compare/8.7.3...9.0.0-beta.1) + +**Breaking Changes:** + +- TypeScript: Improve definitions on all components [\#2734](https://github.com/primefaces/primereact/issues/2734) + +**Implemented New Features and Enhancements:** + +- Autocomplete: disable issue [\#3953](https://github.com/primefaces/primereact/issues/3953) +- Dropdown button icon [\#3952](https://github.com/primefaces/primereact/issues/3952) +- Dropdown: support `onClick` event to intercept the event propagation [\#3935](https://github.com/primefaces/primereact/issues/3935) +- ReCaptcha: Allow for custom URL [\#3921](https://github.com/primefaces/primereact/issues/3921) +- Sidebar: `dismissible` not working immediately while sidebar is visible [\#3811](https://github.com/primefaces/primereact/issues/3811) +- Inputs: expose focus\(\) method on all input components [\#3806](https://github.com/primefaces/primereact/issues/3806) +- FileUpload: Control internal files state [\#3750](https://github.com/primefaces/primereact/issues/3750) +- Dropdown Item list responsive issue [\#2574](https://github.com/primefaces/primereact/issues/2574) +- DataTable/TreeTable: stricter generically typed API [\#2523](https://github.com/primefaces/primereact/issues/2523) +- TreeTable: accessibility improvements for keyboard navigation [\#2153](https://github.com/primefaces/primereact/issues/2153) +- DataTable features in PickList lists [\#1374](https://github.com/primefaces/primereact/issues/1374) + +**Fixed bugs:** + +- Calendar: Year incorrectly disabled in navigator view due to minDate [\#3967](https://github.com/primefaces/primereact/issues/3967) +- InputNumber : In Mobile mode value are getting trigger two times [\#3951](https://github.com/primefaces/primereact/issues/3951) +- DataTable: CellEdit Filtering and NOT\_EQUALS [\#3928](https://github.com/primefaces/primereact/issues/3928) +- Dialog: breakpoints not working in \ [\#3922](https://github.com/primefaces/primereact/issues/3922) +- InputNumber: When using the InputNumber with the built in spinner buttons, "onValueChange" is called before "onChange". [\#3913](https://github.com/primefaces/primereact/issues/3913) +- Chips separator not working on mobile [\#3885](https://github.com/primefaces/primereact/issues/3885) +- DataTable: Global search won't reset when the field is empty on react 17 [\#3819](https://github.com/primefaces/primereact/issues/3819) +- DataTable: RowReorder fails in case of pagination on page other than first & last [\#3817](https://github.com/primefaces/primereact/issues/3817) +- DataTable: 'virtualScroll' + selection [\#3804](https://github.com/primefaces/primereact/issues/3804) +- DataTable: Error when 'virtualScrollerOptions.showLoader' + 'dataKey' are enabled [\#3803](https://github.com/primefaces/primereact/issues/3803) +- DataTable: Virtual Scroll with Loading template + frozen columns [\#3800](https://github.com/primefaces/primereact/issues/3800) +- TreeTable: Error in resize mode expand [\#3796](https://github.com/primefaces/primereact/issues/3796) +- File Upload: itemTemplate missing props [\#3792](https://github.com/primefaces/primereact/issues/3792) +- SelectButton: Submit with React Hook Form [\#3790](https://github.com/primefaces/primereact/issues/3790) +- Calendar: Inline display issue if more than one month [\#3789](https://github.com/primefaces/primereact/issues/3789) +- DataTable: Edit Programmatic all row cannot read properties of undefined \(reading 'data'\) [\#3783](https://github.com/primefaces/primereact/issues/3783) +- ConfirmPopup: Using Tag, when popup is dismissed it stops working forever [\#3779](https://github.com/primefaces/primereact/issues/3779) +- Calendar: Console warning using ParseDateTime [\#3777](https://github.com/primefaces/primereact/issues/3777) +- Calendar: StepMinute should initialize value [\#3770](https://github.com/primefaces/primereact/issues/3770) +- ToggleButton: Received `false` for a non-boolean attribute `tabIndex` [\#3768](https://github.com/primefaces/primereact/issues/3768) +- Hook: useOverlayListener incorrectly passing target [\#3766](https://github.com/primefaces/primereact/issues/3766) +- SplitButton: className in menu api does not work [\#3757](https://github.com/primefaces/primereact/issues/3757) +- Password: Eye icon problem in MS Edge and IE [\#3756](https://github.com/primefaces/primereact/issues/3756) +- Dialog: Unintended margins [\#3755](https://github.com/primefaces/primereact/issues/3755) +- DataTable: row reordering in lazy mode [\#3618](https://github.com/primefaces/primereact/issues/3618) +- AutoComplete: space between overlay panel and the component [\#3463](https://github.com/primefaces/primereact/issues/3463) +- InputStyle gets ignored within overlays bound to body [\#3428](https://github.com/primefaces/primereact/issues/3428) +- Datatable: Virtualscroll and frozenvalue \(frozen rows\) hide first rows [\#3361](https://github.com/primefaces/primereact/issues/3361) +- Dropdown: Incorrect flipFit detection when using filter [\#3203](https://github.com/primefaces/primereact/issues/3203) +- DataTable: Edit Programmatic all row cannot read properties of undefined \(reading 'data'\) [\#3013](https://github.com/primefaces/primereact/issues/3013) +- Menu: Popup menu positioning - appendTo [\#2980](https://github.com/primefaces/primereact/issues/2980) + ## [8.7.3](https://github.com/primefaces/primereact/tree/8.7.3) (2022-12-05) [Full Changelog](https://github.com/primefaces/primereact/compare/8.7.2...8.7.3) diff --git a/api-generator/components/checkbox.js b/api-generator/components/checkbox.js index 6e1b30e899..fbd96365b7 100644 --- a/api-generator/components/checkbox.js +++ b/api-generator/components/checkbox.js @@ -25,7 +25,7 @@ const CheckboxProps = [ }, { name: 'checked', - type: 'any', + type: 'boolean', default: 'false', description: 'Specifies whether a checkbox should be checked or not.' }, diff --git a/api-generator/components/inputswitch.js b/api-generator/components/inputswitch.js index 61dc9f737a..7e3e1d210c 100644 --- a/api-generator/components/inputswitch.js +++ b/api-generator/components/inputswitch.js @@ -37,7 +37,7 @@ const InputSwitchProps = [ }, { name: 'checked', - type: 'any', + type: 'boolean', default: 'false', description: 'Specifies whether a inputswitch should be checked or not.' }, diff --git a/components/doc/accordion/apidoc.js b/components/doc/accordion/apidoc.js deleted file mode 100644 index d4916c6427..0000000000 --- a/components/doc/accordion/apidoc.js +++ /dev/null @@ -1,13 +0,0 @@ -import DocApiSection from '../common/docapisection'; -import { DocSectionText } from '../common/docsectiontext'; - -export function ApiDoc(props) { - const apiComponents = [{ name: 'Accordion', isMain: true }, { name: 'AccordionTab' }]; - - return ( - <> - For API references of the following component(s); - - - ); -} diff --git a/components/doc/autocomplete/apidoc.js b/components/doc/autocomplete/apidoc.js deleted file mode 100644 index be2e938c27..0000000000 --- a/components/doc/autocomplete/apidoc.js +++ /dev/null @@ -1,421 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

Standard HTMLSpanElement properties are passed to the wrapping div element. In addition the component uses these properties:

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valueanynullValue of the component.
namestringnullName of the input element.
typestringtextType of the input element.
suggestionsarraynullAn array of suggestions to display.
fieldanynullField of a suggested object to resolve and display.
optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
forceSelectionbooleanfalseWhen present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.
autoHighlightbooleanfalseWhen enabled, highlights the first item in the list by default.
scrollHeightstring200pxMaximum height of the suggestions panel.
dropdownbooleanfalseDisplays a button next to the input field when enabled.
dropdownModestringblankSpecifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.
dropdownAutoFocusbooleantrueFocus the input field when the dropdown button is clicked if enabled.
multiplebooleanfalseSpecifies if multiple values can be selected.
selectionLimitnumbernullNumber of maximum options that can be selected.
showEmptyMessagebooleanfalseWhether to show the empty message or not.
emptyMessagestringNo results found.Text to display when there is no data. Defaults to global value in i18n translation configuration.
minLengthnumber1Minimum number of characters to initiate a search.
delaynumber300Delay between keystrokes to wait before sending a query.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
inputIdstringnullIdentifier of the input element.
inputStylestringnullInline style of the input field.
inputClassNamestringnullInline style of the input field.
panelClassNamestringnullStyle class of the overlay panel element.
panelStylestringnullInline style of the overlay panel element.
placeholderstringnullHint text for the input field.
readOnlybooleanfalseWhen present, it specifies that the input cannot be typed.
disabledbooleanfalseWhen present, it specifies that the component should be disabled.
maxlengthnumbernullMaximum number of character allows in the input field.
sizenumbernullSize of the input field.
appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
tabIndexnumbernullIndex of the element in tabbing order.
autoFocusbooleanfalseWhen present, it specifies that the component should automatically get focus on load.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
itemTemplateanynullTemplate of a list item.
selectedItemTemplateanynullTemplate of a selected item.
optionGroupTemplateanynullTemplate of an option group item.
transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
dropdownAriaLabelstringChooseARIA label for the dropdown button. Defaults to placeholder then Locale "choose" label.
dropdownIconanypi pi-chevron-downIcon class of the dropdown icon.
removeIconanypi pi-times-circleIcon of the remove chip element in multiple mode.
virtualScrollerOptionsobjectnull - Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. -
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
completeMethod - event.originalEvent: browser event
- event.query: Value to search with - 		Callback to invoke to search for suggestions.
onChange - event.originalEvent: Browser event
- event.value: Value of the component - 		Callback to invoke when autocomplete value changes.
onFocusevent: Browser eventCallback to invoke when autocomplete gets focus.
onBlurevent: Browser eventCallback to invoke when autocomplete loses focus.
onSelect - event.originalEvent: Browser event
- event.value: Value of the component - 		Callback to invoke when a suggestion is selected.
onUnselect - event.originalEvent: Browser event
- event.value: Value of the component - 		Callback to invoke when a selected value is removed.
onDropdownClick - event.originalEvent: browser event
- event.query: Current value of the input field - 		Callback to invoke to when dropdown button is clicked.
onClickevent: Browser event Callback to invoke on click.
onDblClickevent: Browser eventCallback to invoke on double click.
onMouseDownevent: Browser eventCallback to invoke to when a mouse button is pressed.
onKeyUpevent: Browser eventCallback to invoke to when a key is released.
onKeyPressevent: Browser eventCallback to invoke to when a key is pressed.
onContextMenuevent: Browser eventCallback to invoke on right-click.
onClearevent: Browser eventCallback to invoke when input is cleared by the user.
onShow-Callback to invoke when overlay panel becomes visible.
onHide-Callback to invoke when overlay panel becomes hidden.
-
- - - ); -} diff --git a/components/doc/autocomplete/form/formikdoc.js b/components/doc/autocomplete/form/formikdoc.js index 7445fe47dc..f91fc5bfbd 100644 --- a/components/doc/autocomplete/form/formikdoc.js +++ b/components/doc/autocomplete/form/formikdoc.js @@ -45,7 +45,7 @@ export function FormikDoc(props) { }; const code = { - basic: ` + basic: `
Value
@@ -53,7 +53,6 @@ export function FormikDoc(props) { id="item" name="item" value={formik.values.item} - optionLabel="name" suggestions={items} completeMethod={search} onChange={(e) => { @@ -118,7 +117,6 @@ export default function FormikDoc() { inputId="ac_item" name="item" value={formik.values.item} - optionLabel="name" suggestions={items} completeMethod={search} className={classNames({ 'p-invalid': isFormFieldInvalid('item') })} @@ -187,7 +185,6 @@ export default function FormikDoc() { inputId="ac_item" name="item" value={formik.values.item} - optionLabel="name" suggestions={items} completeMethod={search} className={classNames({ 'p-invalid': isFormFieldInvalid('item') })} @@ -219,7 +216,6 @@ export default function FormikDoc() { inputId="ac_item" name="item" value={formik.values.item} - optionLabel="name" suggestions={items} completeMethod={search} className={classNames({ 'p-invalid': isFormFieldInvalid('item') })} diff --git a/components/doc/autocomplete/groupdoc.js b/components/doc/autocomplete/groupdoc.js index 8fcf5fd726..049257adf1 100644 --- a/components/doc/autocomplete/groupdoc.js +++ b/components/doc/autocomplete/groupdoc.js @@ -1,4 +1,3 @@ -import getConfig from 'next/config'; import { useState } from 'react'; import { AutoComplete } from '../../lib/autocomplete/AutoComplete'; import { DocSectionCode } from '../common/docsectioncode'; @@ -39,12 +38,11 @@ export function GroupDoc(props) { ] } ]; - const contextPath = getConfig().publicRuntimeConfig.contextPath; const groupedItemTemplate = (item) => { return (
- {item.label} + {item.label}
{item.label}
); @@ -115,8 +113,7 @@ export default function GroupDemo() {
{item.label} (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} + src="https://www.primereact.org/images/flag/flag_placeholder.png" className={\`flag flag-\${item.code.toLowerCase()} mr-2\`} style={{width: '18px'}} /> @@ -204,8 +201,7 @@ export default function GroupDemo() {
{item.label} (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} + src="https://www.primereact.org/images/flag/flag_placeholder.png" className={\`flag flag-\${item.code.toLowerCase()} mr-2\`} style={{width: '18px'}} /> diff --git a/components/doc/autocomplete/templatedoc.js b/components/doc/autocomplete/templatedoc.js index 45243746bb..5a92bddc8e 100644 --- a/components/doc/autocomplete/templatedoc.js +++ b/components/doc/autocomplete/templatedoc.js @@ -1,4 +1,3 @@ -import getConfig from 'next/config'; import { useEffect, useState } from 'react'; import { CountryService } from '../../../service/CountryService'; import { AutoComplete } from '../../lib/autocomplete/AutoComplete'; @@ -9,7 +8,6 @@ export function TemplateDoc(props) { const [countries, setCountries] = useState([]); const [selectedCountry, setSelectedCountry] = useState(null); const [filteredCountries, setFilteredCountries] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const search = (event) => { // Timeout to emulate a network connection @@ -31,7 +29,7 @@ export function TemplateDoc(props) { const itemTemplate = (item) => { return (
- {item.name} + {item.name}
{item.name}
); @@ -79,8 +77,7 @@ export default function TemplateDemo() {
{item.name} (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} + src="https://www.primereact.org/images/flag/flag_placeholder.png" className={\`flag flag-\${item.code.toLowerCase()} mr-2\`} style={{width: '18px'}} /> @@ -139,8 +136,7 @@ export default function TemplateDemo() {
{item.name} (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} + src="https://www.primereact.org/images/flag/flag_placeholder.png" className={\`flag flag-\${item.code.toLowerCase()} mr-2\`} style={{width: '18px'}} /> diff --git a/components/doc/avatar/apidoc.js b/components/doc/avatar/apidoc.js deleted file mode 100644 index f8d5a2dc92..0000000000 --- a/components/doc/avatar/apidoc.js +++ /dev/null @@ -1,108 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
labelstringnullDefines the text to display.
iconstringnullDefines the icon to display.
imagestringnullDefines the image to display.
imageAltanynullIt specifies an alternate text for an image, if the image cannot be displayed.
imageFallbackstringdefaultDefines a fallback image or URL if the main image fails to load. If "default" will fallback to label then icon.
sizestringnullSize of the element, valid options are "large" and "xlarge".
shapestringsquareShape of the element, valid options are "square" and "circle".
templateanynullTemplate of the content.
-
- - - -

Any property as style and class are passed to the main container element. There are no additional properties.

- - -
Events
-
- - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onImageErrorevent: Browser eventThis event is triggered if an error occurs while loading an image file.
onClickevent: Browser eventCallback to invoke on click.
-
- - - ); -} diff --git a/components/doc/badge/apidoc.js b/components/doc/badge/apidoc.js deleted file mode 100644 index e546771816..0000000000 --- a/components/doc/badge/apidoc.js +++ /dev/null @@ -1,66 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -

- Different color options are available as severity levels. When used as a component use the severity property to apply a severity. -

- -
    -
  • success
    • -
  • info
    • -
  • warning
    • -
  • danger
    • -
- - {` - -`} - - - -

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
valueanynullValue to display inside the badge.
severitystringnullSeverity type of the badge.
sizestringnullSize of the badge, valid options are "large" and "xlarge".
-
- - - ); -} diff --git a/components/doc/blockui/apidoc.js b/components/doc/blockui/apidoc.js deleted file mode 100644 index f4e183e7ae..0000000000 --- a/components/doc/blockui/apidoc.js +++ /dev/null @@ -1,115 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
blockedbooleanfalseControls the blocked state.
fullScreenbooleanfalseWhen enabled, the whole document gets blocked.
baseZIndexnumber0Base zIndex value to use in layering.
autoZIndexbooleantrueWhether to automatically manage layering.
classNamestringnullStyle class of the element.
styleobjectnullInline style of the element.
containerClassNamestringnullStyle class of the container element.
containerStyleReact.CSSPropertiesnullInline style of the container element.
templateanynullTemplate of mask.
-
- - -
- - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onBlocked-Fired when the element gets blocked.
onUnblocked-Fired when the element gets unblocked.
-
- - - ); -} diff --git a/components/doc/breadcrumb/apidoc.js b/components/doc/breadcrumb/apidoc.js deleted file mode 100644 index 2af36b6281..0000000000 --- a/components/doc/breadcrumb/apidoc.js +++ /dev/null @@ -1,59 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
modelMenuItem[]nullAn array of menuitems.
homeMenuItemnullMenuItem configuration for the home icon.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
-
- - - ); -} diff --git a/components/doc/button/accessibilitydoc.js b/components/doc/button/accessibilitydoc.js index dd1e228285..cdb7f6f21d 100644 --- a/components/doc/button/accessibilitydoc.js +++ b/components/doc/button/accessibilitydoc.js @@ -1,7 +1,21 @@ -import { DocSectionText } from '../common/docsectiontext'; import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; export function AccessibilityDoc() { + const code = { + basic: ` + + ` + }; + return ( @@ -11,16 +25,7 @@ export function AccessibilityDoc() { button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.

- {` - -`} +

Keyboard Support

diff --git a/components/doc/button/apidoc.js b/components/doc/button/apidoc.js deleted file mode 100644 index f6a83b3b94..0000000000 --- a/components/doc/button/apidoc.js +++ /dev/null @@ -1,95 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
labelstringnullText of the button.
iconanynullName of the icon or JSX.Element for icon.
iconPosstringleftPosition of the icon, valid values are "left", "right", "top" and "bottom".
badgestringnullValue of the badge.
badgeClassNamestringnullStyle class of the badge.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
visiblebooleantrueWhen present, it specifies that the element should be visible.
loadingbooleanfalseDisplay loading icon of the button
loadingIconanynullName of the loading icon or JSX.Element for loading icon.
-
- - - ); -} diff --git a/components/doc/calendar/accessibilitydoc.js b/components/doc/calendar/accessibilitydoc.js index 1910d967ae..6ae76d3daf 100644 --- a/components/doc/calendar/accessibilitydoc.js +++ b/components/doc/calendar/accessibilitydoc.js @@ -1,9 +1,22 @@ -import { DocSectionText } from '../common/docsectiontext'; import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; import Link from 'next/link'; export function AccessibilityDoc() { + const code = { + basic: ` + + + +Date + + + + ` + }; + return ( @@ -39,15 +52,7 @@ export function AccessibilityDoc() { Calendar also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.

- {` - - - -Date - - - -`} +

Choose Date Button Keyboard Support

diff --git a/components/doc/calendar/apidoc.js b/components/doc/calendar/apidoc.js deleted file mode 100644 index 4cc7882052..0000000000 --- a/components/doc/calendar/apidoc.js +++ /dev/null @@ -1,533 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
namestringnullName of the input element.
valueanynullValue of the component.
visiblebooleanfalseSpecifies the visibility of the overlay.
viewDatedatenullDate instance whose month and year are used to display the calendar.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
inlinebooleanfalseWhen enabled, displays the calendar as inline instead of an overlay.
inputIdstringnullIdentifier of the input element.
inputStyleobjectnullInline style of the input element.
inputClassNamestringnullStyle class of the input element.
inputModestringnullHTML inputmode attribute of input.
requiredbooleanfalseWhen present, it specifies that an input field must be filled out before submitting the form.
readOnlyInputbooleannullWhen specified, prevents entering the date manually with keyboard.
keepInvalidbooleanfalseKeep invalid value when input blur.
maskstringnullMask pattern for input element.
disabledbooleanfalseWhen specified, disables the component.
tabIndexnumbernullIndex of the element in tabbing order.
placeholderstringnullPlaceholder text for the input.
showIconbooleanfalseWhen enabled, displays a button with icon next to input.
iconstringpi pi-calendarIcon of the calendar button.
iconPosstringrightIcon position of the calendar button. Valid values is 'left' and 'right'.
showOnFocusbooleantrueWhen disabled, datepicker will not be visible with input focus.
numberOfMonthsnumber1Number of months to display.
viewstringdateType of view to display, valid values are "date" for datepicker and "month" for month picker.
touchUIbooleanfalseWhen enabled, calendar overlay is displayed as optimized for touch devices.
showTimebooleanfalseWhether to display timepicker.
timeOnlybooleanfalseWhether to display timepicker only.
showSecondsbooleanfalseWhether to show the seconds in time picker.
showMillisecbooleanfalseWhether to show the milliseconds in time picker.
hourFormatstring24Specifies 12 or 24 hour format.
localestringenUsed to display the values ​​of the locale object defined in the Locale API
stepHournumber1Hours to change per step.
stepMinutenumber1Minutes to change per step.
stepSecondnumber1Seconds to change per step.
stepMillisecnumber1Milliseconds to change per step.
shortYearCutoffstring+10The cutoff year for determining the century for a date.
hideOnDateTimeSelectbooleanfalseWhether to hide the overlay on date selection when showTime is enabled.
showWeekbooleanfalseWhen enabled, calendar will show week numbers.
dateFormatstringmm/dd/yyFormat of the date.
panelStyleobjectnullInline style of the datetimepicker panel.
panelClassNamestringnullStyle class of the datetimepicker panel.
monthNavigatorbooleanfalse - Whether the month should be rendered as a dropdown instead of text.

Deprecated: Navigator is always on -
yearNavigatorbooleanfalse - Whether the year should be rendered as a dropdown instead of text.

Deprecated: Navigator is always on. -
disabledDatesarray;nullArray with dates to disable.
disabledDaysarraynullArray with disabled weekday numbers.
minDateDatenullThe minimum selectable date.
maxDateDatenullThe maximum selectable date.
maxDateCountnumbernullMaximum number of selectable dates in multiple mode.
showMinMaxRangebooleanfalseWhether to allow navigation past min/max dates.
showOtherMonthsbooleantrueWhether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
selectOtherMonthsbooleanfalseWhether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
showButtonBarbooleanfalseWhether to display today and clear buttons at the footer
todayButtonClassNamestringp-secondary-buttonStyle class of the today button.
clearButtonClassNamestringp-secondary-buttonStyle class of the clear button.
baseZIndexnumber0Base zIndex value to use in layering.
autoZIndexbooleantrueWhether to automatically manage layering.
appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
dateTemplatefunctionnullFunction that gets a date information and returns the cell content in datepicker.
decadeTempatefunctionnullFunction that gets a navigator information and returns the decade selections in the panel.
monthNavigatorTemplatefunctionnullFunction that gets a navigator information and returns the navigator element in header.
yearNavigatorTemplatefunctionnullFunction that gets a navigator information and returns the novigator in header.
formatDateTimefunctionnullFunction for overriding default behavior that formats a Date to the string representation.
parseDateTimefunctionnullFunction for overriding default behavior that parses text into the Date.
transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onFocusevent: Browser eventCallback to invoke on focus event of input field.
onBlurevent: Browser eventCallback to invoke on blur event of input field.
onInputevent: Browser eventCallback to invoke on input event of input field.
onSelect - originalEvent: Browser event
- value: Selected date - 		Callback to invoke when a date is selected.
onChange - originalEvent: Browser event
- value: New date - 		Callback to invoke when value changes.
onTodayButtonClickevent: Browser eventCallback to invoke when today button is clicked.
onClearButtonClickevent: Browser eventCallback to invoke when clear button is clicked.
onViewDateChange - originalEvent: Browser event
- value: New date - 		Callback to invoke when the displayed month/year is changed.
onShow-Callback to invoke when overlay panel or modal becomes visible.
onHide-Callback to invoke when overlay panel or modal becomes hidden.
onVisibleChange - event.visible: Whether the overlay is visible
- event.type: Action type when the overlay is visible/hidden
- event.callback: It is used to refocus the input field in some cases when the overlay is hidden. - 		Callback to invoke when visible is changed.
-
- - - ); -} diff --git a/components/doc/captcha/apidoc.js b/components/doc/captcha/apidoc.js deleted file mode 100644 index 2315cbf81c..0000000000 --- a/components/doc/captcha/apidoc.js +++ /dev/null @@ -1,147 +0,0 @@ -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -

- In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. Read more at official documentation. -

- - {` -const showResponse = (response) => { -//call to a backend to verify against recaptcha with private key -} -`} - - -

In addition, include the captcha widget resource to your page.

- - {` - -`} - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
siteKeystringnullPublic sitekey.
themestringlightThe color scheme of the widget.
typestringimageThe type of CAPTCHA to serve.
sizestringnormalThe size of the widget.
tabIndexnumber0The tabIndex of the widget and challenge.
languagestringenLanguage of the widget.
sourceUrlstringhttps://www.google.com/recaptcha/api.js?render=explicitSource URL of the Captcha as some countries do not allow Google access.
-
- - -
- - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onResponseevent.response: The user response token.The callback function to be executed when the user submits a successful CAPTCHA response.
onExpire-The callback function to be executed when the recaptcha response expires and the user needs to solve a new CAPTCHA.
-
- - -
- - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
reset-Resets the reCAPTCHA widget.
getResponse-Gets the response for the reCAPTCHA widget.
-
- - - ); -} diff --git a/components/doc/card/advanceddoc.js b/components/doc/card/advanceddoc.js index ca8cb6ade1..eabd7a0e9d 100644 --- a/components/doc/card/advanceddoc.js +++ b/components/doc/card/advanceddoc.js @@ -27,7 +27,7 @@ import { Button } from 'primereact/button'; export default function AdvancedDemo() { const header = ( - Card e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} /> + Card ); const footer = (
@@ -55,7 +55,7 @@ import { Button } from 'primereact/button'; export default function AdvancedDemo() { const header = ( - Card e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} /> + Card ); const footer = (
diff --git a/components/doc/card/apidoc.js b/components/doc/card/apidoc.js deleted file mode 100644 index 35a76ffe2e..0000000000 --- a/components/doc/card/apidoc.js +++ /dev/null @@ -1,71 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
headeranynullHeader of the card.
footeranynullFooter of the card.
titleanynullTitle of the card.
subTitleanynullSecondary title of the card.
styleobjectnullInline style of the component.
classNamestringnullStyle class of the component.
-
- - - ); -} diff --git a/components/doc/carousel/apidoc.js b/components/doc/carousel/apidoc.js deleted file mode 100644 index 7154db085c..0000000000 --- a/components/doc/carousel/apidoc.js +++ /dev/null @@ -1,175 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuearraynullAn array of objects to display.
pagenumbernullIndex of the first item.
headeranynullLabel of header.
footeranynullLabel of footer.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
itemTemplatefunctionnullFunction that gets an item in the value and returns the content for it.
circularbooleanfalseDefines if scrolling would be infinite.
showIndicatorsbooleantrueWhether to display indicator container.
showNavigatorsbooleantrueWhether to display navigation buttons in container.
circularbooleanfalseDefines if scrolling would be infinite.
autoplayIntervalnumbernullTime in milliseconds to scroll items automatically.
numVisiblenumber1Number of items per page.
numScrollnumber1Number of items to scroll.
responsiveOptionsanynullAn array of options for responsive design.
orientationstringhorizontalSpecifies the layout of the component, valid values are "horizontal" and "vertical".
verticalViewPortHeightstring300pxHeight of the viewport in vertical layout.
contentClassNamestringnullStyle class of main content.
containerClassNamestringnullStyle class of the viewport container.
indicatorsContentClassNamestringnullStyle class of the paginator items.
-
- - - -
- - - - - - - - - - - - - - - -
NameParametersDescription
onPageChangeevent.page = Value of the new page.Callback to invoke after scroll.
-
- - - ); -} diff --git a/components/doc/carousel/basicdoc.js b/components/doc/carousel/basicdoc.js index a66ffaeafc..acf4c08c08 100644 --- a/components/doc/carousel/basicdoc.js +++ b/components/doc/carousel/basicdoc.js @@ -4,7 +4,6 @@ import { Carousel } from '../../lib/carousel/Carousel'; import { ProductService } from '../../../service/ProductService'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; -import getConfig from 'next/config'; export function BasicDoc(props) { const [products, setProducts] = useState([]); @@ -26,8 +25,6 @@ export function BasicDoc(props) { } ]; - const contextPath = getConfig().publicRuntimeConfig.contextPath; - useEffect(() => { ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9))); }, []); // eslint-disable-line react-hooks/exhaustive-deps @@ -37,7 +34,7 @@ export function BasicDoc(props) {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -93,7 +90,7 @@ export default function BasicDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -152,7 +149,7 @@ export default function BasicDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

diff --git a/components/doc/carousel/circulardoc.js b/components/doc/carousel/circulardoc.js index 9d8e341ce4..5ad0c3eb6e 100644 --- a/components/doc/carousel/circulardoc.js +++ b/components/doc/carousel/circulardoc.js @@ -4,7 +4,6 @@ import { Carousel } from '../../lib/carousel/Carousel'; import { ProductService } from '../../../service/ProductService'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; -import getConfig from 'next/config'; export function CircularDoc(props) { const [products, setProducts] = useState([]); @@ -26,8 +25,6 @@ export function CircularDoc(props) { } ]; - const contextPath = getConfig().publicRuntimeConfig.contextPath; - useEffect(() => { ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9))); }, []); @@ -37,7 +34,7 @@ export function CircularDoc(props) {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -94,7 +91,7 @@ export default function CircularDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -154,7 +151,7 @@ export default function CircularDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

diff --git a/components/doc/carousel/numscrolldoc.js b/components/doc/carousel/numscrolldoc.js index 203cecf870..3f8212be35 100644 --- a/components/doc/carousel/numscrolldoc.js +++ b/components/doc/carousel/numscrolldoc.js @@ -4,7 +4,6 @@ import { Carousel } from '../../lib/carousel/Carousel'; import { ProductService } from '../../../service/ProductService'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; -import getConfig from 'next/config'; export function NumScrollDoc(props) { const [products, setProducts] = useState([]); @@ -26,8 +25,6 @@ export function NumScrollDoc(props) { } ]; - const contextPath = getConfig().publicRuntimeConfig.contextPath; - useEffect(() => { ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9))); }, []); // eslint-disable-line react-hooks/exhaustive-deps @@ -37,7 +34,7 @@ export function NumScrollDoc(props) {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -93,7 +90,7 @@ export default function NumScrollDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -152,7 +149,7 @@ export default function NumScrollDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

diff --git a/components/doc/carousel/responsivedoc.js b/components/doc/carousel/responsivedoc.js index bda26088e9..d26995f6fe 100644 --- a/components/doc/carousel/responsivedoc.js +++ b/components/doc/carousel/responsivedoc.js @@ -4,7 +4,6 @@ import { Carousel } from '../../lib/carousel/Carousel'; import { ProductService } from '../../../service/ProductService'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; -import getConfig from 'next/config'; export function ResponsiveDoc(props) { const [products, setProducts] = useState([]); @@ -26,8 +25,6 @@ export function ResponsiveDoc(props) { } ]; - const contextPath = getConfig().publicRuntimeConfig.contextPath; - useEffect(() => { ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9))); }, []); // eslint-disable-line react-hooks/exhaustive-deps @@ -37,7 +34,7 @@ export function ResponsiveDoc(props) {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -93,7 +90,7 @@ export default function ResponsiveDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -152,7 +149,7 @@ export default function ResponsiveDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

diff --git a/components/doc/carousel/verticaldoc.js b/components/doc/carousel/verticaldoc.js index 8ef609bf6d..43c9c0094a 100644 --- a/components/doc/carousel/verticaldoc.js +++ b/components/doc/carousel/verticaldoc.js @@ -4,11 +4,9 @@ import { Carousel } from '../../lib/carousel/Carousel'; import { ProductService } from '../../../service/ProductService'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; -import getConfig from 'next/config'; export function VerticalDoc(props) { const [products, setProducts] = useState([]); - const contextPath = getConfig().publicRuntimeConfig.contextPath; useEffect(() => { ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9))); @@ -19,7 +17,7 @@ export function VerticalDoc(props) {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -58,7 +56,7 @@ export default function VerticalDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

@@ -101,7 +99,7 @@ export default function VerticalDemo() {
- (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={product.name} className="product-image" /> + {product.name}

{product.name}

diff --git a/components/doc/cascadeselect/accessibilitydoc.js b/components/doc/cascadeselect/accessibilitydoc.js index 0b49cab516..8d054f880b 100644 --- a/components/doc/cascadeselect/accessibilitydoc.js +++ b/components/doc/cascadeselect/accessibilitydoc.js @@ -1,7 +1,17 @@ -import { DocSectionText } from '../common/docsectiontext'; import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; export function AccessibilityDoc() { + const code = { + basic: ` +Options + + + + ` + }; + return ( @@ -20,12 +30,7 @@ export function AccessibilityDoc() { If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.

- {` -Options - - - -`} +

Closed State Keyboard Support

diff --git a/components/doc/cascadeselect/apidoc.js b/components/doc/cascadeselect/apidoc.js deleted file mode 100644 index 8313afff8a..0000000000 --- a/components/doc/cascadeselect/apidoc.js +++ /dev/null @@ -1,195 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
styleobjectnullInline style of the component.
classNamestringnullStyle class of the component.
optionsarraynullAn array of selectitems to display as the available options.
optionLabelstringnullProperty name or getter function to use as the label of an option.
optionValuestringnullProperty name or getter function to use as the value of an option, defaults to the option itself when not defined.
optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
optionGroupChildrenstringnullProperty name or getter function to retrieve the items of a group.
placeholderstringnullDefault text to display when no option is selected.
disabledbooleanfalseWhen present, it specifies that the component should be disabled.
dataKeystringnullA property to uniquely identify an option.
tabIndexnumbernullIndex of the element in tabbing order.
inputIdstringnullIdentifier of the underlying input element.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
itemTemplateanynullThe template of items.
transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
dropdownIconstringpi pi-chevron-downIcon class of the dropdown icon.
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onChange - event.originalEvent: Original event
- event.value: Value of the checkbox{' '} - 		Callback to invoke on value change
onGroupChangeevent: Browser event.Callback to invoke when a group changes.
onBeforeShow-Callback to invoke before the overlay is shown.
onBeforeHide-Callback to invoke before the overlay is hidden.
onShow-Callback to invoke when the overlay is shown.
onHide-Callback to invoke when the overlay is hidden.
-
- - - ); -} diff --git a/components/doc/cascadeselect/templatedoc.js b/components/doc/cascadeselect/templatedoc.js index 9bfce5ee7b..93bef880bc 100644 --- a/components/doc/cascadeselect/templatedoc.js +++ b/components/doc/cascadeselect/templatedoc.js @@ -83,9 +83,7 @@ export function TemplateDoc(props) { const countryOptionTemplate = (option) => { return (
- {option.states && ( - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={`flag flag-${option.code.toLowerCase()}`} /> - )} + {option.states && {option.name}} {option.cities && } {option.cname && } {option.cname || option.name} @@ -183,7 +181,7 @@ export default function TemplateDoc() { const countryOptionTemplate = (option) => { return (
- {option.states && {option.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} + {option.states && {option.name}} {option.cities && } {option.cname && } @@ -285,8 +283,8 @@ export default function TemplateDoc() { const countryOptionTemplate = (option) => { return (
- {option.states && {option.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} - className={\`flag flag-\${option.code.toLowerCase()}\`} />} + {option.states && {option.name}} {option.cities && } {option.cname && } {option.cname || option.name} diff --git a/components/doc/chart/apidoc.js b/components/doc/chart/apidoc.js deleted file mode 100644 index ad94f0cda6..0000000000 --- a/components/doc/chart/apidoc.js +++ /dev/null @@ -1,106 +0,0 @@ -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
typestringnullType of the chart.
dataanynullData to display.
optionsobjectnullOptions to customize the chart.
pluginsany[]nullUsed to custom plugins of the chart.
widthstringnullWidth of the chart in non-responsive mode.
heightstringnullHeight of the chart in non-responsive mode.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
ariaLabelstringoptions.plugins.title.textARIA label for the chart canvas. Defaults to options.plugins.title.text if available.
-
- - -
- - - - - - - - - - - - - - - -
NameParametersDescription
refresh-Redraws the graph.
-
- - - ); -} diff --git a/components/doc/checkbox/apidoc.js b/components/doc/checkbox/apidoc.js deleted file mode 100644 index 3f4ccd2228..0000000000 --- a/components/doc/checkbox/apidoc.js +++ /dev/null @@ -1,161 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
inputIdstringnullUnique identifier of the inner native radiobutton.
valueanynullValue of the checkbox.
namestringnullName of the checkbox element .
checkedanyfalseSpecifies whether a checkbox should be checked or not.
trueValueanytrueValue in checked state.
falseValueanyfalseValue in unchecked state.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
requiredbooleanfalseWhen present, it specifies that an input field must be filled out before submitting the form.
readOnlybooleanfalseWhen present, it specifies that the value cannot be changed.
tabIndexnumbernullIndex of the element in tabbing order.
iconstringpi pi-checkIcon class of the checkbox icon.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onChange - event.originalEvent: Original event
- event.value: Value of the checkbox
- event.checked: Checked state as a boolean. - 		Callback to invoke on value change
onMouseDownevent: Browser eventCallback to invoke to when a mouse button is pressed.
onContextMenuevent: Browser eventCallback to invoke on right-click.
-
- - - ); -} diff --git a/components/doc/chip/apidoc.js b/components/doc/chip/apidoc.js deleted file mode 100644 index 865d849787..0000000000 --- a/components/doc/chip/apidoc.js +++ /dev/null @@ -1,109 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
labelstringnullDefines the text to display.
iconstringnullDefines the icon to display.
imagestringnullDefines the image to display.
removablebooleanfalseWhether to display a remove icon.
removeIconstringpi pi-times-circleIcon of the remove element.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
templateanynullTemplate of an item.
imageAltanynullIt specifies an alternate text for an image, if the image cannot be displayed.
-
- - -
- - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onRemoveevent: Browser eventCallback to invoke when a chip is removed.
onImageErrorevent: Browser eventThis event is triggered if an error occurs while loading an image file.
-
- - - ); -} diff --git a/components/doc/chips/accessibilitydoc.js b/components/doc/chips/accessibilitydoc.js index 0c352241a7..b9a0e6deaf 100644 --- a/components/doc/chips/accessibilitydoc.js +++ b/components/doc/chips/accessibilitydoc.js @@ -1,7 +1,20 @@ -import { DocSectionText } from '../common/docsectiontext'; import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; export function AccessibilityDoc() { + const code = { + basic: ` + + + +Tags + + + + ` + }; + return ( @@ -11,15 +24,7 @@ export function AccessibilityDoc() { aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip.

- {` - - - -Tags - - - -`} +

Input Field Keyboard Support

diff --git a/components/doc/chips/apidoc.js b/components/doc/chips/apidoc.js deleted file mode 100644 index 9f681da264..0000000000 --- a/components/doc/chips/apidoc.js +++ /dev/null @@ -1,198 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the component.
inputIdstringnullIdentifier of the focus input to match a label defined for the chips.
namestringnullName of the input field.
placeholderstringnullAdvisory information to display on input.
valuearraynullValue of the component.
maxnumbernullMaximum number of entries allowed.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
readOnlybooleanfalseWhen present, it specifies that the element should be read-only.
removablebooleantrueWhether an item is removable.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
allowDuplicatebooleantrueWhether to allow duplicate values or not.
separatorstringnullSeparator char to add an item when pressed in addition to the enter key. Currently only possible value is ","
itemTemplatefunctionnullTemplate function to return the content of a chip.
keyfilterstring/regexnullFormat definition of the keys to block.
addOnBlurbooleannullWhether to add an item when the input loses focus.
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onChange - originalEvent: Browser event
- value: New value of the component - 		Callback to invoke when a chip is added or removed.
onAdd - originalEvent: Browser event
- value: Added item value - 		Callback to invoke when a chip is added. Return 'false' to prevent the item from being added.
onRemove - originalEvent: Browser event
- value: Removed item value - 		Callback to invoke when a chip is removed.
onFocusevent: Browser eventCallback to invoke when the component gets focus.
onBlurevent: Browser eventCallback to invoke when the component loses focus.
onKeyDownevent: Browser event.Callback to invoke when the key pressed.
-
- - - ); -} diff --git a/components/doc/colorpicker/apidoc.js b/components/doc/colorpicker/apidoc.js deleted file mode 100644 index 817c2dbe39..0000000000 --- a/components/doc/colorpicker/apidoc.js +++ /dev/null @@ -1,162 +0,0 @@ -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the component.
valueanynullValue of the component.
styleCSSPropertiesnullInline style of the component.
classNamestringnullStyle class of the component.
defaultColorstringff0000Default color to display when value is null.
inlinebooleanfalseWhether to display as an overlay or not.
formatstringhexFormat to use in value binding, supported formats are "hex", "rgb" and "hsb".
appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
disabledbooleanfalseWhen present, it specifies that the component should be disabled.
tabIndexnumbernullIndex of the element in tabbing order.
inputIdstringnullIdentifier of the focus input to match a label defined for the dropdown.
panelStyleCSSPropertiesnullInline style of the overlay panel.
panelClassNamestringnullStyle class of the overlay panel.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onChangevalue: Selected color value whose type depends on the format.Callback to invoke when a color is selected.
onShow-Callback to invoke when overlay panel becomes visible.
onHide-Callback to invoke when overlay panel becomes hidden.
-
- - - ); -} diff --git a/components/doc/common/codeeditor/index.js b/components/doc/common/codeeditor/index.js index 5860af56b2..8d116ef16b 100644 --- a/components/doc/common/codeeditor/index.js +++ b/components/doc/common/codeeditor/index.js @@ -59,7 +59,7 @@ const useStackBlitz = (props) => { description: '**' + (props.description || '') + - '**\n PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.', + '**\n PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.', dependencies: stackBlitzParameters.dependencies, files }, diff --git a/components/doc/common/codeeditor/services.js b/components/doc/common/codeeditor/services.js index c01e8077f8..ce17321ace 100644 --- a/components/doc/common/codeeditor/services.js +++ b/components/doc/common/codeeditor/services.js @@ -9783,92 +9783,92 @@ const services = { getData() { return [ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, { - itemImageSrc: 'images/galleria/galleria2.jpg', - thumbnailImageSrc: 'images/galleria/galleria2s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria2.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria2s.jpg', alt: 'Description for Image 2', title: 'Title 2' }, { - itemImageSrc: 'images/galleria/galleria3.jpg', - thumbnailImageSrc: 'images/galleria/galleria3s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria3.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria3s.jpg', alt: 'Description for Image 3', title: 'Title 3' }, { - itemImageSrc: 'images/galleria/galleria4.jpg', - thumbnailImageSrc: 'images/galleria/galleria4s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria4.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria4s.jpg', alt: 'Description for Image 4', title: 'Title 4' }, { - itemImageSrc: 'images/galleria/galleria5.jpg', - thumbnailImageSrc: 'images/galleria/galleria5s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria5.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria5s.jpg', alt: 'Description for Image 5', title: 'Title 5' }, { - itemImageSrc: 'images/galleria/galleria6.jpg', - thumbnailImageSrc: 'images/galleria/galleria6s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria6.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria6s.jpg', alt: 'Description for Image 6', title: 'Title 6' }, { - itemImageSrc: 'images/galleria/galleria7.jpg', - thumbnailImageSrc: 'images/galleria/galleria7s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria7.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria7s.jpg', alt: 'Description for Image 7', title: 'Title 7' }, { - itemImageSrc: 'images/galleria/galleria8.jpg', - thumbnailImageSrc: 'images/galleria/galleria8s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria8.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria8s.jpg', alt: 'Description for Image 8', title: 'Title 8' }, { - itemImageSrc: 'images/galleria/galleria9.jpg', - thumbnailImageSrc: 'images/galleria/galleria9s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria9.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria9s.jpg', alt: 'Description for Image 9', title: 'Title 9' }, { - itemImageSrc: 'images/galleria/galleria10.jpg', - thumbnailImageSrc: 'images/galleria/galleria10s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria10.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria10s.jpg', alt: 'Description for Image 10', title: 'Title 10' }, { - itemImageSrc: 'images/galleria/galleria11.jpg', - thumbnailImageSrc: 'images/galleria/galleria11s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria11.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria11s.jpg', alt: 'Description for Image 11', title: 'Title 11' }, { - itemImageSrc: 'images/galleria/galleria12.jpg', - thumbnailImageSrc: 'images/galleria/galleria12s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria12.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria12s.jpg', alt: 'Description for Image 12', title: 'Title 12' }, { - itemImageSrc: 'images/galleria/galleria13.jpg', - thumbnailImageSrc: 'images/galleria/galleria13s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria13.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria13s.jpg', alt: 'Description for Image 13', title: 'Title 13' }, { - itemImageSrc: 'images/galleria/galleria14.jpg', - thumbnailImageSrc: 'images/galleria/galleria14s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria14.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria14s.jpg', alt: 'Description for Image 14', title: 'Title 14' }, { - itemImageSrc: 'images/galleria/galleria15.jpg', - thumbnailImageSrc: 'images/galleria/galleria15s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria15.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria15s.jpg', alt: 'Description for Image 15', title: 'Title 15' } diff --git a/components/doc/common/developmentsection.js b/components/doc/common/developmentsection.js index e79767546a..6ffa8cc9bb 100644 --- a/components/doc/common/developmentsection.js +++ b/components/doc/common/developmentsection.js @@ -1,11 +1,13 @@ import * as React from 'react'; export const DevelopmentSection = React.memo((props) => { - const isProduction = process.env.NODE_ENV === 'production'; - - if (isProduction) { - return

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

; - } - - return props.children; + return ( + <> +
+ + Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress. +
+ {props.children} + + ); }); diff --git a/components/doc/common/docactions.js b/components/doc/common/docactions.js index 7e0061b33b..248ba07a9d 100644 --- a/components/doc/common/docactions.js +++ b/components/doc/common/docactions.js @@ -1,62 +1,12 @@ -import React, { useEffect, useContext } from 'react'; -import { useRef } from 'react'; -import { Button } from '../../lib/button/Button'; -import { Menu } from '../../lib/menu/Menu'; -import { Toast } from '../../lib/toast/Toast'; -import DomHandler from '../../lib/utils/DomHandler'; -import { useLiveEditor } from './liveeditor'; +import React, { useContext } from 'react'; import AppContentContext from '../../../components/layout/appcontentcontext'; +import { Button } from '../../lib/button/Button'; export const DocActions = (props) => { - const menu = useRef(null); - const toast = useRef(null); - const liveEditor = useRef(null); const context = useContext(AppContentContext); - useEffect(() => { - /* eslint-disable */ - liveEditor.current = useLiveEditor(); - /* eslint-enable */ - }, []); - - const items = [ - { - label: 'Hooks Source Demo', - className: props.showHooksSource === false ? 'hidden' : '', - command: () => liveEditor.current.postSandboxParameters('hooks', toast) - }, - { - label: 'Class Source Demo', - className: props.showClassSource === false ? 'hidden' : '', - command: () => liveEditor.current.postSandboxParameters('class', toast) - }, - { - label: 'TS Source Demo', - className: props.showTsSource === false ? 'hidden' : '', - command: () => liveEditor.current.postSandboxParameters('ts', toast) - }, - { - label: 'Browser Source Demo', - className: props.showBrowserSource === false ? 'hidden' : '', - command: () => liveEditor.current.postSandboxParameters('browser', toast) - } - ]; - - const toggleMenu = (event) => { - menu.current.toggle(event); - }; - - const scrollToDocs = () => { - const top = DomHandler.getOffset(document.getElementById('app-doc')).top - DomHandler.getOuterHeight(document.getElementsByClassName('layout-topbar')[0], true); - - window.scroll({ - top, - behavior: 'smooth' - }); - }; - const viewOnGitHub = () => { - window.open('https://github.com/primefaces/primereact/blob/master/pages/' + props.github, '_blank'); + window.open('https://github.com/primefaces/primereact/blob/master/components/lib' + props.github, '_blank'); }; const viewOnFigma = () => { @@ -66,13 +16,7 @@ export const DocActions = (props) => { return ( <> -
- - -
); diff --git a/components/doc/common/docapisection.js b/components/doc/common/docapisection.js index 06b6325ff4..a9ef9bd8cc 100644 --- a/components/doc/common/docapisection.js +++ b/components/doc/common/docapisection.js @@ -1,19 +1,33 @@ +import getConfig from 'next/config'; import React from 'react'; +import { DocSectionText } from './docsectiontext'; -function DocApiSection({ components }) { - const componentList = components.map((component, index) => { - const { name, isMain } = component; +function DocApiSection(props) { + /** + * @todo Version is hard-coded here. It should be dynamic. + */ + const { appVersion, apiDocUrl } = getConfig().publicRuntimeConfig; - return ( -
  • - - {name} - -
    • - ); - }); + const renderApiDocs = () => { + return props.doc.map((apiDoc, index) => { + const { name, pathname } = apiDoc; - return
      {componentList}
    ; + return ( +
  • + + {name} + +
    • + ); + }); + }; + + return ( + + Visit the API documentation for detailed information about all the properties, events and methods of the component. +
      {renderApiDocs()}
    +     + ); } export default DocApiSection; diff --git a/components/doc/common/docsectioncode.js b/components/doc/common/docsectioncode.js index 1de3e6d45b..10b828f050 100644 --- a/components/doc/common/docsectioncode.js +++ b/components/doc/common/docsectioncode.js @@ -31,17 +31,23 @@ export function DocSectionCode(props) { className={classNames('p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'javascript' })} label="JS" onClick={() => setCodeLang('javascript')} + tooltip="JavaScript Code" + tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }} > {props.code.php ? ( ) : null} diff --git a/components/doc/common/docsectionnav.js b/components/doc/common/docsectionnav.js index 24ef952140..5c83e13fe5 100644 --- a/components/doc/common/docsectionnav.js +++ b/components/doc/common/docsectionnav.js @@ -1,21 +1,19 @@ -import React, { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/router'; +import React, { useEffect, useState } from 'react'; import { classNames } from '../../lib/utils/Utils'; export function DocSectionNav(props) { const router = useRouter(); const [activeTab, setActiveTab] = useState(''); - const [topbarHeight, setTopbarHeight] = useState(null); const onButtonClick = (doc) => { - setActiveTab(doc.id); // Scroll to the clicked button's parent element - scrollToTheSection(doc.id); + scrollToTheSection(doc.id, 'smooth'); }; - const scrollToTheSection = (id) => { - document.getElementById(id).parentElement.scrollIntoView({ block: 'start', offset: { top: topbarHeight + 100 } }); + const scrollToTheSection = (id, behavior) => { + document.getElementById(id).parentElement.scrollIntoView({ block: 'start', behavior }); }; const getIdOfTheSection = (section) => { @@ -41,8 +39,6 @@ export function DocSectionNav(props) { const topbarEl = document.getElementsByClassName('layout-topbar')[0]; // Get the topbar element const hash = window.location.hash.substring(1); // Get the initial hash - setTopbarHeight(topbarEl.clientHeight); - // Set the active tab to the initial hash and scroll into view if it exists if (hash) { setActiveTab(hash); diff --git a/components/doc/common/docsections.js b/components/doc/common/docsections.js index 6c49f704ef..18fc593b94 100644 --- a/components/doc/common/docsections.js +++ b/components/doc/common/docsections.js @@ -1,48 +1,45 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; import React from 'react'; -import { DeferredContent } from '../../lib/deferredcontent/DeferredContent'; import { classNames } from '../../lib/utils/Utils'; +import DocApiSection from './docapisection'; -export function DocSections(props) { +export function DocSections({ docs }) { const router = useRouter(); - return ( -
    - {props.docs.map((doc) => { - const Comp = doc.component; + const renderDocs = () => { + return docs.map((doc) => { + const Comp = doc.component; - return ( -
    - {doc.children && doc.id !== 'api' ? ( -
    -

    - {doc.label} - - # - -

    -
    {doc.description || 'Section Content'}
    -
    - ) : null} - {doc.component && } - {doc.children && !doc.component && ( - - {doc.children.map((comp, i) => { - const { id, label, component } = comp; - const Component = component; + return ( +
    + {doc.children && doc.id !== 'api' ? ( +
    +

    + {doc.label} + + # + +

    +
    {doc.description || 'Section Content'}
    +
    + ) : null} + {doc.component && !doc.doc && } + {doc.children && !doc.component && ( + + {doc.children.map((comp, i) => { + const { id, label, component } = comp; + const Component = component; - return ( - - - - ); - })} - - )} -
    - ); - })} -
    - ); + return ; + })} + + )} + {doc.id === 'api' && doc.doc ? : null} + + ); + }); + }; + + return
    {renderDocs()}
    ; } diff --git a/components/doc/confirmdialog/apidoc.js b/components/doc/confirmdialog/apidoc.js deleted file mode 100644 index 5879abae9b..0000000000 --- a/components/doc/confirmdialog/apidoc.js +++ /dev/null @@ -1,138 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -

    These properties are extended from Dialog properties.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    visiblebooleanfalseSpecifies the visibility of the confirm dialog.
    messagestringnullMessage of the confirmation.
    iconstringnullIcon to display next to the message.
    acceptLabelstringYesLabel of the accept button.
    rejectLabelstringNoLabel of the reject button.
    acceptIconstringnullIcon of the accept button.
    rejectIconstringnullIcon of the reject button.
    acceptClassNamestringnullStyle class of the accept button.
    rejectClassNamestringnullStyle class of the reject button.
    footeranynullFooter content of the confirm dialog.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    acceptnullCallback to execute when action is confirmed.
    rejectnullCallback to execute when action is rejected.
    onHide - result: Indicates with which selection the dialog was closed.
    - Valid values are 'accept', 'reject' and undefined (using close icon). -     		Callback to invoke when confirm dialog is hidden.
    -
    -     - - ); -} diff --git a/components/doc/confirmpopup/apidoc.js b/components/doc/confirmpopup/apidoc.js deleted file mode 100644 index edca1c44cb..0000000000 --- a/components/doc/confirmpopup/apidoc.js +++ /dev/null @@ -1,172 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    targetDomElementnullElement to align the overlay. (Required)
    visiblebooleanfalseSpecifies the visibility of the confirm popup.
    messagestringnullMessage of the confirmation.
    iconstringnullIcon to display next to the message.
    acceptLabelstringYesLabel of the accept button.
    rejectLabelstringNoLabel of the reject button.
    acceptIconstringnullIcon of the accept button.
    rejectIconstringnullIcon of the reject button.
    acceptClassNamestringnullStyle class of the accept button.
    rejectClassNamestringnullStyle class of the reject button.
    dismissablebooleantrueEnables to hide the popup when outside is clicked.
    footeranynullFooter content of the confirm popup.
    appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    acceptnullCallback to execute when action is confirmed.
    rejectnullCallback to execute when action is rejected.
    onHide - result: Indicates with which selection the popup was closed.
    - Valid values are 'accept', 'reject' and undefined (outside click). -     		Callback to invoke when confirm popup is hidden.
    onShow-Callback to invoke when overlay panel becomes visible.
    -
    -     - - ); -} diff --git a/components/doc/contextmenu/apidoc.js b/components/doc/contextmenu/apidoc.js deleted file mode 100644 index 4e6394b754..0000000000 --- a/components/doc/contextmenu/apidoc.js +++ /dev/null @@ -1,142 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    modelarraynullAn array of menuitems.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    globalbooleanfalseAttaches the menu to document instead of a particular item.
    baseZIndexnumber0Base zIndex value to use in layering.
    autoZIndexbooleantrueWhether to automatically manage layering.
    appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    showevent: browser eventDisplays the popup menu.
    hideevent: browser eventHides the popup menu.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onShowevent: Browser event Callback to invoke when a popup menu is shown.
    onHideevent: Browser event Callback to invoke when a popup menu is hidden.
    -
    -     - - ); -} diff --git a/components/doc/contextmenu/basicdoc.js b/components/doc/contextmenu/basicdoc.js index 458b27e127..17242fc15d 100644 --- a/components/doc/contextmenu/basicdoc.js +++ b/components/doc/contextmenu/basicdoc.js @@ -29,7 +29,7 @@ export default function BasicDemo() { return (
    - (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} alt="Logo" onContextMenu={(e) => cm.current.show(e)} /> + Logo cm.current.show(e)} />
    ) } @@ -49,7 +49,7 @@ export default function BasicDemo() { return (
    - (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} alt="Logo" onContextMenu={(e) => cm.current.show(e)} /> + Logo cm.current.show(e)} />
    ) } diff --git a/components/doc/datascroller/apidoc.js b/components/doc/datascroller/apidoc.js deleted file mode 100644 index 5dec83f517..0000000000 --- a/components/doc/datascroller/apidoc.js +++ /dev/null @@ -1,131 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuearraynullAn array of objects to display.
    rowsnumbernullNumber of rows to fetch in a load event.
    inlinebooleanfalseDefines if the event target to listen the scroll event is the element itself.
    scrollHeightanynullMax height of the content area in inline mode.
    loaderbooleannullDetermines whether data is loaded by a target element.
    buffernumber0.9Number of buffer size.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    itemTemplatefunctionnullFunction that gets an item in the value and returns the content for it.
    headeranynullLabel of header.
    footeranynullLabel of footer.
    emptyMessageanyNo records foundText to display when there is no data.
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    onLazyLoad - event.first = First row offset
    - event.rows = Number of rows per page
    -     		Callback to invoke in lazy mode to load new data.
    -
    -     - - ); -} diff --git a/components/doc/datascroller/basicdoc.js b/components/doc/datascroller/basicdoc.js index e75ce80022..9129a5bec6 100644 --- a/components/doc/datascroller/basicdoc.js +++ b/components/doc/datascroller/basicdoc.js @@ -16,7 +16,7 @@ export function BasicDoc(props) { const itemTemplate = (data) => { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> + {data.name}
    {data.name}
    {data.description}
    @@ -43,6 +43,7 @@ import { Button } from 'primereact/button'; import { Rating } from 'primereact/rating'; import { DataScroller } from 'primereact/datascroller'; import { ProductService } from './service/ProductService'; +import './DataScrollerDemo.css'; export default function BasicDoc() { const [products, setProducts] = useState([]); @@ -55,7 +56,7 @@ export default function BasicDoc() { const itemTemplate = (data) => { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> + {data.name}
    {data.name}
    {data.description}
    @@ -72,7 +73,7 @@ export default function BasicDoc() { } return ( -
    +
    ) @@ -84,6 +85,7 @@ import { Button } from 'primereact/button'; import { Rating } from 'primereact/rating'; import { DataScroller } from 'primereact/datascroller'; import { ProductService } from './service/ProductService'; +import './DataScrollerDemo.css'; export default function BasicDoc() { const [products, setProducts] = useState([]); @@ -96,7 +98,7 @@ export default function BasicDoc() { const itemTemplate = (data) => { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> + {data.name}
    {data.name}
    {data.description}
    @@ -113,12 +115,105 @@ export default function BasicDoc() { } return ( -
    +
    ) } `, + extFiles: { + 'DataScrollerDemo.css': ` +/* DataScrollerDemo.css */ +.datascroller-demo .product-name { + font-size: 1.5rem; + font-weight: 700; +} + +.datascroller-demo .product-description { + margin: 0 0 1rem 0; +} + +.datascroller-demo .product-category-icon { + vertical-align: middle; + margin-right: .5rem; +} + +.datascroller-demo .product-category { + font-weight: 600; + vertical-align: middle; +} + +.datascroller-demo .product-item { + display: flex; + align-items: center; + padding: 1rem; + width: 100%; +} + +.datascroller-demo .product-item img { + width: 150px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + margin-right: 2rem; +} + +.datascroller-demo .product-item .product-detail { + flex: 1 1 0; +} + +.datascroller-demo .product-item .p-rating { + margin: 0 0 .5rem 0; +} + +.datascroller-demo .product-item .product-price { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: .5rem; + align-self: flex-end; +} + +.datascroller-demo .product-item .product-action { + display: flex; + flex-direction: column; +} + +.datascroller-demo .product-item .p-button { + margin-bottom: .5rem; +} + +@media screen and (max-width: 576px) { + .datascroller-demo .product-item { + flex-direction: column; + align-items: center; + } + + .datascroller-demo .product-item img { + width: 75%; + margin: 2rem 0; + } + + .datascroller-demo .product-item .product-detail { + text-align: center; + } + + .datascroller-demo .product-item .product-price { + align-self: center; + } + + .datascroller-demo .product-item .product-action { + display: flex; + flex-direction: column; + } + + .datascroller-demo .product-item .product-action { + margin-top: 2rem; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + } +} + ` + }, data: ` /* ProductService */ { diff --git a/components/doc/datascroller/inlinedoc.js b/components/doc/datascroller/inlinedoc.js index 27643b2b6b..ff98dfbcf0 100644 --- a/components/doc/datascroller/inlinedoc.js +++ b/components/doc/datascroller/inlinedoc.js @@ -16,7 +16,7 @@ export function InlineDataScrollerDoc(props) { const itemTemplate = (data) => { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> + {data.name}
    {data.name}
    {data.description}
    @@ -55,7 +55,7 @@ export default function InlineDataScrollerDoc() { const itemTemplate = (data) => { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> + {data.name}
    {data.name}
    {data.description}
    @@ -72,7 +72,7 @@ export default function InlineDataScrollerDoc() { } return ( -
    +
    ) @@ -96,7 +96,7 @@ export default function InlineDataScrollerDoc() { const itemTemplate = (data) => { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> + {data.name}
    {data.name}
    {data.description}
    @@ -113,12 +113,105 @@ export default function InlineDataScrollerDoc() { } return ( -
    +
    ) } `, + extFiles: { + 'DataScrollerDemo.css': ` +/* DataScrollerDemo.css */ +.datascroller-demo .product-name { + font-size: 1.5rem; + font-weight: 700; +} + +.datascroller-demo .product-description { + margin: 0 0 1rem 0; +} + +.datascroller-demo .product-category-icon { + vertical-align: middle; + margin-right: .5rem; +} + +.datascroller-demo .product-category { + font-weight: 600; + vertical-align: middle; +} + +.datascroller-demo .product-item { + display: flex; + align-items: center; + padding: 1rem; + width: 100%; +} + +.datascroller-demo .product-item img { + width: 150px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + margin-right: 2rem; +} + +.datascroller-demo .product-item .product-detail { + flex: 1 1 0; +} + +.datascroller-demo .product-item .p-rating { + margin: 0 0 .5rem 0; +} + +.datascroller-demo .product-item .product-price { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: .5rem; + align-self: flex-end; +} + +.datascroller-demo .product-item .product-action { + display: flex; + flex-direction: column; +} + +.datascroller-demo .product-item .p-button { + margin-bottom: .5rem; +} + +@media screen and (max-width: 576px) { + .datascroller-demo .product-item { + flex-direction: column; + align-items: center; + } + + .datascroller-demo .product-item img { + width: 75%; + margin: 2rem 0; + } + + .datascroller-demo .product-item .product-detail { + text-align: center; + } + + .datascroller-demo .product-item .product-price { + align-self: center; + } + + .datascroller-demo .product-item .product-action { + display: flex; + flex-direction: column; + } + + .datascroller-demo .product-item .product-action { + margin-top: 2rem; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + } +} + ` + }, data: ` /* ProductService */ { diff --git a/components/doc/datascroller/loaderdoc.js b/components/doc/datascroller/loaderdoc.js index fb9ce9b619..a051826f02 100644 --- a/components/doc/datascroller/loaderdoc.js +++ b/components/doc/datascroller/loaderdoc.js @@ -17,7 +17,7 @@ export function LoaderDataScrollerDoc(props) { const itemTemplate = (data) => { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} /> + {data.name}
    {data.name}
    {data.description}
    @@ -59,7 +59,7 @@ export default function LoaderDataScrollerDoc() { const itemTemplate = (data) => { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={data.name} /> + {data.name}
    {data.name}
    {data.description}
    @@ -79,7 +79,7 @@ export default function LoaderDataScrollerDoc() { const footer =
    @@ -144,7 +144,7 @@ export default function FormikDoc() { typescript: ` import React, { useRef } from "react"; import { useFormik } from 'formik'; -import { Editor } from 'primereact/editor'; +import { Editor, EditorTextChangeEvent } from 'primereact/editor'; import { Button } from 'primereact/button'; import { Toast } from 'primereact/toast'; @@ -202,14 +202,14 @@ export default function FormikDoc() { name="blog" value={formik.values.blog} headerTemplate={header} - onTextChange={(e) => { + onTextChange={(e: EditorTextChangeEvent) => { formik.setFieldValue('blog', e.textValue); }} style={{ height: '320px' }} /> - {getFormErrorMessage('blog')} -
    -
    @@ -238,9 +238,9 @@ export default function FormikDoc() { }} style={{ height: '320px' }} /> - {getFormErrorMessage('blog')} -
    -
    diff --git a/components/doc/editor/form/hookformdoc.js b/components/doc/editor/form/hookformdoc.js index 71d2f2552f..758b5aa9cf 100644 --- a/components/doc/editor/form/hookformdoc.js +++ b/components/doc/editor/form/hookformdoc.js @@ -1,10 +1,10 @@ import { useRef } from 'react'; -import { useForm, Controller } from 'react-hook-form'; -import { DocSectionText } from '../../common/docsectiontext'; -import { DocSectionCode } from '../../common/docsectioncode'; +import { Controller, useForm } from 'react-hook-form'; import { Button } from '../../../lib/button/Button'; -import { Toast } from '../../../lib/toast/Toast'; import { Editor } from '../../../lib/editor/Editor'; +import { Toast } from '../../../lib/toast/Toast'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; export function HookFormDoc(props) { const toast = useRef(null); @@ -56,7 +56,7 @@ export function HookFormDoc(props) { render={({ field }) => field.onChange(e.textValue)} style={{ height: '320px' }} />} / {getFormErrorMessage('blog')} -
    @@ -128,7 +127,7 @@ export default function HookFormDoc() { typescript: ` import React, { useRef } from "react"; import { useForm, Controller } from 'react-hook-form'; -import { Editor } from 'primereact/editor'; +import { Editor, EditorTextChangeEvent } from 'primereact/editor'; import { Button } from 'primereact/button'; import { Toast } from 'primereact/toast'; @@ -180,12 +179,11 @@ export default function HookFormDoc() { name="blog" control={control} rules={{ required: 'Content is required.' }} - render={({ field }) => field.onChange(e.textValue)} style={{ height: '320px' }} />} + render={({ field }) => field.onChange(e.textValue)} style={{ height: '320px' }} />} /> - - {getFormErrorMessage('blog')} -
    -
    @@ -210,10 +208,9 @@ export default function HookFormDoc() { rules={{ required: 'Content is required.' }} render={({ field }) => field.onChange(e.textValue)} style={{ height: '320px' }} />} /> - - {getFormErrorMessage('blog')} -
    -
    diff --git a/components/doc/editor/quilldoc.js b/components/doc/editor/quilldoc.js index 8d97ed359e..d035a9127c 100644 --- a/components/doc/editor/quilldoc.js +++ b/components/doc/editor/quilldoc.js @@ -1,5 +1,5 @@ -import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; export function QuillDoc(props) { const code = { @@ -12,7 +12,7 @@ npm install quill <>

    - Editor uses QuillJS editor so it needs to be installed as a dependency. + Editor uses Quill editor underneath so it needs to be installed as a dependency.

    diff --git a/components/doc/editor/readonlydoc.js b/components/doc/editor/readonlydoc.js index 008abb30d4..c407ed9c69 100644 --- a/components/doc/editor/readonlydoc.js +++ b/components/doc/editor/readonlydoc.js @@ -1,21 +1,21 @@ import { Editor } from '../../lib/editor/Editor'; -import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; export function ReadOnlyDoc(props) { const code = { basic: ` - + `, javascript: ` import React from "react"; import { Editor } from "primereact/editor"; -export default function ReadOnlyDoc() { +export default function ReadOnlyDemo() { return (
    - +
    ) } @@ -24,11 +24,10 @@ export default function ReadOnlyDoc() { import React from "react"; import { Editor } from "primereact/editor"; -export default function ReadOnlyDoc() { - +export default function ReadOnlyDemo() { return (
    - +
    ) } @@ -38,11 +37,12 @@ export default function ReadOnlyDoc() { return ( <> - {/* TO DO: Add demo content. */} -

    +

    + When readOnly is present, the value cannot be edited. +

    - +
    diff --git a/components/doc/editor/templatedoc.js b/components/doc/editor/templatedoc.js index 969547f264..c9f05b69c3 100644 --- a/components/doc/editor/templatedoc.js +++ b/components/doc/editor/templatedoc.js @@ -1,7 +1,7 @@ import { useState } from 'react'; import { Editor } from '../../lib/editor/Editor'; -import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; export function TemplateDoc(props) { const [text, setText] = useState('
    Hello World!
    PrimeReact Editor Rocks

    '); @@ -20,7 +20,7 @@ export function TemplateDoc(props) { const code = { basic: ` - setText(e.htmlValue)} /> + setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} /> `, javascript: ` import React, { useState } from "react"; @@ -42,13 +42,15 @@ export default function TemplateDemo() { const header = renderHeader(); return ( - setText(e.htmlValue)} headerTemplate={header} /> +
    + setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} /> +
    ) } `, typescript: ` import React, { useState } from "react"; -import { Editor } from "primereact/editor"; +import { Editor, EditorTextChangeEvent } from "primereact/editor"; export default function TemplateDemo() { const [text, setText] = useState('
    Hello World!
    PrimeReact Editor Rocks

    '); @@ -66,7 +68,9 @@ export default function TemplateDemo() { const header = renderHeader(); return ( - setText(e.htmlValue)} headerTemplate={header} /> +
    + setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} /> +
    ) } ` @@ -76,11 +80,11 @@ export default function TemplateDemo() { <>

    - Toolbar of the editor is customized with the headerTemplate property. Refer to Quill documentation for available controls. + Toolbar is customized with the headerTemplate property. Refer to Quill documentation for available controls.

    - setText(e.htmlValue)} headerTemplate={header} /> + setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} />
    diff --git a/components/doc/fieldset/apidoc.js b/components/doc/fieldset/apidoc.js deleted file mode 100644 index bcc28239b5..0000000000 --- a/components/doc/fieldset/apidoc.js +++ /dev/null @@ -1,115 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    legendstringnullHeader text of the fieldset.
    classNamestringnullStyle class of the element.
    styleobjectnullInline style of the element.
    toggleablebooleanfalseWhen specified, content can toggled by clicking the legend.
    collapsedbooleanfalseDefines the default visibility state of the content.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onCollapseevent.originalEvent: Browser event Callback to invoke when an active tab is collapsed by clicking on the header.
    onExpandevent.originalEvent: Browser event Callback to invoke when a tab gets expanded.
    onToggle - event.originalEvent: browser event
    - event.value: Collapsed state as a boolean -     		Callback to invoke when a tab gets expanded.
    onClickevent Browser event Callback to invoke when fieldset is clicked.
    -
    -     - - ); -} diff --git a/components/doc/fileupload/apidoc.js b/components/doc/fileupload/apidoc.js deleted file mode 100644 index b0453c932e..0000000000 --- a/components/doc/fileupload/apidoc.js +++ /dev/null @@ -1,349 +0,0 @@ -import Link from 'next/link'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    namestringnullName of the request parameter to identify the files at backend.
    urlstringnullRemote url to upload the files.
    modestringadvancedDefines the UI of the component, possible values are "advanced" and "basic".
    multiplebooleanfalseUsed to select multiple files at once from file dialog.
    acceptstringfalsePattern to restrict the allowed file types such as "image/*".
    disabledbooleanfalseDisables the upload functionality.
    autobooleanfalseWhen enabled, upload begins automatically after selection is completed.
    maxFileSizenumbernullMaximum file size allowed in bytes.
    invalidFileSizeMessageSummarystring"{0}: Invalid file size, "Summary message of the invalid fize size.
    invalidFileSizeMessageDetailstring"maximum upload size is {0}."Detail message of the invalid fize size.
    styleobjectnullInline style of the component.
    classNamestringnullStyle class of the component.
    withCredentialsbooleanfalseCross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
    previewWidthnumber50Width of the image thumbnail in pixels.
    chooseLabelstringnullLabel of the choose button. Defaults to global value in Locale configuration.
    uploadLabelstringnullLabel of the upload button. Defaults to global value in Locale configuration.
    cancelLabelstringnullLabel of the cancel button. Defaults to global value in Locale configuration.
    chooseOptionsobject (OptionsType)nullOptions used to customize the choose button. These options have "label", "icon", "className" and "style" properties.
    uploadOptionsobject (OptionsType)nullOptions used to customize the upload button. These options have "label", "icon", "className" and "style" properties.
    cancelOptionsobject (OptionsType)nullOptions used to customize the cancel button. These options have "label", "icon", "className" and "style" properties.
    customUploadbooleanfalseWhether to use the default upload or a manual implementation defined in uploadHandler callback.
    emptyTemplateanynullThe template of empty content in the container.
    progressBarTemplateanynullThe template of progressBar content in the container.
    itemTemplateanynullThe template of each item content in the container.
    headerTemplateanynullThe template of the header.
    headerStyleobjectnullInline style of the header.
    headerClassNamestringnullStyle class of the header.
    contentStyleobjectnullInline style of the content.
    contentClassNamestringnullStyle class of the content.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onBeforeUpload - event.xhr: XmlHttpRequest instance.
    - event.formData: FormData object. -     		Callback to invoke before file upload begins to customize the request such as post parameters before the files.
    onBeforeSend - event.xhr: XmlHttpRequest instance.
    - event.formData: FormData object. -     		Callback to invoke before file send begins to customize the request such as adding headers.
    onBeforeDropevent: DragEvent instance.Callback to invoke before files dropped. Return false from callback to prevent drop.
    onBeforeSelect - event.originalEvent: Original browser event.
    - event.target.files: List of selected files. -     		Callback to invoke before files are selected. Return false from callback to prevent selection.
    onUpload - event.xhr: XmlHttpRequest instance. -
    - event.files: Uploaded files. -     		Callback to invoke when file upload is complete.
    onError - event.xhr: XmlHttpRequest instance. -
    - event.files: Files that are not uploaded. -     		Callback to invoke if file upload fails.
    onClear-Callback to invoke when files in queue are removed without uploading.
    onSelect - event.originalEvent: Original browser event.
    - event.target.files: List of selected files. -     		Callback to invoke when files are selected.
    onProgress - event.originalEvent: Original browser event.
    - event.progress: Calculated progress value. -     		Callback to invoke when files are being uploaded.
    onValidationFailfile: Invalid file.Callback to invoke when a validation file fails.
    uploadHandler - event.files: List of selected files. -
    - event.options: Handler options. -     		Callback to invoke in custom upload mode to upload the files manually.
    onRemove - event.originalEvent: Original browser event.
    - event.file: Selected file. -     		Callback to invoke when a file is removed without uploading using clear button of a file.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    upload-Uploads the selected files.
    clear-Clears the files list.
    getFiles-Gets the current files list.
    setFilesFile[]Sets the current files list.
    -
    -     - - ); -} diff --git a/components/doc/galleria/advanceddoc.js b/components/doc/galleria/advanceddoc.js index 22a019d122..b326474796 100644 --- a/components/doc/galleria/advanceddoc.js +++ b/components/doc/galleria/advanceddoc.js @@ -5,7 +5,6 @@ import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; import { PhotoService } from '../../../service/PhotoService'; import { classNames } from '../../lib/utils/Utils'; -import getConfig from 'next/config'; export function AdvancedDoc(props) { const [images, setImages] = useState(null); @@ -13,7 +12,6 @@ export function AdvancedDoc(props) { const [showThumbnails, setShowThumbnails] = useState(false); const [isAutoPlayActive, setAutoPlayActive] = useState(true); const [isFullScreen, setFullScreen] = useState(false); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const galleria = useRef(null); const responsiveOptions = [ @@ -108,17 +106,17 @@ export function AdvancedDoc(props) { const thumbnailTemplate = (item) => { return (
    - {item.alt} + {item.alt}
    ); }; const itemTemplate = (item) => { if (isFullScreen) { - return {item.alt}; + return {item.alt}; } - return {item.alt}; + return {item.alt}; }; const renderFooter = () => { @@ -286,17 +284,17 @@ export default function AdvancedDemo() { const thumbnailTemplate = (item) => { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ display: 'block' }} /> + {item.alt}
    ); } const itemTemplate = (item) => { if (isFullScreen) { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} /> + return {item.alt} } - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} /> + return {item.alt} } const renderFooter = () => { @@ -465,17 +463,17 @@ export default function AdvancedDemo() { const thumbnailTemplate = (item) => { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ display: 'block' }} /> + {item.alt}
    ); } const itemTemplate = (item) => { if (isFullScreen) { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} /> + return {item.alt} } - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} /> + return {item.alt} } const renderFooter = () => { @@ -617,8 +615,8 @@ export default function AdvancedDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/apidoc.js b/components/doc/galleria/apidoc.js deleted file mode 100644 index 7d851561bb..0000000000 --- a/components/doc/galleria/apidoc.js +++ /dev/null @@ -1,239 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuearraynullAn array of objects to display.
    activeIndexnumber0Index of the first item.
    headeranynullLabel of header.
    footeranynullLabel of footer.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    itemfunctionnullFunction that gets an item in the value and returns the content for preview item.
    thumbnailfunctionnullFunction that gets an item in the value and returns the content for thumbnail item.
    indicatorfunctionnullFunction that gets an item in the value and returns the content for indicator item.
    captionfunctionnullFunction that gets an item in the value and returns the content for caption item.
    circularbooleanfalseDefines if scrolling would be infinite.
    autoPlaybooleanfalseItems are displayed with a slideshow in autoPlay mode.
    transitionIntervalnumber4000Time in milliseconds to scroll items.
    numVisiblenumber3Number of items per page.
    responsiveOptionsanynullAn array of options for responsive design.
    thumbnailsPositionstringbottomPosition of thumbnails. Valid values are "bottom", "top", "left" and "right".
    indicatorsPositionstringbottomPosition of indicators. Valid values are "bottom", "top", "left" and "right".
    verticalThumbnailViewPortHeightstring300pxHeight of the viewport in vertical thumbnail.
    showItemNavigatorsbooleanfalseWhether to display navigation buttons in item container.
    showThumbnailNavigatorsbooleantrueWhether to display navigation buttons in thumbnail container.
    showThumbnailsbooleantrueWhether to display thumbnail container.
    showIndicatorsbooleanfalseWhether to display indicator container.
    showIndicatorsOnItembooleanfalseWhen enabled, indicator container is displayed on item container.
    showItemNavigatorsOnHoverbooleanfalseWhether to display navigation buttons on item container's hover.
    changeItemOnIndicatorHoverbooleanfalseWhen enabled, item is changed on indicator item's hover.
    fullScreenbooleanfalseWhether to display the component on fullscreen.
    baseZIndexnumber0Base zIndex value to use in layering.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onItemChangeevent.index = index of the new item.Callback to invoke after changing item.
    onShow-Callback to invoke when modal becomes visible.
    onHide-Callback to invoke when modal becomes hidden.
    -
    -     - - ); -} diff --git a/components/doc/galleria/autoplaydoc.js b/components/doc/galleria/autoplaydoc.js index 8c04516e02..5b58a68323 100644 --- a/components/doc/galleria/autoplaydoc.js +++ b/components/doc/galleria/autoplaydoc.js @@ -3,11 +3,9 @@ import { Galleria } from '../../lib/galleria/Galleria'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; import { PhotoService } from '../../../service/PhotoService'; -import getConfig from 'next/config'; export function AutoPlayDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const responsiveOptions = [ { @@ -29,11 +27,11 @@ export function AutoPlayDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -68,11 +66,11 @@ export default function AutoPlayDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -110,11 +108,11 @@ export default function AutoPlayDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -128,8 +126,8 @@ export default function AutoPlayDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/basicdoc.js b/components/doc/galleria/basicdoc.js index 98a63ebcf5..e48fe16d2c 100644 --- a/components/doc/galleria/basicdoc.js +++ b/components/doc/galleria/basicdoc.js @@ -1,4 +1,3 @@ -import getConfig from 'next/config'; import { useEffect, useState } from 'react'; import { PhotoService } from '../../../service/PhotoService'; import { Galleria } from '../../lib/galleria/Galleria'; @@ -7,7 +6,6 @@ import { DocSectionText } from '../common/docsectiontext'; export function BasicDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const responsiveOptions = [ { @@ -29,11 +27,11 @@ export function BasicDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -68,11 +66,11 @@ export default function BasicDemo() { }, []) const itemTemplate = (item) => { - return e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%' }} /> + return {item.alt} } const thumbnailTemplate = (item) => { - return e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} /> + return {item.alt} } return ( @@ -110,11 +108,11 @@ export default function BasicDemo() { }, []); const itemTemplate = (item: any) => { - return e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%' }} /> + return {item.alt} } const thumbnailTemplate = (item: any) => { - return e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} /> + return {item.alt} } return ( @@ -128,8 +126,8 @@ export default function BasicDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/captiondoc.js b/components/doc/galleria/captiondoc.js index 22f9e3e616..2694b4cbf8 100644 --- a/components/doc/galleria/captiondoc.js +++ b/components/doc/galleria/captiondoc.js @@ -3,11 +3,9 @@ import { Galleria } from '../../lib/galleria/Galleria'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; import { PhotoService } from '../../../service/PhotoService'; -import getConfig from 'next/config'; export function CaptionDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const responsiveOptions = [ { @@ -29,11 +27,11 @@ export function CaptionDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const caption = (item) => { @@ -77,11 +75,11 @@ export default function CaptionDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } const caption = (item) => { @@ -128,11 +126,11 @@ export default function CaptionDoc() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } const caption = (item: any) => { @@ -155,8 +153,8 @@ export default function CaptionDoc() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/controlleddoc.js b/components/doc/galleria/controlleddoc.js index 679c195931..697cea4bca 100644 --- a/components/doc/galleria/controlleddoc.js +++ b/components/doc/galleria/controlleddoc.js @@ -4,12 +4,10 @@ import { Galleria } from '../../lib/galleria/Galleria'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; import { PhotoService } from '../../../service/PhotoService'; -import getConfig from 'next/config'; export function ControlledDoc(props) { const [images, setImages] = useState(null); const [activeIndex, setActiveIndex] = useState(0); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const responsiveOptions = [ { @@ -39,11 +37,11 @@ export function ControlledDoc(props) { }; const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -94,11 +92,11 @@ export default function ControlledDemo() { } const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -160,11 +158,11 @@ export default function ControlledDemo() { } const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -191,8 +189,8 @@ export default function ControlledDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/fullscreen/customcontentdoc.js b/components/doc/galleria/fullscreen/customcontentdoc.js index d0291a21a8..d3e967555a 100644 --- a/components/doc/galleria/fullscreen/customcontentdoc.js +++ b/components/doc/galleria/fullscreen/customcontentdoc.js @@ -1,4 +1,3 @@ -import getConfig from 'next/config'; import { useEffect, useRef, useState } from 'react'; import { PhotoService } from '../../../../service/PhotoService'; import { Galleria } from '../../../lib/galleria/Galleria'; @@ -8,7 +7,6 @@ import { DocSectionText } from '../../common/docsectiontext'; export function CustomContentDoc(props) { const [images, setImages] = useState(null); const [activeIndex, setActiveIndex] = useState(0); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const galleria = useRef(null); useEffect(() => { @@ -16,11 +14,11 @@ export function CustomContentDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -32,7 +30,7 @@ export function CustomContentDoc(props) {
    { images && images.map((image, index) => { - let imgEl = e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={image.alt} style={{ cursor: 'pointer' }} onClick={ + let imgEl = {setActiveIndex(index); galleria.current.show()} } /> return ( @@ -59,11 +57,11 @@ export default function CustomContentDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png''} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png''} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -74,7 +72,7 @@ export default function CustomContentDemo() {
    { images && images.map((image, index) => { - let imgEl = e.target.src='https://www.primefaces.org/cdn/images/placeholder.png''} alt={image.alt} style={{ cursor: 'pointer' }} onClick={ + let imgEl = {image.alt} {setActiveIndex(index); galleria.current.show()} } /> return ( @@ -104,11 +102,11 @@ export default function CustomContentDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -119,7 +117,7 @@ export default function CustomContentDemo() {
    { images && images.map((image, index) => { - let imgEl = e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={image.alt} style={{ cursor: 'pointer' }} onClick={ + let imgEl = {image.alt} {setActiveIndex(index); galleria.current.show()} } /> return ( @@ -137,8 +135,8 @@ export default function CustomContentDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, @@ -174,7 +172,7 @@ export default function CustomContentDemo() { return (
    {image.alt} { diff --git a/components/doc/galleria/fullscreen/withoutthumbnailsdoc.js b/components/doc/galleria/fullscreen/withoutthumbnailsdoc.js index 4b7e292db5..7fdf9538f3 100644 --- a/components/doc/galleria/fullscreen/withoutthumbnailsdoc.js +++ b/components/doc/galleria/fullscreen/withoutthumbnailsdoc.js @@ -4,11 +4,9 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function WithoutThumbnailsDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const galleria = useRef(null); useEffect(() => { @@ -16,11 +14,11 @@ export function WithoutThumbnailsDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -45,11 +43,11 @@ export default function WithoutThumbnailsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -77,11 +75,11 @@ export default function WithoutThumbnailsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -97,8 +95,8 @@ export default function WithoutThumbnailsDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/fullscreen/withthumbnailsdoc.js b/components/doc/galleria/fullscreen/withthumbnailsdoc.js index 8615c5d2dc..3009606d16 100644 --- a/components/doc/galleria/fullscreen/withthumbnailsdoc.js +++ b/components/doc/galleria/fullscreen/withthumbnailsdoc.js @@ -4,11 +4,9 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function WithThumbnailsDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const galleria = useRef(null); const responsiveOptions = [ @@ -35,11 +33,11 @@ export function WithThumbnailsDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -83,11 +81,11 @@ export default function WithThumbnailsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -134,11 +132,11 @@ export default function WithThumbnailsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -154,8 +152,8 @@ export default function WithThumbnailsDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/indicator/clickeventdoc.js b/components/doc/galleria/indicator/clickeventdoc.js index 3a98db3624..28779c9c02 100644 --- a/components/doc/galleria/indicator/clickeventdoc.js +++ b/components/doc/galleria/indicator/clickeventdoc.js @@ -3,18 +3,16 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function ClickEventDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; useEffect(() => { PhotoService.getImages().then((data) => setImages(data)); }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -34,7 +32,7 @@ export default function ClickEventDemo() { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; }; return ( @@ -57,7 +55,7 @@ export default function ClickEventDemo() { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; }; return ( @@ -70,8 +68,8 @@ export default function ClickEventDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/indicator/hovereventdoc.js b/components/doc/galleria/indicator/hovereventdoc.js index a05399f262..e6191de136 100644 --- a/components/doc/galleria/indicator/hovereventdoc.js +++ b/components/doc/galleria/indicator/hovereventdoc.js @@ -3,18 +3,16 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function HoverEventDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; useEffect(() => { PhotoService.getImages().then((data) => setImages(data)); }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -34,7 +32,7 @@ export default function HoverEventDemo() { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; }; return ( @@ -57,7 +55,7 @@ export default function HoverEventDemo() { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; }; return ( @@ -70,8 +68,8 @@ export default function HoverEventDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/indicator/positiondoc.js b/components/doc/galleria/indicator/positiondoc.js index fc84cf911a..8e0a7801ae 100644 --- a/components/doc/galleria/indicator/positiondoc.js +++ b/components/doc/galleria/indicator/positiondoc.js @@ -5,7 +5,6 @@ import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; import { RadioButton } from '../../../lib/radiobutton/RadioButton'; import { Checkbox } from '../../../lib/checkbox/Checkbox'; -import getConfig from 'next/config'; export function PositionDoc(props) { const [images, setImages] = useState(null); @@ -29,14 +28,13 @@ export function PositionDoc(props) { value: 'right' } ]; - const contextPath = getConfig().publicRuntimeConfig.contextPath; useEffect(() => { PhotoService.getImages().then((data) => setImages(data)); }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -47,6 +45,7 @@ export function PositionDoc(props) { javascript: ` import React, { useState, useEffect } from 'react'; import { Galleria } from 'primereact/galleria'; +import { Checkbox } from 'primereact/checkbox'; import { RadioButton } from 'primereact/radiobutton'; import { PhotoService } from './service/PhotoService'; @@ -78,7 +77,7 @@ export default function PositionDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; }; return ( @@ -108,6 +107,7 @@ export default function PositionDemo() { typescript: ` import React, { useState, useEffect } from 'react'; import { Galleria } from 'primereact/galleria'; +import { Checkbox } from 'primereact/checkbox'; import { PhotoService } from './service/PhotoService'; export default function PositionDemo() { @@ -138,7 +138,7 @@ export default function PositionDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; }; return ( @@ -168,8 +168,8 @@ export default function PositionDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/indicator/templatedoc.js b/components/doc/galleria/indicator/templatedoc.js index af0a72a457..46d890035d 100644 --- a/components/doc/galleria/indicator/templatedoc.js +++ b/components/doc/galleria/indicator/templatedoc.js @@ -3,18 +3,16 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function IndicatorTemplateDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; useEffect(() => { PhotoService.getImages().then((data) => setImages(data)); }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const indicatorTemplate = (index) => { @@ -39,7 +37,7 @@ export default function IndicatorTemplateDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; }; const indicatorTemplate = (index) => { @@ -77,7 +75,7 @@ export default function IndicatorTemplateDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; }; const indicatorTemplate = (index) => { @@ -105,8 +103,8 @@ export default function IndicatorTemplateDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/navigator/hoverdoc.js b/components/doc/galleria/navigator/hoverdoc.js index 5f4fbc2081..ebd827cab9 100644 --- a/components/doc/galleria/navigator/hoverdoc.js +++ b/components/doc/galleria/navigator/hoverdoc.js @@ -3,11 +3,9 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function HoverDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const responsiveOptions = [ { @@ -29,11 +27,11 @@ export function HoverDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -68,11 +66,11 @@ export default function HoverDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -110,11 +108,11 @@ export default function HoverDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -128,8 +126,8 @@ export default function HoverDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/navigator/indicatorsdoc.js b/components/doc/galleria/navigator/indicatorsdoc.js index 5275f02982..77215713d7 100644 --- a/components/doc/galleria/navigator/indicatorsdoc.js +++ b/components/doc/galleria/navigator/indicatorsdoc.js @@ -3,22 +3,20 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function IndicatorsDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; useEffect(() => { PhotoService.getImages().then((data) => setImages(data)); }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -40,11 +38,11 @@ export default function IndicatorsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -69,11 +67,11 @@ export default function IndicatorsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -88,8 +86,8 @@ export default function IndicatorsDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/navigator/itemthumbnailsdoc.js b/components/doc/galleria/navigator/itemthumbnailsdoc.js index c605bdabfc..12deef46f8 100644 --- a/components/doc/galleria/navigator/itemthumbnailsdoc.js +++ b/components/doc/galleria/navigator/itemthumbnailsdoc.js @@ -3,11 +3,9 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function ItemThumbnailsDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const responsiveOptions = [ { @@ -29,11 +27,11 @@ export function ItemThumbnailsDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -68,11 +66,11 @@ export default function ItemThumbnailsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -110,11 +108,11 @@ export default function ItemThumbnailsDoc() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -128,8 +126,8 @@ export default function ItemThumbnailsDoc() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/navigator/itemwithouthumbnailsdoc.js b/components/doc/galleria/navigator/itemwithouthumbnailsdoc.js index db42a7e8ab..11958bea07 100644 --- a/components/doc/galleria/navigator/itemwithouthumbnailsdoc.js +++ b/components/doc/galleria/navigator/itemwithouthumbnailsdoc.js @@ -3,22 +3,20 @@ import { Galleria } from '../../../lib/galleria/Galleria'; import { DocSectionText } from '../../common/docsectiontext'; import { DocSectionCode } from '../../common/docsectioncode'; import { PhotoService } from '../../../../service/PhotoService'; -import getConfig from 'next/config'; export function ItemWithoutThumbnailsDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; useEffect(() => { PhotoService.getImages().then((data) => setImages(data)); }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -39,11 +37,11 @@ export default function ItemWithoutThumbnailsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -67,11 +65,11 @@ export default function ItemWithoutThumbnailsDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />; + return {item.alt}; } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />; + return {item.alt}; } return ( @@ -85,8 +83,8 @@ export default function ItemWithoutThumbnailsDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/responsivedoc.js b/components/doc/galleria/responsivedoc.js index 31b2e01884..99bd152b90 100644 --- a/components/doc/galleria/responsivedoc.js +++ b/components/doc/galleria/responsivedoc.js @@ -3,13 +3,10 @@ import { Galleria } from '../../lib/galleria/Galleria'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; import { PhotoService } from '../../../service/PhotoService'; -import getConfig from 'next/config'; export function ResponsiveDoc(props) { const [images, setImages] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const responsiveOptions = [ { breakpoint: '1024px', @@ -34,11 +31,11 @@ export function ResponsiveDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -79,11 +76,11 @@ export default function ResponsiveDoc() { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} /> + return {item.alt} } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ display: 'block' }} /> + return {item.alt} } return ( @@ -127,11 +124,11 @@ export default function ResponsiveDoc() { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} /> + return {item.alt} } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ display: 'block' }} /> + return {item.alt} } return ( @@ -145,8 +142,8 @@ export default function ResponsiveDoc() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/galleria/thumbnaildoc.js b/components/doc/galleria/thumbnaildoc.js index 7a47c1cdc5..b0fc37ce4e 100644 --- a/components/doc/galleria/thumbnaildoc.js +++ b/components/doc/galleria/thumbnaildoc.js @@ -2,14 +2,12 @@ import { useState, useEffect } from 'react'; import { Galleria } from '../../lib/galleria/Galleria'; import { DocSectionCode } from '../common/docsectioncode'; import { PhotoService } from '../../../service/PhotoService'; -import getConfig from 'next/config'; import { RadioButton } from '../../lib/radiobutton/RadioButton'; import { DocSectionText } from '../common/docsectiontext'; export function ThumbnailDoc(props) { const [images, setImages] = useState(null); const [position, setPosition] = useState('bottom'); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const positionOptions = [ { label: 'Bottom', @@ -48,11 +46,11 @@ export function ThumbnailDoc(props) { }, []); // eslint-disable-line react-hooks/exhaustive-deps const itemTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const thumbnailTemplate = (item) => { - return {item.alt}; + return {item.alt}; }; const code = { @@ -107,11 +105,11 @@ export default function ThumbnailDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} /> + return {item.alt} } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} /> + return {item.alt} } return ( @@ -182,11 +180,11 @@ export default function ThumbnailDemo() { }, []); const itemTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} /> + return {item.alt} } const thumbnailTemplate = (item) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} /> + return {item.alt} } return ( @@ -213,8 +211,8 @@ export default function ThumbnailDemo() { data: ` /* PhotoService */ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, diff --git a/components/doc/gmap/apidoc.js b/components/doc/gmap/apidoc.js deleted file mode 100644 index a3b1dd2c0e..0000000000 --- a/components/doc/gmap/apidoc.js +++ /dev/null @@ -1,178 +0,0 @@ -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    If you are using TypeScript you should install the Google Maps types.

    - - - {` -// npm install types into devDependencies -npm i -D @types/google.maps - -// yarn install types into devDependencies -yarn add @types/google.maps --production=false -`} - -     - -

    - In case you need to access the map instance directly, use the getMap() method. In the following example, this.gmap.getMap() will provide the map instance. Alternative is using onMapReady event as it passes the map instance as a - parameter. -

    - - - {` -const options = { - center: {lat: 36.890257, lng: 30.707417}, - zoom: 12 -}; - -return ( - -) -`} - -     - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    optionsobjectnullGoogle Maps API configuration object.
    overlaysarraynullAn array of overlays to display.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    -
    -     - - -

    GMap provides common callbacks to hook into events including map click, overlay click and overlay dragging.

    - - - {` -const onMapClick = (event) => { -//event: MouseEvent of Google Maps api -} - -const onMapReady = (map) => { -//map: Map instance -} - -const options = { -center: {lat: 36.890257, lng: 30.707417}, -zoom: 12 -}; - -let overlays = [ -new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}), -new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}), -new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}), -new google.maps.Polygon({paths: [ -{lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159} -], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35 -}), -new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}), -new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2}) -] - -return ( - -) -`} - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onMapClickevent: Google Maps MouseEventCallback to invoke when map is clicked except markers.
    onMapDragEnd-Callback to invoke when map drag (i.e. pan) has ended.
    onMapReadyevent.map: Google Maps InstanceCallback to invoke when the map is ready to be used.
    onOverlayClick - originalEvent: Google Maps MouseEvent
    - overlay: Clicked overlay
    - map: Map instance
    -     		Callback to invoke when an overlay is clicked.
    onOverlayDragStartevent: Google Maps MouseEventCallback to invoke when an overlay drag starts.
    onOverlayDragevent: Google Maps MouseEventCallback to invoke when an overlay is being dragged.
    onOverlayDragEndevent: Google Maps MouseEventCallback to invoke when an overlay drag ends.
    onZoomChanged-Callback to invoke when zoom level has changed.
    -
    -     - - ); -} diff --git a/components/doc/image/apidoc.js b/components/doc/image/apidoc.js deleted file mode 100644 index 49e42b1827..0000000000 --- a/components/doc/image/apidoc.js +++ /dev/null @@ -1,103 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    Image passes any valid attribute to the underlying img element, additional attribute is the following.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    srcstringnullSpecifies the path to the image.
    previewbooleanfalseControls the preview functionality.
    zoomSrcstringnullZoomed image that may be different than "src" image.
    downloadablebooleanfalseAdds a download button to the preview control menu.
    imageStyleReact.CSSPropertiesnullInline style of the image element.
    imageClassNamestringnullStyle class of the image element.
    templateanynullChanging the default icon when the image is hovered in preview mode.
    -
    -     - - -

    Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onShow-Triggered when the preview overlay is shown.
    onHide-Triggered when the preview overlay is hidden.
    onErrorevent: Browser eventTriggered when the image fails to load.
    -
    -     - - ); -} diff --git a/components/doc/image/basicdoc.js b/components/doc/image/basicdoc.js index fb8ffe5bf4..4b6d644600 100644 --- a/components/doc/image/basicdoc.js +++ b/components/doc/image/basicdoc.js @@ -1,14 +1,11 @@ -import getConfig from 'next/config'; import { Image } from '../../lib/image/Image'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function BasicDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const code = { basic: ` -Image +Image `, javascript: ` import React from 'react'; @@ -17,7 +14,7 @@ import { Image } from 'primereact/image'; export default function BasicDemo() { return (
    - Image + Image
    ) } @@ -29,7 +26,7 @@ import { Image } from 'primereact/image'; export default function BasicDemo() { return (
    - Image + Image
    ) } @@ -44,7 +41,7 @@ export default function BasicDemo() {

    - Image + Image
    diff --git a/components/doc/image/previewdoc.js b/components/doc/image/previewdoc.js index ab67c26a29..22353650b6 100644 --- a/components/doc/image/previewdoc.js +++ b/components/doc/image/previewdoc.js @@ -1,14 +1,11 @@ import { Image } from '../../lib/image/Image'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; -import getConfig from 'next/config'; export function PreviewDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const code = { basic: ` -Image +Image `, javascript: ` import React from 'react'; @@ -17,7 +14,7 @@ import { Image } from 'primereact/image'; export default function PreviewDemo() { return (
    - Image + Image
    ) } @@ -29,7 +26,7 @@ import { Image } from 'primereact/image'; export default function PreviewDemo() { return (
    - Image + Image
    ) } @@ -44,7 +41,7 @@ export default function PreviewDemo() {

    - Image + Image
    diff --git a/components/doc/image/templatedoc.js b/components/doc/image/templatedoc.js index afaa73832f..ece15e76d1 100644 --- a/components/doc/image/templatedoc.js +++ b/components/doc/image/templatedoc.js @@ -1,15 +1,13 @@ import { Image } from '../../lib/image/Image'; import { DocSectionText } from '../common/docsectiontext'; import { DocSectionCode } from '../common/docsectioncode'; -import getConfig from 'next/config'; export function TemplateDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; const icon = ; const code = { basic: ` -Image +Image `, javascript: ` import React from 'react'; @@ -20,7 +18,7 @@ export default function TemplateDemo() { return (
    - Image + Image
    ) } @@ -34,7 +32,7 @@ export default function TemplateDemo() { return (
    - Image + Image
    ) } @@ -49,7 +47,7 @@ export default function TemplateDemo() {

    - Image + Image
    diff --git a/components/doc/image/thumbnaildoc.js b/components/doc/image/thumbnaildoc.js index d8fd5a234b..083219777f 100644 --- a/components/doc/image/thumbnaildoc.js +++ b/components/doc/image/thumbnaildoc.js @@ -1,14 +1,11 @@ -import getConfig from 'next/config'; import { Image } from '../../lib/image/Image'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function ThumbnailDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const code = { basic: ` -Image +Image `, javascript: ` import React from 'react'; @@ -17,7 +14,7 @@ import { Image } from 'primereact/image'; export default function ThumbnailDemo() { return (
    - Image + Image
    ) } @@ -29,7 +26,7 @@ import { Image } from 'primereact/image'; export default function ThumbnailDemo() { return (
    - Image + Image
    ) } @@ -44,7 +41,7 @@ export default function ThumbnailDemo() {

    - Image + Image
    diff --git a/components/doc/inplace/apidoc.js b/components/doc/inplace/apidoc.js deleted file mode 100644 index 48ae513130..0000000000 --- a/components/doc/inplace/apidoc.js +++ /dev/null @@ -1,98 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    styleobjectnullInline style of the element.
    classNamestringnullStyle class of the element.
    activebooleanfalseWhether the content is displayed or not.
    closablebooleanfalseDisplays a button to switch back to display mode.
    disabledbooleanfalseWhen present, it specifies that the element should be disabled.
    tabIndexnumbernullIndex of the element in tabbing order.
    -
    -     - -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onOpenevent: browser event Callback to invoke when inplace is opened.
    onCloseevent: browser event Callback to invoke when inplace is closed.
    onToggle - event.originalEvent: browser event
    - event.value: active state as a boolean -     		Callback to invoke when inplace is opened or closed.
    -
    -     - - ); -} diff --git a/components/doc/inplace/imagedoc.js b/components/doc/inplace/imagedoc.js index 7ce3a70e12..44a85d7f27 100644 --- a/components/doc/inplace/imagedoc.js +++ b/components/doc/inplace/imagedoc.js @@ -1,12 +1,9 @@ import React from 'react'; -import getConfig from 'next/config'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; import { Inplace, InplaceDisplay, InplaceContent } from '../../../components/lib/inplace/Inplace'; export function ImageDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const code = { basic: ` @@ -17,7 +14,7 @@ export function ImageDoc(props) { - Nature + Nature `, @@ -35,7 +32,7 @@ export default function ImageDemo() { - Nature e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} /> + Nature ); @@ -55,7 +52,7 @@ export default function ImageDemo() { - Nature e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} /> + Nature ); @@ -77,7 +74,7 @@ export default function ImageDemo() { - Nature (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} /> + Nature
    diff --git a/components/doc/inputmask/apidoc.js b/components/doc/inputmask/apidoc.js deleted file mode 100644 index f68323f2d5..0000000000 --- a/components/doc/inputmask/apidoc.js +++ /dev/null @@ -1,187 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    InputMask passes any valid attribute to the underlying React HTMLInputElement element. Extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuestringnullValue of the component.
    typestringtextHTML5 input type
    maskstringnullMask pattern.
    slotCharstring-Placeholder character in mask, default is underscore.
    autoClearbooleantrueClears the incomplete value on blur.
    unmaskbooleanfalseDefines if model sets the raw unmasked value to bound value or the formatted mask value.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    placeholderstringnullAdvisory information to display on input.
    sizenumbernullSize of the input field.
    maxLengthnumbernullMaximum number of character allows in the input field.
    tabIndexnumbernullSpecifies tab order of the element.
    disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
    readOnlybooleanfalseWhen present, it specifies that an input field is read-only.
    namestringnullName of the input field.
    requiredbooleanfalseWhen present, it specifies that the element must be filled out before submitting the form.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onFocusevent: Browser eventCallback to invoke when input receives focus.
    onBlurevent: Browser eventCallback to invoke when input loses focus.
    onComplete - event: Browser event -
    - value: New value of the component -     		Callback to invoke on when user completes the mask pattern.
    onChange - originalEvent: Browser event
    - value: New value of the component -     		Callback to invoke on value change.
    -
    -     - - ); -} diff --git a/components/doc/inputnumber/apidoc.js b/components/doc/inputnumber/apidoc.js deleted file mode 100644 index 77bf22fe17..0000000000 --- a/components/doc/inputnumber/apidoc.js +++ /dev/null @@ -1,350 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    valuenumbernullValue of the component.
    formatbooleantrueWhether to format the value.
    showButtonsbooleanfalseDisplays spinner buttons.
    buttonLayoutstringstackedLayout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".
    incrementButtonClassNamestringnullStyle class of the increment button.
    decrementButtonClassNamestringnullStyle class of the decrement button.
    incrementButtonIconstringpi pi-caret-upStyle class of the increment button.
    decrementButtonIconstringpi pi-caret-downStyle class of the decrement button.
    localestringnullLocale to be used in formatting.
    localeMatcherstringbest fit - The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See{' '} - Locale Negotation for details. -
    modestringdecimalDefines the behavior of the component, valid values are "decimal" and "currency".
    prefixstringnullText to display before the value.
    suffixstringdecimalText to display after the value.
    currencystringnull - The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the - euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided. -
    currencyDisplaystringsymbol - How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as - "dollar"; the default is "symbol". -
    useGroupingbooleantrueWhether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
    minFractionDigitsnumbernull - The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits - provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). -
    maxFractionDigitsnumbernull - The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the - larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list - (2 if the list doesn't provide that information). -
    idstringnullIdentifier of the element.
    namestringnullName of the input element.
    typestringtextType of the input element.
    allowEmptybooleantrueDetermines whether the input field is empty.
    stepnumber1Step factor to increment/decrement the value.
    minnumbernullMininum boundary value.
    maxnumbernullMaximum boundary value.
    disabledbooleanfalseWhen present, it specifies that the element should be disabled.
    requiredbooleanfalseWhen present, it specifies that an input field must be filled out before submitting the form.
    tabIndexnumbernullIndex of the element in tabbing order.
    autoFocusbooleanfalseWhen present, it specifies that the component should automatically get focus on load.
    patternstringnullThe pattern attribute specifies a regular expression that the element's value is checked against on form submission.
    inputmodestringnullThe inputmode attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display.
    placeholderstringnullHint text for the input field.
    readOnlybooleanfalseWhen present, it specifies that the element should be read-only.
    sizenumbernullSize of the input field.
    maxLengthnumbernullMaximum number of character allows in the input field.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the element.
    inputIdstringnullIdentifier of the input element.
    inputStylestringnullInline style of the input field.
    inputClassNamestringnullInline style of the input field.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onValueChange - event.originalEvent: Browser event
    - event.value: New value -     		Callback to invoke after validation check and value change.
    onChange - event.originalEvent: Browser event
    - event.value: New value -     		Callback to invoke on value change.
    onFocusevent: Browser eventCallback to invoke when input receives focus.
    onBlurevent: Browser eventCallback to invoke when input loses focus.
    onKeyDownevent: Browser event.Callback to invoke when the key pressed.
    -
    -     - - ); -} diff --git a/components/doc/inputnumber/buttonsdoc.js b/components/doc/inputnumber/buttonsdoc.js index 05070b5a39..4aa7da9cc7 100644 --- a/components/doc/inputnumber/buttonsdoc.js +++ b/components/doc/inputnumber/buttonsdoc.js @@ -81,23 +81,42 @@ export default function ButtonsDemo() { return ( <> -

    Spinner buttons are enabled using the showButtons property and layout is defined with the buttonLayout.

    +

    + Spinner buttons are enabled using the showButtons property and layout is defined with the buttonLayout. +

    - + setValue1(e.value)} showButtons mode="currency" currency="USD" />
    - +
    - + setValue3(e.value)} mode="decimal" showButtons min={0} max={100} />
    - - setValue2(e.value)} showButtons buttonLayout="horizontal" step={0.25} - decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" - mode="currency" currency="EUR" /> + + setValue2(e.value)} + showButtons + buttonLayout="horizontal" + step={0.25} + decrementButtonClassName="p-button-danger" + incrementButtonClassName="p-button-success" + incrementButtonIcon="pi pi-plus" + decrementButtonIcon="pi pi-minus" + mode="currency" + currency="EUR" + />
    diff --git a/components/doc/inputnumber/currencydoc.js b/components/doc/inputnumber/currencydoc.js index c3bdcea345..43dd72913e 100644 --- a/components/doc/inputnumber/currencydoc.js +++ b/components/doc/inputnumber/currencydoc.js @@ -85,23 +85,33 @@ export default function CurrencyDemo() { return ( <> -

    Monetary values are enabled by setting mode property as currency. In this setting, currency property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.

    +

    + Monetary values are enabled by setting mode property as currency. In this setting, currency property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar. +

    - + setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />
    - + setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />
    - + setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
    - + setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP" />
    diff --git a/components/doc/inputnumber/localedoc.js b/components/doc/inputnumber/localedoc.js index 5134f78142..2f477591f1 100644 --- a/components/doc/inputnumber/localedoc.js +++ b/components/doc/inputnumber/localedoc.js @@ -91,19 +91,27 @@ export default function LocaleDemo() {
    - + setValue1(e.value)} minFractionDigits={2} />
    - + setValue2(e.value)} locale="en-US" minFractionDigits={2} />
    - + setValue3(e.value)} locale="de-DE" minFractionDigits={2} />
    - + setValue4(e.value)} locale="en-IN" minFractionDigits={2} />
    diff --git a/components/doc/inputnumber/numberalsdoc.js b/components/doc/inputnumber/numberalsdoc.js index 95e5bc54fb..68bf64019c 100644 --- a/components/doc/inputnumber/numberalsdoc.js +++ b/components/doc/inputnumber/numberalsdoc.js @@ -91,19 +91,27 @@ export default function NumeralsDemo() {
    - + setValue1(e.value)} />
    - + setValue2(e.value)} useGrouping={false} />
    - + setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
    - + setValue4(e.value)} min={0} max={100} />
    diff --git a/components/doc/inputnumber/prefixsuffixdoc.js b/components/doc/inputnumber/prefixsuffixdoc.js index 7cf188f286..5f6473f9c4 100644 --- a/components/doc/inputnumber/prefixsuffixdoc.js +++ b/components/doc/inputnumber/prefixsuffixdoc.js @@ -91,19 +91,27 @@ export default function PrefixSuffixDemo() {
    - + setValue1(e.value)} suffix=" mi" />
    - + setValue2(e.value)} prefix="%" />
    - + setValue3(e.value)} prefix="Expires in " suffix=" days" />
    - + setValue4(e.value)} prefix="↑ " suffix="℃" min={0} max={40} />
    diff --git a/components/doc/inputnumber/verticaldoc.js b/components/doc/inputnumber/verticaldoc.js index 14359f304c..fce7ee4b74 100644 --- a/components/doc/inputnumber/verticaldoc.js +++ b/components/doc/inputnumber/verticaldoc.js @@ -46,11 +46,22 @@ export default function VerticalDemo() { return ( <> -

    Buttons can also placed vertically by setting buttonLayout as vertical.

    +

    + Buttons can also placed vertically by setting buttonLayout as vertical. +

    - setValue(e.value)} showButtons buttonLayout="vertical" style={{ width: '4rem' }} - decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /> + setValue(e.value)} + showButtons + buttonLayout="vertical" + style={{ width: '4rem' }} + decrementButtonClassName="p-button-secondary" + incrementButtonClassName="p-button-secondary" + incrementButtonIcon="pi pi-plus" + decrementButtonIcon="pi pi-minus" + />
    diff --git a/components/doc/inputswitch/apidoc.js b/components/doc/inputswitch/apidoc.js deleted file mode 100644 index d6845b0cc2..0000000000 --- a/components/doc/inputswitch/apidoc.js +++ /dev/null @@ -1,136 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    inputIdstringnullIdentifier of the input element.
    namestringnullName of the input element.
    tabIndexnumbernullIndex of the element in tabbing order.
    checkedbooleanfalseSpecifies whether a inputswitch should be checked or not.
    trueValueanytrueValue in checked state.
    falseValueanyfalseValue in unchecked state.
    disabledbooleanfalseWhen present, it specifies that the component should be disabled.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: Browser event
    - event.value: Checked state as a boolean. -     		Callback to invoke on value change.
    onFocusevent: Browser event.Callback to invoke when the element receives focus.
    onBlurevent: Browser event.Callback to invoke when the element loses focus.
    -
    -     - - ); -} diff --git a/components/doc/inputtext/apidoc.js b/components/doc/inputtext/apidoc.js deleted file mode 100644 index dcf235662e..0000000000 --- a/components/doc/inputtext/apidoc.js +++ /dev/null @@ -1,54 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    InputText passes any valid attribute to the underlying input element, additional attributes are as follows.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    keyfilterstring/regexnullFormat definition of the keys to block.
    validateOnlybooleanfalseWhen enabled, instead of blocking keys, input is validated internally to test against the regular expression.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    -
    -     - - ); -} diff --git a/components/doc/inputtextarea/apidoc.js b/components/doc/inputtextarea/apidoc.js deleted file mode 100644 index a33a86d582..0000000000 --- a/components/doc/inputtextarea/apidoc.js +++ /dev/null @@ -1,51 +0,0 @@ -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    InputTextarea passes any attribute to the underlying textarea element, additional attributes are as follows.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    autoResizebooleanfalseWhen present, height of textarea changes as being typed.
    keyfilterstring/regexnullFormat definition of the keys to block.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    -
    -     - - ); -} diff --git a/components/doc/keyfilter/apidoc.js b/components/doc/keyfilter/apidoc.js deleted file mode 100644 index d5cf7de15c..0000000000 --- a/components/doc/keyfilter/apidoc.js +++ /dev/null @@ -1,35 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    Commonly used cases have their own built-in shortcuts.

    -
      -
    • pint: Positive integers
      • -
    • int: Integers
      • -
    • pnum: Positive numbers
      • -
    • num: Numbers
      • -
    • hex: Hexadecimal
      • -
    • email: Email
      • -
    • alpha: Alphabetic
      • -
    • alphanum: Alphanumeric
      • -
    -     - - -

    A custom filter is enabled by binding a regular expression, an example that blocks special characters would be;

    - - {` -*!]+$/}/> -`} - -     - - ); -} diff --git a/components/doc/knob/accessibilitydoc.js b/components/doc/knob/accessibilitydoc.js index b72905542f..49508eeade 100644 --- a/components/doc/knob/accessibilitydoc.js +++ b/components/doc/knob/accessibilitydoc.js @@ -6,7 +6,7 @@ export function AccessibilityDoc() { return ( -
    Screen Reader
    +

    Screen Reader

    Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props. @@ -21,7 +21,7 @@ export function AccessibilityDoc() { `} -

    Keyboard Support
    +

    Keyboard Support

    diff --git a/components/doc/knob/apidoc.js b/components/doc/knob/apidoc.js deleted file mode 100644 index ce262c4226..0000000000 --- a/components/doc/knob/apidoc.js +++ /dev/null @@ -1,135 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuenumbernullValue of the component.
    sizenumber100Size of the component in pixels.
    disabledbooleanfalseWhen present, it specifies that the component should be disabled.
    readOnlybooleanfalseWhen present, it specifies that the component value cannot be edited.
    stepnumbernullStep factor to increment/decrement the value.
    minnumber0Mininum boundary value.
    maxnumber100Maximum boundary value.
    valueColorstringnullBackground of the value.
    rangeColorstringnullBackground color of the range.
    textColorstringnullColor of the value text.
    strokeWidthnumber14Width of the knob stroke.
    showValuebooleantrueWhether the show the value inside the knob.
    valueTemplatestring{value}Template string of the value.
    -
    - - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChangevalue: New valueCallback to invoke when the value changes.
    -
    -     - - ); -} diff --git a/components/doc/listbox/apidoc.js b/components/doc/listbox/apidoc.js deleted file mode 100644 index d218e2afc4..0000000000 --- a/components/doc/listbox/apidoc.js +++ /dev/null @@ -1,258 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valueobjectnullSelected value to display.
    optionsarraynullAn array of objects to display as the available options.
    optionLabelstringnullName of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
    optionValuestringnullName of the value field of an option when arbitrary objects are used as options instead of SelectItems.
    optionDisabledfunction | stringnullProperty name or getter function to use as the disabled flag of an option, defaults to false when not defined.
    optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
    optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
    emptyMessagestringNo results foundText to display when there are no options available.
    emptyFilterMessageanyNo results foundTemplate to display when filtering does not return any results.
    itemTemplateanynullCustom template for the items.
    filterTemplateanynullCustom template for the filter element.
    optionGroupTemplateanynullTemplate of an option group item.
    stylestringnullInline style of the element.
    listStyleobjectnullInline style of inner list element.
    listClassNamestringnullInline style class of inner list element.
    classNamestringnullStyle class of the element.
    disabledbooleanfalseWhen specified, disables the component.
    dataKeystringfalseA property to uniquely match the value in options for better performance.
    multiplebooleanfalseWhen specified, allows selecting multiple values.
    metaKeySelectionbooleantrue - Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, - metaKeySelection is turned off automatically. -
    filterbooleanfalseWhen specified, displays a filter input at header.
    filterBystringlabelWhen filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
    filterValuestringnullWhen specified, filter displays with this value.
    filterMatchModestringcontainsDefines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
    filterPlaceholderstringnullPlaceholder text to show when filter input is empty.
    filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
    filterInputPropsobjectundefinedProps for the filter input, any prop is passed implicity to the filter input element.
    tabIndexnumbernullIndex of the element in tabbing order.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    virtualScrollerOptionsobjectnull - Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: Browser event
    - event.value: Single value or an array of values depending on the selection mode
    -     		Callback to invoke when value of listbox changes.
    onFilterValueChange - event.originalEvent: Browser event
    - event.value: the filtered value
    -     		Callback to invoke when filter value changes.
    -
    -     - - ); -} diff --git a/components/doc/listbox/groupdoc.js b/components/doc/listbox/groupdoc.js index 3c38686528..f7f0efba0e 100644 --- a/components/doc/listbox/groupdoc.js +++ b/components/doc/listbox/groupdoc.js @@ -41,7 +41,7 @@ export function GroupDoc(props) { const groupedItemTemplate = (option) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={`flag flag-${option.code.toLowerCase()}`} /> + {option.name}
    {option.label}
    ); @@ -93,7 +93,7 @@ export default function GroupDoc() { const groupedItemTemplate = (option) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={\`flag flag-\${option.code.toLowerCase()}\`} /> + {option.name}
    {option.label}
    ); @@ -149,7 +149,7 @@ export default function GroupDoc() { const groupedItemTemplate = (option: any) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={\`flag flag-\${option.code.toLowerCase()}\`} /> + {option.name}
    {option.label}
    ); diff --git a/components/doc/listbox/templatedoc.js b/components/doc/listbox/templatedoc.js index 8ad8a9c150..c7751a21f3 100644 --- a/components/doc/listbox/templatedoc.js +++ b/components/doc/listbox/templatedoc.js @@ -21,7 +21,7 @@ export function TemplateDoc(props) { const countryTemplate = (option) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={`flag flag-${option.code.toLowerCase()}`} /> + {option.name}
    {option.name}
    ); @@ -53,7 +53,7 @@ export default function TemplateDoc() { const countryTemplate = (option) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={\`flag flag-\${option.code.toLowerCase()}\`} /> + {option.name}
    {option.name}
    ); @@ -88,7 +88,7 @@ export default function TemplateDoc() { const countryTemplate = (option) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={\`flag flag-\${option.code.toLowerCase()}\`} /> + {option.name}
    {option.name}
    ); diff --git a/components/doc/megamenu/apidoc.js b/components/doc/megamenu/apidoc.js deleted file mode 100644 index c44b5fe161..0000000000 --- a/components/doc/megamenu/apidoc.js +++ /dev/null @@ -1,70 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    modelarraynullAn array of menuitems.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    orientationstringhorizontalDefines the orientation, valid values are horizontal and vertical.
    startanynullThe template of starting element.
    endanynullThe template of trailing element
    -
    -     - - ); -} diff --git a/components/doc/megamenu/templatedoc.js b/components/doc/megamenu/templatedoc.js index cf02e35341..869c9220dd 100644 --- a/components/doc/megamenu/templatedoc.js +++ b/components/doc/megamenu/templatedoc.js @@ -2,10 +2,8 @@ import { MegaMenu } from '../../lib/megamenu/MegaMenu'; import { InputText } from '../../lib/inputtext/InputText'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; -import getConfig from 'next/config'; export function TemplateDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; const items = [ { label: 'Videos', @@ -122,7 +120,7 @@ export function TemplateDoc(props) { ] } ]; - const start = logo; + const start = logo; const end = ; const code = { @@ -248,7 +246,7 @@ export default function TemplateDemo() { } ]; - const start = logo e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} height="40" className="mr-2">; + const start = logo; const end = ; return ( @@ -378,7 +376,7 @@ export default function TemplateDemo() { } ]; - const start = logo e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} height="40" className="mr-2">; + const start = logo; const end = ; return ( diff --git a/components/doc/mention/apidoc.js b/components/doc/mention/apidoc.js deleted file mode 100644 index 66c0c6e8c8..0000000000 --- a/components/doc/mention/apidoc.js +++ /dev/null @@ -1,213 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    InputTextarea passes any attribute to the underlying textarea element, additional attributes are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    inputIdstringnullIdentifier of the input element.
    styleobjectnullInline style of the component.
    classNamestringnullStyle class of the component.
    triggerstring|array@Set trigger keyword.
    suggestionsarraynullAn array of suggestions to display.
    fieldstring|arraynullField of a suggested object to resolve and display.
    inputStyleobjectnullInline style of the input field.
    inputClassNamestringnullStyle class of the input field.
    panelClassNamestringnullStyle class of the overlay panel element.
    panelStyleobjectnullInline style of the overlay panel element.
    scrollHeightstring200pxMaximum height of the suggestions panel.
    autoHighlightbooleantrueWhen enabled, highlights the first item in the list by default.
    placeholderbooleantruePlaceholder text for the input.
    delaynumber0Delay between keystrokes to wait before sending a query.
    headerTemplateanynullThe template of header.
    footerTemplateanynullThe template of footer.
    itemTemplateanynullCustom template for the items.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChangeevent: Browser eventCallback to invoke when value changes.
    onFocusevent: Browser event.Callback to invoke when the element receives focus.
    onBlurevent: Browser event.Callback to invoke when the element loses focus.
    onShow-Callback to invoke when overlay panel becomes visible.
    onHide-Callback to invoke when overlay panel becomes hidden.
    onSearch - event.originalEvent: Browser event
    - event.trigger: Current trigger keyword. -     		Callback to invoke when search.
    onSelect - event.originalEvent: Browser event -
    - event.suggestion: Selected item -     		Callback to invoke when selection changes.
    onInputevent: Browser eventCallback to invoke on input event of input field.
    -
    -     - - ); -} diff --git a/components/doc/mention/autodoc.js b/components/doc/mention/autodoc.js index 0f1487cf5b..c668b0b7ed 100644 --- a/components/doc/mention/autodoc.js +++ b/components/doc/mention/autodoc.js @@ -35,11 +35,11 @@ export function AutoDoc(props) { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -89,11 +89,11 @@ export default function AutoDoc() { } const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -103,7 +103,9 @@ export default function AutoDoc() { } return ( - +
    + +
    ) } `, @@ -144,11 +146,11 @@ export default function AutoDoc() { } const itemTemplate = (suggestion: any) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -158,7 +160,9 @@ export default function AutoDoc() { } return ( - +
    + +
    ) } `, diff --git a/components/doc/mention/basicdoc.js b/components/doc/mention/basicdoc.js index 2e007b6182..91e926c56b 100644 --- a/components/doc/mention/basicdoc.js +++ b/components/doc/mention/basicdoc.js @@ -35,11 +35,11 @@ export function BasicDoc(props) { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -89,11 +89,11 @@ export default function BasicDoc() { } const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -103,7 +103,9 @@ export default function BasicDoc() { } return ( - +
    + +
    ) } `, @@ -144,11 +146,11 @@ export default function BasicDoc() { } const itemTemplate = (suggestion: any) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -158,7 +160,9 @@ export default function BasicDoc() { } return ( - +
    + +
    ) } `, diff --git a/components/doc/mention/disableddoc.js b/components/doc/mention/disableddoc.js index 7b6fad225c..3731952ed1 100644 --- a/components/doc/mention/disableddoc.js +++ b/components/doc/mention/disableddoc.js @@ -35,11 +35,12 @@ export function DisabledDoc(props) { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + o + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -50,7 +51,7 @@ export function DisabledDoc(props) { const code = { basic: ` - + `, javascript: ` import React, { useState, useEffect } from "react"; @@ -89,11 +90,11 @@ export default function DisabledDoc() { } const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -104,7 +105,7 @@ export default function DisabledDoc() { return (
    - +
    ) } @@ -146,11 +147,11 @@ export default function DisabledDoc() { } const itemTemplate = (suggestion: any) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} diff --git a/components/doc/mention/floatlabeldoc.js b/components/doc/mention/floatlabeldoc.js index 8d9554c8c9..5ac9f4e13e 100644 --- a/components/doc/mention/floatlabeldoc.js +++ b/components/doc/mention/floatlabeldoc.js @@ -35,11 +35,11 @@ export function FloatLabelDoc(props) { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -89,11 +89,11 @@ export default function FloatLabelDoc() { } const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -144,11 +144,11 @@ export default function FloatLabelDoc() { } const itemTemplate = (suggestion: any) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} diff --git a/components/doc/mention/invaliddoc.js b/components/doc/mention/invaliddoc.js index bfa8f1c57b..0e21ec3596 100644 --- a/components/doc/mention/invaliddoc.js +++ b/components/doc/mention/invaliddoc.js @@ -35,11 +35,11 @@ export function InvalidDoc(props) { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -89,11 +89,11 @@ export default function InvalidDoc() { } const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -146,11 +146,11 @@ export default function InvalidDoc() { } const itemTemplate = (suggestion: any) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} diff --git a/components/doc/mention/triggersdoc.js b/components/doc/mention/triggersdoc.js index fe1d9fab22..dec851ecdc 100644 --- a/components/doc/mention/triggersdoc.js +++ b/components/doc/mention/triggersdoc.js @@ -55,11 +55,11 @@ export function TriggersDoc(props) { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -143,11 +143,11 @@ export default function TriggersDoc() { } const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -233,11 +233,11 @@ export default function TriggersDoc() { } const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" style={{verticalAlign: 'middle'}} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} diff --git a/components/doc/mention/validation/formikdoc.js b/components/doc/mention/validation/formikdoc.js index 2fae43f728..04f5c5e3fc 100644 --- a/components/doc/mention/validation/formikdoc.js +++ b/components/doc/mention/validation/formikdoc.js @@ -39,11 +39,11 @@ export function FormikDoc(props) { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -148,11 +148,11 @@ export default function FormikDoc() { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -266,11 +266,11 @@ export default function FormikDoc() { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} diff --git a/components/doc/mention/validation/hookformdoc.js b/components/doc/mention/validation/hookformdoc.js index 6c20c6ba6f..b378913ba1 100644 --- a/components/doc/mention/validation/hookformdoc.js +++ b/components/doc/mention/validation/hookformdoc.js @@ -57,11 +57,11 @@ export function HookFormDoc(props) { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -149,11 +149,11 @@ export default function HookFormDoc() { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} @@ -254,11 +254,11 @@ export default function HookFormDoc() { }; const itemTemplate = (suggestion) => { - const src = 'images/avatar/' + suggestion.representative.image; + const src = 'https://www.primereact.org/images/avatar/' + suggestion.representative.image; return (
    - {suggestion.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" style={{ verticalAlign: 'middle' }} /> + {suggestion.name} {suggestion.name} @{suggestion.nickname} diff --git a/components/doc/menu/apidoc.js b/components/doc/menu/apidoc.js deleted file mode 100644 index d5b08961f9..0000000000 --- a/components/doc/menu/apidoc.js +++ /dev/null @@ -1,147 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    modelarraynullAn array of menuitems.
    popupbooleanfalseDefines if menu would displayed as a popup.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    baseZIndexnumber0Base zIndex value to use in layering.
    autoZIndexbooleantrueWhether to automatically manage layering.
    appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    toggleevent: Browser eventToggles the visibility of the popup menu.
    showevent: Browser eventDisplays the popup menu.
    hideevent: Browser eventHides the popup menu.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onShowevent: Browser event Callback to invoke when a popup menu is shown.
    onHideevent: Browser event Callback to invoke when a popup menu is hidden.
    -
    -     - - ); -} diff --git a/components/doc/menubar/apidoc.js b/components/doc/menubar/apidoc.js deleted file mode 100644 index 6031ea039c..0000000000 --- a/components/doc/menubar/apidoc.js +++ /dev/null @@ -1,64 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    modelarraynullAn array of menuitems.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    startanynullThe template of starting element.
    endanynullThe template of trailing element
    -
    -     - - ); -} diff --git a/components/doc/menubar/templatedoc.js b/components/doc/menubar/templatedoc.js index d7a71e96f5..b3595aee40 100644 --- a/components/doc/menubar/templatedoc.js +++ b/components/doc/menubar/templatedoc.js @@ -2,10 +2,8 @@ import { Menubar } from '../../lib/menubar/Menubar'; import { InputText } from '../../lib/inputtext/InputText'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; -import getConfig from 'next/config'; export function TemplateDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; const items = [ { label: 'File', @@ -130,7 +128,7 @@ export function TemplateDoc(props) { } ]; - const start = logo; + const start = logo; const end = ; const code = { @@ -271,7 +269,7 @@ export default function TemplateDemo() { } ]; - const start = logo e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} height="40" className="mr-2">; + const start = logo; const end = ; return ( @@ -416,7 +414,7 @@ export default function TemplateDemo() { } ]; - const start = logo e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} height="40" className="mr-2">; + const start = logo; const end = ; return ( diff --git a/components/doc/message/apidoc.js b/components/doc/message/apidoc.js deleted file mode 100644 index 0198cb0c60..0000000000 --- a/components/doc/message/apidoc.js +++ /dev/null @@ -1,74 +0,0 @@ -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    classNamestringnullStyle class of the element.
    stylestringnullInline style of the element.
    severitystringnullSeverity level of the message.
    textanynullText of the message.
    stylestringnullMessage text.
    contentelementnullTemplate of the message.
    iconstringbased on severityIcon for the message. If not set it will default to severity icon.
    -
    -     - - ); -} diff --git a/components/doc/message/templatedoc.js b/components/doc/message/templatedoc.js index 7e2c435767..6d767ea68f 100644 --- a/components/doc/message/templatedoc.js +++ b/components/doc/message/templatedoc.js @@ -1,15 +1,12 @@ -import getConfig from 'next/config'; import React from 'react'; import { Message } from '../../lib/message/Message'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function TemplateDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const content = (
    - logo + logo
    Always bet on Prime.
    ); @@ -34,7 +31,7 @@ import { Message } from 'primereact/message'; export default function TemplateDemo() { const content = (
    - logo (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} width="32" /> + logo
    Always bet on Prime.
    ); @@ -62,7 +59,7 @@ import { Message } from 'primereact/message'; export default function TemplateDemo() { const content = (
    - logo (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} width="32" /> + logo
    Always bet on Prime.
    ); diff --git a/components/doc/messages/apidoc.js b/components/doc/messages/apidoc.js deleted file mode 100644 index 2ea9f319b7..0000000000 --- a/components/doc/messages/apidoc.js +++ /dev/null @@ -1,85 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    classNamestringnullStyle class of the element.
    stylestringnullInline style of the element.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onRemovemessage: Removed message Callback to invoke when a message is removed.
    onClickmessage: Clicked message Callback to invoke when a message gets clicked.
    -
    -     - - ); -} diff --git a/components/doc/messages/templatedoc.js b/components/doc/messages/templatedoc.js index c54c0c1754..c56153adb8 100644 --- a/components/doc/messages/templatedoc.js +++ b/components/doc/messages/templatedoc.js @@ -1,4 +1,3 @@ -import getConfig from 'next/config'; import React, { useEffect, useRef } from 'react'; import { Messages } from '../../lib/messages/Messages'; import { DocSectionCode } from '../common/docsectioncode'; @@ -6,7 +5,6 @@ import { DocSectionText } from '../common/docsectiontext'; export function TemplateDoc(props) { const msgs = useRef(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; useEffect(() => { msgs.current.show({ @@ -14,12 +12,12 @@ export function TemplateDoc(props) { sticky: true, content: ( - logo + logo
    Always bet on Prime.
     ) }); - }, []); // eslint-disable-line react-hooks/exhaustive-deps + }, []); const code = { basic: ` @@ -29,7 +27,7 @@ useEffect(() => { sticky: true, content: ( - logo (e.target.src = 'https://www.primefaces.org/cdn/images/placeholder.png')} width="32" /> + logo
    Always bet on Prime.
     ) @@ -47,7 +45,7 @@ export default function TemplateDemo() { msgs.current.show({ severity: 'info', sticky: true, content: ( - logo e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} width="32" /> + logo
    Always bet on Prime.
     ) @@ -72,7 +70,7 @@ export default function TemplateDemo() { msgs.current?.show({ severity: 'info', sticky: true, content: ( - logo e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} width="32" /> + logo
    Always bet on Prime.
     ) diff --git a/components/doc/multiselect/apidoc.js b/components/doc/multiselect/apidoc.js deleted file mode 100644 index 32ad9d8d9b..0000000000 --- a/components/doc/multiselect/apidoc.js +++ /dev/null @@ -1,437 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    namestringnullName of the input element.
    valuearraynullValue of the component.
    optionsarraynullAn array of selectitems to display as the available options.
    optionLabelstringnullName of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
    optionValuestringnullProperty name or getter function to use as the value of an option, defaults to the option itself when not defined.
    optionDisabledfunction | stringnullProperty name or getter function to use as the disabled flag of an option, defaults to false when not defined.
    optionGroupLabelstringnullProperty name or getter function to use as the label of an option group.
    optionGroupChildrenstringnullProperty name or getter function that refers to the children options of option group.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    panelClassNamestringnullStyle class of the overlay panel element.
    panelStylestringnullInline style of the overlay panel element.
    overlayVisiblebooleanfalseSpecifies the visibility of the overlay panel.
    scrollHeightstring200pxHeight of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
    placeholderstringnullLabel to display when there are no selections.
    fixedPlaceholderbooleanfalseWhether to display selected items in the label section or always display the placeholder as the default label.
    disabledbooleanfalseWhen present, it specifies that the component should be disabled.
    showClearbooleanfalseWhen enabled, a clear icon is displayed to clear the value.
    filterbooleantrueWhen specified, displays an input field to filter the items on keyup.
    filterBystringlabelWhen filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
    filterMatchModestringcontainsDefines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
    filterPlaceholderstringnullPlaceholder text to show when filter input is empty.
    filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
    emptyFilterMessageanyNo records foundTemplate to display when filtering does not return any results.
    resetFilterOnHidebooleanfalseClears the filter value when hiding the dropdown.
    tabIndexnumbernullIndex of the element in tabbing order.
    dataKeystringnullA property to uniquely match the value in options for better performance.
    inputIdstringnullIdentifier of the focusable input.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    itemTemplatefunctionnullFunction that gets the option and returns the content for it.
    itemClassNamestringbullStyle class of the items.
    filterTemplateanynullThe template of filter element.
    optionGroupTemplateanynullTemplate of an option group item.
    selectedItemTemplatefunctionnullFunction that gets an item in the value and returns the content for it.
    panelHeaderTemplateanynullTemplate of the panel header.
    panelFooterTemplateanynullTemplate of the panel footer.
    appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
    maxSelectedLabelsnumbernullDecides how many selected item labels to show at most.
    selectionLimitnumbernullNumber of maximum options that can be selected.
    selectedItemsLabelstring{0} items selectedLabel to display after exceeding max selected labels.
    ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
    displaystringcommaUsed mode to display the selected item. Valid values are 'comma' and 'chip'.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    dropdownIconanypi pi-chevron-downIcon class of the dropdown icon.
    removeIconanypi pi-times-circleIcon of the remove chip element.
    virtualScrollerOptionsobjectnull - Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. -
    showSelectAllbooleantrueWhether to show the select all checkbox inside the panel's header.
    selectAllbooleanfalseWhether all data is selected.
    inlinebooleanfalseRender the items panel inline.
    flexbooleanfalseUse flex layout for the items panel.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: Browser event -
    - event.value: Current selected values -
    -     		Callback to invoke when value changes.
    onFocusevent: Browser event.Callback to invoke when the element receives focus.
    onBlurevent: Browser event.Callback to invoke when the element loses focus.
    onShow-Callback to invoke when overlay panel becomes visible.
    onHide-Callback to invoke when overlay panel becomes hidden.
    onFilter - event.originalEvent: Browser event -
    - event.filter: Filter value. -     		Callback to invoke on filtering.
    onSelectAll - event.originalEvent: Browser event -
    - event.checked: Whether all data is selected. -     		Callback to invoke when all data is selected.
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    checkValidity-Checks whether the native hidden input element has any constraints and returns a boolean for the result.
    -
    -     - - ); -} diff --git a/components/doc/multiselect/groupeddoc.js b/components/doc/multiselect/groupeddoc.js index 2704b1ae0b..2daba611d9 100644 --- a/components/doc/multiselect/groupeddoc.js +++ b/components/doc/multiselect/groupeddoc.js @@ -41,7 +41,7 @@ export function GroupedDoc(props) { const groupedItemTemplate = (option) => { return (
    - {option.label} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={`flag flag-${option.code.toLowerCase()}`} /> + {option.label}
    {option.label}
    ); @@ -92,7 +92,7 @@ export default function GroupedDoc() { const groupedItemTemplate = (option) => { return (
    - {option.label} e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} className={\`flag flag-\${option.code.toLowerCase()}\`} /> + {option.label}
    {option.label}
    ); @@ -146,7 +146,7 @@ export default function GroupedDoc() { const groupedItemTemplate = (option) => { return (
    - {option.label} e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} className={\`flag flag-\${option.code.toLowerCase()}\`} /> + {option.label}
    {option.label}
    ); diff --git a/components/doc/multiselect/templatedoc.js b/components/doc/multiselect/templatedoc.js index 0d468cb9f5..0c8b513e0e 100644 --- a/components/doc/multiselect/templatedoc.js +++ b/components/doc/multiselect/templatedoc.js @@ -21,7 +21,7 @@ export function TemplateDoc(props) { const countryTemplate = (option) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={`flag flag-${option.code.toLowerCase()}`} /> + {option.name}
    {option.name}
    ); @@ -31,7 +31,7 @@ export function TemplateDoc(props) { if (option) { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={`flag flag-${option.code.toLowerCase()}`} /> + {option.name}
    {option.name}
    ); @@ -78,7 +78,7 @@ export default function TemplateDocs() { const countryTemplate = (option) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={\`flag flag-\${option.code.toLowerCase()} h-1 w-1 mr-2\`} /> + {option.name}
    {option.name}
    ); @@ -88,7 +88,7 @@ export default function TemplateDocs() { if (option) { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={\`flag flag-\${option.code.toLowerCase()}\`} /> + {option.name}
    {option.name}
    ); @@ -139,7 +139,7 @@ export default function TemplateDocs() { const countryTemplate = (option) => { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={\`flag flag-\${option.code.toLowerCase()} h-1 w-1 mr-2\`} /> + {option.name}
    {option.name}
    ); @@ -149,7 +149,7 @@ export default function TemplateDocs() { if (option) { return (
    - {option.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} className={\`flag flag-\${option.code.toLowerCase()}\`} /> + {option.name}
    {option.name}
    ); diff --git a/components/doc/multistatecheckbox/apidoc.js b/components/doc/multistatecheckbox/apidoc.js deleted file mode 100644 index 619ea5404a..0000000000 --- a/components/doc/multistatecheckbox/apidoc.js +++ /dev/null @@ -1,182 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    iconstringnull - The icon of the option. This is optional. The iconTemplate property can be used instead. -
    styleobjectnullInline style of the checkbox element when the option is selected.
    classNamestringnullStyle class of the checkbox element when the option is selected.
    -
    -     - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valueanynullValue of the MultiStateCheckbox.
    optionsarraynullAn array to display as the available options.
    optionValuestringnullProperty name to use as the value of an option, defaults to the option itself when not defined.
    optionLabelstringnullProperty name to refer to the option label, used by screen readers only. Defaults to optionValue.
    iconTemplateanynullTemplate of icon for the selected option.
    dataKeystringnullA property to uniquely match the value in options for better performance.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
    readOnlybooleanfalseWhen present, it specifies that the value cannot be changed.
    tabIndexnumbernullIndex of the element in tabbing order.
    emptybooleantrueIf false, the empty state is skipped in the chekbox.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: Browser event
    - event.value: Current Value -     		Callback to invoke on value change
    -
    -     - - ); -} diff --git a/components/doc/orderlist/apidoc.js b/components/doc/orderlist/apidoc.js deleted file mode 100644 index 3861b8cf78..0000000000 --- a/components/doc/orderlist/apidoc.js +++ /dev/null @@ -1,184 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuearraynullAn array of objects to reorder.
    dataKeystringnullName of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering.
    headerstringnullText for the caption
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    listStylestringnullInline style of the list element.
    dragdropbooleanfalseWhether to enable dragdrop based reordering.
    dragdropScopestringnullUnique key of drag drop events to avoid conflict with other drag drop events on the page.
    itemTemplatefunctionnullFunction that gets an item in the list and returns the content for it.
    filterTemplateanynullThe template of filter element.
    filterbooleanfalseWhen specified, displays an input field to filter the items on keyup.
    filterBystringlabelWhen filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
    filterMatchModestringcontainsDefines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".
    filterPlaceholderstringnullPlaceholder text to show when filter input is empty.
    filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
    tabIndexnumbernullIndex of the element in tabbing order.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: Browser event
    - event.value: Reordered list -     		Callback to invoke when list is reordered.
    onFilter - event.originalEvent: Original event
    - event.filter: Value of the filter input -     		Callback to invoke when the value is filtered.
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    resetFilter-Reset the options filter.
    -
    -     - - ); -} diff --git a/components/doc/orderlist/basicdoc.js b/components/doc/orderlist/basicdoc.js index 7b09018da5..3522e2e48c 100644 --- a/components/doc/orderlist/basicdoc.js +++ b/components/doc/orderlist/basicdoc.js @@ -15,12 +15,7 @@ export function BasicDoc(props) { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} - alt={item.name} - /> + {item.name}
    {item.name}
    @@ -55,7 +50,7 @@ export default function BasicDoc() { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={item.name} /> + {item.name}
    {item.name}
    @@ -93,7 +88,7 @@ export default function BasicDoc() { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={item.name} /> + {item.name}
    {item.name}
    diff --git a/components/doc/orderlist/dragdropdoc.js b/components/doc/orderlist/dragdropdoc.js index 8aa00d1a7b..609eb365fe 100644 --- a/components/doc/orderlist/dragdropdoc.js +++ b/components/doc/orderlist/dragdropdoc.js @@ -15,12 +15,7 @@ export function DragDropDoc(props) { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} - alt={item.name} - /> + {item.name}
    {item.name}
    @@ -55,7 +50,7 @@ export default function DragDropDoc() { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} /> + {item.name}
    {item.name}
    @@ -93,7 +88,7 @@ export default function DragDropDoc() { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} /> + {item.name}
    {item.name}
    @@ -122,7 +117,7 @@ export default function DragDropDoc() { code: 'f230fh0g3', name: 'Bamboo Watch', description: 'Product Description', - image: 'bamboo-watch.jpg', + image: '/bamboo-watch.jpg', price: 65, category: 'Accessories', quantity: 24, diff --git a/components/doc/orderlist/filterdoc.js b/components/doc/orderlist/filterdoc.js index b73cb27d72..bb56979117 100644 --- a/components/doc/orderlist/filterdoc.js +++ b/components/doc/orderlist/filterdoc.js @@ -15,12 +15,7 @@ export function FilterDoc(props) { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} - alt={item.name} - /> + {item.name}
    {item.name}
    @@ -55,7 +50,7 @@ export default function FilterDoc() { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} /> + {item.name}
    {item.name}
    @@ -93,7 +88,7 @@ export default function FilterDoc() { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} /> + {item.name}
    {item.name}
    @@ -122,7 +117,7 @@ export default function FilterDoc() { code: 'f230fh0g3', name: 'Bamboo Watch', description: 'Product Description', - image: 'bamboo-watch.jpg', + image: '/bamboo-watch.jpg', price: 65, category: 'Accessories', quantity: 24, diff --git a/components/doc/orderlist/templatedoc.js b/components/doc/orderlist/templatedoc.js index b3ff7ba0dd..007f95b8fd 100644 --- a/components/doc/orderlist/templatedoc.js +++ b/components/doc/orderlist/templatedoc.js @@ -44,12 +44,7 @@ export function TemplateDoc(props) { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} - alt={item.name} - /> + {item.name}
    {item.name}
    @@ -113,7 +108,7 @@ export default function TemplateDoc() { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} /> + {item.name}
    {item.name}
    @@ -180,7 +175,7 @@ export default function TemplateDoc() { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} /> + {item.name}
    {item.name}
    diff --git a/components/doc/organizationchart/advanceddoc.js b/components/doc/organizationchart/advanceddoc.js index 6c487defc1..c8639f8f9e 100644 --- a/components/doc/organizationchart/advanceddoc.js +++ b/components/doc/organizationchart/advanceddoc.js @@ -89,7 +89,7 @@ export function AdvancedDoc(props) {
    {node.label}
    - {node.data.avatar} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} style={{ width: '32px' }} /> + {node.data.avatar}
    {node.data.name}
    @@ -184,7 +184,7 @@ export default function AdvancedDoc() {
    {node.label}
    - {node.data.avatar} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} style={{ width: '32px' }} /> + {node.data.avatar}
    {node.data.name}
    @@ -282,7 +282,7 @@ export default function AdvancedDoc() {
    {node.label}
    - {node.data.avatar} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} style={{ width: '32px' }} /> + {node.data.avatar}
    {node.data.name}
    diff --git a/components/doc/organizationchart/apidoc.js b/components/doc/organizationchart/apidoc.js deleted file mode 100644 index b850577fde..0000000000 --- a/components/doc/organizationchart/apidoc.js +++ /dev/null @@ -1,111 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuearraynullAn array of nested TreeNodes.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    selectionModestringnullDefines the selection mode, valid values "single" and "multiple".
    selectionanynullA single treenode instance or an array to refer to the selections.
    nodeTemplatefunctionnullTemplate function that gets a node as a parameter and returns a content.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onNodeSelect - event.originalEvent: browser event
    - event.node: Selected node instance. -     		Callback to invoke when a node is selected.
    onNodeUnselect - event.originalEvent: browser event
    - event.node: Unselected node instance. -     		Callback to invoke when a node is unselected.
    onSelectionChange - event.originalEvent: browser event
    - event.data: New selection. -     		Callback to invoke when node selection changes.
    -
    -     - - ); -} diff --git a/components/doc/overlaypanel/apidoc.js b/components/doc/overlaypanel/apidoc.js deleted file mode 100644 index e18e7f36b4..0000000000 --- a/components/doc/overlaypanel/apidoc.js +++ /dev/null @@ -1,150 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    dismissablebooleantrueEnables to hide the overlay when outside is clicked.
    showCloseIconbooleanfalseWhen enabled, displays a close icon at top right corner.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
    ariaCloseLabelstringcloseAria label of the close icon.
    breakpointsobjectnullObject literal to define widths per screen size.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onShow-Callback to invoke when overlay becomes visible.
    onHide-Callback to invoke when overlay becomes hidden.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    toggleevent: Browser eventToggles the visiblity of the overlay.
    show - event: Browser event
    - target: Optional target if event.target should not be used -     		Shows the overlay.
    hide-Hides the overlay.
    -
    -     - - ); -} diff --git a/components/doc/overlaypanel/basicdoc.js b/components/doc/overlaypanel/basicdoc.js index 7bc68330fa..d4fdb52ca7 100644 --- a/components/doc/overlaypanel/basicdoc.js +++ b/components/doc/overlaypanel/basicdoc.js @@ -1,4 +1,3 @@ -import getConfig from 'next/config'; import { useRef } from 'react'; import { Button } from '../../lib/button/Button'; import { OverlayPanel } from '../../lib/overlaypanel/OverlayPanel'; @@ -6,14 +5,13 @@ import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function BasicDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; const op = useRef(null); const code = { basic: `
    ); @@ -46,7 +44,7 @@ export default function BasicDemo() {
    ); @@ -64,7 +62,7 @@ export default function BasicDemo() {
    diff --git a/components/doc/overlaypanel/datatabledoc.js b/components/doc/overlaypanel/datatabledoc.js index 82e48491fa..81454023c7 100644 --- a/components/doc/overlaypanel/datatabledoc.js +++ b/components/doc/overlaypanel/datatabledoc.js @@ -1,4 +1,3 @@ -import getConfig from 'next/config'; import { useEffect, useRef, useState } from 'react'; import { ProductService } from '../../../service/ProductService'; import { Button } from '../../lib/button/Button'; @@ -12,12 +11,11 @@ import { DocSectionText } from '../common/docsectiontext'; export function DataTableDoc(props) { const [products, setProducts] = useState(null); const [selectedProduct, setSelectedProduct] = useState(null); - const contextPath = getConfig().publicRuntimeConfig.contextPath; const selectedProductContent = selectedProduct && (
    - {selectedProduct.name} + {selectedProduct.name}
    {selectedProduct.name} @@ -84,10 +82,10 @@ export default function DataTableDemo() { const [products, setProducts] = useState(null); const [selectedProduct, setSelectedProduct] = useState(null); - const product = selectedProduct && ( + const selectedProductContent = selectedProduct && (
    - {selectedProduct.name} e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'}> + {selectedProduct.name}
    {selectedProduct.name} @@ -122,7 +120,7 @@ export default function DataTableDemo() { }; const imageBody = (rowData) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={rowData.image} className="w-4rem shadow-1" /> + return {rowData.image} }; const priceBody = (rowData) => { @@ -162,10 +160,10 @@ export default function DataTableDemo() { const toast = useRef(null); const isMounted = useRef(false); - const product = selectedProduct && ( + const selectedProductContent = selectedProduct && (
    - {selectedProduct.name} e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'}> + {selectedProduct.name}
    {selectedProduct.name} @@ -196,7 +194,7 @@ export default function DataTableDemo() { }; const imageBody = (rowData: Product) => { - return e.target.src='https://www.primefaces.org/cdn/images/placeholder.png'} alt={rowData.image} className="w-4rem shadow-1" /> + return {rowData.image} }; const priceBody = (rowData: Product) => { @@ -226,7 +224,7 @@ export default function DataTableDemo() { code: 'f230fh0g3', name: 'Bamboo Watch', description: 'Product Description', - image: 'bamboo-watch.jpg', + image: '/bamboo-watch.jpg', price: 65, category: 'Accessories', quantity: 24, diff --git a/components/doc/paginator/apidoc.js b/components/doc/paginator/apidoc.js deleted file mode 100644 index 72553f713f..0000000000 --- a/components/doc/paginator/apidoc.js +++ /dev/null @@ -1,130 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    totalRecordsnumber0Number of total records.
    rowsnumber0Data count to display per page.
    firstnumber0Zero-relative number of the first row to be displayed.
    pageLinkSizenumber5Number of page links to display.
    rowsPerPageOptionsarraynullArray of integer values to display inside rows per page dropdown.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    templatestring|objectFirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdownTemplate of the paginator.
    leftContentanynullContent to inject into the left side of the paginator.
    rightContentanynullContent to inject into the right side of the paginator.
    currentPageReportTemplatestring({currentPage} of {totalPages})Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
    dropdownAppendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    onPageChange - event.page: New page number
    - event.first: Index of first record
    - event.rows: Number of rows to display in new page
    - event.page: Index of the new page
    - event.pageCount: Total number of pages -     		Callback to invoke when page changes, the event object contains information about the new state.
    -
    -     - - ); -} diff --git a/components/doc/paginator/contentdoc.js b/components/doc/paginator/contentdoc.js index 6cfe88aaa5..5c79c59421 100644 --- a/components/doc/paginator/contentdoc.js +++ b/components/doc/paginator/contentdoc.js @@ -21,7 +21,7 @@ leftContent={leftContent} rightContent={rightContent} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"> - {contentFirst} e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} /> + {contentFirst}
    `, javascript: ` @@ -45,7 +45,7 @@ export default function ContentDoc() { leftContent={leftContent} rightContent={rightContent} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
    - {contentFirst} e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} /> + {contentFirst}
    ) @@ -72,7 +72,7 @@ export default function ContentDoc() { leftContent={leftContent} rightContent={rightContent} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
    - {contentFirst} e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} /> + {contentFirst}
    ) @@ -97,7 +97,7 @@ export default function ContentDoc() { >
    - {contentFirst} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} /> + {contentFirst}
    diff --git a/components/doc/panel/apidoc.js b/components/doc/panel/apidoc.js deleted file mode 100644 index 44f617e3e2..0000000000 --- a/components/doc/panel/apidoc.js +++ /dev/null @@ -1,122 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    headeranynullCustom header template of the panel.
    headerTemplateanynullHeader template of the panel to customize more.
    toggleablebooleanfalseDefines if content of panel can be expanded and collapsed.
    iconsanynullCustom icons template for the header.
    styleobjectnullInline style of the element.
    classNamestringnullStyle class of the element.
    collapsedbooleanfalseDefines the initial state of panel content, supports one or two-way binding as well.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onCollapseevent.originalEvent: browser event Callback to invoke when an active tab is collapsed by clicking on the header.
    onExpandevent.originalEvent: browser event Callback to invoke when a tab gets expanded.
    onToggle - event.originalEvent: browser event
    - event.value: collapsed state as a boolean -     		Callback to invoke when a tab gets expanded.
    -
    -     - - ); -} diff --git a/components/doc/panelmenu/apidoc.js b/components/doc/panelmenu/apidoc.js deleted file mode 100644 index 7222113fc2..0000000000 --- a/components/doc/panelmenu/apidoc.js +++ /dev/null @@ -1,70 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    modelarraynullAn array of menuitems.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    multiplebooleanfalseWhether multiple tabs can be activated at the same time or not.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - ); -} diff --git a/components/doc/password/apidoc.js b/components/doc/password/apidoc.js deleted file mode 100644 index ea05aec613..0000000000 --- a/components/doc/password/apidoc.js +++ /dev/null @@ -1,215 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { CodeHighlight } from '../common/codehighlight'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    Password accepts all valid properties of an input element in addition the custom properties below.

    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    inputIdstringnullIdentifier of the input element.
    promptLabelstringPlease enter a passwordText to prompt password entry.
    weakLabelstringWeakText for a weak password.
    mediumLabelstringMediumText for a medium password.
    strongLabelstringStrongText for a strong password.
    mediumRegexstring{`^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).`}Regex for a medium level password.
    strongRegexstring{`^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})`}Regex for a strong level password.
    feedbackbooleantrueWhether to show the strength indicator or not.
    toggleMaskbooleanfalseWhether to show an icon to display the password as plain text.
    appendToDOM element | stringdocument.body - DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. -
    headeranynullTemplate of panel header if "feedback" is enabled.
    contentanynullTemplate of panel content if "feedback" is enabled.
    footeranynullTemplate of panel footer if "feedback" is enabled.
    iconanynullTemplate of mask icon if "toggleMask" is enabled.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    styleobjectnullInline style of the element.
    classNamestringnullStyle class of the element.
    inputStyleanynullInline style of the input field.
    inputClassNamestringnullStyle class of the input field.
    panelClassNamestringnullStyle class of the overlay panel element.
    panelStylestringnullInline style of the overlay panel element.
    keyfilterstring/regexnullFormat definition of the keys to block.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onShow-Callback to invoke when overlay becomes visible.
    onHide-Callback to invoke when overlay becomes hidden.
    -
    -     - - ); -} diff --git a/components/doc/password/validation/formikdoc.js b/components/doc/password/form/formikdoc.js similarity index 51% rename from components/doc/password/validation/formikdoc.js rename to components/doc/password/form/formikdoc.js index d1df1d79f1..9f5b327605 100644 --- a/components/doc/password/validation/formikdoc.js +++ b/components/doc/password/form/formikdoc.js @@ -11,18 +11,18 @@ export function FormikDoc(props) { const toast = useRef(null); const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item }); + toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value }); }; const formik = useFormik({ initialValues: { - item: '' + value: '' }, validate: (data) => { let errors = {}; - if (!data.item) { - errors.item = 'Password is required.'; + if (!data.value) { + errors.value = 'Password is required.'; } return errors; @@ -42,21 +42,20 @@ export function FormikDoc(props) { const code = { basic: ` - - { - formik.setFieldValue('item', e.target.value); - }} - /> + { + formik.setFieldValue('value', e.target.value); + }} +/> +{getFormErrorMessage('value')} +
    ) @@ -141,18 +134,18 @@ export default function FormikDoc() { const toast = useRef(null); const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item }); + toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value }); }; const formik = useFormik({ initialValues: { - item: '' + value: '' }, validate: (data) => { let errors = {}; - if (!data.item) { - errors.item = 'Password is required.'; + if (!data.value) { + errors.value = 'Password is required.'; } return errors; @@ -171,29 +164,23 @@ export default function FormikDoc() { return (
    -
    + + -
    -
    - - { - formik.setFieldValue('item', e.target.value); - }} - /> - {getFormErrorMessage('item')} -
    -
    -
    ) @@ -204,33 +191,28 @@ export default function FormikDoc() { return ( <> - {/* TO DO: Add demo content. */} -

    +

    + Formik is a popular library for handling forms in React. +

    -
    + + -
    -
    - - { - formik.setFieldValue('item', e.target.value); - }} - /> - {getFormErrorMessage('item')} -
    -
    -
    diff --git a/components/doc/password/form/hookformdoc.js b/components/doc/password/form/hookformdoc.js new file mode 100644 index 0000000000..1384535ea2 --- /dev/null +++ b/components/doc/password/form/hookformdoc.js @@ -0,0 +1,188 @@ +import { useRef } from 'react'; +import { Controller, useForm } from 'react-hook-form'; +import { Button } from '../../../lib/button/Button'; +import { Password } from '../../../lib/password/Password'; +import { Toast } from '../../../lib/toast/Toast'; +import { classNames } from '../../../lib/utils/Utils'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function HookFormDoc(props) { + const toast = useRef(null); + + const show = () => { + toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') }); + }; + + const defaultValues = { value: '' }; + const form = useForm({ defaultValues }); + const errors = form.formState.errors; + + const onSubmit = (data) => { + data.value && show(); + + form.reset(); + }; + + const getFormErrorMessage = (name) => { + return errors[name] ? {errors[name].message} :  ; + }; + + const code = { + basic: ` + + ( + <> + + + {getFormErrorMessage(field.name)} + + )} +/> +
    + ) +} + `, + typescript: ` +import React, { useRef } from 'react'; +import { Controller, useForm } from 'react-hook-form'; +import { Button } from 'primereact/button'; +import { Toast } from 'primereact/toast'; +import { classNames } from 'primereact/utils'; +import { Password } from "primereact/password"; + +export default function HookFormDoc() { + const toast = useRef(null); + + const show = () => { + toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') }); + }; + + const defaultValues = { value: '' }; + const form = useForm({ defaultValues }); + const errors = form.formState.errors; + + const onSubmit = (data) => { + data.value && show(); + + form.reset(); + }; + + const getFormErrorMessage = (name) => { + return errors[name] ? {errors[name].message} :  ; + }; + + return ( +
    +
    + + ( + <> + + + {getFormErrorMessage(field.name)} + + )} + /> +
    + ) +} + ` + }; + + return ( + <> + +

    + React Hook Form is another popular React library to handle forms. +

    +     +
    +
    + + ( + <> + + + {getFormErrorMessage(field.name)} + + )} + /> +
    + + + ); +} diff --git a/components/doc/password/validation/hookformdoc.js b/components/doc/password/validation/hookformdoc.js deleted file mode 100644 index 3547764247..0000000000 --- a/components/doc/password/validation/hookformdoc.js +++ /dev/null @@ -1,199 +0,0 @@ -import { useRef } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { Button } from '../../../lib/button/Button'; -import { Password } from '../../../lib/password/Password'; -import { Toast } from '../../../lib/toast/Toast'; -import { classNames } from '../../../lib/utils/Utils'; -import { DocSectionCode } from '../../common/docsectioncode'; -import { DocSectionText } from '../../common/docsectiontext'; - -export function HookFormDoc(props) { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') }); - }; - - const defaultValues = { value: '' }; - const form = useForm({ defaultValues }); - const errors = form.formState.errors; - - const onSubmit = (data) => { - data.value && show(); - - form.reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - const code = { - basic: ` - - ( - <> - - - {getFormErrorMessage(field.name)} - - )} - /> - `, - javascript: ` -import React, { useRef } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; -import { classNames } from 'primereact/utils'; -import { Password } from "primereact/password"; - -export default function HookFormDoc() { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') }); - }; - - const defaultValues = { value: '' }; - const form = useForm({ defaultValues }); - const errors = form.formState.errors; - - const onSubmit = (data) => { - data.value && show(); - - form.reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - return ( -
    -
    -
    - -
    - ( - <> - - - {getFormErrorMessage(field.name)} - - )} - /> -
    -
    -
    - ) -} - `, - typescript: ` -import React, { useRef } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; -import { classNames } from 'primereact/utils'; -import { Password } from "primereact/password"; - -export default function HookFormDoc() { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') }); - }; - - const defaultValues = { value: '' }; - const form = useForm({ defaultValues }); - const errors = form.formState.errors; - - const onSubmit = (data) => { - data.value && show(); - - form.reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - return ( -
    -
    -
    - -
    - ( - <> - - - {getFormErrorMessage(field.name)} - - )} - /> -
    -
    -
    - ) -} - ` - }; - - return ( - <> - -

    - React Hook Form is another popular React library to handle forms. -

    -     -
    -
    -
    - -
    - ( - <> - - - {getFormErrorMessage(field.name)} - - )} - /> -
    -
    -
    - - - ); -} diff --git a/components/doc/picklist/apidoc.js b/components/doc/picklist/apidoc.js deleted file mode 100644 index 6dba6a67bf..0000000000 --- a/components/doc/picklist/apidoc.js +++ /dev/null @@ -1,304 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { CodeHighlight } from '../common/codehighlight'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    sourcearraynullAn array of objects for the source list.
    targetarraynullAn array of objects for the target list.
    sourceHeaderanynullTemplate for the source list caption.
    targetHeaderanynullTemplate for the target list caption.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    sourceStylestringnullInline style of the source list element.
    targetStylestringnullInline style of the target list element.
    sourceSelectionanynullSelected item in the source list.
    targetSelectionanynullSelected items in the target list.
    showSourceControlsbooleantrueWhether to show buttons of source list.
    showTargetControlsbooleantrueWhether to show buttons of target list.
    itemTemplatefunctionnull - Template that gets the options for both source and target items and returns the content for it. Useful if you want the same template for both lists else use the custom sourceItemTemplate or{' '} - targetItemTemplate properties. -
    sourceItemTemplatefunctionnullTemplate that gets the options for the source items and returns the content for it.
    targetItemTemplatefunctionnullTemplate that gets the options for the target items and returns the content for it.
    metaKeySelectionbooleantrue - Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, - metaKeySelection is turned off automatically. -
    filterBystringnullWhen specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).
    filterMatchModestringcontainsDefines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte".
    filterLocalestringundefinedLocale to use in filtering. The default locale is the host environment's current locale.
    sourceFilterValuestringnullFilter value in the target list.
    targetFilterValuestringnullFilter value in the source list.
    showSourceFilterbooleantrueWhether to show filter input for source list when filterBy is enabled.
    showTargetFilterbooleantrueWhether to show filter input for target list when filterBy is enabled.
    sourceFilterPlaceholderstringnullPlaceholder text on source filter input.
    targetFilterPlaceholderstringnullPlaceholder text on target filter input.
    sourceFilterTemplateanynullTemplate for the source filter content.
    targetFilterTemplateanynullTemplate for the target filter content.
    tabIndexnumbernullIndex of the element in tabbing order.
    dataKeystringnullName of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering.
    -
    -     - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: Browser event
    - event.source: Source list
    - event.target: Target list{' '} -     		Callback to invoke when items are moved from source to target.
    onMoveToSource - event.originalEvent: Browser event
    - event.value: Moved items -     		Callback to invoke when items are moved from target to source.
    onMoveAllToSource - event.originalEvent: Browser event
    - event.value: Moved items -     		Callback to invoke when all items are moved from target to source.
    onMoveToTarget - event.originalEvent: Browser event
    - event.value: Moved items -     		Callback to invoke when items are moved from source to target.
    onMoveAllToTarget - event.originalEvent: Browser event
    - event.value: Moved items -     		Callback to invoke when all items are moved from source to target.
    onSourceSelectionChange - event.originalEvent: Browser event
    - items: Selected items array -     		Callback to invoke when items are selected within source list.
    onTargetSelectionChange - event.originalEvent: Browser event
    - items: Selected items array -     		Callback to invoke when items are selected within target list.
    onSourceFilterChange - event.originalEvent: Browser event
    - event.value: Filtered value -     		Callback to invoke when items are filtered within source list.
    onTargetFilterChange - event.originalEvent: Browser event
    - event.value: Filtered value -     		Callback to invoke when items are filtered within target list.
    -
    -     - - ); -} diff --git a/components/doc/picklist/picklistdoc.js b/components/doc/picklist/picklistdoc.js index 2bdee8a362..672c294156 100644 --- a/components/doc/picklist/picklistdoc.js +++ b/components/doc/picklist/picklistdoc.js @@ -1,12 +1,10 @@ import React, { useState, useEffect } from 'react'; import { PickList } from '../../lib/picklist/PickList'; import { ProductService } from '../../../service/ProductService'; -import getConfig from 'next/config'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; export function PickListDoc(props) { - const contextPath = getConfig().publicRuntimeConfig.contextPath; const [source, setSource] = useState([]); const [target, setTarget] = useState([]); @@ -23,12 +21,7 @@ export function PickListDoc(props) { return (
    - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} - alt={item.name} - /> + {item.name}
    {item.name}
    @@ -72,7 +65,7 @@ export default function PickListDemo() { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} /> + {item.name}
    {item.name}
    @@ -119,7 +112,7 @@ export default function PickListDemo() { return (
    - e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} /> + {item.name}
    {item.name}
    @@ -150,7 +143,7 @@ export default function PickListDemo() { code: 'f230fh0g3', name: 'Bamboo Watch', description: 'Product Description', - image: 'bamboo-watch.jpg', + image: '/bamboo-watch.jpg', price: 65, category: 'Accessories', quantity: 24, diff --git a/components/doc/progressbar/accessibilitydoc.js b/components/doc/progressbar/accessibilitydoc.js index 365b43b50c..b4d4a14e18 100644 --- a/components/doc/progressbar/accessibilitydoc.js +++ b/components/doc/progressbar/accessibilitydoc.js @@ -19,7 +19,7 @@ export function AccessibilityDoc() { `} -
    Keyboard Support
    +

    Keyboard Support

    Not applicable.

    diff --git a/components/doc/progressbar/apidoc.js b/components/doc/progressbar/apidoc.js deleted file mode 100644 index ccd9abe260..0000000000 --- a/components/doc/progressbar/apidoc.js +++ /dev/null @@ -1,85 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuenumbernullCurrent value of the progress.
    showValuebooleantrueShow or hide progress bar value.
    unitstring%Unit sign appended to the value.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    modestringdeterminateDefines the mode of the progress, valid values are "determinate" and "indeterminate".
    colorstringnullColor for the background of the progress.
    displayValueTemplateElementnullCustom display value template
    -
    -     - - ); -} diff --git a/components/doc/progressspinner/accessibilitydoc.js b/components/doc/progressspinner/accessibilitydoc.js index 517a4f0abe..84aa4d9320 100644 --- a/components/doc/progressspinner/accessibilitydoc.js +++ b/components/doc/progressspinner/accessibilitydoc.js @@ -6,7 +6,7 @@ export function AccessibilityDoc() { return ( -
    Screen Reader
    +

    Screen Reader

    ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.

    @@ -16,7 +16,7 @@ export function AccessibilityDoc() { `} -
    Keyboard Support
    +

    Keyboard Support

    Component does not include any interactive elements.

         diff --git a/components/doc/progressspinner/apidoc.js b/components/doc/progressspinner/apidoc.js deleted file mode 100644 index 9012729fc8..0000000000 --- a/components/doc/progressspinner/apidoc.js +++ /dev/null @@ -1,66 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    styleobjectnullInline style of the element.
    classNamestringnullStyle class of the element.
    strokeWidthstring2Width of the circle stroke.
    fillstringnullColor for the background of the circle.
    animationDurationstring2sDuration of the rotate animation.
    -
    -     - - ); -} diff --git a/components/doc/radiobutton/apidoc.js b/components/doc/radiobutton/apidoc.js deleted file mode 100644 index 4cd316c79e..0000000000 --- a/components/doc/radiobutton/apidoc.js +++ /dev/null @@ -1,121 +0,0 @@ -import Link from 'next/link'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    inputIdstringnullUnique identifier of the inner native radiobutton.
    namestringnullName of the checkbox element .
    valueanynullValue of the radiobutton.
    checkedbooleanfalseSpecifies whether a radiobutton should be checked or not.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
    requiredbooleanfalseWhen present, it specifies that an input field must be filled out before submitting the form.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: Original event
    - event.value: Value of the radiobutton
    - event.checked: Checked state as a boolean. -     		Callback to invoke on radio button click.
    -
    -     - - ); -} diff --git a/components/doc/radiobutton/validation/formikdoc.js b/components/doc/radiobutton/form/formikdoc.js similarity index 54% rename from components/doc/radiobutton/validation/formikdoc.js rename to components/doc/radiobutton/form/formikdoc.js index 503e97437e..c8c7e212dc 100644 --- a/components/doc/radiobutton/validation/formikdoc.js +++ b/components/doc/radiobutton/form/formikdoc.js @@ -3,7 +3,6 @@ import React, { useRef } from 'react'; import { Button } from '../../../lib/button/Button'; import { RadioButton } from '../../../lib/radiobutton/RadioButton'; import { Toast } from '../../../lib/toast/Toast'; -import { classNames } from '../../../lib/utils/Utils'; import { DocSectionCode } from '../../common/docsectioncode'; import { DocSectionText } from '../../common/docsectiontext'; @@ -69,31 +68,31 @@ export function FormikDoc(props) { const code = { basic: ` -
    - {radioBtns.map((btn, i) => { - return ( -
    - { - formik.setFieldValue('item', e.value); - }} +{radioBtns.map((btn, i) => { + return ( +
    + { + formik.setFieldValue('item', e.value); + }} /> -
    ); - })} +})}
    +{getFormErrorMessage('item')} +
    +
    +
    Please choose your ingredient.
    +
    + + {radioBtns.map((btn, i) => { + return ( +
    + { + formik.setFieldValue('item', e.value); + }} + /> + +
    + ); + })} +
    + {getFormErrorMessage('item')} +
    ) } @@ -194,7 +189,6 @@ import React, { useRef } from "react"; import { useFormik } from 'formik'; import { Button } from 'primereact/button'; import { Toast } from 'primereact/toast'; -import { classNames } from 'primereact/utils'; import { RadioButton } from "primereact/radiobutton"; export default function FormikDoc() { @@ -258,34 +252,30 @@ export default function FormikDoc() { return (
    -
    -
    -
    Please choose your ingredient.
    -
    - -
    - {radioBtns.map((btn, i) => { - return ( -
    - { - formik.setFieldValue('item', e.value); - }} - /> - -
    - ); - })} -
    - {getFormErrorMessage('item')} -
    -
    +
    +
    Please choose your ingredient.
    +
    + + {radioBtns.map((btn, i) => { + return ( +
    + { + formik.setFieldValue('item', e.value); + }} + /> + +
    + ); + })} +
    + {getFormErrorMessage('item')} +
    ) } @@ -300,36 +290,31 @@ export default function FormikDoc() {

    -
    -
    -
    Please choose your ingredient.
    -
    - -
    - {radioBtns.map((btn, i) => { - return ( -
    - { - formik.setFieldValue('item', e.value); - }} - /> - -
    - ); - })} -
    - {getFormErrorMessage('item')} -
    -
    +
    +
    Please choose your ingredient.
    +
    + + {radioBtns.map((btn, i) => { + return ( +
    + { + formik.setFieldValue('item', e.value); + }} + /> + +
    + ); + })} +
    + {getFormErrorMessage('item')} +
    - ); diff --git a/components/doc/radiobutton/validation/hookformdoc.js b/components/doc/radiobutton/form/hookformdoc.js similarity index 91% rename from components/doc/radiobutton/validation/hookformdoc.js rename to components/doc/radiobutton/form/hookformdoc.js index 526da30b76..fe037bec76 100644 --- a/components/doc/radiobutton/validation/hookformdoc.js +++ b/components/doc/radiobutton/form/hookformdoc.js @@ -2,7 +2,6 @@ import { useRef } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { Button } from '../../../lib/button/Button'; import { RadioButton } from '../../../lib/radiobutton/RadioButton'; -import { classNames } from '../../../lib/utils/Utils'; import { DocSectionCode } from '../../common/docsectioncode'; import { DocSectionText } from '../../common/docsectiontext'; import { Toast } from '../../../lib/toast/Toast'; @@ -43,9 +42,9 @@ export function HookFormDoc(props) { name="value" control={control} rules={{ required: 'Value is required.' }} - render={({ field, fieldState }) => ( + render={({ field }) => ( <> -
    Please choose your ingredient.
    +
    Please choose your ingredient.
    @@ -79,7 +78,6 @@ export function HookFormDoc(props) { import React, { useRef } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { Button } from 'primereact/button'; -import { classNames } from 'primereact/utils'; import { Toast } from 'primereact/toast'; import { RadioButton } from "primereact/radiobutton"; @@ -116,15 +114,15 @@ export default function HookFormDoc() {
    -
    - +
    + ( + render={({ field }) => ( <> -
    Please choose your ingredient.
    +
    Please choose your ingredient.
    @@ -165,7 +163,6 @@ import React, { useRef } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { Button } from 'primereact/button'; import { Toast } from 'primereact/toast'; -import { classNames } from 'primereact/utils'; import { RadioButton } from "primereact/radiobutton"; export default function HookFormDoc() { @@ -201,15 +198,15 @@ export default function HookFormDoc() {
    -
    - +
    + ( + render={({ field }) => ( <> -
    Please choose your ingredient.
    +
    Please choose your ingredient.
    @@ -250,8 +247,9 @@ export default function HookFormDoc() { return ( <> - {/* TO DO: Add demo content. */} -

    +

    + React Hook Form is another popular React library to handle forms. +

    @@ -262,9 +260,9 @@ export default function HookFormDoc() { name="value" control={control} rules={{ required: 'Value is required.' }} - render={({ field, fieldState }) => ( + render={({ field }) => ( <> -
    Please choose your ingredient.
    +
    Please choose your ingredient.
    diff --git a/components/doc/rating/apidoc.js b/components/doc/rating/apidoc.js deleted file mode 100644 index 4b68ba9f50..0000000000 --- a/components/doc/rating/apidoc.js +++ /dev/null @@ -1,149 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valuenumbernullValue of the rating.
    disabledbooleanfalseWhen present, it specifies that the element should be disabled.
    readOnlybooleanfalseWhen present, changing the value is not possible.
    styleobjectnullInline style of the component.
    classNamestringnullClassName of the component.
    starsnumber5Number of stars.
    cancelbooleantrueWhen specified a cancel icon is displayed to allow removing the value.
    cancelIconstringpi pi-banClassName of the cancel icon component.
    cancelIconPropsobjectnullProperties of the cancel icon.
    onIconstringpi pi-star-fillClassName of the on icon component.
    offIconstringpi pi-starClassName of the off icon component.
    onIconPropsobjectnullProperties of the on icon.
    offIconPropsobjectnullProperties of the off icon.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: Browser event
    - event.value: selected value -     		Callback to invoke on value change.
    -
    -     - - ); -} diff --git a/components/doc/rating/templatedoc.js b/components/doc/rating/templatedoc.js index 2ef8beb6af..8f9bff7003 100644 --- a/components/doc/rating/templatedoc.js +++ b/components/doc/rating/templatedoc.js @@ -13,9 +13,9 @@ export function TemplateDoc(props) { setVal(e.value)} - cancelIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />} - onIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image-active" width="25px" height="25px" />} - offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} + cancelIcon={custom-cancel-image} + onIcon={custom-image-active} + offIcon={custom-image} /> `, javascript: ` @@ -26,15 +26,15 @@ export default function TemplateDoc() { const [val, setVal] = useState(null); return ( - setVal(e.value)} - cancelIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />} - onIcon={ - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image-active" width="25px" height="25px" /> - } - offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} - /> +
    + setVal(e.value)} + cancelIcon={custom-cancel-image} + onIcon={custom-image-active} + offIcon={custom-image} + /> +
    ); } `, @@ -46,15 +46,15 @@ export default function TemplateDoc() { const [val, setVal] = useState(0); return ( - setVal(e.value)} - cancelIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />} - onIcon={ - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image-active" width="25px" height="25px" /> - } - offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} - /> +
    + setVal(e.value)} + cancelIcon={custom-cancel-image} + onIcon={custom-image-active} + offIcon={custom-image} + /> +
    ); } ` @@ -71,11 +71,9 @@ export default function TemplateDoc() { setVal(e.value)} - cancelIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />} - onIcon={ - (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image-active" width="25px" height="25px" /> - } - offIcon={ (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />} + cancelIcon={custom-cancel-image} + onIcon={custom-image-active} + offIcon={custom-image} />
    diff --git a/components/doc/ripple/apidoc.js b/components/doc/ripple/apidoc.js deleted file mode 100644 index a09ab9ff24..0000000000 --- a/components/doc/ripple/apidoc.js +++ /dev/null @@ -1,32 +0,0 @@ -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - -

    - Ripple effect is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's main container (e.g. App.js) using the PrimeReact class. -

    - - {` -PrimeReact.ripple = true; -`} - - -

    - Note: That would be it to enable ripple on PrimeReact components, next section describes how to use it with your own components and standard elements. -

    - - - {` -.p-ripple.purple .p-ink { - background: rgba(256,39,176,.3); -} -`} - - - ); -} diff --git a/components/doc/scrollpanel/apidoc.js b/components/doc/scrollpanel/apidoc.js deleted file mode 100644 index 827aba80da..0000000000 --- a/components/doc/scrollpanel/apidoc.js +++ /dev/null @@ -1,67 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    stylestringnullInline style of the component.
    classNamestringnullStyle class of the component.
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    refresh-Refreshes the position and size of the scrollbar.
    -
    -     - - ); -} diff --git a/components/doc/scrolltop/apidoc.js b/components/doc/scrolltop/apidoc.js deleted file mode 100644 index d94ed2fd49..0000000000 --- a/components/doc/scrolltop/apidoc.js +++ /dev/null @@ -1,91 +0,0 @@ -import Link from 'next/link'; -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    targetstringwindowTarget of the ScrollTop, valid values are "window" and "parent".
    thresholdnumber400Defines the threshold value of the vertical scroll position of the target to toggle the visibility.
    iconstringpi pi-chevron-upIcon to display.
    behaviorstringsmoothDefines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.
    transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
    -
    -     - -
    - - - - - - - - - - - - - - - - - - - - -
    NameParametersDescription
    onShow-Callback to invoke when overlay becomes visible.
    onHide-Callback to invoke when overlay becomes hidden.
    -
    -     - - ); -} diff --git a/components/doc/selectbutton/apidoc.js b/components/doc/selectbutton/apidoc.js deleted file mode 100644 index 6c455e6dab..0000000000 --- a/components/doc/selectbutton/apidoc.js +++ /dev/null @@ -1,196 +0,0 @@ -import { DevelopmentSection } from '../common/developmentsection'; -import { DocSectionText } from '../common/docsectiontext'; -import { DocSubSection } from '../common/docsubsection'; - -export function ApiDoc(props) { - return ( - <> - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    labelstringnullLabel of the option.
    valuestringnullValue of the option.
    classNamestringnullClassName of the option.
    titlestringnullTooltip text of the option. (Not supported)
    disabledbooleanfalseWhether the option is disabled or not.
    -
    -     - - -

    Any valid attribute is passed to the root element implicitly, extended properties are as follows;

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameTypeDefaultDescription
    idstringnullUnique identifier of the element.
    valueanynullValue of the component.
    optionsarraynullAn array of objects to display as the available options.
    optionLabelstringnullName of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
    optionValuestringnullName of the value field of an option when arbitrary objects are used as options instead of SelectItems.
    optionDisabledfunction | stringnullProperty name or getter function to use as the disabled flag of an option, defaults to false when not defined.
    tabIndexnumbernullIndex of the element in tabbing order.
    multiplebooleanfalseWhen specified, allows selecting multiple values.
    unselectablebooleantrueWhether selection can be cleared.
    disabledbooleanfalseWhen present, it specifies that the element should be disabled.
    stylestringnullInline style of the element.
    classNamestringnullStyle class of the element.
    dataKeystringnullA property to uniquely match the value in options for better performance.
    tooltipanynullContent of the tooltip.
    tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
    itemTemplatefunctionnullFunction that gets the option and returns the content.
    -
    -     - - -
    - - - - - - - - - - - - - - - -
    NameParametersDescription
    onChange - event.originalEvent: browser event
    - event.value: Single value or an array of values that are selected. -     		Callback to invoke on value change.
    -
    -     - - ); -} diff --git a/components/doc/selectbutton/validation/formikdoc.js b/components/doc/selectbutton/form/formikdoc.js similarity index 100% rename from components/doc/selectbutton/validation/formikdoc.js rename to components/doc/selectbutton/form/formikdoc.js diff --git a/components/doc/selectbutton/validation/hookformdoc.js b/components/doc/selectbutton/form/hookformdoc.js similarity index 96% rename from components/doc/selectbutton/validation/hookformdoc.js rename to components/doc/selectbutton/form/hookformdoc.js index cadaf5a7fe..f95d7b7952 100644 --- a/components/doc/selectbutton/validation/hookformdoc.js +++ b/components/doc/selectbutton/form/hookformdoc.js @@ -33,7 +33,7 @@ export function HookFormDoc(props) { ( <>
    +

    Returns Accordion

    +
    +

    Methods

    +
    +

    getElement

    +
      + +
    • +

      Used to get container element.

      + +

      Returns

      Container element

      +
      +

      Returns HTMLDivElement

    @@ -87,12 +101,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Class AccordionTab

    +
    +

    AccordionTab is a helper component for Accordion.

    +
    +
    +

    Hierarchy

    +
    +
    +
    +
    + +
    +
    +

    Constructors

    +
    constructor +
    +
    +

    Constructors

    +
    +

    constructor

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/classes/autocomplete.AutoComplete.html b/docs/api/9.0.0-beta.1/classes/autocomplete.AutoComplete.html similarity index 97% rename from docs/api/9.0.0/classes/autocomplete.AutoComplete.html rename to docs/api/9.0.0-beta.1/classes/autocomplete.AutoComplete.html index 38e2b5a2f0..21aff701ee 100644 --- a/docs/api/9.0.0/classes/autocomplete.AutoComplete.html +++ b/docs/api/9.0.0-beta.1/classes/autocomplete.AutoComplete.html @@ -1,4 +1,4 @@ -AutoComplete | PrimeReact - v9.0.0
    +AutoComplete | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class AutoComplete

    @@ -185,12 +185,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Avatar

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class AvatarGroup

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Badge

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class BlockUI

    @@ -115,12 +115,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class BreadCrumb

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Button

    @@ -78,12 +78,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Calendar

    @@ -192,12 +192,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Captcha

    @@ -119,12 +119,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Card

    @@ -85,12 +85,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Carousel

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class CascadeSelect

    @@ -143,12 +143,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Chart

    @@ -154,12 +154,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Checkbox

    @@ -121,12 +121,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Chip

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Chips

    @@ -121,12 +121,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ColorPicker

    @@ -150,12 +150,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Column

    @@ -85,12 +85,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ColumnGroup

    @@ -85,12 +85,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ConfirmDialog

    @@ -106,12 +106,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ConfirmPopup

    @@ -106,12 +106,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ContextMenu

    @@ -133,12 +133,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class CSSTransition<Ref>

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class DataScroller

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class DataTable<TValue>

    @@ -276,12 +276,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class DataView

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class DataViewLayoutOptions

    @@ -81,12 +81,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class DeferredContent

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Dialog

    @@ -165,12 +165,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Divider

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Dock

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Dropdown

    @@ -143,12 +143,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Editor

    @@ -143,12 +143,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Fieldset

    @@ -112,12 +112,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class FileUpload

    @@ -189,12 +189,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Galleria

    @@ -146,12 +146,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class GMap

    @@ -112,12 +112,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Image

    @@ -130,12 +130,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Inplace

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class InplaceContent

    @@ -93,12 +93,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class InplaceDisplay

    @@ -93,12 +93,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class InputMask

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class InputNumber

    @@ -132,12 +132,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class InputSwitch

    @@ -121,12 +121,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Knob

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ListBox

    @@ -121,12 +121,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class MegaMenu

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Mention

    @@ -132,12 +132,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Menu

    @@ -160,12 +160,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Menubar

    @@ -123,12 +123,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Message

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Messages

    @@ -142,12 +142,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class MultiSelect

    @@ -150,12 +150,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class MultiStateCheckbox

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class OrderList

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class OrganizationChart

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class OverlayPanel

    @@ -150,12 +150,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Paginator

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Panel

    @@ -112,12 +112,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class PanelMenu

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Password

    @@ -132,12 +132,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class PickList

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ProgressBar

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ProgressSpinner

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class RadioButton

    @@ -137,12 +137,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Rating

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Ripple

    @@ -85,12 +85,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Row

    @@ -85,12 +85,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ScrollPanel

    @@ -134,12 +134,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ScrollTop

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class SelectButton

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Sidebar

    @@ -123,12 +123,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Skeleton

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class SlideMenu

    @@ -183,12 +183,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Slider

    @@ -99,12 +99,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class SpeedDial

    @@ -119,12 +119,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class SplitButton

    @@ -119,12 +119,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Splitter

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class SplitterPanel

    @@ -81,12 +81,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Steps

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class StyleClass

    @@ -112,12 +112,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class TabMenu

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class TabPanel

    @@ -81,12 +81,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class TabView

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Tag

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Terminal

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class TieredMenu

    @@ -117,12 +117,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Timeline

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Toast

    @@ -158,12 +158,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class ToggleButton

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Toolbar

    @@ -101,12 +101,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Tooltip

    @@ -192,12 +192,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class Tree

    @@ -122,12 +122,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class TreeSelect

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class TreeTable

    @@ -130,12 +130,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class TriStateCheckbox

    @@ -110,12 +110,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • ConnectedOverlayScrollHandler

    • Class ConnectedOverlayScrollHandler

    Use 'useOverlayScrollListener' hook instead

    @@ -32,20 +32,20 @@

    Constructors

    constructor

    -

    Returns ConnectedOverlayScrollHandler

    +

    Returns ConnectedOverlayScrollHandler

    Methods

    @@ -99,12 +99,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • DomHandler

    • Class DomHandler

    Hierarchy

    @@ -27,81 +27,81 @@

    Constructors

    constructor

    +

    Returns DomHandler

    Methods

    @@ -848,12 +848,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • IconUtils

    • Class IconUtils

    Hierarchy

    @@ -27,32 +27,32 @@

    Constructors

    constructor

    +

    Returns IconUtils

    Methods

    Static getJSXIcon

      - +

    • Parameters

      • -
        icon: IconType<any>
        • +
        icon: IconType<any>
      • iconProps: HTMLProps<HTMLElement>
      • @@ -76,12 +76,12 @@

        Theme

      @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • ObjectUtils

    • Class ObjectUtils

    Hierarchy

    @@ -27,34 +27,34 @@

    Constructors

    constructor

    +

    Returns ObjectUtils

    Methods

    @@ -270,12 +270,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Class VirtualScroller

    @@ -170,12 +170,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • FilterMatchMode

    • Enumeration FilterMatchMode

    @@ -23,23 +23,23 @@

    Enumeration Members

    @@ -112,12 +112,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • FilterOperator

    • Enumeration FilterOperator

    @@ -23,8 +23,8 @@

    Enumeration Members

    @@ -52,12 +52,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • MessageSeverity

    • Enumeration MessageSeverity

    @@ -23,10 +23,10 @@

    Enumeration Members

    @@ -60,12 +60,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • SortOrder

    • Enumeration SortOrder

    @@ -23,9 +23,9 @@

    Enumeration Members

    @@ -56,12 +56,12 @@

    Theme

    @@ -6,16 +6,16 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • FilterService
    • +
  • filter

    • Function filter

      @@ -53,12 +53,12 @@

      Theme

    @@ -6,16 +6,16 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • FilterService
    • +
  • register

    • Function register

      @@ -58,12 +58,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • addLocale

    • Function addLocale

      @@ -46,12 +46,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • locale

    • Function locale

      @@ -49,12 +49,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • localeOption

    • Function localeOption

      @@ -46,12 +46,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • localeOptions

    • Function localeOptions

      @@ -44,12 +44,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • updateLocaleOption

    • Function updateLocaleOption

      @@ -48,12 +48,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • updateLocaleOptions

    • Function updateLocaleOptions

      @@ -46,12 +46,12 @@

      Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function confirmDialog

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function confirmPopup

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useEventListener

    @@ -48,12 +48,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useInterval

    @@ -56,12 +56,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useLocalStorage

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useMountEffect

    @@ -48,12 +48,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useOverlayListener

    @@ -48,12 +48,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useOverlayScrollListener

    @@ -48,12 +48,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function usePrevious

    @@ -48,12 +48,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useResizeListener

    @@ -48,12 +48,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useSessionStorage

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useStorage

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useTimeout

    @@ -56,12 +56,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useUnmountEffect

    @@ -48,12 +48,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function useUpdateEffect

    @@ -52,12 +52,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function InputText

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Function InputTextarea

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • EventBus

    • Function EventBus

      @@ -79,12 +79,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • UniqueComponentId

    • Function UniqueComponentId

      @@ -44,12 +44,12 @@

      Theme

    @@ -6,16 +6,16 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • ZIndexUtils
    • +
  • clear

    • Function clear

      @@ -45,12 +45,12 @@

      Theme

    @@ -6,16 +6,16 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • ZIndexUtils
    • +
  • get

    • Function get

      @@ -45,12 +45,12 @@

      Theme

    @@ -6,16 +6,16 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • ZIndexUtils
    • +
  • getBase

    • Function getBase

      @@ -45,12 +45,12 @@

      Theme

    @@ -6,16 +6,16 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • ZIndexUtils
    • +
  • getCurrent

    • Function getCurrent

      @@ -45,12 +45,12 @@

      Theme

    @@ -6,16 +6,16 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • ZIndexUtils
    • +
  • set

    • Function set

      @@ -51,12 +51,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • classNames

    • Function classNames

      @@ -44,12 +44,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • mask

    • Function mask

      @@ -82,12 +82,12 @@

      Theme

    @@ -6,12 +6,12 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    PrimeReact - v9.0.0

    +

    PrimeReact - v9.0.0-beta.1

    License: MIT npm version primereact @@ -135,12 +135,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface AccordionProps

    +
    +

    Defines valid properties in Accordion component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • AccordionProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    activeIndex? +children? +collapseIcon? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +expandIcon? +multiple? +transitionOptions? +
    +
    +

    Methods

    +
    onTabChange? +onTabClose? +onTabOpen? +
    +
    +

    Properties

    +
    +

    Optional activeIndex

    +
    activeIndex?: null | number | number[]
    +

    Active index or indexes of the element. Use an array of numbers for multiple indexes. +The multiple prop must be set to true in order to specify multiple indexes.

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional collapseIcon

    +
    collapseIcon?: IconType<AccordionProps>
    +

    Icon of an expanded tab.

    + +

    Default Value

    pi pi-chevron-down

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional expandIcon

    +
    expandIcon?: IconType<AccordionProps>
    +

    Icon of a collapsed tab.

    + +

    Default Value

    pi pi-chevron-right

    +
    +
    +

    Optional multiple

    +
    multiple?: boolean
    +

    When enabled, multiple tabs can be activated at the same time.

    + +

    Default Value

    false

    +
    +
    +

    Optional transitionOptions

    +
    transitionOptions?: CSSTransitionProps<undefined>
    +

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    +
    +
    +

    Methods

    +
    +

    Optional onTabChange

    +
    +
    +

    Optional onTabClose

    +
      + +
    • +

      Callback to invoke when an active tab is collapsed by clicking on the header.

      +
      +
      +

      Parameters

      +
      +

      Returns void

    +
    +

    Optional onTabOpen

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/accordion.AccordionTabChangeEvent.html b/docs/api/9.0.0-beta.1/interfaces/accordion.AccordionTabChangeEvent.html new file mode 100644 index 0000000000..6c21ef2123 --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/accordion.AccordionTabChangeEvent.html @@ -0,0 +1,186 @@ +AccordionTabChangeEvent | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface AccordionTabChangeEvent

    +
    +

    Custom tab change event.

    + +

    See

    onTabChange

    +
    +
    +

    Hierarchy

    +
      +
    • AccordionTabChangeEvent
    +
    +
    +
    + +
    +
    +

    Properties

    +
    index +originalEvent +
    +
    +

    Properties

    +
    +

    index

    +
    index: number | number[]
    +

    Opened tab index.

    +
    +
    +

    originalEvent

    +
    originalEvent: MouseEvent<HTMLElement, MouseEvent>
    +

    Browser mouse event.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/scrollpanel.ScrollPanelProps.html b/docs/api/9.0.0-beta.1/interfaces/accordion.AccordionTabCloseEvent.html similarity index 69% rename from docs/api/9.0.0/interfaces/scrollpanel.ScrollPanelProps.html rename to docs/api/9.0.0-beta.1/interfaces/accordion.AccordionTabCloseEvent.html index de24bfc701..83ea791cfe 100644 --- a/docs/api/9.0.0/interfaces/scrollpanel.ScrollPanelProps.html +++ b/docs/api/9.0.0-beta.1/interfaces/accordion.AccordionTabCloseEvent.html @@ -1,4 +1,4 @@ -ScrollPanelProps | PrimeReact - v9.0.0
    +AccordionTabCloseEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    Interface ScrollPanelProps

    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • accordion
    • +
  • AccordionTabCloseEvent
    • +

    Interface AccordionTabCloseEvent

    -

    Defines valid properties in ScrollPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +

    Custom tab close event.

    + +

    See

    onTabClose

    Hierarchy

      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
    • AccordionTabOpenEvent
        -
      • ScrollPanelProps
    +
  • AccordionTabCloseEvent
    • @@ -32,21 +34,23 @@

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    +
    +

    index

    +
    index: number
    +

    Opened tab index.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +

    Inherited from AccordionTabOpenEvent.index

    +
    +

    originalEvent

    +
    originalEvent: MouseEvent<HTMLElement, MouseEvent>
    +

    Browser mouse event.

    +
    @@ -65,12 +69,12 @@

    Theme

    @@ -6,25 +6,27 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    Interface AvatarGroupProps

    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • accordion
    • +
  • AccordionTabOpenEvent
    • +

    Interface AccordionTabOpenEvent

    -

    Defines valid properties in Avatar component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +

    Custom tab open event.

    + +

    See

    onTabOpen

    Hierarchy

      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
    • AccordionTabOpenEvent
        -
      • AvatarGroupProps
    +
  • AccordionTabCloseEvent
    • @@ -32,21 +34,21 @@

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    index

    +
    index: number
    +

    Opened tab index.

    +
    +
    +

    originalEvent

    +
    originalEvent: MouseEvent<HTMLElement, MouseEvent>
    +

    Browser mouse event.

    +
    @@ -65,15 +67,15 @@

    Theme

    @@ -6,25 +6,23 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    Interface RadioButtonProps

    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • accordion
    • +
  • AccordionTabProps
    • +

    Interface AccordionTabProps

    -

    Defines valid properties in RadioButton component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +

    Defines valid properties in AccordionTab component.

    Hierarchy

      -
    • Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onChange" | "ref"> -
        -
      • RadioButtonProps
    +
  • AccordionTabProps
    • @@ -32,107 +30,79 @@

    Properties

    -
    -

    Optional checked

    -
    checked?: boolean
    -

    Specifies whether a checkbox should be checked or not.

    - -

    Default Value

    false

    -
    -

    Optional Readonly children

    +

    Optional Readonly children

    children?: ReactNode

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +
    +

    Optional className

    +
    className?: string
    +

    Style class of the tab header and content.

    +
    +
    +

    Optional contentClassName

    +
    contentClassName?: string
    +

    Style class of the tab content.

    +
    +
    +

    Optional contentStyle

    +
    contentStyle?: CSSProperties
    +

    Inline style of the tab content.

    +

    Optional disabled

    disabled?: boolean
    -

    When present, it specifies that the element value cannot be altered.

    +

    Whether the tab is disabled.

    Default Value

    false

    -
    -
    -

    Optional inputId

    -
    inputId?: string
    -

    Unique identifier of the inner native radiobutton.

    -
    -

    Optional inputRef

    -
    inputRef?: Ref<HTMLInputElement>
    -

    Reference of the input element.

    +
    +

    Optional header

    +
    header?: ReactNode
    +

    Used to define the header of the tab.

    -
    -

    Optional name

    -
    name?: string
    -

    Name of the checkbox element.

    -
    -
    -

    Optional required

    -
    required?: boolean
    -

    When present, it specifies that an input field must be filled out before submitting the form.

    - -

    Default Value

    false

    -
    -
    -

    Optional tooltip

    -
    tooltip?: string
    -

    Content of the tooltip.

    +
    +

    Optional headerClassName

    +
    headerClassName?: string
    +

    Style class of the tab header.

    -
    -

    Optional tooltipOptions

    -
    tooltipOptions?: default
    -

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    +
    +

    Optional headerStyle

    +
    headerStyle?: CSSProperties
    +

    Inline style of the tab header.

    -
    -

    Optional value

    -
    value?: any
    -

    Value of the checkbox.

    -
    -
    -

    Methods

    -
    -

    Optional onChange

    -
    +
    +

    Optional headerTemplate

    +
    headerTemplate?: ReactNode | ((props: AccordionTabProps) => ReactNode)
    +

    Custom header template of the tab.

    +
    +
    +

    Optional style

    +
    style?: CSSProperties
    +

    Inline style of the tab header and content.

    +
    +
    +

    Optional tabIndex

    +
    tabIndex?: number
    +

    Index of the element in tabbing order.

    + +

    Default Value

    0

    +
    @@ -151,12 +121,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • APIOptions

    • Interface APIOptions

    Hierarchy

    @@ -27,22 +27,22 @@

    Properties

    Optional appendTo

    -
    appendTo?: AppendToType
    +
    appendTo?: AppendToType

    Optional autoZIndex

    autoZIndex?: boolean
    @@ -51,10 +51,10 @@

    OptionalcssTransition?: boolean

    Optional filterMatchModeOptions

    -
    filterMatchModeOptions?: FilterMatchModeOptions
    +
    filterMatchModeOptions?: FilterMatchModeOptions

    Optional inputStyle

    -
    inputStyle?: InputStyleType
    +
    inputStyle?: InputStyleType

    Optional locale

    locale?: string
    @@ -69,7 +69,7 @@

    Optionalripple?: boolean

    Optional zIndex

    -
    zIndex?: ZIndexOptions
    +
    zIndex?: ZIndexOptions
    @@ -88,12 +88,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • FilterMatchModeOptions

    • Interface FilterMatchModeOptions

    Hierarchy

    @@ -27,9 +27,9 @@

    Properties

    @@ -60,12 +60,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • PrimeIconsOptions

    • Interface PrimeIconsOptions

    Hierarchy

    @@ -27,242 +27,242 @@

    Properties

    @@ -992,12 +992,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • ZIndexOptions

    • Interface ZIndexOptions

    Hierarchy

    @@ -27,11 +27,11 @@

    Properties

    @@ -68,12 +68,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface AutoCompleteChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface AutoCompleteCompleteEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface AutoCompleteDropdownClickEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface AutoCompleteProps

    @@ -37,7 +37,23 @@

    Properties

    autoHighlight? children? className? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? delay? disabled? dropdown? @@ -135,10 +151,200 @@

    Optional

    Style class of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional delay

    delay?: number
    @@ -176,7 +382,7 @@

    Default Value

    true

    Optional dropdownIcon

    -
    dropdownIcon?: IconType<AutoCompleteProps>
    +
    dropdownIcon?: IconType<AutoCompleteProps>

    Icon class of the dropdown icon.

    Default Value

    pi pi-chevron-down

    @@ -302,7 +508,7 @@

    Default Value

    false

    Optional removeIcon

    -
    removeIcon?: IconType<AutoCompleteProps>
    +
    removeIcon?: IconType<AutoCompleteProps>

    Icon of the remove chip element in multiple mode.

    Default Value

    pi pi-times-circle

    @@ -360,7 +566,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -636,12 +842,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface AutoCompleteSelectEvent

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface AutoCompleteUnselectEvent

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface AvatarProps

    @@ -33,7 +33,23 @@

    Properties

    children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? icon? image? imageAlt? @@ -56,13 +72,203 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional icon

    -
    icon?: IconType<AvatarProps>
    +
    icon?: IconType<AvatarProps>

    Defines the icon to display.

    @@ -159,12 +365,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1 +
    +
    +
    +
    + +

    Interface AvatarGroupProps

    +
    +

    Defines valid properties in Avatar component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • AvatarGroupProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/badge.BadgeProps.html b/docs/api/9.0.0-beta.1/interfaces/badge.BadgeProps.html new file mode 100644 index 0000000000..f33f535d0f --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/badge.BadgeProps.html @@ -0,0 +1,433 @@ +BadgeProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface BadgeProps

    +
    +

    Defines valid properties in Badge component. In addition to these, all properties of HTMLSpanElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> +
        +
      • BadgeProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +severity? +size? +value? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional severity

    +
    severity?: null | "success" | "warning" | "info" | "danger"
    +

    Severity type of the badge.

    + +

    Default Value

    null

    +
    +
    +

    Optional size

    +
    size?: null | "normal" | "large" | "xlarge"
    +

    Size of the badge, valid options are "large" and "xlarge".

    + +

    Default Value

    null

    +
    +
    +

    Optional value

    +
    value?: any
    +

    Value to display inside the badge.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/blockui.BlockUIProps.html b/docs/api/9.0.0-beta.1/interfaces/blockui.BlockUIProps.html new file mode 100644 index 0000000000..1a56fc7e8a --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/blockui.BlockUIProps.html @@ -0,0 +1,490 @@ +BlockUIProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface BlockUIProps

    +
    +

    Defines valid properties in BlockUI component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • BlockUIProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    autoZIndex? +baseZIndex? +blocked? +children? +containerClassName? +containerStyle? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +fullScreen? +template? +
    +
    +

    Methods

    +
    onBlocked? +onUnblocked? +
    +
    +

    Properties

    +
    +

    Optional autoZIndex

    +
    autoZIndex?: boolean
    +

    Whether to automatically manage layering.

    + +

    Default Value

    true

    +
    +
    +

    Optional baseZIndex

    +
    baseZIndex?: number
    +

    Base zIndex value to use in layering.

    + +

    Default Value

    0

    +
    +
    +

    Optional blocked

    +
    blocked?: boolean
    +

    Controls the blocked state.

    + +

    Default Value

    false

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional containerClassName

    +
    containerClassName?: string
    +

    Style class of the container element.

    +
    +
    +

    Optional containerStyle

    +
    containerStyle?: CSSProperties
    +

    Inline style of the container element.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional fullScreen

    +
    fullScreen?: boolean
    +

    When enabled, the whole document gets blocked.

    + +

    Default Value

    false

    +
    +
    +

    Optional template

    +
    template?: ReactNode | ((props: BlockUIProps) => ReactNode)
    +

    Template of mask.

    +
    +
    +

    Methods

    +
    +

    Optional onBlocked

    +
      + +
    • +

      Fired when the element gets blocked.

      +
      +

      Returns void

    +
    +

    Optional onUnblocked

    +
      + +
    • +

      Fired when the element gets unblocked.

      +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/breadcrumb.BreadCrumbProps.html b/docs/api/9.0.0-beta.1/interfaces/breadcrumb.BreadCrumbProps.html new file mode 100644 index 0000000000..bfb9f7dd0c --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/breadcrumb.BreadCrumbProps.html @@ -0,0 +1,422 @@ +BreadCrumbProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface BreadCrumbProps

    +
    +

    Defines valid properties in BreadCrumb component. In addition to these, all properties of HTMLElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> +
        +
      • BreadCrumbProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +home? +model? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional home

    +
    home?: MenuItem
    +

    MenuItem configuration for the home icon.

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    An array of menuitems.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/button.ButtonProps.html b/docs/api/9.0.0-beta.1/interfaces/button.ButtonProps.html new file mode 100644 index 0000000000..4d25f7c52a --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/button.ButtonProps.html @@ -0,0 +1,493 @@ +ButtonProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface ButtonProps

    +
    +

    Defines valid properties in Button component. In addition to these, all properties of HTMLButtonElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "ref"> +
        +
      • ButtonProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    badge? +badgeClassName? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +disabled? +icon? +iconPos? +label? +loading? +loadingIcon? +tooltip? +tooltipOptions? +visible? +
    +
    +

    Properties

    +
    +

    Optional badge

    +
    badge?: string
    +

    Value of the badge.

    +
    +
    +

    Optional badgeClassName

    +
    badgeClassName?: string
    +

    Style class of the badge.

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional disabled

    +
    disabled?: boolean
    +

    When present, it specifies that the element should be disabled.

    + +

    Default Value

    false

    +
    +
    +

    Optional icon

    +
    icon?: IconType<ButtonProps>
    +

    Name of the icon or JSX.Element for icon.

    +
    +
    +

    Optional iconPos

    +
    iconPos?: "left" | "top" | "bottom" | "right"
    +

    Position of the icon, valid values are "left", "right", "top" and "bottom".

    + +

    Default Value

    left

    +
    +
    +

    Optional label

    +
    label?: string
    +

    Text of the button.

    +
    +
    +

    Optional loading

    +
    loading?: boolean
    +

    Display loading icon of the button

    + +

    Default Value

    false

    +
    +
    +

    Optional loadingIcon

    +
    loadingIcon?: IconType<ButtonProps>
    +

    Name of the loading icon or JSX.Element for loading icon.

    +
    +
    +

    Optional tooltip

    +
    tooltip?: string
    +

    Content of the tooltip.

    +
    +
    +

    Optional tooltipOptions

    +
    tooltipOptions?: TooltipOptions
    +

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    +
    +
    +

    Optional visible

    +
    visible?: boolean
    +

    When present, it specifies that the element should be visible.

    + +

    Default Value

    true

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/calendar.CalendarChangeEvent.html b/docs/api/9.0.0-beta.1/interfaces/calendar.CalendarChangeEvent.html similarity index 96% rename from docs/api/9.0.0/interfaces/calendar.CalendarChangeEvent.html rename to docs/api/9.0.0-beta.1/interfaces/calendar.CalendarChangeEvent.html index c57554e627..404a35497c 100644 --- a/docs/api/9.0.0/interfaces/calendar.CalendarChangeEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/calendar.CalendarChangeEvent.html @@ -1,4 +1,4 @@ -CalendarChangeEvent | PrimeReact - v9.0.0
    +CalendarChangeEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarDateTemplateEvent

    @@ -89,12 +89,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarMonthChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarMonthNavigatorTemplateEvent

    @@ -123,12 +123,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarProps

    @@ -204,7 +204,7 @@

    Default Value

    24

    Optional icon

    -
    icon?: IconType<CalendarProps>
    +
    icon?: IconType<CalendarProps>

    Icon of the calendar button.

    Default Value

    pi pi-calendar

    @@ -475,7 +475,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -831,12 +831,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarSelectEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarViewChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarVisibleChangeEvent

    @@ -79,12 +79,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CalendarYearNavigatorTemplateEvent

    @@ -123,12 +123,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface CaptchaProps

    +
    +

    Defines valid properties in Captcha component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • CaptchaProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +language? +siteKey? +size? +sourceUrl? +theme? +type? +
    +
    +

    Methods

    +
    onExpire? +onResponse? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional language

    +
    language?: string
    +

    Language of the widget.

    + +

    Default Value

    en

    +
    +
    +

    Optional siteKey

    +
    siteKey?: string
    +

    Public sitekey.

    +
    +
    +

    Optional size

    +
    size?: string
    +

    The size of the widget.

    + +

    Default Value

    normal

    +
    +
    +

    Optional sourceUrl

    +
    sourceUrl?: string
    +

    Source URL of the Captcha as some countries do not allow Google access.

    + +

    Default Value

    https://www.google.com/recaptcha/api.js?render=explicit

    +
    +
    +

    Optional theme

    +
    theme?: string
    +

    The color scheme of the widget.

    + +

    Default Value

    light

    +
    +
    +

    Optional type

    +
    type?: string
    +

    The type of CAPTCHA to serve.

    + +

    Default Value

    image

    +
    +
    +

    Methods

    +
    +

    Optional onExpire

    +
      + +
    • +

      The callback function to be executed when the recaptcha response expires and the user needs to solve a new CAPTCHA.

      +
      +

      Returns void

    +
    +

    Optional onResponse

    +
      + +
    • +

      The callback function to be executed when the user submits a successful CAPTCHA response.

      +
      +
      +

      Parameters

      +
        +
      • +
        response: any
        +

        Current response

        +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/card.CardProps.html b/docs/api/9.0.0-beta.1/interfaces/card.CardProps.html new file mode 100644 index 0000000000..89365b01bc --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/card.CardProps.html @@ -0,0 +1,436 @@ +CardProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface CardProps

    +
    +

    Defines valid properties in Card component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "title"> +
        +
      • CardProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +footer? +header? +subTitle? +title? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional footer

    +
    footer?: ReactNode | ((props: CardProps) => ReactNode)
    +

    Footer of the card.

    +
    +
    +

    Optional header

    +
    header?: ReactNode | ((props: CardProps) => ReactNode)
    +

    Header of the card.

    +
    +
    +

    Optional subTitle

    +
    subTitle?: ReactNode | ((props: CardProps) => ReactNode)
    +

    Secondary title of the card.

    +
    +
    +

    Optional title

    +
    title?: ReactNode | ((props: CardProps) => ReactNode)
    +

    Title of the card.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/carousel.CarouselPageChangeEvent.html b/docs/api/9.0.0-beta.1/interfaces/carousel.CarouselPageChangeEvent.html similarity index 93% rename from docs/api/9.0.0/interfaces/carousel.CarouselPageChangeEvent.html rename to docs/api/9.0.0-beta.1/interfaces/carousel.CarouselPageChangeEvent.html index e31cd1a213..34265d50f1 100644 --- a/docs/api/9.0.0/interfaces/carousel.CarouselPageChangeEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/carousel.CarouselPageChangeEvent.html @@ -1,4 +1,4 @@ -CarouselPageChangeEvent | PrimeReact - v9.0.0
    +CarouselPageChangeEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CarouselPageChangeEvent

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CarouselProps

    @@ -37,7 +37,23 @@

    Properties

    circular? containerClassName? contentClassName? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? footer? header? indicatorsContentClassName? @@ -86,10 +102,200 @@

    OptionalcontentClassName?: string

    Style class of main content.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional footer

    footer?: ReactNode
    @@ -212,12 +418,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CarouselResponsiveOption

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CascadeSelectChangeEvent

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CascadeSelectGroupChangeEvent

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CascadeSelectProps

    @@ -36,7 +36,23 @@

    Properties

    ariaLabelledBy? children? className? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? disabled? dropdownIcon? @@ -91,10 +107,200 @@

    Optional

    Style class of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -278,12 +484,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ChartProps

    @@ -111,12 +111,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CheckboxChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface CheckboxProps

    @@ -32,10 +32,26 @@
    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface ChipProps

    +
    +

    Defines valid properties in Chip component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • ChipProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +icon? +image? +imageAlt? +label? +removable? +removeIcon? +template? +
    +
    +

    Methods

    +
    onImageError? +onRemove? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional icon

    +
    icon?: IconType<ChipProps>
    +

    Defines the icon to display.

    +
    +
    +

    Optional image

    +
    image?: string
    +

    Defines the image to display.

    +
    +
    +

    Optional imageAlt

    +
    imageAlt?: string
    +

    It specifies an alternate text for an image, if the image cannot be displayed.

    +
    +
    +

    Optional label

    +
    label?: string
    +

    Defines the text to display.

    +
    +
    +

    Optional removable

    +
    removable?: boolean
    +

    Whether to display a remove icon.

    + +

    Default Value

    false

    +
    +
    +

    Optional removeIcon

    +
    removeIcon?: string
    +

    Icon of the remove element.

    + +

    Default Value

    pi pi-times-circle

    +
    +
    +

    Optional template

    +
    template?: TemplateType<ChipProps>
    +

    Template of an item.

    +
    +
    +

    Methods

    +
    +

    Optional onImageError

    +
      + +
    • +

      This event is triggered if an error occurs while loading an image file.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: SyntheticEvent<Element, Event>
        +

        Browser event.

        +
      +

      Returns void

    +
    +

    Optional onRemove

    +
      + +
    • +

      Callback to invoke when a chip is removed.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: MouseEvent<HTMLElement, MouseEvent>
        +

        Browser event.

        +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/chips.ChipsAddEvent.html b/docs/api/9.0.0-beta.1/interfaces/chips.ChipsAddEvent.html similarity index 94% rename from docs/api/9.0.0/interfaces/chips.ChipsAddEvent.html rename to docs/api/9.0.0-beta.1/interfaces/chips.ChipsAddEvent.html index 4e0fc7fa2e..5e0a168e1e 100644 --- a/docs/api/9.0.0/interfaces/chips.ChipsAddEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/chips.ChipsAddEvent.html @@ -1,4 +1,4 @@ -ChipsAddEvent | PrimeReact - v9.0.0
    +ChipsAddEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ChipsAddEvent

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ChipsChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ChipsProps

    @@ -36,7 +36,23 @@

    Properties

    allowDuplicate? ariaLabelledBy? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? disabled? inputId? inputRef? @@ -88,10 +104,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional disabled

    disabled?: boolean
    @@ -112,7 +318,7 @@

    Optional

    Optional keyfilter

    -
    keyfilter?: KeyFilterType
    +
    keyfilter?: KeyFilterType

    Format definition of the keys to block.

    @@ -160,7 +366,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -294,12 +500,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ChipsRemovableOptions

    @@ -70,12 +70,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ChipsRemoveEvent

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColorPickerChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColorPickerHSBType

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColorPickerProps

    @@ -34,7 +34,23 @@
    appendTo? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? defaultColor? format? inline? @@ -68,10 +84,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional defaultColor

    defaultColor?: string
    @@ -120,7 +326,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -184,12 +390,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColorPickerRGBType

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnBodyExpanderOptions

    @@ -87,12 +87,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnBodyOptions

    @@ -90,12 +90,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnBodyRowEditorOptions

    @@ -149,12 +149,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnEditorOptions

    @@ -117,12 +117,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnEvent

    @@ -113,12 +113,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterApplyClickEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterApplyTemplateOptions

    @@ -88,12 +88,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterClearTemplateOptions

    @@ -74,12 +74,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterConstraintAddEvent

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterConstraintRemoveEvent

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterElementTemplateOptions

    @@ -117,12 +117,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterEvent

    @@ -92,12 +92,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterFooterTemplateOptions

    @@ -93,12 +93,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterHeaderTemplateOptions

    @@ -93,12 +93,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterMatchModeChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterMatchModeOptions

    @@ -41,12 +41,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterMeta

    @@ -41,12 +41,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterMetaData

    @@ -60,12 +60,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterMetaDataWithConstraint

    @@ -60,12 +60,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterModelOptions

    @@ -41,12 +41,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFilterOperatorChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnFooterOptions

    @@ -60,12 +60,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnHeaderOptions

    @@ -56,12 +56,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnProps

    @@ -339,7 +339,7 @@

    Optional

    Optional headerTooltipOptions

    -
    headerTooltipOptions?: default
    +
    headerTooltipOptions?: TooltipOptions

    Configuration of the header tooltip, refer to the tooltip documentation for more information.

    @@ -705,12 +705,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnSortEvent

    @@ -81,12 +81,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnSortMetaData

    @@ -62,12 +62,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ColumnGroupProps

    @@ -57,12 +57,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ConfirmDialogOptions

    @@ -117,12 +117,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ConfirmDialogProps

    @@ -102,7 +102,7 @@

    Optional

    Optional acceptIcon

    -
    acceptIcon?: IconType<ConfirmDialogProps>
    +
    acceptIcon?: IconType<ConfirmDialogProps>

    Icon of the accept button.

    @@ -237,7 +237,7 @@

    OptionalInherited from Omit.headerStyle

    Optional icon

    -
    icon?: IconType<ConfirmDialogProps>
    +
    icon?: IconType<ConfirmDialogProps>

    Icon to display next to the message.

    @@ -332,7 +332,7 @@

    Optional

    Optional rejectIcon

    -
    rejectIcon?: IconType<ConfirmDialogProps>
    +
    rejectIcon?: IconType<ConfirmDialogProps>

    Icon of the reject button.

    @@ -593,12 +593,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ConfirmDialogReturn

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ConfirmPopupOptions

    @@ -123,12 +123,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ConfirmPopupProps

    @@ -65,7 +65,7 @@

    Optional

    Optional acceptIcon

    -
    acceptIcon?: IconType<ConfirmPopupProps>
    +
    acceptIcon?: IconType<ConfirmPopupProps>

    Icon of the accept button.

    @@ -106,7 +106,7 @@

    Optional

    Optional icon

    -
    icon?: IconType<ConfirmPopupProps>
    +
    icon?: IconType<ConfirmPopupProps>

    Icon to display next to the message.

    @@ -121,7 +121,7 @@

    Optional

    Optional rejectIcon

    -
    rejectIcon?: IconType<ConfirmPopupProps>
    +
    rejectIcon?: IconType<ConfirmPopupProps>

    Icon of the reject button.

    @@ -215,12 +215,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ConfirmPopupReturn

    @@ -69,12 +69,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface ContextMenuProps

    +
    +

    Defines valid properties in ContextMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • ContextMenuProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    appendTo? +autoZIndex? +baseZIndex? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +global? +model? +transitionOptions? +
    +
    +

    Methods

    +
    onHide? +onShow? +
    +
    +

    Properties

    +
    +

    Optional appendTo

    +
    appendTo?: null | HTMLElement | "self"
    +

    DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

    + +

    Default Value

    document.body

    +
    +
    +

    Optional autoZIndex

    +
    autoZIndex?: boolean
    +

    Whether to automatically manage layering.

    + +

    Default Value

    true

    +
    +
    +

    Optional baseZIndex

    +
    baseZIndex?: number
    +

    Base zIndex value to use in layering.

    + +

    Default Value

    0

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional global

    +
    global?: boolean
    +

    Attaches the menu to document instead of a particular item.

    + +

    Default Value

    false

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    An array of menuitems.

    +
    +
    +

    Optional transitionOptions

    +
    transitionOptions?: CSSTransitionProps<undefined>
    +

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    +
    +
    +

    Methods

    +
    +

    Optional onHide

    +
      + +
    • +

      Callback to invoke when a popup menu is hidden.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: SyntheticEvent<Element, Event>
        +

        Browser event.

        +
      +

      Returns void

    +
    +

    Optional onShow

    +
      + +
    • +

      Callback to invoke when a popup menu is shown.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: SyntheticEvent<Element, Event>
        +

        Browser event.

        +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/datascroller.DataScrollerLazyLoadEvents.html b/docs/api/9.0.0-beta.1/interfaces/datascroller.DataScrollerLazyLoadEvents.html similarity index 94% rename from docs/api/9.0.0/interfaces/datascroller.DataScrollerLazyLoadEvents.html rename to docs/api/9.0.0-beta.1/interfaces/datascroller.DataScrollerLazyLoadEvents.html index b40a7a1caa..88d7906046 100644 --- a/docs/api/9.0.0/interfaces/datascroller.DataScrollerLazyLoadEvents.html +++ b/docs/api/9.0.0-beta.1/interfaces/datascroller.DataScrollerLazyLoadEvents.html @@ -1,4 +1,4 @@ -DataScrollerLazyLoadEvents | PrimeReact - v9.0.0
    +DataScrollerLazyLoadEvents | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataScrollerLazyLoadEvents

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataScrollerProps

    @@ -34,7 +34,23 @@
    buffer? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? emptyMessage? footer? header? @@ -65,10 +81,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional emptyMessage

    emptyMessage?: ReactNode | ((props: DataScrollerProps) => ReactNode)
    @@ -170,12 +376,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableCellClassNameOptions<TValue>

    @@ -88,12 +88,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableCellClickEvent<TValue>

    @@ -100,12 +100,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableColReorderEvent

    @@ -77,12 +77,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableColumnResizeEndEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableColumnResizerClickEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableDataSelectableEvent<TValue>

    @@ -70,12 +70,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableEditingRows

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableExpandedRows

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableExportFunctionEvent<TValue>

    @@ -82,12 +82,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableFilterEvent

    @@ -62,12 +62,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableFilterMeta

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableFilterMetaData

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableFooterTemplateOptions<TValue>

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableHeaderTemplateOptions<TValue>

    @@ -64,12 +64,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableOperatorFilterMetaData

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,18 +6,20 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTablePageEvent

    Custom pagination event

    + +

    See

    onPage

    Hierarchy

    @@ -78,12 +80,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableProps<TValue>

    @@ -49,7 +49,23 @@

    Properties

    contextMenuSelection? csvSeparator? currentPageReportTemplate? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? defaultSortOrder? dragSelection? @@ -256,10 +272,200 @@

    OptionalDefault Value

    ({currentPage} of {totalPages})

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -1417,12 +1623,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowClassNameOptions<TValue>

    @@ -64,12 +64,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowClickEvent

    @@ -76,12 +76,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowEditCompleteEvent

    @@ -87,12 +87,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowEditEvent

    @@ -77,12 +77,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowEditSaveEvent

    @@ -82,12 +82,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowEditValidatorOptions<TValue>

    @@ -64,12 +64,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowEvent

    @@ -68,12 +68,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowExpansionTemplate

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowGroupFooterTemplateOptions<T>

    @@ -85,12 +85,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowGroupHeaderTemplateOptions<TValue>

    @@ -76,12 +76,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowMouseEvent

    @@ -76,12 +76,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowReorderEvent<TValue>

    @@ -82,12 +82,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableRowToggleEvent

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableSelectAllChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableSelectEvent

    @@ -73,12 +73,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableSelectionChangeEvent<TValue>

    @@ -79,12 +79,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableShowRowReorderElementOptions<TValue>

    @@ -70,12 +70,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableShowSelectionElementOptions<TValue>

    @@ -70,12 +70,12 @@

    Theme

    @@ -6,18 +6,20 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableSortEvent

    Custom sort event.

    + +

    See

    onSort

    Hierarchy

    @@ -72,12 +74,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableSortMeta

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableUnselectEvent

    @@ -76,12 +76,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableValue

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataTableValueArray

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataViewLayoutOptionsChangeEvent

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataViewLayoutOptionsProps

    @@ -102,12 +102,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataViewPageEvent

    @@ -77,12 +77,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DataViewProps

    @@ -35,7 +35,23 @@

    Properties

    alwaysShowPaginator? children? currentPageReportTemplate? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? emptyMessage? first? @@ -88,10 +104,200 @@

    OptionalDefault Value

    (&123;currentPage&125; of &123;totalPages&125;)

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -286,12 +492,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1 +
    +
    +
    +
    + +

    Interface DeferredContentProps

    +
    +

    Defines valid properties in DeferredContent component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • DeferredContentProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +
    +
    +

    Methods

    +
    onLoad? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Methods

    +
    +

    Optional onLoad

    +
      + +
    • +

      Callback to invoke when deferred content is loaded.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: SyntheticEvent<Element, Event>
        +

        Event object

        +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/dialog.DialogBreakpoints.html b/docs/api/9.0.0-beta.1/interfaces/dialog.DialogBreakpoints.html similarity index 93% rename from docs/api/9.0.0/interfaces/dialog.DialogBreakpoints.html rename to docs/api/9.0.0-beta.1/interfaces/dialog.DialogBreakpoints.html index 06920ea57e..8697fb6dc3 100644 --- a/docs/api/9.0.0/interfaces/dialog.DialogBreakpoints.html +++ b/docs/api/9.0.0-beta.1/interfaces/dialog.DialogBreakpoints.html @@ -1,4 +1,4 @@ -DialogBreakpoints | PrimeReact - v9.0.0
    +DialogBreakpoints | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DialogBreakpoints

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DialogMaximizeEvent

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DialogProps

    @@ -466,12 +466,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface DividerProps

    +
    +

    Defines valid properties in Divider component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • DividerProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    align? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +layout? +type? +
    +
    +

    Properties

    +
    +

    Optional align

    +
    align?: "center" | "left" | "top" | "bottom" | "right"
    +

    Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional layout

    +
    layout?: "horizontal" | "vertical"
    +

    Specifies the orientation, valid values are "horizontal" and "vertical".

    + +

    Default Value

    horizontal

    +
    +
    +

    Optional type

    +
    type?: "dashed" | "dotted" | "solid"
    +

    Border style type, default is "solid" and other options are "dashed" and "dotted".

    + +

    Default Value

    solid

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/dock.DockFooterTemplateOptions.html b/docs/api/9.0.0-beta.1/interfaces/dock.DockFooterTemplateOptions.html similarity index 93% rename from docs/api/9.0.0/interfaces/dock.DockFooterTemplateOptions.html rename to docs/api/9.0.0-beta.1/interfaces/dock.DockFooterTemplateOptions.html index 3ea2036266..0d4437a571 100644 --- a/docs/api/9.0.0/interfaces/dock.DockFooterTemplateOptions.html +++ b/docs/api/9.0.0-beta.1/interfaces/dock.DockFooterTemplateOptions.html @@ -1,4 +1,4 @@ -DockFooterTemplateOptions | PrimeReact - v9.0.0
    +DockFooterTemplateOptions | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DockFooterTemplateOptions

    @@ -62,12 +62,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DockHeaderTemplateOptions

    @@ -61,12 +61,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface DockProps

    +
    +

    Defines valid properties in Dock component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • DockProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +footer? +header? +magnification? +model? +position? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional footer

    +
    footer?: ReactNode | ((options: DockFooterTemplateOptions) => ReactNode)
    +

    Template of footer element.

    +
    +
    +

    Optional header

    +
    header?: ReactNode | ((options: DockHeaderTemplateOptions) => ReactNode)
    +

    Template of header element.

    +
    +
    +

    Optional magnification

    +
    magnification?: boolean
    +

    Whether to allow scale animation.

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    MenuModel instance to define the action items.

    +
    +
    +

    Optional position

    +
    position?: "left" | "top" | "bottom" | "right"
    +

    Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.

    + +

    Default Value

    bottom

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/dropdown.DropdownChangeEvent.html b/docs/api/9.0.0-beta.1/interfaces/dropdown.DropdownChangeEvent.html similarity index 96% rename from docs/api/9.0.0/interfaces/dropdown.DropdownChangeEvent.html rename to docs/api/9.0.0-beta.1/interfaces/dropdown.DropdownChangeEvent.html index 07f55f1bc9..58a908c917 100644 --- a/docs/api/9.0.0/interfaces/dropdown.DropdownChangeEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/dropdown.DropdownChangeEvent.html @@ -1,4 +1,4 @@ -DropdownChangeEvent | PrimeReact - v9.0.0
    +DropdownChangeEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DropdownChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DropdownFilterEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DropdownFilterOptions

    @@ -88,12 +88,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface DropdownProps

    @@ -39,7 +39,23 @@

    Properties

    children? className? clearIcon? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? disabled? dropdownIcon? @@ -137,15 +153,205 @@

    OptionalOverrides Omit.className

    Optional clearIcon

    -
    clearIcon?: IconType<DropdownProps>
    +
    clearIcon?: IconType<DropdownProps>

    Icon class of the dropdown icon.

    Default Value

    pi pi-times

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -161,7 +367,7 @@

    Default Value

    false

    Overrides Omit.disabled

    Optional dropdownIcon

    -
    dropdownIcon?: IconType<DropdownProps>
    +
    dropdownIcon?: IconType<DropdownProps>

    Icon class of the dropdown icon.

    Default Value

    pi pi-chevron-down

    @@ -381,7 +587,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -535,12 +741,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface EditorProps

    @@ -33,7 +33,23 @@

    Properties

    children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? formats? headerTemplate? modules? @@ -57,10 +73,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional formats

    formats?: string[]
    @@ -174,12 +380,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface EditorSelectionChangeEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface EditorTextChangeEvent

    @@ -77,12 +77,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FieldsetProps

    @@ -34,7 +34,23 @@
    children? collapsed? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? legend? toggleable? transitionOptions? @@ -61,10 +77,200 @@

    OptionalDefault Value

    false

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional legend

    legend?: ReactNode
    @@ -163,12 +369,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FieldsetToggleEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadBeforeSendEvent

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadBeforeUploadEvent

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadErrorEvent

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadFilesEvent

    @@ -61,12 +61,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadHandlerEvent

    @@ -68,12 +68,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadHandlerOptions

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadHeaderTemplateOptions

    @@ -87,12 +87,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadOptions

    @@ -45,7 +45,7 @@

    Optional

    Optional icon

    -
    icon?: IconType<FileUploadProps>
    +
    icon?: IconType<FileUploadProps>

    Defines the image to display.

    @@ -81,12 +81,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadProgressEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadProps

    @@ -447,12 +447,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadRemoveEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadSelectEvent

    @@ -68,12 +68,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FileUploadUploadEvent

    @@ -70,12 +70,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ItemTemplateOptions

    @@ -126,12 +126,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface GalleriaItemChangeEvent

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface GalleriaProps

    @@ -38,7 +38,23 @@

    Properties

    changeItemOnIndicatorHover? children? circular? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? footer? fullScreen? header? @@ -109,10 +125,200 @@

    OptionalDefault Value

    false

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional footer

    footer?: ReactNode
    @@ -326,12 +532,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface GalleriaResponsiveOptions

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface GMapEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface GMapProps

    @@ -33,7 +33,23 @@

    Properties

    children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? options? overlays?
    @@ -56,10 +72,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional options

    options?: object
    @@ -196,12 +402,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface EventOptions

    @@ -94,12 +94,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OverlayEventOptions

    @@ -90,12 +90,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ResizeEventOptions

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ImageProps

    @@ -34,7 +34,23 @@
    alt? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? downloadable? height? imageClassName? @@ -63,10 +79,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional downloadable

    downloadable?: boolean
    @@ -152,12 +358,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1 +
    +
    +
    +
    + +

    Interface InplaceProps

    +
    +

    Defines valid properties in Inplace component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • InplaceProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    active? +ariaLabel? +children? +closable? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +disabled? +
    +
    +

    Methods

    +
    onClose? +onOpen? +onToggle? +
    +
    +

    Properties

    +
    +

    Optional active

    +
    active?: boolean
    +

    Whether the content is displayed or not.

    + +

    Default Value

    false

    +
    +
    +

    Optional ariaLabel

    +
    ariaLabel?: string
    +

    Used to define a string that labels the component.

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional closable

    +
    closable?: boolean
    +

    Displays a button to switch back to display mode.

    + +

    Default Value

    false

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional disabled

    +
    disabled?: boolean
    +

    When present, it specifies that the element should be disabled.

    + +

    Default Value

    false

    +
    +
    +

    Methods

    +
    +

    Optional onClose

    +
      + +
    • +

      Callback to invoke when inplace is closed.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: MouseEvent<HTMLElement, MouseEvent>
        +

        Browser event.

        +
      +

      Returns void

    +
    +

    Optional onOpen

    +
      + +
    • +

      Callback to invoke when inplace is opened.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: MouseEvent<HTMLElement, MouseEvent>
        +

        Browser event.

        +
      +

      Returns void

    +
    +

    Optional onToggle

    +
      + +
    • +

      Callback to invoke when inplace is opened or closed.

      +
      +
      +

      Parameters

      +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/inplace.InplaceToggleEvent.html b/docs/api/9.0.0-beta.1/interfaces/inplace.InplaceToggleEvent.html similarity index 94% rename from docs/api/9.0.0/interfaces/inplace.InplaceToggleEvent.html rename to docs/api/9.0.0-beta.1/interfaces/inplace.InplaceToggleEvent.html index ac3a94183c..c879aa0908 100644 --- a/docs/api/9.0.0/interfaces/inplace.InplaceToggleEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/inplace.InplaceToggleEvent.html @@ -1,4 +1,4 @@ -InplaceToggleEvent | PrimeReact - v9.0.0
    +InplaceToggleEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InplaceToggleEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InputMaskChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InputMaskCompleteEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InputMaskProps

    @@ -34,7 +34,23 @@
    autoClear? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? disabled? keyfilter? mask? @@ -70,10 +86,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional disabled

    disabled?: boolean
    @@ -84,7 +290,7 @@

    Default Value

    false

    Overrides Omit.disabled

    Optional keyfilter

    -
    keyfilter?: KeyFilterType
    +
    keyfilter?: KeyFilterType

    Format definition of the keys to block.

    @@ -124,7 +330,7 @@

    OptionalOverrides Omit.tooltip

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -251,12 +457,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InputNumberChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InputNumberProps

    @@ -39,7 +39,23 @@

    Properties

    children? currency? currencyDisplay? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? decrementButtonClassName? decrementButtonIcon? disabled? @@ -130,10 +146,200 @@

    OptionalDefault Value

    symbol

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional decrementButtonClassName

    decrementButtonClassName?: string
    @@ -307,7 +513,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -427,12 +633,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InputNumberValueChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InputSwitchChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface InputSwitchProps

    @@ -32,10 +32,26 @@
    +
    +
    +
    + +

    Interface InputTextProps

    +
    +

    Defines valid properties in InputText component. In addition to these, all properties of HTMLInputElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "onInput" | "ref" | "value"> +
        +
      • InputTextProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +keyfilter? +tooltip? +tooltipOptions? +validateOnly? +value? +
    +
    +

    Methods

    +
    onInput? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional keyfilter

    +
    keyfilter?: KeyFilterType
    +

    Format definition of the keys to block.

    +
    +
    +

    Optional tooltip

    +
    tooltip?: string
    +

    Content of the tooltip.

    +
    +
    +

    Optional tooltipOptions

    +
    tooltipOptions?: TooltipOptions
    +

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    +
    +
    +

    Optional validateOnly

    +
    validateOnly?: boolean
    +

    When enabled, instead of blocking keys, input is validated internally to test against the regular expression.

    + +

    Default Value

    false

    +
    +
    +

    Optional value

    +
    value?: string
    +

    The value of component

    +
    +
    +

    Methods

    +
    +

    Optional onInput

    +
      + +
    • +

      Callback to invoke while typing value on input

      +
      +
      +

      Parameters

      +
        +
      • +
        event: FormEvent<HTMLInputElement>
        +

        Browser event

        +
        • +
      • +
        validatePattern: boolean
        +

        Whether to validate the value

        +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/inputtextarea.InputTextareaProps.html b/docs/api/9.0.0-beta.1/interfaces/inputtextarea.InputTextareaProps.html new file mode 100644 index 0000000000..01c691f472 --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/inputtextarea.InputTextareaProps.html @@ -0,0 +1,445 @@ +InputTextareaProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface InputTextareaProps

    +
    +

    Defines valid properties in InputTextarea component. In addition to these, all properties of HTMLTextAreaElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref" | "value"> +
        +
      • InputTextareaProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    autoResize? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +keyfilter? +tooltip? +tooltipOptions? +value? +
    +
    +

    Properties

    +
    +

    Optional autoResize

    +
    autoResize?: boolean
    +

    When present, height of textarea changes as being typed.

    + +

    Default Value

    false

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional keyfilter

    +
    keyfilter?: KeyFilterType
    +

    Format definition of the keys to block.

    +
    +
    +

    Optional tooltip

    +
    tooltip?: string
    +

    Content of the tooltip.

    +
    +
    +

    Optional tooltipOptions

    +
    tooltipOptions?: TooltipOptions
    +

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    +
    +
    +

    Optional value

    +
    value?: string
    +

    The value of component

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/knob.KnobChangeEvent.html b/docs/api/9.0.0-beta.1/interfaces/knob.KnobChangeEvent.html similarity index 93% rename from docs/api/9.0.0/interfaces/knob.KnobChangeEvent.html rename to docs/api/9.0.0-beta.1/interfaces/knob.KnobChangeEvent.html index 422654f9ed..eb46e81d39 100644 --- a/docs/api/9.0.0/interfaces/knob.KnobChangeEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/knob.KnobChangeEvent.html @@ -1,4 +1,4 @@ -KnobChangeEvent | PrimeReact - v9.0.0
    +KnobChangeEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface KnobChangeEvent

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface KnobProps

    @@ -34,7 +34,23 @@
    children? className? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? disabled? id? max? @@ -70,10 +86,200 @@

    Optional

    Style class of the element.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional disabled

    disabled?: boolean
    @@ -223,12 +429,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ListBoxChangeEvent

    @@ -94,12 +94,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ListBoxChangeTargetOptions

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ListBoxFilterOptions

    @@ -86,12 +86,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ListBoxFilterTemplateOptions

    @@ -111,12 +111,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ListBoxFilterValueChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ListBoxProps

    @@ -34,7 +34,23 @@
    ariaLabelledBy? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? disabled? emptyFilterMessage? @@ -82,10 +98,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -233,7 +439,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -297,12 +503,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface MegaMenuProps

    +
    +

    Defines valid properties in MegaMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • MegaMenuProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +end? +model? +orientation? +start? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional end

    +
    end?: ReactNode | ((props: MegaMenuProps) => ReactNode)
    +

    The template of trailing element

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    An array of menuitems.

    +
    +
    +

    Optional orientation

    +
    orientation?: "horizontal" | "vertical"
    +

    Defines the orientation, valid values are horizontal and vertical.

    + +

    Default Value

    horizontal

    +
    +
    +

    Optional start

    +
    start?: ReactNode | ((props: MegaMenuProps) => ReactNode)
    +

    The template of starting element.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/mention.MentionItemTemplateOptions.html b/docs/api/9.0.0-beta.1/interfaces/mention.MentionItemTemplateOptions.html similarity index 94% rename from docs/api/9.0.0/interfaces/mention.MentionItemTemplateOptions.html rename to docs/api/9.0.0-beta.1/interfaces/mention.MentionItemTemplateOptions.html index c0fabd0b43..0f0a9504ee 100644 --- a/docs/api/9.0.0/interfaces/mention.MentionItemTemplateOptions.html +++ b/docs/api/9.0.0-beta.1/interfaces/mention.MentionItemTemplateOptions.html @@ -1,4 +1,4 @@ -MentionItemTemplateOptions | PrimeReact - v9.0.0
    +MentionItemTemplateOptions | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MentionItemTemplateOptions

    @@ -60,12 +60,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MentionProps

    @@ -35,7 +35,23 @@

    Properties

    autoHighlight? autoResize? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? delay? field? footerTemplate? @@ -83,10 +99,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional delay

    delay?: number
    @@ -294,12 +500,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MentionSearchEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MentionSelectEvent

    @@ -65,12 +65,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface MenuProps

    +
    +

    Defines valid properties in Menu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • MenuProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    appendTo? +autoZIndex? +baseZIndex? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +model? +popup? +transitionOptions? +
    +
    +

    Methods

    +
    onHide? +onShow? +
    +
    +

    Properties

    +
    +

    Optional appendTo

    +
    appendTo?: null | HTMLElement | "self"
    +

    DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

    + +

    Default Value

    document.body

    +
    +
    +

    Optional autoZIndex

    +
    autoZIndex?: boolean
    +

    Whether to automatically manage layering.

    + +

    Default Value

    true

    +
    +
    +

    Optional baseZIndex

    +
    baseZIndex?: number
    +

    Base zIndex value to use in layering.

    + +

    Default Value

    0

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    An array of menuitems.

    +
    +
    +

    Optional popup

    +
    popup?: boolean
    +

    Defines if menu would displayed as a popup.

    + +

    Default Value

    false

    +
    +
    +

    Optional transitionOptions

    +
    transitionOptions?: CSSTransitionProps<undefined>
    +

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    +
    +
    +

    Methods

    +
    +

    Optional onHide

    +
      + +
    • +

      Callback to invoke when a popup menu is hidden.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: SyntheticEvent<Element, Event>
        +

        Browser event.

        +
      +

      Returns void

    +
    +

    Optional onShow

    +
      + +
    • +

      Callback to invoke when a popup menu is shown.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: SyntheticEvent<Element, Event>
        +

        Browser event.

        +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/menubar.MenubarProps.html b/docs/api/9.0.0-beta.1/interfaces/menubar.MenubarProps.html new file mode 100644 index 0000000000..bff6d61524 --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/menubar.MenubarProps.html @@ -0,0 +1,429 @@ +MenubarProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface MenubarProps

    +
    +

    Defines valid properties in Menubar component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • MenubarProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +end? +model? +start? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional end

    +
    end?: ReactNode | ((props: MenubarProps) => ReactNode)
    +

    The template of trailing element.

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    An array of menuitems.

    +
    +
    +

    Optional start

    +
    start?: ReactNode | ((props: MenubarProps) => ReactNode)
    +

    The template of starting element.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/menuitem.MenuItem.html b/docs/api/9.0.0-beta.1/interfaces/menuitem.MenuItem.html similarity index 97% rename from docs/api/9.0.0/interfaces/menuitem.MenuItem.html rename to docs/api/9.0.0-beta.1/interfaces/menuitem.MenuItem.html index b3aea57939..9c50010f99 100644 --- a/docs/api/9.0.0/interfaces/menuitem.MenuItem.html +++ b/docs/api/9.0.0-beta.1/interfaces/menuitem.MenuItem.html @@ -1,4 +1,4 @@ -MenuItem | PrimeReact - v9.0.0
    +MenuItem | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MenuItem

    @@ -164,12 +164,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MenuItemCommandEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MenuItemOptions

    @@ -102,12 +102,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface MessageProps

    +
    +

    Defines valid properties in Message component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • MessageProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +content? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +icon? +severity? +text? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional content

    +
    content?: ReactNode | ((props: MessageProps) => ReactNode)
    +

    Custom template of the message.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional icon

    +
    icon?: IconType<MessageProps>
    +

    Icon for the message. If not set it will default to severity icon.

    + +

    Default Value

    based on severity

    +
    +
    +

    Optional severity

    +
    severity?: "error" | "success" | "info" | "warn"
    +

    Severity level of the message.

    +
    +
    +

    Optional text

    +
    text?: ReactNode | ((props: MessageProps) => ReactNode)
    +

    Text of the message.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/messages.MessagesMessage.html b/docs/api/9.0.0-beta.1/interfaces/messages.MessagesMessage.html similarity index 95% rename from docs/api/9.0.0/interfaces/messages.MessagesMessage.html rename to docs/api/9.0.0-beta.1/interfaces/messages.MessagesMessage.html index 53a1c228c7..ef8fedde01 100644 --- a/docs/api/9.0.0/interfaces/messages.MessagesMessage.html +++ b/docs/api/9.0.0-beta.1/interfaces/messages.MessagesMessage.html @@ -1,4 +1,4 @@ -MessagesMessage | PrimeReact - v9.0.0
    +MessagesMessage | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MessagesMessage

    @@ -58,7 +58,7 @@

    Optional

    Optional icon

    -
    icon?: IconType<MessagesProps>
    +
    icon?: IconType<MessagesProps>

    Defines the icon to display.

    Default Value

    Defaults to severity icon

    @@ -108,12 +108,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1

    +
    +
    +
    +
    + +

    Interface MessagesProps

    +
    +

    Defines valid properties in Messages component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • MessagesProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +transitionOptions? +
    +
    +

    Methods

    +
    onClick? +onRemove? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional transitionOptions

    +
    transitionOptions?: CSSTransitionProps<undefined>
    +

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    +
    +
    +

    Methods

    +
    +

    Optional onClick

    +
      + +
    • +

      Callback to invoke when a message gets clicked.

      +
      +
      +

      Parameters

      +
      +

      Returns void

    +
    +

    Optional onRemove

    +
      + +
    • +

      Callback to invoke when a message is removed.

      +
      +
      +

      Parameters

      +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/multiselect.MultiSelectAllEvent.html b/docs/api/9.0.0-beta.1/interfaces/multiselect.MultiSelectAllEvent.html similarity index 94% rename from docs/api/9.0.0/interfaces/multiselect.MultiSelectAllEvent.html rename to docs/api/9.0.0-beta.1/interfaces/multiselect.MultiSelectAllEvent.html index b9f454fa62..ac52cdb6c6 100644 --- a/docs/api/9.0.0/interfaces/multiselect.MultiSelectAllEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/multiselect.MultiSelectAllEvent.html @@ -1,4 +1,4 @@ -MultiSelectAllEvent | PrimeReact - v9.0.0
    +MultiSelectAllEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiSelectAllEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiSelectChangeEvent

    @@ -94,12 +94,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiSelectChangeTargetOptions

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiSelectFilterEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiSelectFilterOptions

    @@ -86,12 +86,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiSelectHeaderCheckboxChangeEvent

    @@ -61,12 +61,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiSelectPanelHeaderTemplateEvent

    @@ -142,12 +142,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiSelectProps

    @@ -36,7 +36,23 @@

    Properties

    ariaLabelledBy? children? className? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? disabled? display? @@ -125,10 +141,200 @@

    Optional

    Style class of the element.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -151,7 +357,7 @@

    Default Value

    comma

    Optional dropdownIcon

    -
    dropdownIcon?: IconType<MultiSelectProps>
    +
    dropdownIcon?: IconType<MultiSelectProps>

    Icon class of the dropdown icon.

    Default Value

    pi pi-chevron-down

    @@ -329,7 +535,7 @@

    OptionalOverrides Omit.placeholder

    Optional removeIcon

    -
    removeIcon?: IconType<MultiSelectProps>
    +
    removeIcon?: IconType<MultiSelectProps>

    Icon of the remove chip element.

    Default Value

    pi pi-times-circle

    @@ -405,7 +611,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -542,12 +748,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiStateCheckboxChangeEvent

    @@ -94,12 +94,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiStateCheckboxChangeTargetOptions

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiStateCheckboxIconTemplateEvent

    @@ -75,12 +75,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiStateCheckboxOption

    @@ -46,7 +46,7 @@

    className

    icon

    -
    icon: IconType<MultiStateCheckboxProps>
    +
    icon: IconType<MultiStateCheckboxProps>

    The icon of the option.

    @@ -72,12 +72,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface MultiStateCheckboxProps

    @@ -33,7 +33,23 @@

    Properties

    children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? disabled? empty? @@ -58,10 +74,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -117,7 +323,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -161,12 +367,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OrderListChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OrderListFilterOptions

    @@ -84,12 +84,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OrderListProps

    @@ -33,7 +33,23 @@

    Properties

    children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? dragdrop? filter? @@ -59,10 +75,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -178,12 +384,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OrganizationChartNodeData

    @@ -81,12 +81,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OrganizationChartNodeSelectEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OrganizationChartNodeUnselectEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OrganizationChartProps

    @@ -30,7 +30,23 @@

    Properties

    children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? selection? selectionMode? value? @@ -50,10 +66,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional selection

    selection?: null | OrganizationChartNodeData | OrganizationChartNodeData[]
    @@ -149,12 +355,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OverlayPanelBreakpoints

    @@ -44,12 +44,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface OverlayPanelProps

    +
    +

    Defines valid properties in OverlayPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • OverlayPanelProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    appendTo? +ariaCloseLabel? +breakpoints? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +dismissable? +showCloseIcon? +transitionOptions? +
    +
    +

    Methods

    +
    onHide? +onShow? +
    +
    +

    Properties

    +
    +

    Optional appendTo

    +
    appendTo?: null | HTMLElement | "self"
    +

    DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

    + +

    Default Value

    document.body

    +
    +
    +

    Optional ariaCloseLabel

    +
    ariaCloseLabel?: string
    +

    Aria label of the close icon.

    + +

    Default Value

    close

    +
    +
    +

    Optional breakpoints

    +
    breakpoints?: OverlayPanelBreakpoints
    +

    Object literal to define widths per screen size.

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional dismissable

    +
    dismissable?: boolean
    +

    Enables to hide the overlay when outside is clicked.

    + +

    Default Value

    true

    +
    +
    +

    Optional showCloseIcon

    +
    showCloseIcon?: boolean
    +

    When enabled, displays a close icon at top right corner.

    + +

    Default Value

    false

    +
    +
    +

    Optional transitionOptions

    +
    transitionOptions?: CSSTransitionProps<undefined>
    +

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    +
    +
    +

    Methods

    +
    +

    Optional onHide

    +
      + +
    • +

      Callback to invoke when overlay becomes hidden.

      +
      +

      Returns void

    +
    +

    Optional onShow

    +
      + +
    • +

      Callback to invoke when overlay becomes visible.

      +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/overlayservice.OverlayServiceEvent.html b/docs/api/9.0.0-beta.1/interfaces/overlayservice.OverlayServiceEvent.html similarity index 94% rename from docs/api/9.0.0/interfaces/overlayservice.OverlayServiceEvent.html rename to docs/api/9.0.0-beta.1/interfaces/overlayservice.OverlayServiceEvent.html index ab5a5211bf..041390ee5b 100644 --- a/docs/api/9.0.0/interfaces/overlayservice.OverlayServiceEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/overlayservice.OverlayServiceEvent.html @@ -1,4 +1,4 @@ -OverlayServiceEvent | PrimeReact - v9.0.0
    +OverlayServiceEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OverlayServiceEvent

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface OverlayServiceOptions

    @@ -108,12 +108,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorChangeEvent

    @@ -94,12 +94,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorChangeTargetOptions

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorCurrentPageReportOptions

    @@ -105,12 +105,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorFirstPageLinkOptions

    @@ -102,12 +102,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorJumpToPageInputOptions

    @@ -106,12 +106,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorLastPageLinkOptions

    @@ -102,12 +102,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorNextPageLinkOptions

    @@ -102,12 +102,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorPageLinksOptions

    @@ -114,12 +114,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorPageStateEvent

    @@ -77,12 +77,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorPrevPageLinkOptions

    @@ -102,12 +102,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorProps

    @@ -35,7 +35,23 @@

    Properties

    alwaysShow? children? currentPageReportTemplate? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dropdownAppendTo? first? leftContent? @@ -70,10 +86,200 @@

    OptionalDefault Value

    ({currentPage} of {totalPages})

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dropdownAppendTo

    dropdownAppendTo?: null | HTMLElement | "self"
    @@ -166,12 +372,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorRowsPerPageDropdownOptions

    @@ -126,12 +126,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorTemplateOptions

    @@ -105,12 +105,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PaginatorViewOptions

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PanelHeaderTemplateOptions

    @@ -36,7 +36,7 @@

    Properties

    iconsClassName iconsElement props -titleClssName +titleClassName titleElement togglerClassName togglerElement @@ -78,9 +78,9 @@

    propsprops: PanelProps

    The props of the Panel component.

    -
    -

    titleClssName

    -
    titleClssName: string
    +
    +

    titleClassName

    +
    titleClassName: string

    Style class of the panel title.

    @@ -138,12 +138,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PanelProps

    @@ -35,7 +35,23 @@

    Properties

    children? collapseIcon? collapsed? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? expandIcon? header? headerTemplate? @@ -59,7 +75,7 @@

    OptionalOverrides Omit.children

    Optional collapseIcon

    -
    collapseIcon?: IconType<PanelProps>
    +
    collapseIcon?: IconType<PanelProps>

    Icon of a collapsed tab.

    Default Value

    pi pi-minus

    @@ -71,13 +87,203 @@

    OptionalDefault Value

    false

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional expandIcon

    -
    expandIcon?: IconType<PanelProps>
    +
    expandIcon?: IconType<PanelProps>

    Icon of a expanded tab.

    Default Value

    pi pi-plus

    @@ -176,12 +382,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PanelToggleEvent

    @@ -65,12 +65,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface PanelMenuProps

    +
    +

    Defines valid properties in PanelMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • PanelMenuProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +model? +multiple? +transitionOptions? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    An array of menuitems.

    +
    +
    +

    Optional multiple

    +
    multiple?: boolean
    +

    Whether multiple tabs can be activated at the same time or not.

    + +

    Default Value

    false

    +
    +
    +

    Optional transitionOptions

    +
    transitionOptions?: CSSTransitionProps<undefined>
    +

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/password.PasswordIconEvent.html b/docs/api/9.0.0-beta.1/interfaces/password.PasswordIconEvent.html similarity index 95% rename from docs/api/9.0.0/interfaces/password.PasswordIconEvent.html rename to docs/api/9.0.0-beta.1/interfaces/password.PasswordIconEvent.html index 216f020e1d..bd90d371d1 100644 --- a/docs/api/9.0.0/interfaces/password.PasswordIconEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/password.PasswordIconEvent.html @@ -1,4 +1,4 @@ -PasswordIconEvent | PrimeReact - v9.0.0
    +PasswordIconEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PasswordIconEvent

    @@ -85,12 +85,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PasswordProps

    @@ -35,7 +35,23 @@

    Properties

    appendTo? children? content? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? feedback? footer? header? @@ -84,10 +100,200 @@

    Optionalcontent?: ReactNode | ((props: PasswordProps) => ReactNode)

    Template of panel content if "feedback" is enabled.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional feedback

    feedback?: boolean
    @@ -132,7 +338,7 @@

    Optional

    Optional keyfilter

    -
    keyfilter?: KeyFilterType
    +
    keyfilter?: KeyFilterType

    Format definition of the keys to block.

    @@ -194,7 +400,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -264,12 +470,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PickListChangeEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PickListEvent

    @@ -72,12 +72,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PickListFilterInputProps

    @@ -94,12 +94,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PickListFilterTemplateOptions

    @@ -81,12 +81,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface PickListProps

    @@ -400,12 +400,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface ProgressBarProps

    +
    +

    Defines valid properties in ProgressBar component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • ProgressBarProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +color? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +mode? +showValue? +unit? +value? +
    +
    +

    Methods

    +
    displayValueTemplate? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional color

    +
    color?: string
    +

    Color for the background of the progress.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional mode

    +
    mode?: "determinate" | "indeterminate"
    +

    Defines the mode of the progress, valid values are "determinate" and "indeterminate".

    + +

    Default Value

    determinate

    +
    +
    +

    Optional showValue

    +
    showValue?: boolean
    +

    Show or hide progress bar value.

    + +

    Default Value

    true

    +
    +
    +

    Optional unit

    +
    unit?: string
    +

    Unit sign appended to the value.

    + +

    Default Value

    %

    +
    +
    +

    Optional value

    +
    value?: null | string | number
    +

    Current value of the progress.

    +
    +
    +

    Methods

    +
    +

    Optional displayValueTemplate

    +
      + +
    • +

      Custom display value template

      +
      +
      +

      Parameters

      +
        +
      • +
        value: undefined | null | string | number
      +

      Returns ReactNode

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/progressspinner.ProgressSpinnerProps.html b/docs/api/9.0.0-beta.1/interfaces/progressspinner.ProgressSpinnerProps.html new file mode 100644 index 0000000000..29789db1d3 --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/progressspinner.ProgressSpinnerProps.html @@ -0,0 +1,433 @@ +ProgressSpinnerProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface ProgressSpinnerProps

    +
    +

    Defines valid properties in ProgressSpinner component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • ProgressSpinnerProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    animationDuration? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +fill? +strokeWidth? +
    +
    +

    Properties

    +
    +

    Optional animationDuration

    +
    animationDuration?: string
    +

    Duration of the rotate animation.

    + +

    Default Value

    2s

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional fill

    +
    fill?: string
    +

    Color for the background of the circle.

    +
    +
    +

    Optional strokeWidth

    +
    strokeWidth?: string
    +

    Width of the circle stroke.

    + +

    Default Value

    2

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/radiobutton.RadioButtonChangeEvent.html b/docs/api/9.0.0-beta.1/interfaces/radiobutton.RadioButtonChangeEvent.html similarity index 96% rename from docs/api/9.0.0/interfaces/radiobutton.RadioButtonChangeEvent.html rename to docs/api/9.0.0-beta.1/interfaces/radiobutton.RadioButtonChangeEvent.html index d8a34042f3..640ff20164 100644 --- a/docs/api/9.0.0/interfaces/radiobutton.RadioButtonChangeEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/radiobutton.RadioButtonChangeEvent.html @@ -1,4 +1,4 @@ -RadioButtonChangeEvent | PrimeReact - v9.0.0
    +RadioButtonChangeEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface RadioButtonChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface RadioButtonProps

    +
    +

    Defines valid properties in RadioButton component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onChange" | "ref"> +
        +
      • RadioButtonProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    checked? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +disabled? +inputId? +inputRef? +name? +required? +tooltip? +tooltipOptions? +value? +
    +
    +

    Methods

    +
    onChange? +
    +
    +

    Properties

    +
    +

    Optional checked

    +
    checked?: boolean
    +

    Specifies whether a checkbox should be checked or not.

    + +

    Default Value

    false

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional disabled

    +
    disabled?: boolean
    +

    When present, it specifies that the element value cannot be altered.

    + +

    Default Value

    false

    +
    +
    +

    Optional inputId

    +
    inputId?: string
    +

    Unique identifier of the inner native radiobutton.

    +
    +
    +

    Optional inputRef

    +
    inputRef?: Ref<HTMLInputElement>
    +

    Reference of the input element.

    +
    +
    +

    Optional name

    +
    name?: string
    +

    Name of the checkbox element.

    +
    +
    +

    Optional required

    +
    required?: boolean
    +

    When present, it specifies that an input field must be filled out before submitting the form.

    + +

    Default Value

    false

    +
    +
    +

    Optional tooltip

    +
    tooltip?: string
    +

    Content of the tooltip.

    +
    +
    +

    Optional tooltipOptions

    +
    tooltipOptions?: TooltipOptions
    +

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    +
    +
    +

    Optional value

    +
    value?: any
    +

    Value of the checkbox.

    +
    +
    +

    Methods

    +
    +

    Optional onChange

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/rating.RatingChangeEvent.html b/docs/api/9.0.0-beta.1/interfaces/rating.RatingChangeEvent.html similarity index 96% rename from docs/api/9.0.0/interfaces/rating.RatingChangeEvent.html rename to docs/api/9.0.0-beta.1/interfaces/rating.RatingChangeEvent.html index ff0535dd1c..55a7a80b28 100644 --- a/docs/api/9.0.0/interfaces/rating.RatingChangeEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/rating.RatingChangeEvent.html @@ -1,4 +1,4 @@ -RatingChangeEvent | PrimeReact - v9.0.0
    +RatingChangeEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface RatingChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface RatingProps

    @@ -36,7 +36,23 @@

    Properties

    cancelIcon? cancelIconProps? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? disabled? offIcon? offIconProps? @@ -63,7 +79,7 @@

    Default Value

    true

    Optional cancelIcon

    -
    cancelIcon?: IconType<RatingProps>
    +
    cancelIcon?: IconType<RatingProps>

    ClassName of the cancel icon component.

    Default Value

    pi pi-ban

    @@ -79,10 +95,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional disabled

    disabled?: boolean
    @@ -93,7 +299,7 @@

    Default Value

    false

    Overrides Omit.disabled

    Optional offIcon

    -
    offIcon?: IconType<RatingProps>
    +
    offIcon?: IconType<RatingProps>

    ClassName of the off icon component.

    Default Value

    pi pi-star

    @@ -105,7 +311,7 @@

    Optional

    Optional onIcon

    -
    onIcon?: IconType<RatingProps>
    +
    onIcon?: IconType<RatingProps>

    ClassName of the on icon component.

    Default Value

    pi pi-star-fill

    @@ -137,7 +343,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -181,12 +387,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface RippleProps

    @@ -57,12 +57,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface RowProps

    @@ -69,12 +69,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface ScrollPanelProps

    +
    +

    Defines valid properties in ScrollPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • ScrollPanelProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/scrolltop.ScrollTopProps.html b/docs/api/9.0.0-beta.1/interfaces/scrolltop.ScrollTopProps.html similarity index 95% rename from docs/api/9.0.0/interfaces/scrolltop.ScrollTopProps.html rename to docs/api/9.0.0-beta.1/interfaces/scrolltop.ScrollTopProps.html index fa6613ec57..dce113f92a 100644 --- a/docs/api/9.0.0/interfaces/scrolltop.ScrollTopProps.html +++ b/docs/api/9.0.0-beta.1/interfaces/scrolltop.ScrollTopProps.html @@ -1,4 +1,4 @@ -ScrollTopProps | PrimeReact - v9.0.0
    +ScrollTopProps | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ScrollTopProps

    @@ -65,7 +65,7 @@

    Optional

    Optional icon

    -
    icon?: IconType<ScrollTopProps>
    +
    icon?: IconType<ScrollTopProps>

    Icon to display.

    Default Value

    pi pi-chevron-up

    @@ -130,12 +130,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SelectButtonChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SelectButtonProps

    @@ -34,7 +34,23 @@
    ariaLabelledBy? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dataKey? disabled? multiple? @@ -66,10 +82,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dataKey

    dataKey?: string
    @@ -124,7 +330,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -190,12 +396,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SelectItem

    @@ -53,7 +53,7 @@

    Default Value

    false

    Optional icon

    -
    icon?: IconType<SelectItem>
    +
    icon?: IconType<SelectItem>

    Icon to display to the option.

    @@ -89,12 +89,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SidebarProps

    @@ -38,7 +38,23 @@

    Properties

    blockScroll? children? closeOnEscape? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? dismissable? fullScreen? icons? @@ -98,10 +114,200 @@

    OptionalDefault Value

    true

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional dismissable

    dismissable?: boolean
    @@ -202,12 +408,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1 +
    +
    +
    +
    + +

    Interface SkeletonProps

    +
    +

    Defines valid properties in Skeleton component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • SkeletonProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    animation? +borderRadius? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +height? +shape? +size? +width? +
    +
    +

    Properties

    +
    +

    Optional animation

    +
    animation?: "none" | "wave"
    +

    Type of the animation, valid options are "wave" and "none".

    + +

    Default Value

    wave

    +
    +
    +

    Optional borderRadius

    +
    borderRadius?: string
    +

    Border radius of the element, defaults to value from theme.

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional height

    +
    height?: string
    +

    Height of the element.

    + +

    Default Value

    1rem

    +
    +
    +

    Optional shape

    +
    shape?: "circle" | "rectangle"
    +

    It specifies an alternate text for an image, if the image cannot be displayed.

    + +

    Default Value

    rectangle

    +
    +
    +

    Optional size

    +
    size?: string
    +

    Size of the Circle or Square.

    +
    +
    +

    Optional width

    +
    width?: string
    +

    Width of the element.

    + +

    Default Value

    100%

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/slidemenu.SlideMenuNavigateEvent.html b/docs/api/9.0.0-beta.1/interfaces/slidemenu.SlideMenuNavigateEvent.html similarity index 93% rename from docs/api/9.0.0/interfaces/slidemenu.SlideMenuNavigateEvent.html rename to docs/api/9.0.0-beta.1/interfaces/slidemenu.SlideMenuNavigateEvent.html index a970fe4587..68f70e42ab 100644 --- a/docs/api/9.0.0/interfaces/slidemenu.SlideMenuNavigateEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/slidemenu.SlideMenuNavigateEvent.html @@ -1,4 +1,4 @@ -SlideMenuNavigateEvent | PrimeReact - v9.0.0
    +SlideMenuNavigateEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SlideMenuNavigateEvent

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SlideMenuProps

    @@ -37,7 +37,23 @@

    Properties

    backLabel? baseZIndex? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? easing? effectDuration? menuWidth? @@ -88,10 +104,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional easing

    easing?: string
    @@ -202,12 +408,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SliderChangeEvent

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SliderProps

    @@ -34,7 +34,23 @@
    ariaLabelledBy? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? disabled? max? min? @@ -61,10 +77,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional disabled

    disabled?: boolean
    @@ -168,12 +374,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SliderSlideEndEvent

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SpeedDialButtonOptions

    @@ -99,12 +99,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SpeedDialProps

    @@ -36,7 +36,23 @@

    Properties

    buttonStyle? buttonTemplate? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? direction? disabled? hideIcon? @@ -82,10 +98,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional direction

    direction?: "left" | "right" | "up" | "down" | "up-left" | "up-right" | "down-left" | "down-right"
    @@ -102,7 +308,7 @@

    Default Value

    false

    Optional hideIcon

    -
    hideIcon?: IconType<SpeedDialProps>
    +
    hideIcon?: IconType<SpeedDialProps>

    Hide icon of the button element.

    @@ -150,7 +356,7 @@

    Default Value

    true

    Optional showIcon

    -
    showIcon?: IconType<SpeedDialProps>
    +
    showIcon?: IconType<SpeedDialProps>

    Show icon of the button element.

    Default Value

    pi pi-plus

    @@ -243,12 +449,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SplitButtonProps

    @@ -37,7 +37,23 @@

    Properties

    buttonProps? buttonTemplate? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? disabled? dropdownIcon? icon? @@ -81,7 +97,7 @@

    Optional

    Optional buttonTemplate

    -
    buttonTemplate?: TemplateType<SplitButtonProps>
    +
    buttonTemplate?: TemplateType<SplitButtonProps>

    Template of the default button.

    @@ -90,10 +106,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional disabled

    disabled?: boolean
    @@ -103,14 +309,14 @@

    Default Value

    false

    Optional dropdownIcon

    -
    dropdownIcon?: IconType<SplitButtonProps>
    +
    dropdownIcon?: IconType<SplitButtonProps>

    Icon class of the dropdown icon.

    Default Value

    pi pi-chevron-down

    Optional icon

    -
    icon?: IconType<SplitButtonProps>
    +
    icon?: IconType<SplitButtonProps>

    Name of the icon.

    @@ -127,7 +333,7 @@

    Default Value

    false

    Optional loadingIcon

    -
    loadingIcon?: IconType<SplitButtonProps>
    +
    loadingIcon?: IconType<SplitButtonProps>

    Name of the loading icon or JSX.Element for loading icon.

    @@ -162,7 +368,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -229,12 +435,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SplitterPanelProps

    @@ -81,12 +81,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface SplitterProps

    +
    +

    Defines valid properties in Splitter component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • SplitterProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +gutterSize? +layout? +stateKey? +stateStorage? +
    +
    +

    Methods

    +
    onResizeEnd? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional gutterSize

    +
    gutterSize?: number
    +

    Size of the divider in pixels.

    + +

    Default Value

    4

    +
    +
    +

    Optional layout

    +
    layout?: "horizontal" | "vertical"
    +

    Orientation of the panels, valid values are "horizontal" and "vertical".

    + +

    Default Value

    horizontal

    +
    +
    +

    Optional stateKey

    +
    stateKey?: string
    +

    Storage identifier of a stateful Splitter.

    +
    +
    +

    Optional stateStorage

    +
    stateStorage?: "local" | "session"
    +

    Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.

    + +

    Default Value

    session

    +
    +
    +

    Methods

    +
    +

    Optional onResizeEnd

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/splitter.SplitterResizeEndEvent.html b/docs/api/9.0.0-beta.1/interfaces/splitter.SplitterResizeEndEvent.html similarity index 94% rename from docs/api/9.0.0/interfaces/splitter.SplitterResizeEndEvent.html rename to docs/api/9.0.0-beta.1/interfaces/splitter.SplitterResizeEndEvent.html index bf7387d9eb..64641715f1 100644 --- a/docs/api/9.0.0/interfaces/splitter.SplitterResizeEndEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/splitter.SplitterResizeEndEvent.html @@ -1,4 +1,4 @@ -SplitterResizeEndEvent | PrimeReact - v9.0.0
    +SplitterResizeEndEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface SplitterResizeEndEvent

    @@ -65,12 +65,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface StepsProps

    +
    +

    Defines valid properties in Steps component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | "ref"> +
        +
      • StepsProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    activeIndex? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +model +readOnly? +
    +
    +

    Methods

    +
    onSelect? +
    +
    +

    Properties

    +
    +

    Optional activeIndex

    +
    activeIndex?: number
    +

    Index of the active item.

    + +

    Default Value

    0

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    model

    +
    model: undefined | MenuItem[]
    +

    An array of menuitems.

    +
    +
    +

    Optional readOnly

    +
    readOnly?: boolean
    +

    Whether the items are clickable or not.

    + +

    Default Value

    true

    +
    +
    +

    Methods

    +
    +

    Optional onSelect

    +
      + +
    • +

      Callback to invoke when the new step is selected.

      +
      +
      +

      Parameters

      +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/steps.StepsSelectEvent.html b/docs/api/9.0.0-beta.1/interfaces/steps.StepsSelectEvent.html similarity index 94% rename from docs/api/9.0.0/interfaces/steps.StepsSelectEvent.html rename to docs/api/9.0.0-beta.1/interfaces/steps.StepsSelectEvent.html index cbeec8070b..b680133c96 100644 --- a/docs/api/9.0.0/interfaces/steps.StepsSelectEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/steps.StepsSelectEvent.html @@ -1,4 +1,4 @@ -StepsSelectEvent | PrimeReact - v9.0.0
    +StepsSelectEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface StepsSelectEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface StyleClassProps

    @@ -119,12 +119,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface TabMenuProps

    +
    +

    Defines valid properties in TabMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • TabMenuProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    activeIndex? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +model? +
    +
    +

    Methods

    +
    onTabChange? +
    +
    +

    Properties

    +
    +

    Optional activeIndex

    +
    activeIndex?: number
    +

    Active index of menuitem.

    + +

    Default Value

    0

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    An array of menuitems.

    +
    +
    +

    Methods

    +
    +

    Optional onTabChange

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/tabmenu.TabMenuTabChangeEvent.html b/docs/api/9.0.0-beta.1/interfaces/tabmenu.TabMenuTabChangeEvent.html similarity index 94% rename from docs/api/9.0.0/interfaces/tabmenu.TabMenuTabChangeEvent.html rename to docs/api/9.0.0-beta.1/interfaces/tabmenu.TabMenuTabChangeEvent.html index 6b0652eb91..2b3ca49a6c 100644 --- a/docs/api/9.0.0/interfaces/tabmenu.TabMenuTabChangeEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/tabmenu.TabMenuTabChangeEvent.html @@ -1,4 +1,4 @@ -TabMenuTabChangeEvent | PrimeReact - v9.0.0
    +TabMenuTabChangeEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TabMenuTabChangeEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TabPanelHeaderTemplateOptions

    @@ -148,12 +148,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TabPanelProps

    @@ -133,12 +133,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TabViewProps

    @@ -34,7 +34,23 @@
    activeIndex? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? panelContainerClassName? panelContainerStyle? renderActiveOnly? @@ -62,10 +78,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional panelContainerClassName

    panelContainerClassName?: string
    @@ -170,12 +376,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TabViewTabChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TabViewTabCloseEvent

    @@ -65,12 +65,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface TagProps

    +
    +

    Defines valid properties in Tag component. In addition to these, all properties of HTMLSpanElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> +
        +
      • TagProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +icon? +rounded? +severity? +value? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional icon

    +
    icon?: IconType<TagProps>
    +

    Icon of the tag to display next to the value.

    +
    +
    +

    Optional rounded

    +
    rounded?: boolean
    +

    Whether the corners of the tag are rounded.

    + +

    Default Value

    false

    +
    +
    +

    Optional severity

    +
    severity?: null | "success" | "warning" | "info" | "danger"
    +

    Severity type of the tag.

    + +

    Default Value

    null

    +
    +
    +

    Optional value

    +
    value?: ReactNode
    +

    Value to display inside the tag.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/terminal-1.TerminalServiceOptions.html b/docs/api/9.0.0-beta.1/interfaces/terminal-1.TerminalServiceOptions.html similarity index 95% rename from docs/api/9.0.0/interfaces/terminal-1.TerminalServiceOptions.html rename to docs/api/9.0.0-beta.1/interfaces/terminal-1.TerminalServiceOptions.html index 7314ba3735..2536b237ec 100644 --- a/docs/api/9.0.0/interfaces/terminal-1.TerminalServiceOptions.html +++ b/docs/api/9.0.0-beta.1/interfaces/terminal-1.TerminalServiceOptions.html @@ -1,4 +1,4 @@ -TerminalServiceOptions | PrimeReact - v9.0.0
    +TerminalServiceOptions | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TerminalServiceOptions

    @@ -111,12 +111,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface TerminalProps

    +
    +

    Defines valid properties in Terminal component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • TerminalProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +prompt? +welcomeMessage? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional prompt

    +
    prompt?: string
    +

    Prompt text for each command.

    +
    +
    +

    Optional welcomeMessage

    +
    welcomeMessage?: string
    +

    Initial text to display on terminal.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/tieredmenu.TieredMenuProps.html b/docs/api/9.0.0-beta.1/interfaces/tieredmenu.TieredMenuProps.html new file mode 100644 index 0000000000..ca3fee2874 --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/tieredmenu.TieredMenuProps.html @@ -0,0 +1,497 @@ +TieredMenuProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface TieredMenuProps

    +
    +

    Defines valid properties in TieredMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • TieredMenuProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    appendTo? +autoZIndex? +baseZIndex? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +model? +popup? +transitionOptions? +
    +
    +

    Methods

    +
    onHide? +onShow? +
    +
    +

    Properties

    +
    +

    Optional appendTo

    +
    appendTo?: null | HTMLElement | "self"
    +

    DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

    + +

    Default Value

    document.body

    +
    +
    +

    Optional autoZIndex

    +
    autoZIndex?: boolean
    +

    Whether to automatically manage layering.

    + +

    Default Value

    true

    +
    +
    +

    Optional baseZIndex

    +
    baseZIndex?: number
    +

    Whether to automatically manage layering.

    + +

    Default Value

    0

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional model

    +
    model?: MenuItem[]
    +

    An array of menuitems.

    +
    +
    +

    Optional popup

    +
    popup?: boolean
    +

    Defines if menu would displayed as a popup.

    + +

    Default Value

    false

    +
    +
    +

    Optional transitionOptions

    +
    transitionOptions?: CSSTransitionProps<undefined>
    +

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    +
    +
    +

    Methods

    +
    +

    Optional onHide

    +
      + +
    • +

      Callback to invoke when a popup menu is hidden.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: SyntheticEvent<Element, Event>
        +

        Browser event.

        +
      +

      Returns void

    +
    +

    Optional onShow

    +
      + +
    • +

      Callback to invoke when a popup menu is shown.

      +
      +
      +

      Parameters

      +
        +
      • +
        event: SyntheticEvent<Element, Event>
        +

        Browser event.

        +
      +

      Returns void

    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0-beta.1/interfaces/timeline.TimelineProps.html b/docs/api/9.0.0-beta.1/interfaces/timeline.TimelineProps.html new file mode 100644 index 0000000000..b156e20619 --- /dev/null +++ b/docs/api/9.0.0-beta.1/interfaces/timeline.TimelineProps.html @@ -0,0 +1,461 @@ +TimelineProps | PrimeReact - v9.0.0-beta.1
    +
    + +
    +
    +
    +
    + +

    Interface TimelineProps

    +
    +

    Defines valid properties in Timeline component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • TimelineProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    align? +children? +content? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +dataKey? +layout? +marker? +opposite? +value? +
    +
    +

    Properties

    +
    +

    Optional align

    +
    align?: "alternate" | "left" | "top" | "bottom" | "right"
    +

    Position of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.

    + +

    Default Value

    left

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional content

    +
    content?: ReactNode | ((item: any, index: number) => ReactNode)
    +

    Template of the content.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional dataKey

    +
    dataKey?: string
    +

    Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering.

    +
    +
    +

    Optional layout

    +
    layout?: "horizontal" | "vertical"
    +

    Orientation of the timeline, valid values are "vertical" and "horizontal".

    + +

    Default Value

    vertical

    +
    +
    +

    Optional marker

    +
    marker?: ReactNode | ((item: any, index: number) => ReactNode)
    +

    Template content allows placing a custom event marker instead of the default one.

    +
    +
    +

    Optional opposite

    +
    opposite?: ReactNode | ((item: any, index: number) => ReactNode)
    +

    Template content to be placed at the other side of the bar.

    +
    +
    +

    Optional value

    +
    value?: any[]
    +

    An array of events to display.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/toast.ToastMessage.html b/docs/api/9.0.0-beta.1/interfaces/toast.ToastMessage.html similarity index 96% rename from docs/api/9.0.0/interfaces/toast.ToastMessage.html rename to docs/api/9.0.0-beta.1/interfaces/toast.ToastMessage.html index 078592a175..274fff21b7 100644 --- a/docs/api/9.0.0/interfaces/toast.ToastMessage.html +++ b/docs/api/9.0.0-beta.1/interfaces/toast.ToastMessage.html @@ -1,4 +1,4 @@ -ToastMessage | PrimeReact - v9.0.0
    +ToastMessage | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ToastMessage

    @@ -121,12 +121,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ToastProps

    @@ -35,7 +35,23 @@

    Properties

    appendTo? baseZIndex? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? position? transitionOptions?
    @@ -68,10 +84,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional position

    position?: "center" | "left" | "top" | "bottom" | "right" | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "top-center" | "bottom-center"
    @@ -151,12 +357,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ToggleButtonChangeEvent

    @@ -94,12 +94,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ToggleButtonChangeTargetOptions

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface ToggleButtonProps

    @@ -34,7 +34,23 @@
    checked? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? iconPos? offIcon? offLabel? @@ -65,10 +81,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional iconPos

    iconPos?: "left" | "right"
    @@ -78,7 +284,7 @@

    Default Value

    left

    Optional offIcon

    -
    offIcon?: IconType<ToggleButtonProps>
    +
    offIcon?: IconType<ToggleButtonProps>

    Icon for the off state.

    @@ -90,7 +296,7 @@

    Default Value

    no

    Optional onIcon

    -
    onIcon?: IconType<ToggleButtonProps>
    +
    onIcon?: IconType<ToggleButtonProps>

    Icon for the on state.

    @@ -107,7 +313,7 @@

    Optional

    Optional tooltipOptions

    -
    tooltipOptions?: default
    +
    tooltipOptions?: TooltipOptions

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    @@ -177,12 +383,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1 +
    +
    +
    +
    + +

    Interface ToolbarProps

    +
    +

    Defines valid properties in Toolbar component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> +
        +
      • ToolbarProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    center? +children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +end? +left? +right? +start? +
    +
    +

    Properties

    +
    +

    Optional center

    +
    center?: ReactNode | ((props: ToolbarProps) => ReactNode)
    +

    The template of center section.

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional end

    +
    end?: ReactNode | ((props: ToolbarProps) => ReactNode)
    +

    The template of end section.

    +
    +
    +

    Optional left

    +
    left?: ReactNode | ((props: ToolbarProps) => ReactNode)
    +

    The template of left section.

    + +

    Deprecated

    use start instead

    +
    +
    +

    Optional right

    +
    right?: ReactNode | ((props: ToolbarProps) => ReactNode)
    +

    The template of right section.

    + +

    Deprecated

    use end instead

    +
    +
    +

    Optional start

    +
    start?: ReactNode | ((props: ToolbarProps) => ReactNode)
    +

    The template of start section.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/tooltip.TooltipProps.html b/docs/api/9.0.0-beta.1/interfaces/tooltip.TooltipProps.html similarity index 92% rename from docs/api/9.0.0/interfaces/tooltip.TooltipProps.html rename to docs/api/9.0.0-beta.1/interfaces/tooltip.TooltipProps.html index 5fc080b385..7580b24e42 100644 --- a/docs/api/9.0.0/interfaces/tooltip.TooltipProps.html +++ b/docs/api/9.0.0-beta.1/interfaces/tooltip.TooltipProps.html @@ -1,4 +1,4 @@ -TooltipProps | PrimeReact - v9.0.0
    +TooltipProps | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TooltipProps

    @@ -22,7 +22,7 @@

    Interface TooltipProps

    Hierarchy

    @@ -73,13 +73,13 @@

    OptionalDefault Value

    document.body

    +

    Inherited from TooltipOptions.appendTo

    Optional at

    at?: string

    Defines which position on the target element to align the positioned tooltip.

    +

    Inherited from TooltipOptions.at

    Optional autoHide

    autoHide?: boolean
    @@ -87,7 +87,7 @@

    OptionalDefault Value

    true

    +

    Inherited from TooltipOptions.autoHide

    Optional autoZIndex

    autoZIndex?: boolean
    @@ -95,7 +95,7 @@

    OptionalDefault Value

    true

    +

    Inherited from TooltipOptions.autoZIndex

    Optional baseZIndex

    baseZIndex?: number
    @@ -103,7 +103,7 @@

    OptionalDefault Value

    0

    +

    Inherited from TooltipOptions.baseZIndex

    Optional Readonly children

    children?: ReactNode
    @@ -114,7 +114,7 @@

    OptionalclassName?: string

    Style class of the tooltip.

    +

    Inherited from TooltipOptions.className

    Optional content

    content?: string
    @@ -127,15 +127,15 @@

    OptionalDefault Value

    false

    +

    Inherited from TooltipOptions.disabled

    Optional event

    event?: "both" | "focus" | "hover"
    -

    Event to show the tooltip, valid values are hover, focus, and both.

    +

    Event to show the tooltip.

    Default Value

    hover

    +

    Inherited from TooltipOptions.event

    Optional hideDelay

    hideDelay?: number
    @@ -143,7 +143,7 @@

    OptionalDefault Value

    0

    +

    Inherited from TooltipOptions.hideDelay

    Optional hideEvent

    hideEvent?: string
    @@ -151,7 +151,7 @@

    OptionalDefault Value

    mouseleave

    +

    Inherited from TooltipOptions.hideEvent

    Optional id

    id?: string
    @@ -164,7 +164,7 @@

    OptionalDefault Value

    false

    +

    Inherited from TooltipOptions.mouseTrack

    Optional mouseTrackLeft

    mouseTrackLeft?: number
    @@ -172,7 +172,7 @@

    OptionalDefault Value

    5

    +

    Inherited from TooltipOptions.mouseTrackLeft

    Optional mouseTrackTop

    mouseTrackTop?: number
    @@ -180,21 +180,21 @@

    OptionalDefault Value

    5

    +

    Inherited from TooltipOptions.mouseTrackTop

    Optional my

    my?: string

    Defines which position on the tooltip being positioned to align with the target element.

    +

    Inherited from TooltipOptions.my

    Optional position

    position?: "left" | "top" | "bottom" | "right" | "mouse"
    -

    Position of the tooltip, valid values are mouse, right, left, top and bottom.

    +

    Position of the tooltip.

    Default Value

    right

    +

    Inherited from TooltipOptions.position

    Optional showDelay

    showDelay?: number
    @@ -202,7 +202,7 @@

    OptionalDefault Value

    0

    +

    Inherited from TooltipOptions.showDelay

    Optional showEvent

    showEvent?: string
    @@ -210,7 +210,7 @@

    OptionalDefault Value

    mouseenter

    +

    Inherited from TooltipOptions.showEvent

    Optional showOnDisabled

    showOnDisabled?: boolean
    @@ -218,13 +218,13 @@

    OptionalDefault Value

    false

    +

    Inherited from TooltipOptions.showOnDisabled

    Optional style

    style?: CSSProperties

    Style of the tooltip.

    +

    Inherited from TooltipOptions.style

    Optional target

    target?: string | string[] | HTMLElement
    @@ -237,7 +237,7 @@

    OptionalDefault Value

    0

    +

    Inherited from TooltipOptions.updateDelay

    Methods

    @@ -255,7 +255,7 @@
    event:

    Browser event

    Returns void

    +

    Inherited from TooltipOptions.onBeforeHide

    Optional onBeforeShow

    Returns void

    +

    Inherited from TooltipOptions.onBeforeShow

    Optional onHide

    Returns void

    +

    Inherited from TooltipOptions.onHide

    Optional onShow

    Returns void

    +

    Inherited from TooltipOptions.onShow

    @@ -322,12 +322,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TooltipEvent

    @@ -65,12 +65,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface TooltipHTMLAttributes

    +
    +

    In addition to React.HTMLAttributes, the following attributes can be used on any HTMLElement if the page has a PrimeReact tooltip component.

    +
    +
    +

    Hierarchy

    +
      +
    • TooltipHTMLAttributes
    +
    +
    +
    + +
    +
    +

    Properties

    +
    data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +
    +
    +

    Properties

    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/tooltipoptions.default.html b/docs/api/9.0.0-beta.1/interfaces/tooltipoptions.TooltipOptions.html similarity index 75% rename from docs/api/9.0.0/interfaces/tooltipoptions.default.html rename to docs/api/9.0.0-beta.1/interfaces/tooltipoptions.TooltipOptions.html index b5c1659694..69fd214d39 100644 --- a/docs/api/9.0.0/interfaces/tooltipoptions.default.html +++ b/docs/api/9.0.0-beta.1/interfaces/tooltipoptions.TooltipOptions.html @@ -1,4 +1,4 @@ -default | PrimeReact - v9.0.0
    +TooltipOptions | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    Interface default

    +
  • TooltipOptions
    • +

    Interface TooltipOptions

    -

    Defines valid properties in TooltipOptions.

    +

    Defines valid properties of TooltipOptions.

    Hierarchy

    @@ -32,33 +32,33 @@

    Properties

    @@ -110,7 +110,7 @@

    Default Value

    false

    Optional event

    event?: "both" | "focus" | "hover"
    -

    Event to show the tooltip, valid values are hover, focus, and both.

    +

    Event to show the tooltip.

    Default Value

    hover

    @@ -157,7 +157,7 @@

    Optional

    Optional position

    position?: "left" | "top" | "bottom" | "right" | "mouse"
    -

    Position of the tooltip, valid values are mouse, right, left, top and bottom.

    +

    Position of the tooltip.

    Default Value

    right

    @@ -274,12 +274,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeCheckboxSelectionKeyType

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeCheckboxSelectionKeys

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeDragDropEvent

    @@ -77,12 +77,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeEventNodeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeExpandedEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeExpandedKeysType

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeFilterInputOptions

    @@ -94,12 +94,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeFilterOptions

    @@ -86,12 +86,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeFilterValueChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeHeaderTemplateOptions

    @@ -87,12 +87,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeMultipleSelectionKeys

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeNodeClickEvent

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeNodeDoubleClickEvent

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeNodeTemplateOptions

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeProps

    @@ -454,12 +454,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectionEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTogglerTemplateOptions

    @@ -102,12 +102,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface default

    @@ -79,7 +79,7 @@

    Optional

    Optional icon

    -
    icon?: IconType<default>
    +
    icon?: IconType<default>

    Icon of the node to display next to content.

    @@ -130,12 +130,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectCheckboxSelectionKeyType

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectEventNodeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectExpandedEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectExpandedKeysType

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectFilterOptions

    @@ -86,12 +86,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectFilterValueChangeEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectPanelHeaderTemplateOptions

    @@ -107,12 +107,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectProps

    @@ -36,7 +36,23 @@

    Properties

    ariaLabel? ariaLabelledBy? children? -data-tooltip? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? disabled? display? dropdownIcon? @@ -104,10 +120,200 @@

    Optional

    Used to get the child elements of the component.

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +

    Optional disabled

    disabled?: boolean
    @@ -419,12 +625,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeSelectSelectionKeysType

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableCheckboxSelectionKeyType

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableColReorderEvent

    @@ -77,12 +77,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableColumnResizeEndEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableFilterMeta

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableFilterMetaData

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTablePageEvent

    @@ -77,12 +77,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableProps

    @@ -32,7 +32,35 @@

    Properties

    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    +
    +

    Optional alwaysShowPaginator

    +
    alwaysShowPaginator?: boolean
    +

    Whether to show it even there is only one page.

    + +

    Default Value

    true

    +
    +
    +

    Optional autoLayout

    +
    autoLayout?: boolean
    +

    Whether the cell widths scale according to their content or not.

    + +

    Default Value

    true

    +
    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional className

    +
    className?: string
    +

    Style class of the node.

    +
    +
    +

    Optional columnResizeMode

    +
    columnResizeMode?: "fit" | "expand"
    +

    Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".

    + +

    Default Value

    fit

    +
    +
    +

    Optional contextMenuSelectionKey

    +
    contextMenuSelectionKey?: string
    +

    A single key to control the selection with the context menu.

    +
    +
    +

    Optional currentPageReportTemplate

    +
    currentPageReportTemplate?: string
    +

    Template of the current page report element. Available placeholders are {currentPage}, {totalPages}, {rows}, {first}, {last} and {totalRecords}.

    + +

    Default Value

    ({currentPage} of {totalPages})

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional defaultSortOrder

    +
    defaultSortOrder?: null | 0 | 1 | -1
    +

    Default sort order of an unsorted column.

    + +

    Default Value

    1

    +
    +
    +

    Optional emptyMessage

    +
    emptyMessage?: string
    +

    Text to display when there is no data.

    + +

    Default Value

    No records found

    +
    +
    +

    Optional expandedKeys

    +
    expandedKeys?: TreeTableExpandedKeysType
    +

    An array of keys to represent the state of the tree expansion state in controlled mode.

    +
    +
    +

    Optional filterDelay

    +
    filterDelay?: number
    +

    Delay in milliseconds before filtering the data.

    + +

    Default Value

    300

    +
    +
    +

    Optional filterLocale

    +
    filterLocale?: string
    +

    Locale to use in filtering. The default locale is the host environment's current locale.

    + +

    Default Value

    undefined

    +

    Optional filterMode

    filterMode?: "strict" | "lenient"
    @@ -652,12 +948,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableSelectionEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableSelectionKeysType

    @@ -44,12 +44,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableSortEvent

    @@ -71,12 +71,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableSortMeta

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TreeTableToggleEvent

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface TriStateCheckboxChangeEvent

    @@ -96,12 +96,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1
    +
    +
    +
    +
    + +

    Interface TriStateCheckboxProps

    +
    +

    Defines valid properties in TriStateCheckbox component. In addition to these, all properties of HTMLDivElement can be used in this component.

    +
    +
    +

    Hierarchy

    +
      +
    • Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onChange" | "value" | "ref"> +
        +
      • TriStateCheckboxProps
    +
    +
    +
    + +
    +
    +

    Properties

    +
    children? +data-pr-at? +data-pr-autohide? +data-pr-classname? +data-pr-disabled? +data-pr-event? +data-pr-hidedelay? +data-pr-hideevent? +data-pr-mousetrack? +data-pr-mousetrackleft? +data-pr-mousetracktop? +data-pr-my? +data-pr-position? +data-pr-showdelay? +data-pr-showevent? +data-pr-showondisabled? +data-pr-tooltip? +data-pr-updatedelay? +disabled? +readOnly? +tooltip? +tooltipOptions? +value? +
    +
    +

    Methods

    +
    onChange? +
    +
    +

    Properties

    +
    +

    Optional Readonly children

    +
    children?: ReactNode
    +

    Used to get the child elements of the component.

    +
    +
    +

    Optional data-pr-at

    +
    data-pr-at?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the target element to align the positioned tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-autohide

    +
    data-pr-autohide?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to hide tooltip when hovering over tooltip content.*

    + +

    Default Value

    true

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-classname

    +
    data-pr-classname?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Style class of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-disabled

    +
    data-pr-disabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    When present, it specifies that the tooltip should be hidden.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-event

    +
    data-pr-event?: "both" | "focus" | "hover"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip.*

    + +

    Default Value

    hover

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hidedelay

    +
    data-pr-hidedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to hide the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-hideevent

    +
    data-pr-hideevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to hide the tooltip if the event property is empty.*

    + +

    Default Value

    mouseleave

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrack

    +
    data-pr-mousetrack?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether the tooltip will follow the mouse.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetrackleft

    +
    data-pr-mousetrackleft?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-mousetracktop

    +
    data-pr-mousetracktop?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*

    + +

    Default Value

    5

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-my

    +
    data-pr-my?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Defines which position on the tooltip being positioned to align with the target element.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-position

    +
    data-pr-position?: "left" | "top" | "bottom" | "right" | "mouse"
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Position of the tooltip.*

    + +

    Default Value

    right

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showdelay

    +
    data-pr-showdelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to show the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showevent

    +
    data-pr-showevent?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Event to show the tooltip if the event property is empty.*

    + +

    Default Value

    mouseenter

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-showondisabled

    +
    data-pr-showondisabled?: boolean
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Whether to show tooltip for disabled elements.*

    + +

    Default Value

    false

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-tooltip

    +
    data-pr-tooltip?: string
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Content of the tooltip.*

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional data-pr-updatedelay

    +
    data-pr-updatedelay?: number
    +

    PrimeReact - TooltipHTMLAttributes

    +

    Delay to update the tooltip in milliseconds.*

    + +

    Default Value

    0

    +

    PrimeReact

    +
    +

    *This feature will be active when there is a PrimeReact tooltip component on the page.

    +
    +
    +

    Optional disabled

    +
    disabled?: boolean
    +

    When present, it specifies that the element value cannot be altered.

    + +

    Default Value

    false

    +
    +
    +

    Optional readOnly

    +
    readOnly?: boolean
    +

    When present, it specifies that the value cannot be changed.

    + +

    Default Value

    false

    +
    +
    +

    Optional tooltip

    +
    tooltip?: string
    +

    Content of the tooltip.

    +
    +
    +

    Optional tooltipOptions

    +
    tooltipOptions?: TooltipOptions
    +

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    +
    +
    +

    Optional value

    +
    value?: null | boolean
    +

    Value of the TriStateCheckbox.

    +
    +
    +

    Methods

    +
    +

    Optional onChange

    +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/ts_helpers.FormEvent.html b/docs/api/9.0.0-beta.1/interfaces/ts_helpers.FormEvent.html similarity index 96% rename from docs/api/9.0.0/interfaces/ts_helpers.FormEvent.html rename to docs/api/9.0.0-beta.1/interfaces/ts_helpers.FormEvent.html index 4ba5b537da..54fb95a55a 100644 --- a/docs/api/9.0.0/interfaces/ts_helpers.FormEvent.html +++ b/docs/api/9.0.0-beta.1/interfaces/ts_helpers.FormEvent.html @@ -1,4 +1,4 @@ -FormEvent | PrimeReact - v9.0.0
    +FormEvent | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FormEvent<T, E>

    @@ -105,12 +105,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface FormTarget<T>

    @@ -72,12 +72,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • IconOptions

    • Interface IconOptions<ParentProps>

    Type Parameters

    @@ -35,9 +35,9 @@

    Properties

    @@ -68,12 +68,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerChangeEvent

    @@ -67,12 +67,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerContentTemplateOptions

    @@ -188,12 +188,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerLazyEvent

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerLoaderIconTemplateOptions

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerLoadingTemplateOptions

    @@ -111,12 +111,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerOptionsType

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerProps

    @@ -268,12 +268,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerRenderedRange

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerState

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerTemplateOptions

    @@ -95,12 +95,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Interface VirtualScrollerViewportRenderedRange

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,19 +6,19 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    PrimeReact - v9.0.0

    +

    PrimeReact - v9.0.0-beta.1

    Index

    Modules

    accordion -api/api +api autocomplete avatar avatargroup @@ -63,7 +63,7 @@

    Modules

    inputswitch inputtext inputtextarea -keyfilter/keyfilteroptions +keyfilter knob listbox megamenu @@ -121,7 +121,7 @@

    Modules

    treetable tristatecheckbox ts-helpers -utils/utils +utils virtualscroller
    @@ -142,12 +142,12 @@

    Theme

    +
    +
    +
      +
    • Preparing search index...
      • +
    • The search index is not available
    PrimeReact - v9.0.0-beta.1 +
    +
    +
    +
    + +

    Module accordion

    +
    +

    Accordion groups a collection of contents in tabs.

    +

    Live Demo

    +

    Helper Components:

    + +
    +
    +
    +
    +
    +

    Index

    +
    +

    Component

    +
    Accordion +AccordionTab +
    +
    +

    Properties

    +
    AccordionProps +AccordionTabProps +
    +
    +

    Events

    +
    AccordionTabChangeEvent +AccordionTabCloseEvent +AccordionTabOpenEvent +
    +
    +
    +
    +

    Settings

     +
    +
    +

    Member Visibility

    +
      +
      • +
      • +
    +
    +

    Theme

    + +
    +
    \ No newline at end of file diff --git a/docs/api/9.0.0/modules/api_api.FilterService.html b/docs/api/9.0.0-beta.1/modules/api.FilterService.html similarity index 78% rename from docs/api/9.0.0/modules/api_api.FilterService.html rename to docs/api/9.0.0-beta.1/modules/api.FilterService.html index eb8faa49f7..5fd586fd22 100644 --- a/docs/api/9.0.0/modules/api_api.FilterService.html +++ b/docs/api/9.0.0-beta.1/modules/api.FilterService.html @@ -1,4 +1,4 @@ -FilterService | PrimeReact - v9.0.0
    +FilterService | PrimeReact - v9.0.0-beta.1
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • FilterService

    • Namespace FilterService

    Index

    Variables

    -
    filters +
    filters

    Functions

    -
    filter -register +
    filter +register
    @@ -46,12 +46,12 @@

    Theme

    @@ -6,15 +6,19 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    Module api/api

    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +

    Module api

    +
    +
    +

    Todo

    Write the documentation.

    +
    @@ -22,40 +26,40 @@

    Module api/api

    Index

    Namespaces

    -
    FilterService +
    FilterService

    Enumerations

    -
    FilterMatchMode -FilterOperator -MessageSeverity -SortOrder +
    FilterMatchMode +FilterOperator +MessageSeverity +SortOrder

    Interfaces

    -
    APIOptions -FilterMatchModeOptions -PrimeIconsOptions -ZIndexOptions +
    APIOptions +FilterMatchModeOptions +PrimeIconsOptions +ZIndexOptions

    Type Aliases

    -
    AppendToType -InputStyleType +
    AppendToType +InputStyleType

    Variables

    -
    PrimeIcons -default +
    PrimeIcons +default

    Functions

    -
    addLocale -locale -localeOption -localeOptions -updateLocaleOption -updateLocaleOptions +
    addLocale +locale +localeOption +localeOptions +updateLocaleOption +updateLocaleOptions
    @@ -75,12 +79,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module autocomplete

    @@ -58,12 +58,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module avatar

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module avatargroup

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module badge

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module blockui

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module breadcrumb

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module button

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module calendar

    @@ -64,12 +64,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module captcha

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module card

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module carousel

    @@ -58,12 +58,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module cascadeselect

    @@ -55,12 +55,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module chart

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module checkbox

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module chip

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module chips

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module colorpicker

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module column

    @@ -85,12 +85,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module columngroup

    @@ -51,12 +51,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module confirmdialog

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module confirmpopup

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module contextmenu

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module csstransition

    @@ -51,12 +51,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module datascroller

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module datatable

    @@ -54,7 +54,6 @@

    Misc

    Interfaces

    DataTableCellClickEvent DataTableFooterTemplateOptions -DataTablePageEvent DataTableRowEditSaveEvent DataTableRowMouseEvent DataTableSelectAllChangeEvent @@ -69,6 +68,7 @@

    Events

    DataTableDataSelectableEvent DataTableExportFunctionEvent DataTableFilterEvent +DataTablePageEvent DataTableRowClickEvent DataTableRowEditCompleteEvent DataTableRowEditEvent @@ -109,12 +109,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module dataview

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module deferredcontent

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module dialog

    @@ -58,12 +58,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module divider

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module dock

    @@ -55,12 +55,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module dropdown

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module editor

    @@ -55,12 +55,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module fieldset

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module fileupload

    @@ -72,12 +72,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module galleria

    @@ -58,12 +58,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module gmap

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module hooks

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module image

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module inplace

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module inputmask

    @@ -55,12 +55,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module inputnumber

    @@ -55,12 +55,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module inputswitch

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module inputtext

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module inputtextarea

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,15 +6,18 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    Module keyfilter/keyfilteroptions

    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • keyfilter
    • +

    Module keyfilter

    +
    +

    This module contains common options and types of components that use KeyFilter.

    +
    @@ -22,7 +25,7 @@

    Module keyfilter/keyfilteroptions

    Index

    Type Aliases

    -
    KeyFilterType +
    KeyFilterType
    @@ -42,12 +45,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module knob

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module listbox

    @@ -61,12 +61,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module megamenu

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module mention

    @@ -59,12 +59,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module menu

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module menubar

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module menuitem

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module message

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module messages

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module multiselect

    @@ -66,12 +66,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module multistatecheckbox

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module orderlist

    @@ -58,12 +58,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module organizationchart

    @@ -56,12 +56,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module overlaypanel

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module overlayservice

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module paginator

    @@ -70,12 +70,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module panel

    @@ -58,12 +58,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module panelmenu

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module password

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module picklist

    @@ -63,12 +63,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module progressbar

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module progressspinner

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module radiobutton

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module rating

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module ripple

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module row

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module scrollpanel

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module scrolltop

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module selectbutton

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module selectitem

    @@ -49,12 +49,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module sidebar

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module skeleton

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module slidemenu

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module slider

    @@ -55,12 +55,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module speeddial

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module splitbutton

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module splitter

    @@ -60,12 +60,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module steps

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module styleclass

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module tabmenu

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module tabview

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module tag

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module terminal

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module terminal

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module tieredmenu

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module timeline

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module toast

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module togglebutton

    @@ -58,12 +58,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module toolbar

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module tooltip

    @@ -50,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module tooltipoptions

    @@ -28,8 +28,9 @@

    Events

    TooltipEvent
    -

    Properties

    -
    default +

    Misc

    +
    TooltipHTMLAttributes +TooltipOptions
    @@ -49,12 +50,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module tree

    @@ -75,12 +75,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module treenode

    @@ -45,12 +45,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module treeselect

    @@ -65,12 +65,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module treetable

    @@ -72,12 +72,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module tristatecheckbox

    @@ -54,12 +54,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module ts-helpers

    @@ -49,12 +49,12 @@

    Theme

    @@ -6,26 +6,26 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • ZIndexUtils

    • Namespace ZIndexUtils

    Index

    Functions

    -
    clear -get -getBase -getCurrent -set +
    clear +get +getBase +getCurrent +set
    @@ -45,12 +45,12 @@

    Theme

    @@ -6,15 +6,19 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    Module utils/utils

    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +

    Module utils

    +
    +
    +

    Todo

    Write the documentation.

    +
    @@ -22,30 +26,30 @@

    Module utils/utils

    Index

    Namespaces

    -
    ZIndexUtils +
    ZIndexUtils

    Classes

    -
    ConnectedOverlayScrollHandler -DomHandler -IconUtils -ObjectUtils +
    ConnectedOverlayScrollHandler +DomHandler +IconUtils +ObjectUtils

    Interfaces

    -
    IconOptions +
    IconOptions

    Type Aliases

    -
    IconType -TemplateType +
    IconType +TemplateType

    Functions

    -
    EventBus -UniqueComponentId -classNames -mask +
    EventBus +UniqueComponentId +classNames +mask
    @@ -65,12 +69,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Module virtualscroller

    @@ -69,12 +69,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • AppendToType

    • Type alias AppendToType

    AppendToType: "self" | HTMLElement | undefined | null
    @@ -35,12 +35,12 @@

    Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • InputStyleType

    • Type alias InputStyleType

    InputStyleType: "outlined" | "filled"
    @@ -35,12 +35,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias CSSTransitionProps<Ref>

    @@ -42,12 +42,12 @@

    Theme

    @@ -6,17 +6,17 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias DataTableCellSelection<TValue>

    -
    DataTableCellSelection<TValue>: {
        cellIndex: number;
        column: Column;
        field: string;
        props: ColumnProps;
        rowData: DataTableRowData<TValue>;
        rowIndex: number;
        selected: boolean;
        value: TValue[keyof TValue];
    }
    +
    DataTableCellSelection<TValue>: {
        cellIndex: number;
        column: Column;
        field: string;
        props: ColumnProps;
        rowData: DataTableRowData<TValue>;
        rowIndex: number;
        selected: boolean;
        value: TValue[number][keyof TValue[number]];
    }

    Type Parameters

      @@ -54,7 +54,7 @@
      selected:

      Whether the row is selected or not.

  • -
    value: TValue[keyof TValue]
    +
    value: TValue[number][keyof TValue[number]]

    Value of the cell.

    • @@ -75,12 +75,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias DataTableFooterTemplateType<TValue>

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias DataTableHeaderTemplateType<TValue>

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,22 +6,22 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    -

    Type alias DataTableRowData<TValue>

    -
    DataTableRowData<TValue>: { [ K in keyof TValue]: TValue[K] }
    +

    Type alias DataTableRowData<TValueArray>

    +
    DataTableRowData<TValueArray>: TValueArray extends (infer TValue)[] ? TValue : never

    Type Parameters

    +

    TValueArray extends DataTableValueArray

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias DataTableRowDataArray<TValue>

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias DataTableRowGroupFooterTemplateType<TValue>

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias DataTableRowGroupHeaderTemplateType<TValue>

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias DataTableSelection<TValue>

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,17 +6,25 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • keyfilter
    • +
  • KeyFilterType

    • Type alias KeyFilterType

    -
    KeyFilterType: "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum" | RegExp
    +
    KeyFilterType: "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum" | RegExp
    +

    Defines the type of keyfilter property in components.

    + +

    See

    +
    @@ -35,12 +43,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias PaginatorTemplate

    @@ -37,12 +37,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias SelectItemOptionsType

    @@ -37,12 +37,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias TreeTableExpandedKeysType

    @@ -42,12 +42,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias Booleanish

    @@ -35,12 +35,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias Nullable<T>

    @@ -40,12 +40,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Type alias Numberish

    @@ -35,12 +35,12 @@

    Theme

    @@ -6,17 +6,17 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • IconType

    • Type alias IconType<ParentProps>

    -
    IconType<ParentProps>: React.ReactNode | ((options: IconOptions<ParentProps>) => React.ReactNode)
    +
    IconType<ParentProps>: React.ReactNode | ((options: IconOptions<ParentProps>) => React.ReactNode)

    Type Parameters

      @@ -40,12 +40,12 @@

      Theme

    @@ -6,15 +6,15 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • utils
    • +
  • TemplateType

    • Type alias TemplateType<ParentProps>

    TemplateType<ParentProps>: React.ReactNode | ((props: ParentProps) => React.ReactNode)
    @@ -40,12 +40,12 @@

    Theme

    @@ -6,16 +6,16 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • FilterService
    • +
  • filters

    • Variable filtersConst

    filters: {
        between(value: any, filter: string): boolean;
        contains(value: any, filter: string, filterLocale?: string): boolean;
        dateAfter(value: any, filter: string): boolean;
        dateBefore(value: any, filter: string): boolean;
        dateIs(value: any, filter: string): boolean;
        dateIsNot(value: any, filter: string): boolean;
        endsWith(value: any, filter: string, filterLocale?: string): boolean;
        equals(value: any, filter: string, filterLocale?: string): boolean;
        gt(value: any, filter: string): boolean;
        gte(value: any, filter: string): boolean;
        in(value: any, filter: string): boolean;
        lt(value: any, filter: string): boolean;
        lte(value: any, filter: string): boolean;
        notContains(value: any, filter: string, filterLocale?: string): boolean;
        notEquals(value: any, filter: string, filterLocale?: string): boolean;
        startsWith(value: any, filter: string, filterLocale?: string): boolean;
    }
    @@ -259,12 +259,12 @@

    Theme

    @@ -6,17 +6,17 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • PrimeIcons

    • Variable PrimeIconsConst

    -
    PrimeIcons: PrimeIconsOptions
    +
    PrimeIcons: PrimeIconsOptions
    @@ -35,12 +35,12 @@

    Theme

    @@ -6,17 +6,17 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1
    +
  • PrimeReact - v9.0.0-beta.1
    • +
  • api
    • +
  • default

    • Variable defaultConst

    -
    default: APIOptions
    +
    default: APIOptions
    @@ -35,12 +35,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Variable OverlayServiceConst

    @@ -41,12 +41,12 @@

    Theme

    @@ -6,13 +6,13 @@
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0 +
  • The search index is not available
    • PrimeReact - v9.0.0-beta.1

    Variable TerminalServiceConst

    @@ -41,12 +41,12 @@

    Theme

    -
    -
    -
      -
    • Preparing search index...
      • -
    • The search index is not available
    PrimeReact - v9.0.0
    -
    -
    -
    -
    - -

    Interface BadgeProps

    -
    -

    Defines valid properties in Badge component. In addition to these, all properties of HTMLSpanElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> -
        -
      • BadgeProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -severity? -size? -value? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional severity

    -
    severity?: null | "success" | "warning" | "info" | "danger"
    -

    Severity type of the badge.

    - -

    Default Value

    null

    -
    -
    -

    Optional size

    -
    size?: null | "normal" | "large" | "xlarge"
    -

    Size of the badge, valid options are "large" and "xlarge".

    - -

    Default Value

    null

    -
    -
    -

    Optional value

    -
    value?: any
    -

    Value to display inside the badge.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/blockui.BlockUIProps.html b/docs/api/9.0.0/interfaces/blockui.BlockUIProps.html deleted file mode 100644 index 14a02d067e..0000000000 --- a/docs/api/9.0.0/interfaces/blockui.BlockUIProps.html +++ /dev/null @@ -1,268 +0,0 @@ -BlockUIProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface BlockUIProps

    -
    -

    Defines valid properties in BlockUI component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • BlockUIProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    autoZIndex? -baseZIndex? -blocked? -children? -containerClassName? -containerStyle? -data-tooltip? -fullScreen? -template? -
    -
    -

    Methods

    -
    onBlocked? -onUnblocked? -
    -
    -

    Properties

    -
    -

    Optional autoZIndex

    -
    autoZIndex?: boolean
    -

    Whether to automatically manage layering.

    - -

    Default Value

    true

    -
    -
    -

    Optional baseZIndex

    -
    baseZIndex?: number
    -

    Base zIndex value to use in layering.

    - -

    Default Value

    0

    -
    -
    -

    Optional blocked

    -
    blocked?: boolean
    -

    Controls the blocked state.

    - -

    Default Value

    false

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional containerClassName

    -
    containerClassName?: string
    -

    Style class of the container element.

    -
    -
    -

    Optional containerStyle

    -
    containerStyle?: CSSProperties
    -

    Inline style of the container element.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional fullScreen

    -
    fullScreen?: boolean
    -

    When enabled, the whole document gets blocked.

    - -

    Default Value

    false

    -
    -
    -

    Optional template

    -
    template?: ReactNode | ((props: BlockUIProps) => ReactNode)
    -

    Template of mask.

    -
    -
    -

    Methods

    -
    -

    Optional onBlocked

    -
      - -
    • -

      Fired when the element gets blocked.

      -
      -

      Returns void

    -
    -

    Optional onUnblocked

    -
      - -
    • -

      Fired when the element gets unblocked.

      -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/breadcrumb.BreadCrumbProps.html b/docs/api/9.0.0/interfaces/breadcrumb.BreadCrumbProps.html deleted file mode 100644 index b05e264c25..0000000000 --- a/docs/api/9.0.0/interfaces/breadcrumb.BreadCrumbProps.html +++ /dev/null @@ -1,200 +0,0 @@ -BreadCrumbProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface BreadCrumbProps

    -
    -

    Defines valid properties in BreadCrumb component. In addition to these, all properties of HTMLElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> -
        -
      • BreadCrumbProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -home? -model? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional home

    -
    home?: MenuItem
    -

    MenuItem configuration for the home icon.

    -
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    An array of menuitems.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/button.ButtonProps.html b/docs/api/9.0.0/interfaces/button.ButtonProps.html deleted file mode 100644 index bedd33643f..0000000000 --- a/docs/api/9.0.0/interfaces/button.ButtonProps.html +++ /dev/null @@ -1,271 +0,0 @@ -ButtonProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface ButtonProps

    -
    -

    Defines valid properties in Button component. In addition to these, all properties of HTMLButtonElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "ref"> -
        -
      • ButtonProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    badge? -badgeClassName? -children? -data-tooltip? -disabled? -icon? -iconPos? -label? -loading? -loadingIcon? -tooltip? -tooltipOptions? -visible? -
    -
    -

    Properties

    -
    -

    Optional badge

    -
    badge?: string
    -

    Value of the badge.

    -
    -
    -

    Optional badgeClassName

    -
    badgeClassName?: string
    -

    Style class of the badge.

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional disabled

    -
    disabled?: boolean
    -

    When present, it specifies that the element should be disabled.

    - -

    Default Value

    false

    -
    -
    -

    Optional icon

    -
    icon?: IconType<ButtonProps>
    -

    Name of the icon or JSX.Element for icon.

    -
    -
    -

    Optional iconPos

    -
    iconPos?: "left" | "top" | "bottom" | "right"
    -

    Position of the icon, valid values are "left", "right", "top" and "bottom".

    - -

    Default Value

    left

    -
    -
    -

    Optional label

    -
    label?: string
    -

    Text of the button.

    -
    -
    -

    Optional loading

    -
    loading?: boolean
    -

    Display loading icon of the button

    - -

    Default Value

    false

    -
    -
    -

    Optional loadingIcon

    -
    loadingIcon?: IconType<ButtonProps>
    -

    Name of the loading icon or JSX.Element for loading icon.

    -
    -
    -

    Optional tooltip

    -
    tooltip?: string
    -

    Content of the tooltip.

    -
    -
    -

    Optional tooltipOptions

    -
    tooltipOptions?: default
    -

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    -
    -
    -

    Optional visible

    -
    visible?: boolean
    -

    When present, it specifies that the element should be visible.

    - -

    Default Value

    true

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/captcha.CaptchaProps.html b/docs/api/9.0.0/interfaces/captcha.CaptchaProps.html deleted file mode 100644 index 70f63db00f..0000000000 --- a/docs/api/9.0.0/interfaces/captcha.CaptchaProps.html +++ /dev/null @@ -1,270 +0,0 @@ -CaptchaProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface CaptchaProps

    -
    -

    Defines valid properties in Captcha component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • CaptchaProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -language? -siteKey? -size? -sourceUrl? -theme? -type? -
    -
    -

    Methods

    -
    onExpire? -onResponse? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional language

    -
    language?: string
    -

    Language of the widget.

    - -

    Default Value

    en

    -
    -
    -

    Optional siteKey

    -
    siteKey?: string
    -

    Public sitekey.

    -
    -
    -

    Optional size

    -
    size?: string
    -

    The size of the widget.

    - -

    Default Value

    normal

    -
    -
    -

    Optional sourceUrl

    -
    sourceUrl?: string
    -

    Source URL of the Captcha as some countries do not allow Google access.

    - -

    Default Value

    https://www.google.com/recaptcha/api.js?render=explicit

    -
    -
    -

    Optional theme

    -
    theme?: string
    -

    The color scheme of the widget.

    - -

    Default Value

    light

    -
    -
    -

    Optional type

    -
    type?: string
    -

    The type of CAPTCHA to serve.

    - -

    Default Value

    image

    -
    -
    -

    Methods

    -
    -

    Optional onExpire

    -
      - -
    • -

      The callback function to be executed when the recaptcha response expires and the user needs to solve a new CAPTCHA.

      -
      -

      Returns void

    -
    -

    Optional onResponse

    -
      - -
    • -

      The callback function to be executed when the user submits a successful CAPTCHA response.

      -
      -
      -

      Parameters

      -
        -
      • -
        response: any
        -

        Current response

        -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/card.CardProps.html b/docs/api/9.0.0/interfaces/card.CardProps.html deleted file mode 100644 index 5bc512d8ba..0000000000 --- a/docs/api/9.0.0/interfaces/card.CardProps.html +++ /dev/null @@ -1,214 +0,0 @@ -CardProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface CardProps

    -
    -

    Defines valid properties in Card component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "title"> -
        -
      • CardProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -footer? -header? -subTitle? -title? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional footer

    -
    footer?: ReactNode | ((props: CardProps) => ReactNode)
    -

    Footer of the card.

    -
    -
    -

    Optional header

    -
    header?: ReactNode | ((props: CardProps) => ReactNode)
    -

    Header of the card.

    -
    -
    -

    Optional subTitle

    -
    subTitle?: ReactNode | ((props: CardProps) => ReactNode)
    -

    Secondary title of the card.

    -
    -
    -

    Optional title

    -
    title?: ReactNode | ((props: CardProps) => ReactNode)
    -

    Title of the card.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/chip.ChipProps.html b/docs/api/9.0.0/interfaces/chip.ChipProps.html deleted file mode 100644 index fd7dab189a..0000000000 --- a/docs/api/9.0.0/interfaces/chip.ChipProps.html +++ /dev/null @@ -1,278 +0,0 @@ -ChipProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface ChipProps

    -
    -

    Defines valid properties in Chip component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • ChipProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -icon? -image? -imageAlt? -label? -removable? -removeIcon? -template? -
    -
    -

    Methods

    -
    onImageError? -onRemove? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional icon

    -
    icon?: IconType<ChipProps>
    -

    Defines the icon to display.

    -
    -
    -

    Optional image

    -
    image?: string
    -

    Defines the image to display.

    -
    -
    -

    Optional imageAlt

    -
    imageAlt?: string
    -

    It specifies an alternate text for an image, if the image cannot be displayed.

    -
    -
    -

    Optional label

    -
    label?: string
    -

    Defines the text to display.

    -
    -
    -

    Optional removable

    -
    removable?: boolean
    -

    Whether to display a remove icon.

    - -

    Default Value

    false

    -
    -
    -

    Optional removeIcon

    -
    removeIcon?: string
    -

    Icon of the remove element.

    - -

    Default Value

    pi pi-times-circle

    -
    -
    -

    Optional template

    -
    template?: TemplateType<ChipProps>
    -

    Template of an item.

    -
    -
    -

    Methods

    -
    -

    Optional onImageError

    -
      - -
    • -

      This event is triggered if an error occurs while loading an image file.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: SyntheticEvent<Element, Event>
        -

        Browser event.

        -
      -

      Returns void

    -
    -

    Optional onRemove

    -
      - -
    • -

      Callback to invoke when a chip is removed.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: MouseEvent<HTMLElement, MouseEvent>
        -

        Browser event.

        -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/contextmenu.ContextMenuProps.html b/docs/api/9.0.0/interfaces/contextmenu.ContextMenuProps.html deleted file mode 100644 index 67da58843f..0000000000 --- a/docs/api/9.0.0/interfaces/contextmenu.ContextMenuProps.html +++ /dev/null @@ -1,275 +0,0 @@ -ContextMenuProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface ContextMenuProps

    -
    -

    Defines valid properties in ContextMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • ContextMenuProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    appendTo? -autoZIndex? -baseZIndex? -children? -data-tooltip? -global? -model? -transitionOptions? -
    -
    -

    Methods

    -
    onHide? -onShow? -
    -
    -

    Properties

    -
    -

    Optional appendTo

    -
    appendTo?: null | HTMLElement | "self"
    -

    DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

    - -

    Default Value

    document.body

    -
    -
    -

    Optional autoZIndex

    -
    autoZIndex?: boolean
    -

    Whether to automatically manage layering.

    - -

    Default Value

    true

    -
    -
    -

    Optional baseZIndex

    -
    baseZIndex?: number
    -

    Base zIndex value to use in layering.

    - -

    Default Value

    0

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional global

    -
    global?: boolean
    -

    Attaches the menu to document instead of a particular item.

    - -

    Default Value

    false

    -
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    An array of menuitems.

    -
    -
    -

    Optional transitionOptions

    -
    transitionOptions?: CSSTransitionProps<undefined>
    -

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    -
    -
    -

    Methods

    -
    -

    Optional onHide

    -
      - -
    • -

      Callback to invoke when a popup menu is hidden.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: SyntheticEvent<Element, Event>
        -

        Browser event.

        -
      -

      Returns void

    -
    -

    Optional onShow

    -
      - -
    • -

      Callback to invoke when a popup menu is shown.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: SyntheticEvent<Element, Event>
        -

        Browser event.

        -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/divider.DividerProps.html b/docs/api/9.0.0/interfaces/divider.DividerProps.html deleted file mode 100644 index af815f24b1..0000000000 --- a/docs/api/9.0.0/interfaces/divider.DividerProps.html +++ /dev/null @@ -1,211 +0,0 @@ -DividerProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface DividerProps

    -
    -

    Defines valid properties in Divider component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • DividerProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    align? -children? -data-tooltip? -layout? -type? -
    -
    -

    Properties

    -
    -

    Optional align

    -
    align?: "center" | "left" | "top" | "bottom" | "right"
    -

    Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional layout

    -
    layout?: "horizontal" | "vertical"
    -

    Specifies the orientation, valid values are "horizontal" and "vertical".

    - -

    Default Value

    horizontal

    -
    -
    -

    Optional type

    -
    type?: "dashed" | "dotted" | "solid"
    -

    Border style type, default is "solid" and other options are "dashed" and "dotted".

    - -

    Default Value

    solid

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/dock.DockProps.html b/docs/api/9.0.0/interfaces/dock.DockProps.html deleted file mode 100644 index cc998ab947..0000000000 --- a/docs/api/9.0.0/interfaces/dock.DockProps.html +++ /dev/null @@ -1,223 +0,0 @@ -DockProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface DockProps

    -
    -

    Defines valid properties in Dock component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • DockProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -footer? -header? -magnification? -model? -position? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional footer

    -
    footer?: ReactNode | ((options: DockFooterTemplateOptions) => ReactNode)
    -

    Template of footer element.

    -
    -
    -

    Optional header

    -
    header?: ReactNode | ((options: DockHeaderTemplateOptions) => ReactNode)
    -

    Template of header element.

    -
    -
    -

    Optional magnification

    -
    magnification?: boolean
    -

    Whether to allow scale animation.

    -
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    MenuModel instance to define the action items.

    -
    -
    -

    Optional position

    -
    position?: "left" | "top" | "bottom" | "right"
    -

    Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.

    - -

    Default Value

    bottom

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/inplace.InplaceProps.html b/docs/api/9.0.0/interfaces/inplace.InplaceProps.html deleted file mode 100644 index e7f89812c6..0000000000 --- a/docs/api/9.0.0/interfaces/inplace.InplaceProps.html +++ /dev/null @@ -1,276 +0,0 @@ -InplaceProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface InplaceProps

    -
    -

    Defines valid properties in Inplace component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • InplaceProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    active? -ariaLabel? -children? -closable? -data-tooltip? -disabled? -
    -
    -

    Methods

    -
    onClose? -onOpen? -onToggle? -
    -
    -

    Properties

    -
    -

    Optional active

    -
    active?: boolean
    -

    Whether the content is displayed or not.

    - -

    Default Value

    false

    -
    -
    -

    Optional ariaLabel

    -
    ariaLabel?: string
    -

    Used to define a string that labels the component.

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional closable

    -
    closable?: boolean
    -

    Displays a button to switch back to display mode.

    - -

    Default Value

    false

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional disabled

    -
    disabled?: boolean
    -

    When present, it specifies that the element should be disabled.

    - -

    Default Value

    false

    -
    -
    -

    Methods

    -
    -

    Optional onClose

    -
      - -
    • -

      Callback to invoke when inplace is closed.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: MouseEvent<HTMLElement, MouseEvent>
        -

        Browser event.

        -
      -

      Returns void

    -
    -

    Optional onOpen

    -
      - -
    • -

      Callback to invoke when inplace is opened.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: MouseEvent<HTMLElement, MouseEvent>
        -

        Browser event.

        -
      -

      Returns void

    -
    -

    Optional onToggle

    -
      - -
    • -

      Callback to invoke when inplace is opened or closed.

      -
      -
      -

      Parameters

      -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/inputtext.InputTextProps.html b/docs/api/9.0.0/interfaces/inputtext.InputTextProps.html deleted file mode 100644 index 1cdbf698b2..0000000000 --- a/docs/api/9.0.0/interfaces/inputtext.InputTextProps.html +++ /dev/null @@ -1,249 +0,0 @@ -InputTextProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface InputTextProps

    -
    -

    Defines valid properties in InputText component. In addition to these, all properties of HTMLInputElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "onInput" | "ref" | "value"> -
        -
      • InputTextProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -keyfilter? -tooltip? -tooltipOptions? -validateOnly? -value? -
    -
    -

    Methods

    -
    onInput? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional keyfilter

    -
    keyfilter?: KeyFilterType
    -

    Format definition of the keys to block.

    -
    -
    -

    Optional tooltip

    -
    tooltip?: string
    -

    Content of the tooltip.

    -
    -
    -

    Optional tooltipOptions

    -
    tooltipOptions?: default
    -

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    -
    -
    -

    Optional validateOnly

    -
    validateOnly?: boolean
    -

    When enabled, instead of blocking keys, input is validated internally to test against the regular expression.

    - -

    Default Value

    false

    -
    -
    -

    Optional value

    -
    value?: string
    -

    The value of component

    -
    -
    -

    Methods

    -
    -

    Optional onInput

    -
      - -
    • -

      Callback to invoke while typing value on input

      -
      -
      -

      Parameters

      -
        -
      • -
        event: FormEvent<HTMLInputElement>
        -

        Browser event

        -
        • -
      • -
        validatePattern: boolean
        -

        Whether to validate the value

        -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/inputtextarea.InputTextareaProps.html b/docs/api/9.0.0/interfaces/inputtextarea.InputTextareaProps.html deleted file mode 100644 index 99df267cf5..0000000000 --- a/docs/api/9.0.0/interfaces/inputtextarea.InputTextareaProps.html +++ /dev/null @@ -1,223 +0,0 @@ -InputTextareaProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface InputTextareaProps

    -
    -

    Defines valid properties in InputTextarea component. In addition to these, all properties of HTMLTextAreaElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref" | "value"> -
        -
      • InputTextareaProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    autoResize? -children? -data-tooltip? -keyfilter? -tooltip? -tooltipOptions? -value? -
    -
    -

    Properties

    -
    -

    Optional autoResize

    -
    autoResize?: boolean
    -

    When present, height of textarea changes as being typed.

    - -

    Default Value

    false

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional keyfilter

    -
    keyfilter?: KeyFilterType
    -

    Format definition of the keys to block.

    -
    -
    -

    Optional tooltip

    -
    tooltip?: string
    -

    Content of the tooltip.

    -
    -
    -

    Optional tooltipOptions

    -
    tooltipOptions?: default
    -

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    -
    -
    -

    Optional value

    -
    value?: string
    -

    The value of component

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/megamenu.MegaMenuProps.html b/docs/api/9.0.0/interfaces/megamenu.MegaMenuProps.html deleted file mode 100644 index 988bd1da39..0000000000 --- a/docs/api/9.0.0/interfaces/megamenu.MegaMenuProps.html +++ /dev/null @@ -1,216 +0,0 @@ -MegaMenuProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface MegaMenuProps

    -
    -

    Defines valid properties in MegaMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • MegaMenuProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -end? -model? -orientation? -start? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional end

    -
    end?: ReactNode | ((props: MegaMenuProps) => ReactNode)
    -

    The template of trailing element

    -
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    An array of menuitems.

    -
    -
    -

    Optional orientation

    -
    orientation?: "horizontal" | "vertical"
    -

    Defines the orientation, valid values are horizontal and vertical.

    - -

    Default Value

    horizontal

    -
    -
    -

    Optional start

    -
    start?: ReactNode | ((props: MegaMenuProps) => ReactNode)
    -

    The template of starting element.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/menu.MenuProps.html b/docs/api/9.0.0/interfaces/menu.MenuProps.html deleted file mode 100644 index a45cdb495e..0000000000 --- a/docs/api/9.0.0/interfaces/menu.MenuProps.html +++ /dev/null @@ -1,275 +0,0 @@ -MenuProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface MenuProps

    -
    -

    Defines valid properties in Menu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • MenuProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    appendTo? -autoZIndex? -baseZIndex? -children? -data-tooltip? -model? -popup? -transitionOptions? -
    -
    -

    Methods

    -
    onHide? -onShow? -
    -
    -

    Properties

    -
    -

    Optional appendTo

    -
    appendTo?: null | HTMLElement | "self"
    -

    DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

    - -

    Default Value

    document.body

    -
    -
    -

    Optional autoZIndex

    -
    autoZIndex?: boolean
    -

    Whether to automatically manage layering.

    - -

    Default Value

    true

    -
    -
    -

    Optional baseZIndex

    -
    baseZIndex?: number
    -

    Base zIndex value to use in layering.

    - -

    Default Value

    0

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    An array of menuitems.

    -
    -
    -

    Optional popup

    -
    popup?: boolean
    -

    Defines if menu would displayed as a popup.

    - -

    Default Value

    false

    -
    -
    -

    Optional transitionOptions

    -
    transitionOptions?: CSSTransitionProps<undefined>
    -

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    -
    -
    -

    Methods

    -
    -

    Optional onHide

    -
      - -
    • -

      Callback to invoke when a popup menu is hidden.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: SyntheticEvent<Element, Event>
        -

        Browser event.

        -
      -

      Returns void

    -
    -

    Optional onShow

    -
      - -
    • -

      Callback to invoke when a popup menu is shown.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: SyntheticEvent<Element, Event>
        -

        Browser event.

        -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/menubar.MenubarProps.html b/docs/api/9.0.0/interfaces/menubar.MenubarProps.html deleted file mode 100644 index 991cbd6d7e..0000000000 --- a/docs/api/9.0.0/interfaces/menubar.MenubarProps.html +++ /dev/null @@ -1,207 +0,0 @@ -MenubarProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface MenubarProps

    -
    -

    Defines valid properties in Menubar component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • MenubarProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -end? -model? -start? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional end

    -
    end?: ReactNode | ((props: MenubarProps) => ReactNode)
    -

    The template of trailing element.

    -
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    An array of menuitems.

    -
    -
    -

    Optional start

    -
    start?: ReactNode | ((props: MenubarProps) => ReactNode)
    -

    The template of starting element.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/message.MessageProps.html b/docs/api/9.0.0/interfaces/message.MessageProps.html deleted file mode 100644 index cb20a7c848..0000000000 --- a/docs/api/9.0.0/interfaces/message.MessageProps.html +++ /dev/null @@ -1,216 +0,0 @@ -MessageProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface MessageProps

    -
    -

    Defines valid properties in Message component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • MessageProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -content? -data-tooltip? -icon? -severity? -text? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional content

    -
    content?: ReactNode | ((props: MessageProps) => ReactNode)
    -

    Custom template of the message.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional icon

    -
    icon?: IconType<MessageProps>
    -

    Icon for the message. If not set it will default to severity icon.

    - -

    Default Value

    based on severity

    -
    -
    -

    Optional severity

    -
    severity?: "error" | "success" | "info" | "warn"
    -

    Severity level of the message.

    -
    -
    -

    Optional text

    -
    text?: ReactNode | ((props: MessageProps) => ReactNode)
    -

    Text of the message.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/messages.MessagesProps.html b/docs/api/9.0.0/interfaces/messages.MessagesProps.html deleted file mode 100644 index 089e3841a0..0000000000 --- a/docs/api/9.0.0/interfaces/messages.MessagesProps.html +++ /dev/null @@ -1,233 +0,0 @@ -MessagesProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface MessagesProps

    -
    -

    Defines valid properties in Messages component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • MessagesProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -transitionOptions? -
    -
    -

    Methods

    -
    onClick? -onRemove? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional transitionOptions

    -
    transitionOptions?: CSSTransitionProps<undefined>
    -

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    -
    -
    -

    Methods

    -
    -

    Optional onClick

    -
      - -
    • -

      Callback to invoke when a message gets clicked.

      -
      -
      -

      Parameters

      -
      -

      Returns void

    -
    -

    Optional onRemove

    -
      - -
    • -

      Callback to invoke when a message is removed.

      -
      -
      -

      Parameters

      -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/overlaypanel.OverlayPanelProps.html b/docs/api/9.0.0/interfaces/overlaypanel.OverlayPanelProps.html deleted file mode 100644 index 05191939ca..0000000000 --- a/docs/api/9.0.0/interfaces/overlaypanel.OverlayPanelProps.html +++ /dev/null @@ -1,261 +0,0 @@ -OverlayPanelProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface OverlayPanelProps

    -
    -

    Defines valid properties in OverlayPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • OverlayPanelProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    appendTo? -ariaCloseLabel? -breakpoints? -children? -data-tooltip? -dismissable? -showCloseIcon? -transitionOptions? -
    -
    -

    Methods

    -
    onHide? -onShow? -
    -
    -

    Properties

    -
    -

    Optional appendTo

    -
    appendTo?: null | HTMLElement | "self"
    -

    DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

    - -

    Default Value

    document.body

    -
    -
    -

    Optional ariaCloseLabel

    -
    ariaCloseLabel?: string
    -

    Aria label of the close icon.

    - -

    Default Value

    close

    -
    -
    -

    Optional breakpoints

    -
    breakpoints?: OverlayPanelBreakpoints
    -

    Object literal to define widths per screen size.

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional dismissable

    -
    dismissable?: boolean
    -

    Enables to hide the overlay when outside is clicked.

    - -

    Default Value

    true

    -
    -
    -

    Optional showCloseIcon

    -
    showCloseIcon?: boolean
    -

    When enabled, displays a close icon at top right corner.

    - -

    Default Value

    false

    -
    -
    -

    Optional transitionOptions

    -
    transitionOptions?: CSSTransitionProps<undefined>
    -

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    -
    -
    -

    Methods

    -
    -

    Optional onHide

    -
      - -
    • -

      Callback to invoke when overlay becomes hidden.

      -
      -

      Returns void

    -
    -

    Optional onShow

    -
      - -
    • -

      Callback to invoke when overlay becomes visible.

      -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/panelmenu.PanelMenuProps.html b/docs/api/9.0.0/interfaces/panelmenu.PanelMenuProps.html deleted file mode 100644 index 0314e0d582..0000000000 --- a/docs/api/9.0.0/interfaces/panelmenu.PanelMenuProps.html +++ /dev/null @@ -1,209 +0,0 @@ -PanelMenuProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface PanelMenuProps

    -
    -

    Defines valid properties in PanelMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • PanelMenuProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -model? -multiple? -transitionOptions? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    An array of menuitems.

    -
    -
    -

    Optional multiple

    -
    multiple?: boolean
    -

    Whether multiple tabs can be activated at the same time or not.

    - -

    Default Value

    false

    -
    -
    -

    Optional transitionOptions

    -
    transitionOptions?: CSSTransitionProps<undefined>
    -

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/progressbar.ProgressBarProps.html b/docs/api/9.0.0/interfaces/progressbar.ProgressBarProps.html deleted file mode 100644 index b0677a1592..0000000000 --- a/docs/api/9.0.0/interfaces/progressbar.ProgressBarProps.html +++ /dev/null @@ -1,248 +0,0 @@ -ProgressBarProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface ProgressBarProps

    -
    -

    Defines valid properties in ProgressBar component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • ProgressBarProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -color? -data-tooltip? -mode? -showValue? -unit? -value? -
    -
    -

    Methods

    -
    displayValueTemplate? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional color

    -
    color?: string
    -

    Color for the background of the progress.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional mode

    -
    mode?: "determinate" | "indeterminate"
    -

    Defines the mode of the progress, valid values are "determinate" and "indeterminate".

    - -

    Default Value

    determinate

    -
    -
    -

    Optional showValue

    -
    showValue?: boolean
    -

    Show or hide progress bar value.

    - -

    Default Value

    true

    -
    -
    -

    Optional unit

    -
    unit?: string
    -

    Unit sign appended to the value.

    - -

    Default Value

    %

    -
    -
    -

    Optional value

    -
    value?: null | string | number
    -

    Current value of the progress.

    -
    -
    -

    Methods

    -
    -

    Optional displayValueTemplate

    -
      - -
    • -

      Custom display value template

      -
      -
      -

      Parameters

      -
        -
      • -
        value: undefined | null | string | number
      -

      Returns ReactNode

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/progressspinner.ProgressSpinnerProps.html b/docs/api/9.0.0/interfaces/progressspinner.ProgressSpinnerProps.html deleted file mode 100644 index feeb248b19..0000000000 --- a/docs/api/9.0.0/interfaces/progressspinner.ProgressSpinnerProps.html +++ /dev/null @@ -1,211 +0,0 @@ -ProgressSpinnerProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface ProgressSpinnerProps

    -
    -

    Defines valid properties in ProgressSpinner component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • ProgressSpinnerProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    animationDuration? -children? -data-tooltip? -fill? -strokeWidth? -
    -
    -

    Properties

    -
    -

    Optional animationDuration

    -
    animationDuration?: string
    -

    Duration of the rotate animation.

    - -

    Default Value

    2s

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional fill

    -
    fill?: string
    -

    Color for the background of the circle.

    -
    -
    -

    Optional strokeWidth

    -
    strokeWidth?: string
    -

    Width of the circle stroke.

    - -

    Default Value

    2

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/skeleton.SkeletonProps.html b/docs/api/9.0.0/interfaces/skeleton.SkeletonProps.html deleted file mode 100644 index 93b0ed1184..0000000000 --- a/docs/api/9.0.0/interfaces/skeleton.SkeletonProps.html +++ /dev/null @@ -1,236 +0,0 @@ -SkeletonProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface SkeletonProps

    -
    -

    Defines valid properties in Skeleton component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • SkeletonProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    animation? -borderRadius? -children? -data-tooltip? -height? -shape? -size? -width? -
    -
    -

    Properties

    -
    -

    Optional animation

    -
    animation?: "none" | "wave"
    -

    Type of the animation, valid options are "wave" and "none".

    - -

    Default Value

    wave

    -
    -
    -

    Optional borderRadius

    -
    borderRadius?: string
    -

    Border radius of the element, defaults to value from theme.

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional height

    -
    height?: string
    -

    Height of the element.

    - -

    Default Value

    1rem

    -
    -
    -

    Optional shape

    -
    shape?: "circle" | "rectangle"
    -

    It specifies an alternate text for an image, if the image cannot be displayed.

    - -

    Default Value

    rectangle

    -
    -
    -

    Optional size

    -
    size?: string
    -

    Size of the Circle or Square.

    -
    -
    -

    Optional width

    -
    width?: string
    -

    Width of the element.

    - -

    Default Value

    100%

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/splitter.SplitterProps.html b/docs/api/9.0.0/interfaces/splitter.SplitterProps.html deleted file mode 100644 index 1e6c2080da..0000000000 --- a/docs/api/9.0.0/interfaces/splitter.SplitterProps.html +++ /dev/null @@ -1,242 +0,0 @@ -SplitterProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface SplitterProps

    -
    -

    Defines valid properties in Splitter component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • SplitterProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -gutterSize? -layout? -stateKey? -stateStorage? -
    -
    -

    Methods

    -
    onResizeEnd? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional gutterSize

    -
    gutterSize?: number
    -

    Size of the divider in pixels.

    - -

    Default Value

    4

    -
    -
    -

    Optional layout

    -
    layout?: "horizontal" | "vertical"
    -

    Orientation of the panels, valid values are "horizontal" and "vertical".

    - -

    Default Value

    horizontal

    -
    -
    -

    Optional stateKey

    -
    stateKey?: string
    -

    Storage identifier of a stateful Splitter.

    -
    -
    -

    Optional stateStorage

    -
    stateStorage?: "local" | "session"
    -

    Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.

    - -

    Default Value

    session

    -
    -
    -

    Methods

    -
    -

    Optional onResizeEnd

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/steps.StepsProps.html b/docs/api/9.0.0/interfaces/steps.StepsProps.html deleted file mode 100644 index 384bc2e7a1..0000000000 --- a/docs/api/9.0.0/interfaces/steps.StepsProps.html +++ /dev/null @@ -1,233 +0,0 @@ -StepsProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface StepsProps

    -
    -

    Defines valid properties in Steps component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect" | "ref"> -
        -
      • StepsProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    activeIndex? -children? -data-tooltip? -model -readOnly? -
    -
    -

    Methods

    -
    onSelect? -
    -
    -

    Properties

    -
    -

    Optional activeIndex

    -
    activeIndex?: number
    -

    Index of the active item.

    - -

    Default Value

    0

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    model

    -
    model: undefined | MenuItem[]
    -

    An array of menuitems.

    -
    -
    -

    Optional readOnly

    -
    readOnly?: boolean
    -

    Whether the items are clickable or not.

    - -

    Default Value

    true

    -
    -
    -

    Methods

    -
    -

    Optional onSelect

    -
      - -
    • -

      Callback to invoke when the new step is selected.

      -
      -
      -

      Parameters

      -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/tabmenu.TabMenuProps.html b/docs/api/9.0.0/interfaces/tabmenu.TabMenuProps.html deleted file mode 100644 index 8fcec09822..0000000000 --- a/docs/api/9.0.0/interfaces/tabmenu.TabMenuProps.html +++ /dev/null @@ -1,224 +0,0 @@ -TabMenuProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface TabMenuProps

    -
    -

    Defines valid properties in TabMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • TabMenuProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    activeIndex? -children? -data-tooltip? -model? -
    -
    -

    Methods

    -
    onTabChange? -
    -
    -

    Properties

    -
    -

    Optional activeIndex

    -
    activeIndex?: number
    -

    Active index of menuitem.

    - -

    Default Value

    0

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    An array of menuitems.

    -
    -
    -

    Methods

    -
    -

    Optional onTabChange

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/tag.TagProps.html b/docs/api/9.0.0/interfaces/tag.TagProps.html deleted file mode 100644 index 801befdb64..0000000000 --- a/docs/api/9.0.0/interfaces/tag.TagProps.html +++ /dev/null @@ -1,218 +0,0 @@ -TagProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface TagProps

    -
    -

    Defines valid properties in Tag component. In addition to these, all properties of HTMLSpanElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> -
        -
      • TagProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -icon? -rounded? -severity? -value? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional icon

    -
    icon?: IconType<TagProps>
    -

    Icon of the tag to display next to the value.

    -
    -
    -

    Optional rounded

    -
    rounded?: boolean
    -

    Whether the corners of the tag are rounded.

    - -

    Default Value

    false

    -
    -
    -

    Optional severity

    -
    severity?: null | "success" | "warning" | "info" | "danger"
    -

    Severity type of the tag.

    - -

    Default Value

    null

    -
    -
    -

    Optional value

    -
    value?: ReactNode
    -

    Value to display inside the tag.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/terminal.TerminalProps.html b/docs/api/9.0.0/interfaces/terminal.TerminalProps.html deleted file mode 100644 index 7e136ab720..0000000000 --- a/docs/api/9.0.0/interfaces/terminal.TerminalProps.html +++ /dev/null @@ -1,200 +0,0 @@ -TerminalProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface TerminalProps

    -
    -

    Defines valid properties in Terminal component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • TerminalProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -prompt? -welcomeMessage? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional prompt

    -
    prompt?: string
    -

    Prompt text for each command.

    -
    -
    -

    Optional welcomeMessage

    -
    welcomeMessage?: string
    -

    Initial text to display on terminal.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/tieredmenu.TieredMenuProps.html b/docs/api/9.0.0/interfaces/tieredmenu.TieredMenuProps.html deleted file mode 100644 index d5bc4d7e6b..0000000000 --- a/docs/api/9.0.0/interfaces/tieredmenu.TieredMenuProps.html +++ /dev/null @@ -1,275 +0,0 @@ -TieredMenuProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface TieredMenuProps

    -
    -

    Defines valid properties in TieredMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • TieredMenuProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    appendTo? -autoZIndex? -baseZIndex? -children? -data-tooltip? -model? -popup? -transitionOptions? -
    -
    -

    Methods

    -
    onHide? -onShow? -
    -
    -

    Properties

    -
    -

    Optional appendTo

    -
    appendTo?: null | HTMLElement | "self"
    -

    DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

    - -

    Default Value

    document.body

    -
    -
    -

    Optional autoZIndex

    -
    autoZIndex?: boolean
    -

    Whether to automatically manage layering.

    - -

    Default Value

    true

    -
    -
    -

    Optional baseZIndex

    -
    baseZIndex?: number
    -

    Whether to automatically manage layering.

    - -

    Default Value

    0

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional model

    -
    model?: MenuItem[]
    -

    An array of menuitems.

    -
    -
    -

    Optional popup

    -
    popup?: boolean
    -

    Defines if menu would displayed as a popup.

    - -

    Default Value

    false

    -
    -
    -

    Optional transitionOptions

    -
    transitionOptions?: CSSTransitionProps<undefined>
    -

    The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

    -
    -
    -

    Methods

    -
    -

    Optional onHide

    -
      - -
    • -

      Callback to invoke when a popup menu is hidden.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: SyntheticEvent<Element, Event>
        -

        Browser event.

        -
      -

      Returns void

    -
    -

    Optional onShow

    -
      - -
    • -

      Callback to invoke when a popup menu is shown.

      -
      -
      -

      Parameters

      -
        -
      • -
        event: SyntheticEvent<Element, Event>
        -

        Browser event.

        -
      -

      Returns void

    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/timeline.TimelineProps.html b/docs/api/9.0.0/interfaces/timeline.TimelineProps.html deleted file mode 100644 index 5d11fbf956..0000000000 --- a/docs/api/9.0.0/interfaces/timeline.TimelineProps.html +++ /dev/null @@ -1,239 +0,0 @@ -TimelineProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface TimelineProps

    -
    -

    Defines valid properties in Timeline component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • TimelineProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    align? -children? -content? -data-tooltip? -dataKey? -layout? -marker? -opposite? -value? -
    -
    -

    Properties

    -
    -

    Optional align

    -
    align?: "alternate" | "left" | "top" | "bottom" | "right"
    -

    Position of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.

    - -

    Default Value

    left

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional content

    -
    content?: ReactNode | ((item: any, index: number) => ReactNode)
    -

    Template of the content.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional dataKey

    -
    dataKey?: string
    -

    Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering.

    -
    -
    -

    Optional layout

    -
    layout?: "horizontal" | "vertical"
    -

    Orientation of the timeline, valid values are "vertical" and "horizontal".

    - -

    Default Value

    vertical

    -
    -
    -

    Optional marker

    -
    marker?: ReactNode | ((item: any, index: number) => ReactNode)
    -

    Template content allows placing a custom event marker instead of the default one.

    -
    -
    -

    Optional opposite

    -
    opposite?: ReactNode | ((item: any, index: number) => ReactNode)
    -

    Template content to be placed at the other side of the bar.

    -
    -
    -

    Optional value

    -
    value?: any[]
    -

    An array of events to display.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/toolbar.ToolbarProps.html b/docs/api/9.0.0/interfaces/toolbar.ToolbarProps.html deleted file mode 100644 index 4907bbb24a..0000000000 --- a/docs/api/9.0.0/interfaces/toolbar.ToolbarProps.html +++ /dev/null @@ -1,225 +0,0 @@ -ToolbarProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface ToolbarProps

    -
    -

    Defines valid properties in Toolbar component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> -
        -
      • ToolbarProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    center? -children? -data-tooltip? -end? -left? -right? -start? -
    -
    -

    Properties

    -
    -

    Optional center

    -
    center?: ReactNode | ((props: ToolbarProps) => ReactNode)
    -

    The template of center section.

    -
    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional end

    -
    end?: ReactNode | ((props: ToolbarProps) => ReactNode)
    -

    The template of end section.

    -
    -
    -

    Optional left

    -
    left?: ReactNode | ((props: ToolbarProps) => ReactNode)
    -

    The template of left section.

    - -

    Deprecated

    use start instead

    -
    -
    -

    Optional right

    -
    right?: ReactNode | ((props: ToolbarProps) => ReactNode)
    -

    The template of right section.

    - -

    Deprecated

    use end instead

    -
    -
    -

    Optional start

    -
    start?: ReactNode | ((props: ToolbarProps) => ReactNode)
    -

    The template of start section.

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/api/9.0.0/interfaces/tristatecheckbox.TriStateCheckboxProps.html b/docs/api/9.0.0/interfaces/tristatecheckbox.TriStateCheckboxProps.html deleted file mode 100644 index 36863660f5..0000000000 --- a/docs/api/9.0.0/interfaces/tristatecheckbox.TriStateCheckboxProps.html +++ /dev/null @@ -1,249 +0,0 @@ -TriStateCheckboxProps | PrimeReact - v9.0.0
    -
    - -
    -
    -
    -
    - -

    Interface TriStateCheckboxProps

    -
    -

    Defines valid properties in TriStateCheckbox component. In addition to these, all properties of HTMLDivElement can be used in this component.

    -
    -
    -

    Hierarchy

    -
      -
    • Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onChange" | "value" | "ref"> -
        -
      • TriStateCheckboxProps
    -
    -
    -
    - -
    -
    -

    Properties

    -
    children? -data-tooltip? -disabled? -readOnly? -tooltip? -tooltipOptions? -value? -
    -
    -

    Methods

    -
    onChange? -
    -
    -

    Properties

    -
    -

    Optional Readonly children

    -
    children?: ReactNode
    -

    Used to get the child elements of the component.

    -
    -
    -

    Optional data-tooltip

    -
    data-tooltip?: string
    -
    -

    Optional disabled

    -
    disabled?: boolean
    -

    When present, it specifies that the element value cannot be altered.

    - -

    Default Value

    false

    -
    -
    -

    Optional readOnly

    -
    readOnly?: boolean
    -

    When present, it specifies that the value cannot be changed.

    - -

    Default Value

    false

    -
    -
    -

    Optional tooltip

    -
    tooltip?: string
    -

    Content of the tooltip.

    -
    -
    -

    Optional tooltipOptions

    -
    tooltipOptions?: default
    -

    Configuration of the tooltip, refer to the tooltip documentation for more information.

    -
    -
    -

    Optional value

    -
    value?: null | boolean
    -

    Value of the TriStateCheckbox.

    -
    -
    -

    Methods

    -
    -

    Optional onChange

    -
    -
    -
    -
    -

    Settings

     -
    -
    -

    Member Visibility

    -
      -
      • -
      • -
    -
    -

    Theme

    - -
    -
    \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 6b179f99a0..676a0cbe56 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,7 +1,7 @@ - + diff --git a/gulpfile.js b/gulpfile.js index fb92160bf8..5aa3c20033 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,15 +20,7 @@ gulp.task('build-themes', function () { return ( gulp .src([ - 'public/themes/**/*', - '!public/themes/soho-*', - '!public/themes/soho-*/**/*', - '!public/themes/viva-*', - '!public/themes/viva-*/**/*', - '!public/themes/mira', - '!public/themes/mira/**/*', - '!public/themes/nano', - '!public/themes/nano/**/*' + 'public/themes/**/*' ]) //.pipe(uglifycss({"uglyComments": true})) .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources/themes')) diff --git a/next.config.js b/next.config.js index f81468ff5a..9fe847767c 100644 --- a/next.config.js +++ b/next.config.js @@ -1,9 +1,10 @@ module.exports = { reactStrictMode: process.env.NODE_ENV === 'production' ? false : true, trailingSlash: true, - basePath: process.env.NODE_ENV === 'production' ? '/primereact' : '', publicRuntimeConfig: { - contextPath: process.env.NODE_ENV === 'production' ? '/primereact' : '', - uploadPath: process.env.NODE_ENV === 'production' ? '/primereact/upload.php' : '/api/upload' + appVersion: process.env.npm_package_version || '', + contextPath: '', + uploadPath: '/api/upload', + apiDocUrl: 'https://primefaces.github.io/primereact/api/9.0.0-beta.1' } }; diff --git a/package-build.json b/package-build.json index d1719d4dfc..898e7ffca3 100644 --- a/package-build.json +++ b/package-build.json @@ -1,9 +1,9 @@ { "name": "primereact", - "version": "8.7.4", + "version": "9.0.0-beta.1", "private": false, "author": "PrimeTek Informatics", - "description": "PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.", + "description": "PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.", "homepage": "https://www.primefaces.org/primereact", "repository": { "type": "git", diff --git a/package-lock.json b/package-lock.json index 76c29f8927..7f3d379fd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "primereact", - "version": "8.7.4-SNAPSHOT", + "version": "9.0.0-beta.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "primereact", - "version": "8.7.4-SNAPSHOT", + "version": "9.0.0-beta.1", "dependencies": { "chart.js": "3.9.1", "file-saver": "2.0.5", diff --git a/package.json b/package.json index b41804b841..ea29ce5a79 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { "name": "primereact", "private": false, - "version": "8.7.4-SNAPSHOT", + "version": "9.0.0-beta.1", "scripts": { "dev": "next dev", "start": "next start", - "build": "next build && next export", + "build": "next build", "build:lib": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package", "build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:api", "build:api": "node ./api-generator/build-api.js", @@ -18,7 +18,7 @@ "type:check": "tsc", "test": "jest --watch --coverage", "test:check": "jest --watchAll=false --coverage", - "doc": "typedoc" + "doc": "typedoc --name \"PrimeReact - v9.0.0-beta.1\" --out docs/api/9.0.0-beta.1" }, "dependencies": { "chart.js": "3.9.1", diff --git a/pages/_app.js b/pages/_app.js index 4f507a6cce..e2d9f6ba5d 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,18 +1,19 @@ -import '../styles/layout/layout.scss'; -import '../styles/primereact.css'; -import 'primeicons/primeicons.css'; import 'primeflex/primeflex.css'; -import '../styles/demo/demo.scss'; -import Layout from '../components/layout/layout'; +import 'primeicons/primeicons.css'; import { useEffect, useRef, useState } from 'react'; +import Layout from '../components/layout/layout'; import fetchNews from '../service/NewsService'; -import { useStorage } from '../components/lib/hooks/useStorage'; +import '../styles/layout/layout.scss'; +// prettier-ignore +import '../styles/primereact.css'; +// prettier-ignore +import '../styles/demo/demo.scss'; export default function MyApp({ Component }) { const [dark, setDark] = useState(false); - const [theme, setTheme] = useStorage('lara-light-indigo', 'primereact-showcase-theme'); - const [storedNews, setStoredNews] = useStorage('', 'primereact-news'); + const [theme, setTheme] = useState('lara-light-indigo'); const [newsActive, setNewsActive] = useState(false); + const storageKey = 'primereact-news'; const announcement = useRef(null); useEffect(() => { @@ -49,7 +50,7 @@ export default function MyApp({ Component }) { hiddenNews: announcement.current.id }; - setStoredNews(item); + localStorage.setItem(storageKey, JSON.stringify(item)); }, onThemeChange: (newTheme, dark) => { setDark(dark); diff --git a/pages/_document.js b/pages/_document.js index 620babf2a3..104b6ae0c7 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -1,5 +1,5 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document'; import getConfig from 'next/config'; +import Document, { Head, Html, Main, NextScript } from 'next/document'; class MyDocument extends Document { static async getInitialProps(ctx) { @@ -14,7 +14,12 @@ class MyDocument extends Document { return ( + + + {/* eslint-disable */} + + {/* eslint-enable */}
    diff --git a/pages/accessibility/index.js b/pages/accessibility/index.js index 33fca6761e..7791b12ce7 100644 --- a/pages/accessibility/index.js +++ b/pages/accessibility/index.js @@ -1,8 +1,8 @@ -import React, { useState } from 'react'; -import Head from 'next/head'; -import { Checkbox } from '../../components/lib/checkbox/Checkbox'; import getConfig from 'next/config'; +import Head from 'next/head'; +import React, { useState } from 'react'; import { CodeHighlight } from '../../components/doc/common/codehighlight'; +import { Checkbox } from '../../components/lib/checkbox/Checkbox'; const AccessibilityPage = () => { const contextPath = getConfig().publicRuntimeConfig.contextPath; @@ -28,8 +28,8 @@ const AccessibilityPage = () => { PrimeTek {' '} teams have initiated a significant process to review and enhance the accessibility features of the components. This guide documents the foundation of the general guidelines that PrimeReact will follow and each component - documentation will have a separate Accessibility section that states the keyboard support, screen reader compatibility, the implementation details along with tips to achieve WCAG compliancy. This work has been initiated in - Q2 2022 and planned to be completed by early Q3. PrimeReact will be the reference implementation which then will be ported to PrimeFaces, PrimeNG and PrimeVue. + documentation will have a separate Accessibility section that states the keyboard support, screen reader compatibility, the implementation details along with tips to achieve WCAG compliancy. This work has been completed for + PrimeVue as the reference implementation and currently being ported to PrimeReact to be finalized in Q2 2023.

    Introduction

    diff --git a/pages/accordion/index.js b/pages/accordion/index.js index 5e0662a05b..b21005c9c2 100644 --- a/pages/accordion/index.js +++ b/pages/accordion/index.js @@ -1,6 +1,5 @@ import Head from 'next/head'; import { AccessibilityDoc } from '../../components/doc/accordion/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/accordion/apidoc'; import { BasicDoc } from '../../components/doc/accordion/basicdoc'; import { ControlledDoc } from '../../components/doc/accordion/controlleddoc'; import { DisabledDoc } from '../../components/doc/accordion/disableddoc'; @@ -57,7 +56,10 @@ const AccordionDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [ + { name: 'Accordion', pathname: '/modules/accordion.html' }, + { name: 'AccordionTab', pathname: '/classes/accordion.AccordionTab.html' } + ] } ]; @@ -72,7 +74,7 @@ const AccordionDemo = () => {

    Accordion

    Accordion groups a collection of contents in tabs.

    - +
    diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js index 1c05baf58e..8660ec259d 100644 --- a/pages/autocomplete/index.js +++ b/pages/autocomplete/index.js @@ -1,7 +1,7 @@ import Head from 'next/head'; import React from 'react'; import { AccessibilityDoc } from '../../components/doc/autocomplete/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/autocomplete/apidoc'; + import { BasicDoc } from '../../components/doc/autocomplete/basicdoc'; import { DisabledDoc } from '../../components/doc/autocomplete/disableddoc'; import { DropdownDoc } from '../../components/doc/autocomplete/dropdowndoc'; @@ -17,6 +17,7 @@ import { ObjectsDoc } from '../../components/doc/autocomplete/objectsdoc'; import { StyleDoc } from '../../components/doc/autocomplete/styledoc'; import { TemplateDoc } from '../../components/doc/autocomplete/templatedoc'; import { VirtualScrollDoc } from '../../components/doc/autocomplete/virtualscrolldoc'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; @@ -112,7 +113,7 @@ const AutoCompleteDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'AutoComplete', pathname: '/modules/autocomplete.html' }] } ]; @@ -127,6 +128,7 @@ const AutoCompleteDemo = () => {

    AutoComplete

    AutoComplete is an input component that provides real-time suggestions while being typed.

    +
    diff --git a/pages/avatar/index.js b/pages/avatar/index.js index 4ba7066c82..d0e3157074 100644 --- a/pages/avatar/index.js +++ b/pages/avatar/index.js @@ -1,17 +1,16 @@ import Head from 'next/head'; import React from 'react'; -import { DocActions } from '../../components/doc/common/docactions'; +import { AccessibilityDoc } from '../../components/doc/avatar/accessibilitydoc'; +import { AvatarGroupDoc } from '../../components/doc/avatar/avatargroupdoc'; +import { IconDoc } from '../../components/doc/avatar/icondoc'; +import { ImageDoc } from '../../components/doc/avatar/imagedoc'; import { ImportDoc } from '../../components/doc/avatar/importdoc'; import { LabelDoc } from '../../components/doc/avatar/labeldoc'; -import { ApiDoc } from '../../components/doc/avatar/apidoc'; -import { IconDoc } from '../../components/doc/avatar/icondoc'; +import { StylingAvatarDoc } from '../../components/doc/avatar/stylingavatardoc'; +import { StylingAvatarGroupDoc } from '../../components/doc/avatar/stylingavatargroupdoc'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ImageDoc } from '../../components/doc/avatar/imagedoc'; -import { AvatarGroupDoc } from '../../components/doc/avatar/avatargroupdoc'; -import { StylingAvatarGroupDoc } from '../../components/doc/avatar/stylingavatargroupdoc'; -import { AccessibilityDoc } from '../../components/doc/avatar/accessibilitydoc'; -import { StylingAvatarDoc } from '../../components/doc/avatar/stylingavatardoc'; const AvatarDemo = () => { const docs = [ @@ -58,7 +57,7 @@ const AvatarDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Avatar', pathname: '/modules/avatar.html' }] } ]; @@ -73,7 +72,7 @@ const AvatarDemo = () => {

    Avatar

    Avatar represents people using icons, labels and images.

    - +
    diff --git a/pages/badge/index.js b/pages/badge/index.js index 3cca26b23e..e234123895 100644 --- a/pages/badge/index.js +++ b/pages/badge/index.js @@ -1,17 +1,16 @@ import Head from 'next/head'; import React from 'react'; -import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/badge/apidoc'; import { AccessibilityDoc } from '../../components/doc/badge/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/badge/styledoc'; -import { ImportDoc } from '../../components/doc/badge/importdoc'; import { BasicDoc } from '../../components/doc/badge/basicdoc'; -import { SeverityDoc } from '../../components/doc/badge/severitydoc'; import { ButtonDoc } from '../../components/doc/badge/buttondoc'; +import { ImportDoc } from '../../components/doc/badge/importdoc'; import { PositionDoc } from '../../components/doc/badge/positiondoc'; +import { SeverityDoc } from '../../components/doc/badge/severitydoc'; import { SizeDoc } from '../../components/doc/badge/sizedoc'; +import { StyleDoc } from '../../components/doc/badge/styledoc'; import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; const BadgeDemo = () => { const docs = [ @@ -58,7 +57,7 @@ const BadgeDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Badge', pathname: '/modules/badge.html' }] } ]; @@ -74,7 +73,7 @@ const BadgeDemo = () => {

    Badge

    Badge is a small status indicator for another element.

    - +
    diff --git a/pages/blockui/index.js b/pages/blockui/index.js index 4d6109a08b..6dfbae929a 100644 --- a/pages/blockui/index.js +++ b/pages/blockui/index.js @@ -1,15 +1,14 @@ import Head from 'next/head'; import React from 'react'; -import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/blockui/apidoc'; import { AccessibilityDoc } from '../../components/doc/blockui/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/blockui/styledoc'; -import { ImportDoc } from '../../components/doc/blockui/importdoc'; import { BasicDoc } from '../../components/doc/blockui/basicdoc'; -import { TemplateDoc } from '../../components/doc/blockui/templatedoc'; import { DocumentDoc } from '../../components/doc/blockui/documentdoc'; +import { ImportDoc } from '../../components/doc/blockui/importdoc'; +import { StyleDoc } from '../../components/doc/blockui/styledoc'; +import { TemplateDoc } from '../../components/doc/blockui/templatedoc'; import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; const BlockUIDemo = () => { const docs = [ @@ -46,7 +45,7 @@ const BlockUIDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'BlockUI', pathname: '/modules/blockui.html' }] } ]; @@ -62,7 +61,7 @@ const BlockUIDemo = () => {

    BlockUI

    BlockUI can block certain elements or the whole page.

    - +
    diff --git a/pages/breadcrumb/index.js b/pages/breadcrumb/index.js index 3b850a67c9..356a5f68a9 100644 --- a/pages/breadcrumb/index.js +++ b/pages/breadcrumb/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; -import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/breadcrumb/importdoc'; +import { AccessibilityDoc } from '../../components/doc/breadcrumb/accessibilitydoc'; import { BasicDoc } from '../../components/doc/breadcrumb/basicdoc'; -import { ApiDoc } from '../../components/doc/breadcrumb/apidoc'; +import { ImportDoc } from '../../components/doc/breadcrumb/importdoc'; import { StyleDoc } from '../../components/doc/breadcrumb/styledoc'; -import { AccessibilityDoc } from '../../components/doc/breadcrumb/accessibilitydoc'; import { TemplateDoc } from '../../components/doc/breadcrumb/templatedoc'; +import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; const BreadCrumbDemo = () => { const docs = [ @@ -39,7 +38,7 @@ const BreadCrumbDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Breadcrumb', pathname: '/modules/breadcrumb.html' }] } ]; @@ -54,7 +53,7 @@ const BreadCrumbDemo = () => {

    Breadcrumb

    Breadcrumb provides contextual information about page hierarchy.

    - +
    diff --git a/pages/button/index.js b/pages/button/index.js index f2ca43bf0b..13771a5a78 100644 --- a/pages/button/index.js +++ b/pages/button/index.js @@ -1,28 +1,27 @@ import Head from 'next/head'; -import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/button/importdoc'; +import { AccessibilityDoc } from '../../components/doc/button/accessibilitydoc'; +import { BadgesDoc } from '../../components/doc/button/badgesdoc'; import { BasicDoc } from '../../components/doc/button/basicdoc'; +import { ButtonSetDoc } from '../../components/doc/button/buttonsetdoc'; +import { DisabledDoc } from '../../components/doc/button/disableddoc'; import { IconsDoc } from '../../components/doc/button/iconsdoc'; +import { ImportDoc } from '../../components/doc/button/importdoc'; import { LoadingDoc } from '../../components/doc/button/loadingdoc'; -import { SeveritiesDoc } from '../../components/doc/button/severitiesdoc'; +import { OutlinedButtonsDoc } from '../../components/doc/button/outlinedbuttonsdoc'; import { RaisedButtonsDoc } from '../../components/doc/button/raisedbuttonsdoc'; -import { RoundedButtonsDoc } from '../../components/doc/button/roundedbuttonsdoc'; -import { TextButtonsDoc } from '../../components/doc/button/textdoc'; import { RaisedTextButtonsDoc } from '../../components/doc/button/raisedtextdoc'; -import { OutlinedButtonsDoc } from '../../components/doc/button/outlinedbuttonsdoc'; +import { RoundedButtonsDoc } from '../../components/doc/button/roundedbuttonsdoc'; import { RoundedIconButtonsDoc } from '../../components/doc/button/roundedicondoc'; -import { RoundedTextIconButtonsDoc } from '../../components/doc/button/roundedtextdoc'; import { RoundedOutlinedButtonsDoc } from '../../components/doc/button/roundedoutlineddoc'; -import { BadgesDoc } from '../../components/doc/button/badgesdoc'; -import { ButtonSetDoc } from '../../components/doc/button/buttonsetdoc'; +import { RoundedTextIconButtonsDoc } from '../../components/doc/button/roundedtextdoc'; +import { SeveritiesDoc } from '../../components/doc/button/severitiesdoc'; import { SizesDoc } from '../../components/doc/button/sizesdoc'; -import { TemplateDoc } from '../../components/doc/button/templatedoc'; -import { ApiDoc } from '../../components/doc/button/apidoc'; -import { AccessibilityDoc } from '../../components/doc/button/accessibilitydoc'; import { StyleDoc } from '../../components/doc/button/styledoc'; -import { DisabledDoc } from '../../components/doc/button/disableddoc'; +import { TemplateDoc } from '../../components/doc/button/templatedoc'; +import { TextButtonsDoc } from '../../components/doc/button/textdoc'; +import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; const ButtonDemo = () => { const docs = [ @@ -129,7 +128,7 @@ const ButtonDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Button', pathname: '/modules/button.html' }] } ]; @@ -145,7 +144,7 @@ const ButtonDemo = () => {

    Button is an extension to standard input element with icons and theming.

    - +
    diff --git a/pages/calendar/index.js b/pages/calendar/index.js index 0ac766d0da..cdca9773fe 100644 --- a/pages/calendar/index.js +++ b/pages/calendar/index.js @@ -1,12 +1,14 @@ import Head from 'next/head'; import { AccessibilityDoc } from '../../components/doc/calendar/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/calendar/apidoc'; + import { BasicDoc } from '../../components/doc/calendar/basicdoc'; import { ButtonBarDoc } from '../../components/doc/calendar/buttonbardoc'; import { DateFormatDoc } from '../../components/doc/calendar/dateformatdoc'; import { DateTemplateDoc } from '../../components/doc/calendar/datetemplatedoc'; import { DisabledDoc } from '../../components/doc/calendar/disableddoc'; import { FloatLabelDoc } from '../../components/doc/calendar/floatlabeldoc'; +import { FormikDoc } from '../../components/doc/calendar/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/calendar/form/hookfromdoc'; import { IconDoc } from '../../components/doc/calendar/icondoc'; import { ImportDoc } from '../../components/doc/calendar/importdoc'; import { InlineDoc } from '../../components/doc/calendar/inlinedoc'; @@ -20,8 +22,6 @@ import { StyleDoc } from '../../components/doc/calendar/styledoc'; import { Time12Doc } from '../../components/doc/calendar/time12doc'; import { Time24Doc } from '../../components/doc/calendar/time24doc'; import { TouchUIDoc } from '../../components/doc/calendar/touchuidoc'; -import { FormikDoc } from '../../components/doc/calendar/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/calendar/form/hookfromdoc'; import { YearPickerDoc } from '../../components/doc/calendar/yearpickerdoc'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; @@ -154,7 +154,7 @@ const CalendarDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Calendar', pathname: '/modules/calendar.html' }] } ]; @@ -169,7 +169,7 @@ const CalendarDemo = () => {

    Calendar

    Calendar, also known as DatePicker, is a form component to work with dates.

    - +
    diff --git a/pages/captcha/index.js b/pages/captcha/index.js index 24df51b745..535d2262bc 100644 --- a/pages/captcha/index.js +++ b/pages/captcha/index.js @@ -1,12 +1,10 @@ import Head from 'next/head'; import React from 'react'; +import { AccessibilityDoc } from '../../components/doc/captcha/accessibilitydoc'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/captcha/apidoc'; -import { AccessibilityDoc } from '../../components/doc/captcha/accessibilitydoc'; - -import { ImportDoc } from '../../components/doc/captcha/importdoc'; import { CaptchaDoc } from '../../components/doc/captcha/captchadoc'; +import { ImportDoc } from '../../components/doc/captcha/importdoc'; import { DocActions } from '../../components/doc/common/docactions'; const CaptchaDemo = () => { @@ -29,7 +27,7 @@ const CaptchaDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Captcha', pathname: '/modules/captcha.html' }] } ]; @@ -45,7 +43,7 @@ const CaptchaDemo = () => {

    Captcha

    Captcha is a form validation component based on Recaptcha.

    - +
    diff --git a/pages/card/index.js b/pages/card/index.js index 752e38bcab..e1152ba1af 100644 --- a/pages/card/index.js +++ b/pages/card/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; -import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/card/importdoc'; -import { BasicDoc } from '../../components/doc/card/basicdoc'; -import { AdvancedDoc } from '../../components/doc/card/advanceddoc'; -import { ApiDoc } from '../../components/doc/card/apidoc'; import { AccessibilityDoc } from '../../components/doc/card/accessibilitydoc'; +import { AdvancedDoc } from '../../components/doc/card/advanceddoc'; +import { BasicDoc } from '../../components/doc/card/basicdoc'; +import { ImportDoc } from '../../components/doc/card/importdoc'; import { StyleDoc } from '../../components/doc/card/styledoc'; +import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; const CardDemo = () => { const docs = [ @@ -39,7 +38,7 @@ const CardDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Card', pathname: '/modules/card.html' }] } ]; @@ -54,7 +53,7 @@ const CardDemo = () => {

    Card

    Card is a flexible container component.

    - +
    diff --git a/pages/carousel/index.js b/pages/carousel/index.js index 2146b3fbed..5e755e2205 100644 --- a/pages/carousel/index.js +++ b/pages/carousel/index.js @@ -1,16 +1,15 @@ import Head from 'next/head'; -import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/carousel/importdoc'; -import { BasicDoc } from '../../components/doc/carousel/basicdoc'; -import { ApiDoc } from '../../components/doc/carousel/apidoc'; import { AccessibilityDoc } from '../../components/doc/carousel/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/carousel/styledoc'; +import { BasicDoc } from '../../components/doc/carousel/basicdoc'; import { CircularDoc } from '../../components/doc/carousel/circulardoc'; -import { VerticalDoc } from '../../components/doc/carousel/verticaldoc'; +import { ImportDoc } from '../../components/doc/carousel/importdoc'; import { NumScrollDoc } from '../../components/doc/carousel/numscrolldoc'; import { ResponsiveDoc } from '../../components/doc/carousel/responsivedoc'; +import { StyleDoc } from '../../components/doc/carousel/styledoc'; +import { VerticalDoc } from '../../components/doc/carousel/verticaldoc'; +import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; const CarouselDemo = () => { const docs = [ @@ -57,7 +56,7 @@ const CarouselDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Carousel', pathname: '/modules/carousel.html' }] } ]; @@ -72,7 +71,7 @@ const CarouselDemo = () => {

    Carousel

    Carousel is a content slider featuring various customization options.

    - +
    diff --git a/pages/cascadeselect/index.js b/pages/cascadeselect/index.js index 8f5c647e4e..675045b4a0 100644 --- a/pages/cascadeselect/index.js +++ b/pages/cascadeselect/index.js @@ -1,16 +1,16 @@ import Head from 'next/head'; import React from 'react'; import { AccessibilityDoc } from '../../components/doc/cascadeselect/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/cascadeselect/apidoc'; + import { BasicDoc } from '../../components/doc/cascadeselect/basicdoc'; import { DisabledDoc } from '../../components/doc/cascadeselect/disableddoc'; import { FloatLabelDoc } from '../../components/doc/cascadeselect/floatlabeldoc'; +import { FormikDoc } from '../../components/doc/cascadeselect/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/cascadeselect/form/hookformdoc'; import { ImportDoc } from '../../components/doc/cascadeselect/importdoc'; import { InvalidDoc } from '../../components/doc/cascadeselect/invaliddoc'; import { StyleDoc } from '../../components/doc/cascadeselect/styledoc'; import { TemplateDoc } from '../../components/doc/cascadeselect/templatedoc'; -import { FormikDoc } from '../../components/doc/cascadeselect/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/cascadeselect/form/hookformdoc'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; @@ -77,7 +77,7 @@ const CascadeSelectDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'CascadeSelect', pathname: '/modules/cascadeselect.html' }] } ]; @@ -92,7 +92,7 @@ const CascadeSelectDemo = () => {

    CascadeSelect

    CascadeSelect is a form component to select a value from a nested structure of options.

    - +
    diff --git a/pages/chart/index.js b/pages/chart/index.js index 8663030fa7..4bc9d76b87 100644 --- a/pages/chart/index.js +++ b/pages/chart/index.js @@ -1,6 +1,6 @@ import Head from 'next/head'; import { AccessibilityDoc } from '../../components/doc/chart/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/chart/apidoc'; + import { BasicDoc } from '../../components/doc/chart/basicdoc'; import { ComboDoc } from '../../components/doc/chart/combodoc'; import { DoughnutChartDoc } from '../../components/doc/chart/doughnutdoc'; @@ -93,7 +93,7 @@ const ChartDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Chart', pathname: '/modules/chart.html' }] } ]; @@ -113,7 +113,7 @@ const ChartDemo = () => { , an open source HTML5 based charting library.

    - +
    diff --git a/pages/checkbox/index.js b/pages/checkbox/index.js index 6c8c891059..0ac6400cf0 100644 --- a/pages/checkbox/index.js +++ b/pages/checkbox/index.js @@ -1,16 +1,17 @@ import Head from 'next/head'; import React from 'react'; import { AccessibilityDoc } from '../../components/doc/checkbox/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/checkbox/apidoc'; + import { BasicDoc } from '../../components/doc/checkbox/basicdoc'; import { DisabledDoc } from '../../components/doc/checkbox/disableddoc'; import { DynamicDoc } from '../../components/doc/checkbox/dynamicdoc'; +import { FormikDoc } from '../../components/doc/checkbox/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/checkbox/form/hookformdoc'; import { GroupDoc } from '../../components/doc/checkbox/groupdoc'; import { ImportDoc } from '../../components/doc/checkbox/importdoc'; import { InvalidDoc } from '../../components/doc/checkbox/invaliddoc'; import { StyleDoc } from '../../components/doc/checkbox/styledoc'; -import { FormikDoc } from '../../components/doc/checkbox/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/checkbox/form/hookformdoc'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; @@ -76,7 +77,7 @@ const CheckboxDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Checkbox', pathname: '/modules/checkbox.html' }] } ]; @@ -92,6 +93,7 @@ const CheckboxDemo = () => {

    Checkbox

    Checkbox is an extension to standard checkbox element with theming.

    +
    diff --git a/pages/chip/index.js b/pages/chip/index.js index 46af786961..ab2172e49c 100644 --- a/pages/chip/index.js +++ b/pages/chip/index.js @@ -1,16 +1,15 @@ import Head from 'next/head'; import React from 'react'; -import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/chip/apidoc'; import { AccessibilityDoc } from '../../components/doc/chip/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/chip/styledoc'; -import { ImportDoc } from '../../components/doc/chip/importdoc'; import { BasicDoc } from '../../components/doc/chip/basicdoc'; import { IconDoc } from '../../components/doc/chip/icondoc'; import { ImageDoc } from '../../components/doc/chip/imagedoc'; +import { ImportDoc } from '../../components/doc/chip/importdoc'; +import { StyleDoc } from '../../components/doc/chip/styledoc'; import { TemplateDoc } from '../../components/doc/chip/templatedoc'; import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; const ChipDemo = () => { const docs = [ @@ -52,7 +51,7 @@ const ChipDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Chip', pathname: '/modules/chip.html' }] } ]; @@ -68,7 +67,7 @@ const ChipDemo = () => {

    Chip

    Chip represents entities using icons, labels and images.

    - +
    diff --git a/pages/chips/index.js b/pages/chips/index.js index e4f3ca88bc..cb38f401ad 100644 --- a/pages/chips/index.js +++ b/pages/chips/index.js @@ -1,18 +1,19 @@ import Head from 'next/head'; -import React, { useState } from 'react'; +import React from 'react'; import { AccessibilityDoc } from '../../components/doc/chips/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/chips/apidoc'; + import { BasicDoc } from '../../components/doc/chips/basicdoc'; import { DisabledDoc } from '../../components/doc/chips/disableddoc'; import { FloatLabelDoc } from '../../components/doc/chips/floatlabeldoc'; +import { FormikDoc } from '../../components/doc/chips/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/chips/form/hookformdoc'; import { ImportDoc } from '../../components/doc/chips/importdoc'; import { InvalidDoc } from '../../components/doc/chips/invaliddoc'; import { KeyFilterDoc } from '../../components/doc/chips/keyfilterdoc'; import { SeparatorDoc } from '../../components/doc/chips/separatordoc'; import { StyleDoc } from '../../components/doc/chips/styledoc'; import { TemplateDoc } from '../../components/doc/chips/templatedoc'; -import { FormikDoc } from '../../components/doc/chips/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/chips/form/hookformdoc'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; @@ -88,7 +89,7 @@ const ChipsDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Chips', pathname: '/modules/chips.html' }] } ]; @@ -104,6 +105,7 @@ const ChipsDemo = () => {

    Chips

    Chips is used to enter multiple values on an input field.

    +
    diff --git a/pages/colorpicker/index.js b/pages/colorpicker/index.js index a439e72550..bbcee0f3cf 100644 --- a/pages/colorpicker/index.js +++ b/pages/colorpicker/index.js @@ -1,14 +1,14 @@ import Head from 'next/head'; import { AccessibilityDoc } from '../../components/doc/colorpicker/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/colorpicker/apidoc'; + import { DisabledDoc } from '../../components/doc/colorpicker/disableddoc'; +import { FormikDoc } from '../../components/doc/colorpicker/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/colorpicker/form/hookformdoc'; import { FormatDoc } from '../../components/doc/colorpicker/formatdoc'; import { ImportDoc } from '../../components/doc/colorpicker/importdoc'; import { InlineDoc } from '../../components/doc/colorpicker/inlinedoc'; import { OverlayDoc } from '../../components/doc/colorpicker/overlaydoc'; import { StyleDoc } from '../../components/doc/colorpicker/styledoc'; -import { FormikDoc } from '../../components/doc/colorpicker/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/colorpicker/form/hookformdoc'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; @@ -70,7 +70,7 @@ const ColorPickerDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ColorPicker', pathname: '/modules/colorpicker.html' }] } ]; @@ -85,7 +85,7 @@ const ColorPickerDemo = () => {

    ColorPicker

    ColorPicker is an input component to select a color.

    - +
    diff --git a/pages/confirmdialog/index.js b/pages/confirmdialog/index.js index 014b4d352b..928ef41af5 100644 --- a/pages/confirmdialog/index.js +++ b/pages/confirmdialog/index.js @@ -3,7 +3,7 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/confirmdialog/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/confirmdialog/apidoc'; + import { BasicDoc } from '../../components/doc/confirmdialog/basicdoc'; import { DeclarativeDoc } from '../../components/doc/confirmdialog/declarativedoc'; import { ImportDoc } from '../../components/doc/confirmdialog/importdoc'; @@ -46,7 +46,7 @@ const ConfirmDialogDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ConfirmDialog', pathname: '/modules/confirmdialog.html' }] } ]; @@ -61,7 +61,7 @@ const ConfirmDialogDemo = () => {

    ConfirmDialog

    ConfirmDialog is an easy to use and customizable Confirmation API using a dialog.

    - +
    diff --git a/pages/confirmpopup/index.js b/pages/confirmpopup/index.js index f3b7c546e6..15fa29b9b3 100644 --- a/pages/confirmpopup/index.js +++ b/pages/confirmpopup/index.js @@ -3,7 +3,7 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/confirmpopup/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/confirmpopup/apidoc'; + import { BasicDoc } from '../../components/doc/confirmpopup/basicdoc'; import { DeclarativeDoc } from '../../components/doc/confirmpopup/declarativedoc'; import { ImportDoc } from '../../components/doc/confirmpopup/importdoc'; @@ -39,7 +39,7 @@ const ConfirmPopupDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ConfirmPopup', pathname: '/modules/confirmpopup.html' }] } ]; @@ -54,7 +54,7 @@ const ConfirmPopupDemo = () => {

    ConfirmPopup

    ConfirmPopup is an easy to use and customizable Confirmation API using a popover.

    - +
    diff --git a/pages/contextmenu/index.js b/pages/contextmenu/index.js index fdc12e8a8c..e7e4e1bd67 100644 --- a/pages/contextmenu/index.js +++ b/pages/contextmenu/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/contextmenu/importdoc'; -import { BasicDoc } from '../../components/doc/contextmenu/basicdoc'; -import { ApiDoc } from '../../components/doc/contextmenu/apidoc'; import { AccessibilityDoc } from '../../components/doc/contextmenu/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/contextmenu/styledoc'; +import { BasicDoc } from '../../components/doc/contextmenu/basicdoc'; import { DocumentDoc } from '../../components/doc/contextmenu/documentdoc'; +import { ImportDoc } from '../../components/doc/contextmenu/importdoc'; +import { StyleDoc } from '../../components/doc/contextmenu/styledoc'; const ContextMenuDemo = () => { const docs = [ @@ -39,7 +38,7 @@ const ContextMenuDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ContextMenu', pathname: '/modules/contextmenu.html' }] } ]; @@ -57,7 +56,7 @@ const ContextMenuDemo = () => { special integration.

    - +
    diff --git a/pages/datascroller/index.js b/pages/datascroller/index.js index 37075aac69..a3329d3b32 100644 --- a/pages/datascroller/index.js +++ b/pages/datascroller/index.js @@ -2,13 +2,12 @@ import Head from 'next/head'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/datascroller/apidoc'; import { AccessibilityDoc } from '../../components/doc/datascroller/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/datascroller/styledoc'; import { BasicDoc } from '../../components/doc/datascroller/basicdoc'; import { ImportDoc } from '../../components/doc/datascroller/importdoc'; import { InlineDataScrollerDoc } from '../../components/doc/datascroller/inlinedoc'; import { LoaderDataScrollerDoc } from '../../components/doc/datascroller/loaderdoc'; +import { StyleDoc } from '../../components/doc/datascroller/styledoc'; const DataScrollerDemo = () => { const docs = [ @@ -45,7 +44,7 @@ const DataScrollerDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'DataScroller', pathname: '/modules/datascroller.html' }] } ]; @@ -61,7 +60,7 @@ const DataScrollerDemo = () => {

    DataScroller displays data with on demand loading using scroll.

    - +
    diff --git a/pages/datatable/index.js b/pages/datatable/index.js index a3bcbb5473..853ead0921 100644 --- a/pages/datatable/index.js +++ b/pages/datatable/index.js @@ -2,9 +2,7 @@ import Head from 'next/head'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/datatable/apidoc'; import { AccessibilityDoc } from '../../components/doc/datatable/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/datatable/styledoc'; import { BasicDoc } from '../../components/doc/datatable/basicdoc'; import { ColGroupDoc } from '../../components/doc/datatable/colgroupdoc'; import { ChooseResizableColumnsDoc } from '../../components/doc/datatable/colresize/chooseresizablecolumnsdoc'; @@ -57,10 +55,11 @@ import { CustomStorageDoc } from '../../components/doc/datatable/state/customsto import { LocalStorageDoc } from '../../components/doc/datatable/state/localdoc'; import { SessionStorageDoc } from '../../components/doc/datatable/state/sessionstoragedoc'; import { StripedDoc } from '../../components/doc/datatable/stripeddoc'; +import { StyledDataTableDoc } from '../../components/doc/datatable/styleddatatabledoc'; +import { StyleDoc } from '../../components/doc/datatable/styledoc'; import { TemplateDoc } from '../../components/doc/datatable/templatedoc'; import { LazyLoadingFromRemoteDataSourceDoc } from '../../components/doc/datatable/virtualscroll/lazyloadfromremotedatadoc'; import { PreloadedDataDoc } from '../../components/doc/datatable/virtualscroll/preloadeddatadoc'; -import { StyledDataTableDoc } from '../../components/doc/datatable/styleddatatabledoc'; const DataTableDemo = () => { const docs = [ @@ -442,7 +441,12 @@ const DataTableDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [ + { name: 'DataTable', pathname: '/modules/datatable.html' }, + { name: 'Column', pathname: '/modules/column.html' }, + { name: 'Row', pathname: '/modules/row.html' }, + { name: 'ColumnGroup', pathname: '/modules/columngroup.html' } + ] } ]; @@ -458,7 +462,7 @@ const DataTableDemo = () => {

    DataTable displays data in tabular format.

    - +
    diff --git a/pages/dataview/index.js b/pages/dataview/index.js index 855da356e7..c0073abc2d 100644 --- a/pages/dataview/index.js +++ b/pages/dataview/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; -import { DocSections } from '../../components/doc/common/docsections'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { ImportDoc } from '../../components/doc/dataview/importdoc'; -import { BasicDoc } from '../../components/doc/dataview/basicdoc'; -import { ApiDoc } from '../../components/doc/dataview/apidoc'; +import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/dataview/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/dataview/styledoc'; +import { BasicDoc } from '../../components/doc/dataview/basicdoc'; +import { ImportDoc } from '../../components/doc/dataview/importdoc'; import { LazyDataViewDoc } from '../../components/doc/dataview/lazydoc'; +import { StyleDoc } from '../../components/doc/dataview/styledoc'; const DataViewDemo = () => { const docs = [ @@ -39,7 +38,7 @@ const DataViewDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'DataView', pathname: '/modules/dataview.html' }] } ]; @@ -55,7 +54,7 @@ const DataViewDemo = () => {

    DataView displays data in grid or list layout with pagination and sorting features.

    - +
    diff --git a/pages/deferredcontent/index.js b/pages/deferredcontent/index.js index fea98be930..38eb5d98d1 100644 --- a/pages/deferredcontent/index.js +++ b/pages/deferredcontent/index.js @@ -1,12 +1,11 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/deferredcontent/importdoc'; +import { AccessibilityDoc } from '../../components/doc/deferredcontent/accessibilitydoc'; import { BasicDoc } from '../../components/doc/deferredcontent/basicdoc'; import { DataTableDoc } from '../../components/doc/deferredcontent/datatabledoc'; -import { ApiDoc } from '../../components/doc/deferredcontent/apidoc'; -import { AccessibilityDoc } from '../../components/doc/deferredcontent/accessibilitydoc'; +import { ImportDoc } from '../../components/doc/deferredcontent/importdoc'; import { StyleDoc } from '../../components/doc/deferredcontent/styledoc'; const DeferredContentDemo = () => { @@ -39,7 +38,7 @@ const DeferredContentDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'DeferredContent', pathname: '/modules/deferredcontent.html' }] } ]; @@ -54,7 +53,7 @@ const DeferredContentDemo = () => {

    DeferredContent

    DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.

    - +
    diff --git a/pages/dialog/index.js b/pages/dialog/index.js index 805f34e8cd..d140a59261 100644 --- a/pages/dialog/index.js +++ b/pages/dialog/index.js @@ -1,18 +1,17 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/dialog/importdoc'; +import { AccessibilityDoc } from '../../components/doc/dialog/accessibilitydoc'; import { BasicDoc } from '../../components/doc/dialog/basicdoc'; import { FooterDoc } from '../../components/doc/dialog/footerdoc'; -import { WithoutModalDoc } from '../../components/doc/dialog/withoutmodaldoc'; -import { ResponsiveDoc } from '../../components/doc/dialog/responsivedoc'; +import { ImportDoc } from '../../components/doc/dialog/importdoc'; +import { LongContentDoc } from '../../components/doc/dialog/longcontentdoc'; import { MaximizableDoc } from '../../components/doc/dialog/maximizabledoc'; import { PositionDoc } from '../../components/doc/dialog/positiondoc'; -import { ApiDoc } from '../../components/doc/dialog/apidoc'; -import { AccessibilityDoc } from '../../components/doc/dialog/accessibilitydoc'; +import { ResponsiveDoc } from '../../components/doc/dialog/responsivedoc'; import { StyleDoc } from '../../components/doc/dialog/styledoc'; -import { LongContentDoc } from '../../components/doc/dialog/longcontentdoc'; +import { WithoutModalDoc } from '../../components/doc/dialog/withoutmodaldoc'; const DialogDemo = () => { const docs = [ @@ -69,7 +68,7 @@ const DialogDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Dialog', pathname: '/modules/dialog.html' }] } ]; @@ -84,7 +83,7 @@ const DialogDemo = () => {

    Dialog

    Dialog is a container to display content in an overlay window.

    - +
    diff --git a/pages/divider/index.js b/pages/divider/index.js index 4b2297a931..9720815408 100644 --- a/pages/divider/index.js +++ b/pages/divider/index.js @@ -1,16 +1,15 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/divider/importdoc'; +import { AccessibilityDoc } from '../../components/doc/divider/accessibilitydoc'; import { BasicDoc } from '../../components/doc/divider/basicdoc'; -import { TypeDoc } from '../../components/doc/divider/typedoc'; import { ContentDoc } from '../../components/doc/divider/contentdoc'; -import { VerticalDoc } from '../../components/doc/divider/verticaldoc'; +import { ImportDoc } from '../../components/doc/divider/importdoc'; import { LoginDoc } from '../../components/doc/divider/logindoc'; -import { ApiDoc } from '../../components/doc/divider/apidoc'; -import { AccessibilityDoc } from '../../components/doc/divider/accessibilitydoc'; import { StyleDoc } from '../../components/doc/divider/styledoc'; +import { TypeDoc } from '../../components/doc/divider/typedoc'; +import { VerticalDoc } from '../../components/doc/divider/verticaldoc'; const DividerDemo = () => { const docs = [ @@ -57,7 +56,7 @@ const DividerDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Divider', pathname: '/modules/divider.html' }] } ]; @@ -74,7 +73,7 @@ const DividerDemo = () => {

    Divider is used to separate contents.

    - +
    diff --git a/pages/dock/index.js b/pages/dock/index.js index dbbc0f3c40..cca464c8b5 100644 --- a/pages/dock/index.js +++ b/pages/dock/index.js @@ -1,12 +1,11 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/dock/importdoc'; -import { BasicDoc } from '../../components/doc/dock/basicdoc'; -import { AdvancedDoc } from '../../components/doc/dock/advanceddoc'; -import { ApiDoc } from '../../components/doc/dock/apidoc'; import { AccessibilityDoc } from '../../components/doc/dock/accessibilitydoc'; +import { AdvancedDoc } from '../../components/doc/dock/advanceddoc'; +import { BasicDoc } from '../../components/doc/dock/basicdoc'; +import { ImportDoc } from '../../components/doc/dock/importdoc'; import { StyleDoc } from '../../components/doc/dock/styledoc'; const DockDemo = () => { @@ -39,7 +38,7 @@ const DockDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Dock', pathname: '/modules/dock.html' }] } ]; @@ -55,7 +54,7 @@ const DockDemo = () => {

    Dock is a navigation component consisting of menuitems.

    - +
    diff --git a/pages/dropdown/index.js b/pages/dropdown/index.js index e449734222..ad38ef3d50 100644 --- a/pages/dropdown/index.js +++ b/pages/dropdown/index.js @@ -3,20 +3,20 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/dropdown/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/dropdown/apidoc'; + import { BasicDoc } from '../../components/doc/dropdown/basicdoc'; import { ClearIconDoc } from '../../components/doc/dropdown/clearicondoc'; import { DisabledDoc } from '../../components/doc/dropdown/disableddoc'; import { EditableDoc } from '../../components/doc/dropdown/editabledoc'; import { FilterDoc } from '../../components/doc/dropdown/filterdoc'; import { FloatLabelDoc } from '../../components/doc/dropdown/floatlabeldoc'; +import { FormikDoc } from '../../components/doc/dropdown/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/dropdown/form/hookformdoc'; import { GroupedDoc } from '../../components/doc/dropdown/groupeddoc'; import { ImportDoc } from '../../components/doc/dropdown/importdoc'; import { InvalidDoc } from '../../components/doc/dropdown/invaliddoc'; import { StyleDoc } from '../../components/doc/dropdown/styledoc'; import { TemplateDoc } from '../../components/doc/dropdown/templatedoc'; -import { FormikDoc } from '../../components/doc/dropdown/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/dropdown/form/hookformdoc'; import { EagerDoc } from '../../components/doc/dropdown/virtualscroll/eagerdoc'; import { LazyDoc } from '../../components/doc/dropdown/virtualscroll/lazydoc'; @@ -120,7 +120,7 @@ const DropdownDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Dropdown', pathname: '/modules/dropdown.html' }] } ]; @@ -135,7 +135,7 @@ const DropdownDemo = () => {

    Dropdown

    Dropdown also known as Select, is used to choose an item from a collection of options.

    - +
    diff --git a/pages/editor/index.js b/pages/editor/index.js index e9a55043c3..9e92994319 100644 --- a/pages/editor/index.js +++ b/pages/editor/index.js @@ -1,17 +1,17 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/editor/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/editor/apidoc'; import { BasicDoc } from '../../components/doc/editor/basicdoc'; +import { FormikDoc } from '../../components/doc/editor/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/editor/form/hookformdoc'; import { ImportDoc } from '../../components/doc/editor/importdoc'; import { QuillDoc } from '../../components/doc/editor/quilldoc'; import { ReadOnlyDoc } from '../../components/doc/editor/readonlydoc'; import { StyleDoc } from '../../components/doc/editor/styledoc'; import { TemplateDoc } from '../../components/doc/editor/templatedoc'; -import { FormikDoc } from '../../components/doc/editor/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/editor/form/hookformdoc'; const EditorDemo = () => { const docs = [ @@ -22,7 +22,7 @@ const EditorDemo = () => { }, { id: 'quill', - label: 'QuillJS', + label: 'Quill', component: QuillDoc }, { @@ -70,7 +70,7 @@ const EditorDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Editor', pathname: '/modules/editor.html' }] } ]; @@ -86,6 +86,7 @@ const EditorDemo = () => {

    Editor

    Editor is rich text editor component based on Quill.

    +
    diff --git a/pages/fieldset/index.js b/pages/fieldset/index.js index d981264e92..7df679ad08 100644 --- a/pages/fieldset/index.js +++ b/pages/fieldset/index.js @@ -1,14 +1,13 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/fieldset/importdoc'; -import { ApiDoc } from '../../components/doc/fieldset/apidoc'; import { AccessibilityDoc } from '../../components/doc/fieldset/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/fieldset/styledoc'; import { BasicDoc } from '../../components/doc/fieldset/basicdoc'; -import { ToggleableDoc } from '../../components/doc/fieldset/toggleabledoc'; +import { ImportDoc } from '../../components/doc/fieldset/importdoc'; +import { StyleDoc } from '../../components/doc/fieldset/styledoc'; import { TemplateDoc } from '../../components/doc/fieldset/templatedoc'; +import { ToggleableDoc } from '../../components/doc/fieldset/toggleabledoc'; const FieldsetDemo = () => { const docs = [ @@ -45,7 +44,7 @@ const FieldsetDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Fieldset', pathname: '/modules/fieldset.html' }] } ]; @@ -60,7 +59,7 @@ const FieldsetDemo = () => {

    Fieldset

    Fieldset is a grouping component with a content toggle feature.

    - +
    diff --git a/pages/fileupload/index.js b/pages/fileupload/index.js index 32e297b711..7391c56519 100644 --- a/pages/fileupload/index.js +++ b/pages/fileupload/index.js @@ -3,13 +3,11 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AdvancedDoc } from '../../components/doc/fileupload/advanceddoc'; -import { ApiDoc } from '../../components/doc/fileupload/apidoc'; - -import { StyleDoc } from '../../components/doc/fileupload/styledoc'; -import { BasicDoc } from '../../components/doc/fileupload/basicdoc'; import { AutoDoc } from '../../components/doc/fileupload/autodoc'; +import { BasicDoc } from '../../components/doc/fileupload/basicdoc'; import { CustomUploadDoc } from '../../components/doc/fileupload/customuploaddoc'; import { ImportDoc } from '../../components/doc/fileupload/importdoc'; +import { StyleDoc } from '../../components/doc/fileupload/styledoc'; import { TemplateDoc } from '../../components/doc/fileupload/templatedoc'; const FileUploadDemo = () => { @@ -53,7 +51,7 @@ const FileUploadDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'FileUpload', pathname: '/modules/fileupload.html' }] } ]; @@ -68,7 +66,7 @@ const FileUploadDemo = () => {

    FileUpload

    FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.

    - +
    diff --git a/pages/galleria/index.js b/pages/galleria/index.js index 87e58db961..6b7d6d21b9 100644 --- a/pages/galleria/index.js +++ b/pages/galleria/index.js @@ -3,7 +3,6 @@ import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { ImportDoc } from '../../components/doc/galleria/importdoc'; import { BasicDoc } from '../../components/doc/galleria/basicdoc'; -import { ApiDoc } from '../../components/doc/galleria/apidoc'; import { AccessibilityDoc } from '../../components/doc/galleria/accessibilitydoc'; import { StyleDoc } from '../../components/doc/galleria/styledoc'; import { ControlledDoc } from '../../components/doc/galleria/controlleddoc'; @@ -143,7 +142,7 @@ const GalleriaDemo = () => { component: AdvancedDoc }, { - id: 'styling', + id: 'style', label: 'Style', component: StyleDoc }, @@ -155,7 +154,7 @@ const GalleriaDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Galleria', pathname: '/modules/galleria.html' }] } ]; diff --git a/pages/gmap/index.js b/pages/gmap/index.js index fb7580d5e2..ff73e07ff3 100644 --- a/pages/gmap/index.js +++ b/pages/gmap/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ApiDoc } from '../../components/doc/gmap/apidoc'; import { AccessibilityDoc } from '../../components/doc/gmap/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/gmap/styledoc'; -import { ImportDoc } from '../../components/doc/gmap/importdoc'; import { GMapDoc } from '../../components/doc/gmap/gmapdoc'; +import { ImportDoc } from '../../components/doc/gmap/importdoc'; +import { StyleDoc } from '../../components/doc/gmap/styledoc'; const GMapDemo = () => { const docs = [ @@ -34,7 +33,7 @@ const GMapDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'GMap', pathname: '/modules/gmap.html' }] } ]; @@ -51,7 +50,7 @@ const GMapDemo = () => {

    GMap component provides integration with Google Maps API. This sample demontrates various uses cases like binding, overlays and events. Click the map to add a new item.

    - +
    diff --git a/pages/image/index.js b/pages/image/index.js index ab1593318f..005edbc10f 100644 --- a/pages/image/index.js +++ b/pages/image/index.js @@ -1,16 +1,14 @@ import Head from 'next/head'; -import Link from 'next/link'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/image/importdoc'; +import { AccessibilityDoc } from '../../components/doc/image/accessibilitydoc'; import { BasicDoc } from '../../components/doc/image/basicdoc'; +import { ImportDoc } from '../../components/doc/image/importdoc'; import { PreviewDoc } from '../../components/doc/image/previewdoc'; -import { ThumbnailDoc } from '../../components/doc/image/thumbnaildoc'; -import { TemplateDoc } from '../../components/doc/image/templatedoc'; -import { ApiDoc } from '../../components/doc/image/apidoc'; -import { AccessibilityDoc } from '../../components/doc/image/accessibilitydoc'; import { StyleDoc } from '../../components/doc/image/styledoc'; +import { TemplateDoc } from '../../components/doc/image/templatedoc'; +import { ThumbnailDoc } from '../../components/doc/image/thumbnaildoc'; const ImageDemo = () => { const docs = [ @@ -52,7 +50,7 @@ const ImageDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Image', pathname: '/modules/image.html' }] } ]; @@ -69,7 +67,7 @@ const ImageDemo = () => {

    Displays a single image with preview and tranformation options.

    - +
    diff --git a/pages/index.js b/pages/index.js index df9cad22bc..0e566212a2 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,19 +1,19 @@ +import getConfig from 'next/config'; import Head from 'next/head'; +import { useEffect, useState } from 'react'; import Analytics from '../components/layout/analytics'; -import getConfig from 'next/config'; +import { classNames } from '../components/lib/utils/ClassNames'; import NewsSection from '../components/news/newssection'; -import HeaderSection from './landing/headersection'; -import HeroSection from './landing/herosection'; -import ComponentSection from './landing/componentsection'; -import ThemeSection from './landing/themesection'; import BlockSection from './landing/blocksection'; +import ComponentSection from './landing/componentsection'; import DesignerSection from './landing/designersection'; -import TemplateSection from './landing/templatesection'; -import UsersSection from './landing/userssection'; import FeaturesSection from './landing/featuressection'; import FooterSection from './landing/footersection'; -import { classNames } from '../components/lib/utils/ClassNames'; -import { useEffect, useState } from 'react'; +import HeaderSection from './landing/headersection'; +import HeroSection from './landing/herosection'; +import TemplateSection from './landing/templatesection'; +import ThemeSection from './landing/themesection'; +import UsersSection from './landing/userssection'; export default function Home(props) { const contextPath = getConfig().publicRuntimeConfig.contextPath; @@ -56,12 +56,7 @@ export default function Home(props) { - - - {/* eslint-disable */} - - {/* eslint-enable */}
    {props.newsActive && } diff --git a/pages/inplace/index.js b/pages/inplace/index.js index e3894c1648..7b71c1a8ea 100644 --- a/pages/inplace/index.js +++ b/pages/inplace/index.js @@ -1,16 +1,15 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/inplace/apidoc'; import { AccessibilityDoc } from '../../components/doc/inplace/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/inplace/styledoc'; -import { ImportDoc } from '../../components/doc/inplace/importdoc'; import { BasicDoc } from '../../components/doc/inplace/basicdoc'; -import { InputDoc } from '../../components/doc/inplace/inputdoc'; import { ImageDoc } from '../../components/doc/inplace/imagedoc'; +import { ImportDoc } from '../../components/doc/inplace/importdoc'; +import { InputDoc } from '../../components/doc/inplace/inputdoc'; import { LazyDoc } from '../../components/doc/inplace/lazydoc'; -import { DocActions } from '../../components/doc/common/docactions'; +import { StyleDoc } from '../../components/doc/inplace/styledoc'; const ChipDemo = () => { const docs = [ @@ -52,7 +51,11 @@ const ChipDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [ + { name: 'Inplace', pathname: '/modules/inplace.html' }, + { name: 'InplaceDisplay', pathname: '/classes/inplace.InplaceDisplay.html' }, + { name: 'InplaceContent', pathname: '/classes/inplace.InplaceContent.html' } + ] } ]; @@ -68,7 +71,7 @@ const ChipDemo = () => {

    Inplace

    Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.

    - +
    diff --git a/pages/inputgroup/index.js b/pages/inputgroup/index.js index c8cb1ba1c7..208c271d0e 100644 --- a/pages/inputgroup/index.js +++ b/pages/inputgroup/index.js @@ -42,7 +42,7 @@ const InputGroupDemo = () => {

    InputGroup

    Text, icon, buttons and other content can be grouped next to an input.

    - +
    diff --git a/pages/inputmask/index.js b/pages/inputmask/index.js index 163a1a5ebd..bd70ea07a2 100644 --- a/pages/inputmask/index.js +++ b/pages/inputmask/index.js @@ -1,20 +1,20 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/inputmask/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/inputmask/apidoc'; import { BasicDoc } from '../../components/doc/inputmask/basicdoc'; import { DisabledDoc } from '../../components/doc/inputmask/disableddoc'; import { FloatLabelDoc } from '../../components/doc/inputmask/floatlabeldoc'; +import { FormikDoc } from '../../components/doc/inputmask/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/inputmask/form/hookformdoc'; import { ImportDoc } from '../../components/doc/inputmask/importdoc'; import { InvalidDoc } from '../../components/doc/inputmask/invaliddoc'; import { MaskDoc } from '../../components/doc/inputmask/maskdoc'; import { OptionalDoc } from '../../components/doc/inputmask/optionaldoc'; import { SlotCharDoc } from '../../components/doc/inputmask/slotchardoc'; import { StyleDoc } from '../../components/doc/inputmask/styledoc'; -import { FormikDoc } from '../../components/doc/inputmask/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/inputmask/form/hookformdoc'; const InputMaskDemo = () => { const docs = [ @@ -88,7 +88,7 @@ const InputMaskDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'InputMask', pathname: '/modules/inputmask.html' }] } ]; @@ -104,6 +104,7 @@ const InputMaskDemo = () => {

    InputMask

    InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.

    +
    diff --git a/pages/inputnumber/index.js b/pages/inputnumber/index.js index e8a37913e1..7d77072e70 100644 --- a/pages/inputnumber/index.js +++ b/pages/inputnumber/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/inputnumber/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/inputnumber/apidoc'; import { ButtonsDoc } from '../../components/doc/inputnumber/buttonsdoc'; import { CurrencyDoc } from '../../components/doc/inputnumber/currencydoc'; import { DisabledDoc } from '../../components/doc/inputnumber/disableddoc'; @@ -100,7 +99,7 @@ const InputNumberDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'InputNumber', pathname: '/modules/inputnumber.html' }] } ]; @@ -116,7 +115,7 @@ const InputNumberDemo = () => {

    InputNumber is an input component to provide numerical input.

    - +
    diff --git a/pages/inputswitch/index.js b/pages/inputswitch/index.js index 4d24ae0138..343e4a8f54 100644 --- a/pages/inputswitch/index.js +++ b/pages/inputswitch/index.js @@ -1,16 +1,16 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/inputswitch/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/inputswitch/apidoc'; import { BasicDoc } from '../../components/doc/inputswitch/basicdoc'; import { DisabledDoc } from '../../components/doc/inputswitch/disableddoc'; +import { FormikDoc } from '../../components/doc/inputswitch/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/inputswitch/form/hookformdoc'; import { ImportDoc } from '../../components/doc/inputswitch/importdoc'; import { InvalidDoc } from '../../components/doc/inputswitch/invaliddoc'; import { PreselectionDoc } from '../../components/doc/inputswitch/preselectiondoc'; import { StyleDoc } from '../../components/doc/inputswitch/styledoc'; -import { FormikDoc } from '../../components/doc/inputswitch/form/formikdoc'; -import { HookFormDoc } from '../../components/doc/inputswitch/form/hookformdoc'; const InputSwitchDemo = () => { const docs = [ @@ -70,7 +70,7 @@ const InputSwitchDemo = () => { id: 'api', label: 'API', type: 'api', - component: ApiDoc + doc: [{ name: 'InputSwitch', pathname: '/modules/inputswitch.html' }] } ]; @@ -85,6 +85,7 @@ const InputSwitchDemo = () => {

    InputSwitch

    InputSwitch is used to select a boolean value.

    +
    diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js index 1eca7fc926..5baa55455e 100644 --- a/pages/inputtext/index.js +++ b/pages/inputtext/index.js @@ -4,7 +4,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/inputtext/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/inputtext/apidoc'; import { BasicDoc } from '../../components/doc/inputtext/basicdoc'; import { DisabledDoc } from '../../components/doc/inputtext/disableddoc'; import { FloatLabelDoc } from '../../components/doc/inputtext/floatlabeldoc'; @@ -95,7 +94,7 @@ const InputTextDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'InputText', pathname: '/modules/inputtext.html' }] } ]; @@ -111,7 +110,7 @@ const InputTextDemo = () => {

    InputText

    InputText is an extension to standard input element with theming and keyfiltering.

    - +
    diff --git a/pages/inputtextarea/index.js b/pages/inputtextarea/index.js index a5cf82135b..0d511937fa 100644 --- a/pages/inputtextarea/index.js +++ b/pages/inputtextarea/index.js @@ -1,9 +1,9 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/inputtextarea/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/inputtextarea/apidoc'; import { AutoResizeDoc } from '../../components/doc/inputtextarea/autoresizedoc'; import { BasicDoc } from '../../components/doc/inputtextarea/basicdoc'; import { DisabledDoc } from '../../components/doc/inputtextarea/disableddoc'; @@ -82,7 +82,7 @@ const InputTextareaDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'InputTextarea', pathname: '/modules/inputtextarea.html' }] } ]; @@ -98,6 +98,7 @@ const InputTextareaDemo = () => {

    InputTextarea

    InputTextarea adds styling and autoResize functionality to standard textarea element.

    +
    diff --git a/pages/keyfilter/index.js b/pages/keyfilter/index.js index fc0a565a51..b82bb70ac5 100644 --- a/pages/keyfilter/index.js +++ b/pages/keyfilter/index.js @@ -1,17 +1,15 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { IntegersDoc } from '../../components/doc/keyfilter/integersdoc'; -import { NumbersDoc } from '../../components/doc/keyfilter/numbersdoc'; -import { MoneyDoc } from '../../components/doc/keyfilter/moneydoc'; -import { HexDoc } from '../../components/doc/keyfilter/hexdoc'; +import { AccessibilityDoc } from '../../components/doc/keyfilter/accessibilitydoc'; import { AlphabeticDoc } from '../../components/doc/keyfilter/alphabeticdoc'; import { AlphanumbericDoc } from '../../components/doc/keyfilter/alphanumberdoc'; +import { HexDoc } from '../../components/doc/keyfilter/hexdoc'; +import { IntegersDoc } from '../../components/doc/keyfilter/integersdoc'; +import { MoneyDoc } from '../../components/doc/keyfilter/moneydoc'; +import { NumbersDoc } from '../../components/doc/keyfilter/numbersdoc'; import { RegexDoc } from '../../components/doc/keyfilter/regexdoc'; -import { ApiDoc } from '../../components/doc/keyfilter/apidoc'; -import { AccessibilityDoc } from '../../components/doc/keyfilter/accessibilitydoc'; - import { ImportDoc } from '../../components/doc/keyfilter/importdoc'; const KeyFilterDemo = () => { @@ -64,7 +62,7 @@ const KeyFilterDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'KeyFilter', pathname: '/modules/keyfilter.html' }] } ]; @@ -79,7 +77,7 @@ const KeyFilterDemo = () => {

    KeyFilter

    KeyFilter feature restricts user input based on a regular expression.

    - +
    diff --git a/pages/knob/index.js b/pages/knob/index.js index f688935a5b..683da27259 100644 --- a/pages/knob/index.js +++ b/pages/knob/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/knob/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/knob/apidoc'; import { BasicDoc } from '../../components/doc/knob/basicdoc'; import { ColorDoc } from '../../components/doc/knob/colordoc'; import { DisabledDoc } from '../../components/doc/knob/disableddoc'; @@ -106,7 +105,7 @@ const KnobDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Knob', pathname: '/modules/knob.html' }] } ]; @@ -122,65 +121,13 @@ const KnobDemo = () => {

    Knob is a form component to define number inputs with a dial.

    - +
    - - {/*
    -
    -
    -
    -
    Basic
    - setValue1(e.value)} /> -
    -
    -
    Readonly
    - -
    -
    -
    Disabled
    - -
    -
    -
    Min/Max
    - setValue4(e.value)} /> -
    -
    -
    Step
    - setValue5(e.value)} /> -
    -
    -
    Template
    - setValue6(e.value)} /> -
    -
    -
    Stroke
    - setValue7(e.value)} /> -
    -
    -
    Size
    - setValue8(e.value)} /> -
    -
    -
    Color
    - setValue9(e.value)} /> -
    -
    -
    - -
    -
    Reactive Knob
    - -
    -
    - - */} ); }; diff --git a/pages/landing/blocksection.js b/pages/landing/blocksection.js index 6e05b033a4..35a94f99f6 100644 --- a/pages/landing/blocksection.js +++ b/pages/landing/blocksection.js @@ -14,7 +14,7 @@ const BlockSection = () => {
    PrimeBlocks

    370+ ready to copy-paste UI blocks to build spectacular applications in no time.

    - + Learn More diff --git a/pages/landing/componentsection.js b/pages/landing/componentsection.js index 97138e1c23..b863be76f2 100644 --- a/pages/landing/componentsection.js +++ b/pages/landing/componentsection.js @@ -1,19 +1,19 @@ +import getConfig from 'next/config'; import { useEffect, useState } from 'react'; -import { InputNumber } from '../../components/lib/inputnumber/InputNumber'; -import { RadioButton } from '../../components/lib/radiobutton/RadioButton'; -import { ProgressBar } from '../../components/lib/progressbar/ProgressBar'; +import { Badge } from '../../components/lib/badge/Badge'; import { Button } from '../../components/lib/button/Button'; -import { Tree } from '../../components/lib/tree/Tree'; -import { Chip } from '../../components/lib/chip/Chip'; -import { Slider } from '../../components/lib/slider/Slider'; import { Calendar } from '../../components/lib/calendar/Calendar'; +import { Chart } from '../../components/lib/chart/Chart'; +import { Chip } from '../../components/lib/chip/Chip'; +import { InputNumber } from '../../components/lib/inputnumber/InputNumber'; import { InputSwitch } from '../../components/lib/inputswitch/InputSwitch'; -import { NodeService } from '../../service/NodeService'; -import { Badge } from '../../components/lib/badge/Badge'; +import { ProgressBar } from '../../components/lib/progressbar/ProgressBar'; +import { RadioButton } from '../../components/lib/radiobutton/RadioButton'; import { SelectButton } from '../../components/lib/selectbutton/SelectButton'; +import { Slider } from '../../components/lib/slider/Slider'; import { TabMenu } from '../../components/lib/tabmenu/TabMenu'; -import { Chart } from '../../components/lib/chart/Chart'; -import getConfig from 'next/config'; +import { Tree } from '../../components/lib/tree/Tree'; +import { NodeService } from '../../service/NodeService'; let chartData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], @@ -80,14 +80,8 @@ const ComponentSection = () => {
    Components

    - Over 80 React UI Components with top-notch quality to help you implement all your UI requirements in style. + Over 90 React UI Components with top-notch quality to help you implement all your UI requirements in style.

    -
    diff --git a/pages/landing/designersection.js b/pages/landing/designersection.js index 5418495625..5e7f8fdfcb 100644 --- a/pages/landing/designersection.js +++ b/pages/landing/designersection.js @@ -1,15 +1,15 @@ import getConfig from 'next/config'; -import { InputText } from '../../components/lib/inputtext/InputText'; +import { useRef, useState } from 'react'; import { Button } from '../../components/lib/button/Button'; +import { Checkbox } from '../../components/lib/checkbox/Checkbox'; import { Dropdown } from '../../components/lib/dropdown/Dropdown'; +import { InputMask } from '../../components/lib/inputmask/InputMask'; +import { InputNumber } from '../../components/lib/inputnumber/InputNumber'; +import { InputText } from '../../components/lib/inputtext/InputText'; import { ListBox } from '../../components/lib/listbox/ListBox'; import { RadioButton } from '../../components/lib/radiobutton/RadioButton'; -import { Checkbox } from '../../components/lib/checkbox/Checkbox'; -import { InputNumber } from '../../components/lib/inputnumber/InputNumber'; -import { InputMask } from '../../components/lib/inputmask/InputMask'; import { Slider } from '../../components/lib/slider/Slider'; import { classNames } from '../../components/lib/utils/ClassNames'; -import { useRef, useState } from 'react'; const DesignerSection = (props) => { const contextPath = getConfig().publicRuntimeConfig.contextPath; @@ -120,7 +120,7 @@ const DesignerSection = (props) => {
    - + View Full Version diff --git a/pages/landing/featuressection.js b/pages/landing/featuressection.js index 90117fb9e1..f420023252 100644 --- a/pages/landing/featuressection.js +++ b/pages/landing/featuressection.js @@ -11,8 +11,8 @@ const FeaturesSection = (props) => {
    components icon -
    80+ UI Components
    -

    The ultimate set of UI Components to assist you with 80+ impressive React Components.

    +
    90+ UI Components
    +

    The ultimate set of UI Components to assist you with 90+ impressive React Components.

    @@ -33,7 +33,7 @@ const FeaturesSection = (props) => {
    components icon
    Accessibility
    -

    The ultimate set of UI Components to assist you with 80+ impressive React Components.

    +

    Accessibility is a major concern of the Prime UI libraries and PrimeReact is no exception.

    diff --git a/pages/landing/headersection.js b/pages/landing/headersection.js index 3110072816..bcff358f09 100644 --- a/pages/landing/headersection.js +++ b/pages/landing/headersection.js @@ -1,6 +1,6 @@ import getConfig from 'next/config'; -import { useEffect, useRef, useState } from 'react'; import Link from 'next/link'; +import { useEffect, useRef, useState } from 'react'; import { classNames } from '../../components/lib/utils/ClassNames'; const HeaderSection = (props) => { @@ -67,13 +67,13 @@ const HeaderSection = (props) => {
  • - + primereact templates Blocks
  • - + primereact templates Designer diff --git a/pages/landing/herosection.js b/pages/landing/herosection.js index 305d7b656b..b150b0c19c 100644 --- a/pages/landing/herosection.js +++ b/pages/landing/herosection.js @@ -27,10 +27,7 @@ const HeroSection = () => {
    • -
    (window.location.href = 'https://www.primefaces.org/designer-react')} - > +
    (window.location.href = 'https://designer.primereact.org')}>
    primereact templates
    @@ -46,7 +43,7 @@ const HeroSection = () => { primereact core
    Open Source - 80+ UI Components + 90+ UI Components
    @@ -71,12 +68,12 @@ const HeroSection = () => {
    -
    (window.location.href = 'https://www.primefaces.org/primeblocks-react')}> +
    (window.location.href = 'https://blocks.primereact.org')}>
    primereact templates
    Prime Blocks - 280+ UI Blocks + 400+ UI Blocks
    diff --git a/pages/landing/themesection.js b/pages/landing/themesection.js index feaea1e467..aec1ca71d5 100644 --- a/pages/landing/themesection.js +++ b/pages/landing/themesection.js @@ -1,16 +1,14 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { FilterMatchMode, FilterOperator } from '../../components/lib/api/Api'; -import { DataTable } from '../../components/lib/datatable/DataTable'; +import { Button } from '../../components/lib/button/Button'; import { Column } from '../../components/lib/column/Column'; +import { DataTable } from '../../components/lib/datatable/DataTable'; import { InputText } from '../../components/lib/inputtext/InputText'; -import { Button } from '../../components/lib/button/Button'; import { ProgressBar } from '../../components/lib/progressbar/ProgressBar'; -import { CustomerService } from '../../service/CustomerService'; import { classNames } from '../../components/lib/utils/Utils'; -import getConfig from 'next/config'; +import { CustomerService } from '../../service/CustomerService'; const ThemeSection = (props) => { - const contextPath = getConfig().publicRuntimeConfig.contextPath; const [customers, setCustomers] = useState(null); const [selectedCustomers, setSelectedCustomers] = useState(null); const [filters, setFilters] = useState({ @@ -84,14 +82,8 @@ const ThemeSection = (props) => { const countryBodyTemplate = (rowData) => { return ( - flag (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} - className={`flag flag-${rowData.country.code}`} - width={30} - /> - {rowData.country.name} + flag + {rowData.country.name} ); }; @@ -101,14 +93,8 @@ const ThemeSection = (props) => { return ( - {representative.name} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} - width={32} - style={{ verticalAlign: 'middle' }} - /> - {representative.name} + {representative.name} + {representative.name} ); }; @@ -149,11 +135,11 @@ const ThemeSection = (props) => { - + more...
    -
    +
    { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ListBox', pathname: '/modules/listbox.html' }] } ]; @@ -111,7 +110,7 @@ const ListBoxDemo = () => {

    ListBox is used to select one or more values from a list of items.

    - +
    diff --git a/pages/megamenu/index.js b/pages/megamenu/index.js index 68d02b2ab0..7da09f3743 100644 --- a/pages/megamenu/index.js +++ b/pages/megamenu/index.js @@ -1,14 +1,13 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/megamenu/importdoc'; -import { BasicDoc } from '../../components/doc/megamenu/basicdoc'; -import { VerticalDoc } from '../../components/doc/megamenu/verticaldoc'; -import { TemplateDoc } from '../../components/doc/megamenu/templatedoc'; -import { ApiDoc } from '../../components/doc/megamenu/apidoc'; import { AccessibilityDoc } from '../../components/doc/megamenu/accessibilitydoc'; +import { BasicDoc } from '../../components/doc/megamenu/basicdoc'; +import { ImportDoc } from '../../components/doc/megamenu/importdoc'; import { StyleDoc } from '../../components/doc/megamenu/styledoc'; +import { TemplateDoc } from '../../components/doc/megamenu/templatedoc'; +import { VerticalDoc } from '../../components/doc/megamenu/verticaldoc'; const MegaMenuDemo = () => { const docs = [ @@ -45,7 +44,7 @@ const MegaMenuDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'MegaMenu', pathname: '/modules/megamenu.html' }] } ]; @@ -60,7 +59,7 @@ const MegaMenuDemo = () => {

    MegaMenu

    MegaMenu is navigation component that displays submenus together.

    - +
    diff --git a/pages/mention/index.js b/pages/mention/index.js index e51b62fc8d..a0d3853a13 100644 --- a/pages/mention/index.js +++ b/pages/mention/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/mention/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/mention/apidoc'; import { AutoDoc } from '../../components/doc/mention/autodoc'; import { BasicDoc } from '../../components/doc/mention/basicdoc'; import { DisabledDoc } from '../../components/doc/mention/disableddoc'; @@ -82,7 +81,7 @@ const MentionDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Mention', pathname: '/modules/mention.html' }] } ]; @@ -98,7 +97,7 @@ const MentionDemo = () => {

    Mention component is used to refer someone or something.

    - +
    diff --git a/pages/menu/index.js b/pages/menu/index.js index 9ba316dd2b..9e282f5652 100644 --- a/pages/menu/index.js +++ b/pages/menu/index.js @@ -1,15 +1,14 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/menu/importdoc'; +import { AccessibilityDoc } from '../../components/doc/menu/accessibilitydoc'; import { BasicDoc } from '../../components/doc/menu/basicdoc'; import { GroupDoc } from '../../components/doc/menu/groupdoc'; +import { ImportDoc } from '../../components/doc/menu/importdoc'; import { PopupDoc } from '../../components/doc/menu/popupdoc'; -import { TemplateDoc } from '../../components/doc/menu/templatedoc'; -import { ApiDoc } from '../../components/doc/menu/apidoc'; -import { AccessibilityDoc } from '../../components/doc/menu/accessibilitydoc'; import { StyleDoc } from '../../components/doc/menu/styledoc'; +import { TemplateDoc } from '../../components/doc/menu/templatedoc'; const MenuDemo = () => { const docs = [ @@ -51,7 +50,7 @@ const MenuDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Menu', pathname: '/modules/menu.html' }] } ]; @@ -66,7 +65,7 @@ const MenuDemo = () => {

    Menu

    Menu is a navigation/command component that supports dynamic and static positioning.

    - +
    diff --git a/pages/menubar/index.js b/pages/menubar/index.js index 6d4f650f93..2d88f7e136 100644 --- a/pages/menubar/index.js +++ b/pages/menubar/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/menubar/importdoc'; -import { BasicDoc } from '../../components/doc/menubar/basicdoc'; -import { TemplateDoc } from '../../components/doc/menubar/templatedoc'; -import { ApiDoc } from '../../components/doc/menubar/apidoc'; import { AccessibilityDoc } from '../../components/doc/menubar/accessibilitydoc'; +import { BasicDoc } from '../../components/doc/menubar/basicdoc'; +import { ImportDoc } from '../../components/doc/menubar/importdoc'; import { StyleDoc } from '../../components/doc/menubar/styledoc'; +import { TemplateDoc } from '../../components/doc/menubar/templatedoc'; const MenubarDemo = () => { const docs = [ @@ -39,7 +38,7 @@ const MenubarDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Menubar', pathname: '/modules/menubar.html' }] } ]; @@ -54,7 +53,7 @@ const MenubarDemo = () => {

    Menubar

    Menubar also known as Navbar, is a horizontal menu component.

    - +
    diff --git a/pages/message/index.js b/pages/message/index.js index 161202c860..8b0cb80664 100644 --- a/pages/message/index.js +++ b/pages/message/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/message/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/message/apidoc'; import { BasicDoc } from '../../components/doc/message/basicdoc'; import { ImportDoc } from '../../components/doc/message/importdoc'; import { SeverityDoc } from '../../components/doc/message/severitydoc'; @@ -51,7 +50,7 @@ const MessageDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Message', pathname: '/modules/message.html' }] } ]; @@ -66,7 +65,7 @@ const MessageDemo = () => {

    Message

    Message component displays information related to another element such as invalid input.

    - +
    diff --git a/pages/messages/index.js b/pages/messages/index.js index 5e9f207521..d4b4caf6ba 100644 --- a/pages/messages/index.js +++ b/pages/messages/index.js @@ -2,16 +2,15 @@ import Head from 'next/head'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ImportDoc } from '../../components/doc/messages/importdoc'; -import { SeverityDoc } from '../../components/doc/messages/severitydoc'; -import { DynamicDoc } from '../../components/doc/messages/dynamicdoc'; -import { TemplateDoc } from '../../components/doc/messages/templatedoc'; -import { ApiDoc } from '../../components/doc/messages/apidoc'; import { AccessibilityDoc } from '../../components/doc/messages/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/messages/styledoc'; import { BasicDoc } from '../../components/doc/messages/basicdoc'; import { ClosableDoc } from '../../components/doc/messages/closeabledoc'; +import { DynamicDoc } from '../../components/doc/messages/dynamicdoc'; +import { ImportDoc } from '../../components/doc/messages/importdoc'; +import { SeverityDoc } from '../../components/doc/messages/severitydoc'; import { StickyDoc } from '../../components/doc/messages/stickydoc'; +import { StyleDoc } from '../../components/doc/messages/styledoc'; +import { TemplateDoc } from '../../components/doc/messages/templatedoc'; const MessagesDemo = () => { const docs = [ @@ -63,7 +62,7 @@ const MessagesDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Messages', pathname: '/modules/messages.html' }] } ]; @@ -78,7 +77,7 @@ const MessagesDemo = () => {

    Messages

    Messages component is used to display inline messages.

    - +
    diff --git a/pages/multiselect/index.js b/pages/multiselect/index.js index 17f557ebbe..ad68253d2d 100644 --- a/pages/multiselect/index.js +++ b/pages/multiselect/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/multiselect/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/multiselect/apidoc'; import { BasicDoc } from '../../components/doc/multiselect/basicdoc'; import { ChipsDoc } from '../../components/doc/multiselect/chipsdoc'; import { DisabledDoc } from '../../components/doc/multiselect/disableddoc'; @@ -114,7 +113,7 @@ const MultiSelectDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'MultiSelect', pathname: '/modules/multiselect.html' }] } ]; @@ -130,7 +129,7 @@ const MultiSelectDemo = () => {

    MultiSelect is used to select multiple items from a collection.

    - +
    diff --git a/pages/multistatecheckbox/index.js b/pages/multistatecheckbox/index.js index c94d5ef155..fb9e83c2e0 100644 --- a/pages/multistatecheckbox/index.js +++ b/pages/multistatecheckbox/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/multistatecheckbox/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/multistatecheckbox/apidoc'; import { BasicDoc } from '../../components/doc/multistatecheckbox/basicdoc'; import { DisabledDoc } from '../../components/doc/multistatecheckbox/disableddoc'; import { ImportDoc } from '../../components/doc/multistatecheckbox/importdoc'; @@ -65,7 +64,7 @@ const MultiStateCheckboxDemo = () => { id: 'api', label: 'API', type: 'api', - component: ApiDoc + doc: [{ name: 'MultiStateCheckbox', pathname: '/modules/multistatecheckbox.html' }] } ]; @@ -81,7 +80,7 @@ const MultiStateCheckboxDemo = () => {

    MultiStateCheckbox is used to select a state from given multiple states.

    - +
    diff --git a/pages/orderlist/index.js b/pages/orderlist/index.js index ef6f50fbc5..046ab8c64a 100644 --- a/pages/orderlist/index.js +++ b/pages/orderlist/index.js @@ -1,15 +1,14 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ApiDoc } from '../../components/doc/orderlist/apidoc'; import { AccessibilityDoc } from '../../components/doc/orderlist/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/orderlist/styledoc'; -import { ImportDoc } from '../../components/doc/orderlist/importdoc'; -import { TemplateDoc } from '../../components/doc/orderlist/templatedoc'; import { BasicDoc } from '../../components/doc/orderlist/basicdoc'; -import { FilterDoc } from '../../components/doc/orderlist/filterdoc'; import { DragDropDoc } from '../../components/doc/orderlist/dragdropdoc'; +import { FilterDoc } from '../../components/doc/orderlist/filterdoc'; +import { ImportDoc } from '../../components/doc/orderlist/importdoc'; +import { StyleDoc } from '../../components/doc/orderlist/styledoc'; +import { TemplateDoc } from '../../components/doc/orderlist/templatedoc'; const OrderListDemo = () => { const docs = [ @@ -51,7 +50,7 @@ const OrderListDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'OrderList', pathname: '/modules/orderlist.html' }] } ]; @@ -67,14 +66,12 @@ const OrderListDemo = () => {

    OrderList is used to sort a collection.

    - + -
    -
    - - -
    +
    + +
    ); diff --git a/pages/organizationchart/index.js b/pages/organizationchart/index.js index 1274272cc1..991794e80c 100644 --- a/pages/organizationchart/index.js +++ b/pages/organizationchart/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/organizationchart/importdoc'; -import { ApiDoc } from '../../components/doc/organizationchart/apidoc'; import { AccessibilityDoc } from '../../components/doc/organizationchart/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/organizationchart/styledoc'; import { AdvancedDoc } from '../../components/doc/organizationchart/advanceddoc'; import { BasicDoc } from '../../components/doc/organizationchart/basicdoc'; +import { ImportDoc } from '../../components/doc/organizationchart/importdoc'; +import { StyleDoc } from '../../components/doc/organizationchart/styledoc'; const OrganizationChartDemo = () => { const docs = [ @@ -39,7 +38,7 @@ const OrganizationChartDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'OrganizationChart', pathname: '/modules/organizationchart.html' }] } ]; @@ -55,7 +54,7 @@ const OrganizationChartDemo = () => {

    OrganizationChart visualizes hierarchical organization data.

    - +
    diff --git a/pages/overlaypanel/index.js b/pages/overlaypanel/index.js index cb5ce4b0b5..3b4adf51a9 100644 --- a/pages/overlaypanel/index.js +++ b/pages/overlaypanel/index.js @@ -2,12 +2,11 @@ import Head from 'next/head'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/overlaypanel/apidoc'; import { AccessibilityDoc } from '../../components/doc/overlaypanel/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/overlaypanel/styledoc'; -import { ImportDoc } from '../../components/doc/overlaypanel/importdoc'; import { BasicDoc } from '../../components/doc/overlaypanel/basicdoc'; import { DataTableDoc } from '../../components/doc/overlaypanel/datatabledoc'; +import { ImportDoc } from '../../components/doc/overlaypanel/importdoc'; +import { StyleDoc } from '../../components/doc/overlaypanel/styledoc'; const OverlayPanelDemo = () => { const docs = [ @@ -39,7 +38,7 @@ const OverlayPanelDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'OverlayPanel', pathname: '/modules/overlaypanel.html' }] } ]; @@ -54,7 +53,7 @@ const OverlayPanelDemo = () => {

    OverlayPanel

    OverlayPanel, also known as Popover, is a container component that can overlay other components on page.

    - +
    diff --git a/pages/paginator/index.js b/pages/paginator/index.js index 2819ca506f..04158cd875 100644 --- a/pages/paginator/index.js +++ b/pages/paginator/index.js @@ -1,14 +1,13 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ApiDoc } from '../../components/doc/paginator/apidoc'; import { AccessibilityDoc } from '../../components/doc/paginator/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/paginator/styledoc'; -import { ImportDoc } from '../../components/doc/paginator/importdoc'; import { BasicDoc } from '../../components/doc/paginator/basicdoc'; -import { CustomDoc } from '../../components/doc/paginator/customdoc'; import { ContentDoc } from '../../components/doc/paginator/contentdoc'; +import { CustomDoc } from '../../components/doc/paginator/customdoc'; +import { ImportDoc } from '../../components/doc/paginator/importdoc'; +import { StyleDoc } from '../../components/doc/paginator/styledoc'; const PaginatorDemo = () => { const docs = [ @@ -45,7 +44,7 @@ const PaginatorDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Paginator', pathname: '/modules/paginator.html' }] } ]; @@ -61,7 +60,7 @@ const PaginatorDemo = () => {

    Paginator is a generic widget to display content in paged format.

    - +
    diff --git a/pages/panel/index.js b/pages/panel/index.js index 003999f42b..be8350fcd9 100644 --- a/pages/panel/index.js +++ b/pages/panel/index.js @@ -1,14 +1,13 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/panel/importdoc'; -import { BasicDoc } from '../../components/doc/panel/basicdoc'; -import { ToggleableDoc } from '../../components/doc/panel/toggleabledoc'; -import { TemplateDoc } from '../../components/doc/panel/templatedoc'; -import { ApiDoc } from '../../components/doc/panel/apidoc'; import { AccessibilityDoc } from '../../components/doc/panel/accessibilitydoc'; +import { BasicDoc } from '../../components/doc/panel/basicdoc'; +import { ImportDoc } from '../../components/doc/panel/importdoc'; import { StyleDoc } from '../../components/doc/panel/styledoc'; +import { TemplateDoc } from '../../components/doc/panel/templatedoc'; +import { ToggleableDoc } from '../../components/doc/panel/toggleabledoc'; const PanelDemo = () => { const docs = [ @@ -45,7 +44,7 @@ const PanelDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Panel', pathname: '/modules/panel.html' }] } ]; @@ -60,7 +59,7 @@ const PanelDemo = () => {

    Panel

    Panel is a container component with an optional content toggle feature.

    - +
    diff --git a/pages/panelmenu/index.js b/pages/panelmenu/index.js index ad2550c39c..e3832eccaa 100644 --- a/pages/panelmenu/index.js +++ b/pages/panelmenu/index.js @@ -1,12 +1,11 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; +import { AccessibilityDoc } from '../../components/doc/panelmenu/accessibilitydoc'; import { BasicDoc } from '../../components/doc/panelmenu/basicdoc'; import { ImportDoc } from '../../components/doc/panelmenu/importdoc'; import { MultipleDoc } from '../../components/doc/panelmenu/multipledoc'; -import { ApiDoc } from '../../components/doc/panelmenu/apidoc'; -import { AccessibilityDoc } from '../../components/doc/panelmenu/accessibilitydoc'; import { StyleDoc } from '../../components/doc/panelmenu/styledoc'; const PanelMenuDemo = () => { @@ -39,7 +38,7 @@ const PanelMenuDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'PanelMenu', pathname: '/modules/panelmenu.html' }] } ]; @@ -54,7 +53,7 @@ const PanelMenuDemo = () => {

    PanelMenu

    PanelMenu is a hybrid of accordion-tree components.

    - +
    diff --git a/pages/password/index.js b/pages/password/index.js index bf205716a2..42b3d93528 100644 --- a/pages/password/index.js +++ b/pages/password/index.js @@ -4,7 +4,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/password/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/password/apidoc'; import { BasicDoc } from '../../components/doc/password/basicdoc'; import { DisabledDoc } from '../../components/doc/password/disableddoc'; import { FloatLabelDoc } from '../../components/doc/password/floatlabeldoc'; @@ -14,9 +13,8 @@ import { PasswordMeter } from '../../components/doc/password/passwordmeterdoc'; import { ShowPassword } from '../../components/doc/password/showpassworddoc'; import { StyleDoc } from '../../components/doc/password/styledoc'; import { Templating } from '../../components/doc/password/templatingdoc'; -import { FormikDoc } from '../../components/doc/password/validation/formikdoc'; -import { HookFormDoc } from '../../components/doc/password/validation/hookformdoc'; -import { Divider } from '../../components/lib/divider/Divider'; +import { FormikDoc } from '../../components/doc/password/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/password/form/hookformdoc'; const PasswordDemo = () => { const docs = [ @@ -90,29 +88,10 @@ const PasswordDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Password', pathname: '/modules/password.html' }] } ]; - const [value1, setValue1] = useState(''); - const [value2, setValue2] = useState(''); - const [value3, setValue3] = useState(''); - const [value4, setValue4] = useState(''); - - const header =
    Pick a password
    ; - const footer = ( - - -

    Suggestions

    -
      -
    • At least one lowercase
      • -
    • At least one uppercase
      • -
    • At least one numeric
      • -
    • Minimum 8 characters
      • -
    -     - ); - return (
    @@ -125,7 +104,7 @@ const PasswordDemo = () => {

    Password displays strength indicator for password fields.

    - +
    diff --git a/pages/picklist/index.js b/pages/picklist/index.js index a5b1c47a30..8680ea26d1 100644 --- a/pages/picklist/index.js +++ b/pages/picklist/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ApiDoc } from '../../components/doc/picklist/apidoc'; import { AccessibilityDoc } from '../../components/doc/picklist/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/picklist/styledoc'; import { ImportDoc } from '../../components/doc/picklist/importdoc'; import { PickListDoc } from '../../components/doc/picklist/picklistdoc'; +import { StyleDoc } from '../../components/doc/picklist/styledoc'; const PickListDemo = () => { const docs = [ @@ -34,7 +33,7 @@ const PickListDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'PickList', pathname: '/modules/picklist.html' }] } ]; @@ -50,7 +49,7 @@ const PickListDemo = () => {

    PickList is used to reorder items between different lists.

    - +
    diff --git a/pages/progressbar/index.js b/pages/progressbar/index.js index 181604eea4..f7bda24a20 100644 --- a/pages/progressbar/index.js +++ b/pages/progressbar/index.js @@ -1,16 +1,15 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/progressbar/apidoc'; import { AccessibilityDoc } from '../../components/doc/progressbar/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/progressbar/styledoc'; -import { ImportDoc } from '../../components/doc/progressbar/importdoc'; -import { DynamicDoc } from '../../components/doc/progressbar/dynamicdoc'; import { BasicDoc } from '../../components/doc/progressbar/basicdoc'; -import { TemplateDoc } from '../../components/doc/progressbar/templatedoc'; +import { DynamicDoc } from '../../components/doc/progressbar/dynamicdoc'; +import { ImportDoc } from '../../components/doc/progressbar/importdoc'; import { IndeterminateDoc } from '../../components/doc/progressbar/indeterminatedoc'; -import { DocActions } from '../../components/doc/common/docactions'; +import { StyleDoc } from '../../components/doc/progressbar/styledoc'; +import { TemplateDoc } from '../../components/doc/progressbar/templatedoc'; const ProgressBarDemo = () => { const docs = [ @@ -52,7 +51,7 @@ const ProgressBarDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ProgressBar', pathname: '/modules/progressbar.html' }] } ]; @@ -68,7 +67,7 @@ const ProgressBarDemo = () => {

    ProgressBar

    ProgressBar is a process status indicator.

    - +
    diff --git a/pages/progressspinner/index.js b/pages/progressspinner/index.js index 9d15f97fd1..82737711b1 100644 --- a/pages/progressspinner/index.js +++ b/pages/progressspinner/index.js @@ -1,14 +1,13 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/progressspinner/apidoc'; import { AccessibilityDoc } from '../../components/doc/progressspinner/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/progressspinner/styledoc'; -import { ImportDoc } from '../../components/doc/progressspinner/importdoc'; import { BasicDoc } from '../../components/doc/progressspinner/basicdoc'; import { CustomDoc } from '../../components/doc/progressspinner/customdoc'; -import { DocActions } from '../../components/doc/common/docactions'; +import { ImportDoc } from '../../components/doc/progressspinner/importdoc'; +import { StyleDoc } from '../../components/doc/progressspinner/styledoc'; const SkeletonDemo = () => { const docs = [ @@ -40,7 +39,7 @@ const SkeletonDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ProgressSpinner', pathname: '/modules/progressspinner.html' }] } ]; @@ -56,7 +55,7 @@ const SkeletonDemo = () => {

    ProgressSpinner

    ProgressSpinner is a process status indicator.

    - +
    diff --git a/pages/radiobutton/index.js b/pages/radiobutton/index.js index cd63d3817d..115e1330e7 100644 --- a/pages/radiobutton/index.js +++ b/pages/radiobutton/index.js @@ -1,6 +1,6 @@ import Head from 'next/head'; import React from 'react'; -import { ApiDoc } from '../../components/doc/checkbox/apidoc'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/radiobutton/accessibilitydoc'; @@ -10,8 +10,8 @@ import { GroupDoc } from '../../components/doc/radiobutton/groupdoc'; import { ImportDoc } from '../../components/doc/radiobutton/importdoc'; import { InvalidDoc } from '../../components/doc/radiobutton/invaliddoc'; import { StyleDoc } from '../../components/doc/radiobutton/styledoc'; -import { FormikDoc } from '../../components/doc/radiobutton/validation/formikdoc'; -import { HookFormDoc } from '../../components/doc/radiobutton/validation/hookformdoc'; +import { FormikDoc } from '../../components/doc/radiobutton/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/radiobutton/form/hookformdoc'; const RadioButtonDemo = () => { const docs = [ @@ -70,7 +70,7 @@ const RadioButtonDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'RadioButton', pathname: '/modules/radiobutton.html' }] } ]; @@ -86,6 +86,7 @@ const RadioButtonDemo = () => {

    RadioButton

    RadioButton is an extension to standard radio button element with theming.

    +
    diff --git a/pages/rating/index.js b/pages/rating/index.js index 4884d772d3..725aa286df 100644 --- a/pages/rating/index.js +++ b/pages/rating/index.js @@ -1,18 +1,17 @@ import Head from 'next/head'; -import React, { useState } from 'react'; +import React from 'react'; import { DocActions } from '../../components/doc/common/docactions'; -import { DocSections } from '../../components/doc/common/docsections'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; -import { ImportDoc } from '../../components/doc/rating/importdoc'; +import { DocSections } from '../../components/doc/common/docsections'; +import { AccessibilityDoc } from '../../components/doc/rating/accessibilitydoc'; import { BasicDoc } from '../../components/doc/rating/basicdoc'; -import { WithoutCancelDoc } from '../../components/doc/rating/withoutcanceldoc'; -import { ReadOnlyDoc } from '../../components/doc/rating/readonlydoc'; import { DisabledDoc } from '../../components/doc/rating/disableddoc'; -import { TemplateDoc } from '../../components/doc/rating/templatedoc'; -import { ApiDoc } from '../../components/doc/rating/apidoc'; -import { AccessibilityDoc } from '../../components/doc/rating/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/rating/styledoc'; +import { ImportDoc } from '../../components/doc/rating/importdoc'; import { NumberOfStarsDoc } from '../../components/doc/rating/numberofstarsdoc'; +import { ReadOnlyDoc } from '../../components/doc/rating/readonlydoc'; +import { StyleDoc } from '../../components/doc/rating/styledoc'; +import { TemplateDoc } from '../../components/doc/rating/templatedoc'; +import { WithoutCancelDoc } from '../../components/doc/rating/withoutcanceldoc'; const RatingDemo = () => { const docs = [ @@ -65,7 +64,7 @@ const RatingDemo = () => { id: 'api', label: 'API', type: 'api', - component: ApiDoc + doc: [{ name: 'Rating', pathname: '/modules/rating.html' }] } ]; @@ -81,7 +80,7 @@ const RatingDemo = () => {

    Rating component is a star based selection input.

    - +
    diff --git a/pages/ripple/index.js b/pages/ripple/index.js index 91e44a42f3..390b58c24d 100644 --- a/pages/ripple/index.js +++ b/pages/ripple/index.js @@ -1,14 +1,13 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/ripple/apidoc'; import { AccessibilityDoc } from '../../components/doc/ripple/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/ripple/styledoc'; -import { ImportDoc } from '../../components/doc/ripple/importdoc'; -import { DefaultDoc } from '../../components/doc/ripple/defaultdoc'; import { CustomDoc } from '../../components/doc/ripple/customdoc'; -import { DocActions } from '../../components/doc/common/docactions'; +import { DefaultDoc } from '../../components/doc/ripple/defaultdoc'; +import { ImportDoc } from '../../components/doc/ripple/importdoc'; +import { StyleDoc } from '../../components/doc/ripple/styledoc'; const RippleDemo = () => { const docs = [ @@ -40,7 +39,7 @@ const RippleDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Ripple', pathname: '/modules/ripple.html' }] } ]; @@ -56,7 +55,7 @@ const RippleDemo = () => {

    Ripple

    Ripple component adds ripple effect to the host element.

    - +
    diff --git a/pages/roadmap/index.js b/pages/roadmap/index.js index 2f9fd74248..ebe07c5aea 100644 --- a/pages/roadmap/index.js +++ b/pages/roadmap/index.js @@ -8,7 +8,7 @@ const Roadmap = () => { React Roadmap @@ -16,8 +16,8 @@ const Roadmap = () => {

    Roadmap

    - At PrimeTek, we are passionate about improving PrimeReact and would like to share our ideas for 2023 with the community. These are planned to be implemented in parellel to the regular - maintenance work of the library involving review of issue tickets, PRs and PrimeReact PRO support. This page is updated on changes so please visit it to learn more about what is coming up next. + At PrimeTek, we are passionate about improving PrimeReact and would like to share our ideas for 2023 with the community. These are planned to be implemented in parallel to the regular + maintenance work of the library involving review of issue tickets, PRs and PrimeReact PRO support. This page is updated periodically so please revisit to monitor the progress.

    @@ -38,14 +38,14 @@ const Roadmap = () => {

    Accessibility

    -

    Finalize WCAG Level AA compliance for all components with screen reader and keyboard support.

    +

    Implement WCAG Level AA compliance using PrimeVue as the reference implementation.

    -
    +
    -

    Headless Mode

    -

    Design the implementation of Headless Mode to support libraries like Tailwind.

    +

    New Styling API

    +

    Modernize styling to provide a flexible API to support styled components, css modules and sass.

    @@ -60,8 +60,8 @@ const Roadmap = () => {
    -

    Headless Mode

    -

    Initate headless mode implementation for commonly used components.

    +

    Unstyled Mode

    +

    Implementation of the Unstyled Mode to support libraries like Tailwind.

    @@ -111,25 +111,18 @@ const Roadmap = () => {
    SHOWCASE
    -
    -

    Nuxt

    -

    Migrate showcase application to Nuxt for SSR.

    -
    -
    -
    -

    Demos

    Standalone demos for each component feature instead of one demo page that demonstrates multiple features.

    -
    +

    Documentation

    New component API docs generated by TSDoc.

    -
    +
    @@ -144,7 +137,7 @@ const Roadmap = () => {

    New Blocks

    30+ new UI Blocks.

    -
    +
    @@ -180,8 +173,8 @@ const Roadmap = () => {
    Designer
    -

    New Free Theme

    -

    A brand new theme with dark mode alternative.

    +

    New Free Themes

    +

    Open source new themes including Soho, Viva, Mira and Nano.

    @@ -204,23 +197,16 @@ const Roadmap = () => {

    Apollo

    -

    Port Apollo from PrimeNG using Vite.

    +

    Port Apollo from PrimeNG using NEXT.js.

    -
    -
    -
    -
    -

    Migrate to Vite

    -

    Initiate migration of templates to Vite.

    -
    -
    +
    -

    Migrate to Vite

    -

    Continue migration of templates to Vite.

    +

    Migrate to NEXT.js

    +

    Continue migration of templates to NEXT.js.

    diff --git a/pages/scrollpanel/index.js b/pages/scrollpanel/index.js index c9768bf62f..289bed5fa9 100644 --- a/pages/scrollpanel/index.js +++ b/pages/scrollpanel/index.js @@ -1,13 +1,12 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/scrollpanel/importdoc'; -import { ApiDoc } from '../../components/doc/scrollpanel/apidoc'; import { AccessibilityDoc } from '../../components/doc/scrollpanel/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/scrollpanel/styledoc'; -import { CustomDemo } from '../../components/doc/scrollpanel/customdoc'; import { BasicDoc } from '../../components/doc/scrollpanel/basicdoc'; +import { CustomDemo } from '../../components/doc/scrollpanel/customdoc'; +import { ImportDoc } from '../../components/doc/scrollpanel/importdoc'; +import { StyleDoc } from '../../components/doc/scrollpanel/styledoc'; const ScrollPanelDemo = () => { const docs = [ @@ -39,7 +38,7 @@ const ScrollPanelDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ScrollPanel', pathname: '/modules/scrollpanel.html' }] } ]; @@ -54,7 +53,7 @@ const ScrollPanelDemo = () => {

    ScrollPanel

    ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.

    - +
    diff --git a/pages/scrolltop/index.js b/pages/scrolltop/index.js index 88d7ad1adc..c4df98ca0c 100644 --- a/pages/scrolltop/index.js +++ b/pages/scrolltop/index.js @@ -1,14 +1,13 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/scrolltop/apidoc'; import { AccessibilityDoc } from '../../components/doc/scrolltop/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/scrolltop/styledoc'; -import { ImportDoc } from '../../components/doc/scrolltop/importdoc'; import { BasicDoc } from '../../components/doc/scrolltop/basicdoc'; import { ElementDoc } from '../../components/doc/scrolltop/elementdoc'; -import { DocActions } from '../../components/doc/common/docactions'; +import { ImportDoc } from '../../components/doc/scrolltop/importdoc'; +import { StyleDoc } from '../../components/doc/scrolltop/styledoc'; const ScrollTopDemo = () => { const docs = [ @@ -40,7 +39,7 @@ const ScrollTopDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'ScrollTop', pathname: '/modules/scrolltop.html' }] } ]; @@ -56,7 +55,7 @@ const ScrollTopDemo = () => {

    ScrollTop

    ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.

    - +
    diff --git a/pages/selectbutton/index.js b/pages/selectbutton/index.js index af6d155731..cbca1c66fb 100644 --- a/pages/selectbutton/index.js +++ b/pages/selectbutton/index.js @@ -3,16 +3,14 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/selectbutton/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/selectbutton/apidoc'; - import { BasicDoc } from '../../components/doc/selectbutton/basicdoc'; import { CustomContentDoc } from '../../components/doc/selectbutton/customcontentdoc'; import { DisabledDoc } from '../../components/doc/selectbutton/disableddoc'; import { ImportDoc } from '../../components/doc/selectbutton/importdoc'; import { InvalidDoc } from '../../components/doc/selectbutton/invaliddoc'; import { MultipleSelectionDoc } from '../../components/doc/selectbutton/multipleselectiondoc'; -import { FormikDoc } from '../../components/doc/selectbutton/validation/formikdoc'; -import { HookFormDoc } from '../../components/doc/selectbutton/validation/hookformdoc'; +import { FormikDoc } from '../../components/doc/selectbutton/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/selectbutton/form/hookformdoc'; const SelectButtonDemo = () => { const docs = [ @@ -71,7 +69,7 @@ const SelectButtonDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'SelectButton', pathname: '/modules/selectbutton.html' }] } ]; @@ -87,7 +85,7 @@ const SelectButtonDemo = () => {

    SelectButton is used to choose single or multiple items from a list using buttons.

    - +
    diff --git a/pages/setup/index.js b/pages/setup/index.js index 2d41c264ce..dcda1835ed 100644 --- a/pages/setup/index.js +++ b/pages/setup/index.js @@ -16,7 +16,7 @@ const SetupPage = () => {

    Setup

    -

    PrimeReact is a rich set of open source native components for React.

    +

    PrimeReact is a rich set of open source UI components for React.

    @@ -80,7 +80,7 @@ import { Button } from 'primereact/button'; Other alternative is utilizing the components directly within the browser with the iife build. Note that PrimeReact does not provide a umd build. The core.min.js is required. It includes shared components and structures; utils, api, ripple, portal, keyfilter, tooltip, virtualscroller, terminalservice, overlayservice, checkbox, button, inputtext, inputnumber, messages, progressbar, dropdown, dialog, paginator and tree.

    - + {` @@ -180,6 +180,12 @@ primereact/resources/themes/lara-dark-blue/theme.css primereact/resources/themes/lara-dark-indigo/theme.css primereact/resources/themes/lara-dark-purple/theme.css primereact/resources/themes/lara-dark-teal/theme.css +primereact/resources/themes/soho-light/theme.css +primereact/resources/themes/soho-dark/theme.css +primereact/resources/themes/viva-light/theme.css +primereact/resources/themes/viva-dark/theme.css +primereact/resources/themes/mira/theme.css +primereact/resources/themes/nano/theme.css primereact/resources/themes/saga-blue/theme.css primereact/resources/themes/saga-green/theme.css primereact/resources/themes/saga-orange/theme.css diff --git a/pages/sidebar/index.js b/pages/sidebar/index.js index 59abd8ffc9..bcfc5612e6 100644 --- a/pages/sidebar/index.js +++ b/pages/sidebar/index.js @@ -1,16 +1,15 @@ import Head from 'next/head'; -import { DocSections } from '../../components/doc/common/docsections'; -import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocActions } from '../../components/doc/common/docactions'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; +import { AccessibilityDoc } from '../../components/doc/sidebar/accessibilitydoc'; import { BasicDoc } from '../../components/doc/sidebar/basicdoc'; +import { FullScreenDoc } from '../../components/doc/sidebar/fullscreendoc'; import { ImportDoc } from '../../components/doc/sidebar/importdoc'; import { PositionDoc } from '../../components/doc/sidebar/positiondoc'; -import { TemplateDoc } from '../../components/doc/sidebar/templatedoc'; -import { FullScreenDoc } from '../../components/doc/sidebar/fullscreendoc'; -import { ApiDoc } from '../../components/doc/sidebar/apidoc'; -import { AccessibilityDoc } from '../../components/doc/sidebar/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/sidebar/styledoc'; import { SizeDoc } from '../../components/doc/sidebar/sizedoc'; +import { StyleDoc } from '../../components/doc/sidebar/styledoc'; +import { TemplateDoc } from '../../components/doc/sidebar/templatedoc'; const SidebarDemo = () => { const docs = [ @@ -57,7 +56,7 @@ const SidebarDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Sidebar', pathname: '/modules/sidebar.html' }] } ]; @@ -72,7 +71,7 @@ const SidebarDemo = () => {

    Sidebar

    Sidebar, also known as Drawer, is a container component displayed as an overlay.

    - +
    diff --git a/pages/skeleton/index.js b/pages/skeleton/index.js index fda2d590a5..3fe037bbd7 100644 --- a/pages/skeleton/index.js +++ b/pages/skeleton/index.js @@ -1,16 +1,15 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/skeleton/apidoc'; import { AccessibilityDoc } from '../../components/doc/skeleton/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/skeleton/styledoc'; -import { ImportDoc } from '../../components/doc/skeleton/importdoc'; -import { ShapesDoc } from '../../components/doc/skeleton/shapesdoc'; -import { ListDoc } from '../../components/doc/skeleton/listdoc'; import { CardDoc } from '../../components/doc/skeleton/carddoc'; import { DataTableDoc } from '../../components/doc/skeleton/datatabledoc'; -import { DocActions } from '../../components/doc/common/docactions'; +import { ImportDoc } from '../../components/doc/skeleton/importdoc'; +import { ListDoc } from '../../components/doc/skeleton/listdoc'; +import { ShapesDoc } from '../../components/doc/skeleton/shapesdoc'; +import { StyleDoc } from '../../components/doc/skeleton/styledoc'; const SkeletonDemo = () => { const docs = [ @@ -52,7 +51,7 @@ const SkeletonDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Skeleton', pathname: '/modules/skeleton.html' }] } ]; @@ -68,7 +67,7 @@ const SkeletonDemo = () => {

    Skeleton

    Skeleton is a placeholder to display instead of the actual content.

    - +
    diff --git a/pages/slidemenu/index.js b/pages/slidemenu/index.js index 1ffc7a47a3..14eb41d582 100644 --- a/pages/slidemenu/index.js +++ b/pages/slidemenu/index.js @@ -1,12 +1,11 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/slidemenu/importdoc'; +import { AccessibilityDoc } from '../../components/doc/slidemenu/accessibilitydoc'; import { BasicDoc } from '../../components/doc/slidemenu/basicdoc'; +import { ImportDoc } from '../../components/doc/slidemenu/importdoc'; import { PopupDoc } from '../../components/doc/slidemenu/popupdoc'; -import { ApiDoc } from '../../components/doc/slidemenu/apidoc'; -import { AccessibilityDoc } from '../../components/doc/slidemenu/accessibilitydoc'; import { StyleDoc } from '../../components/doc/slidemenu/styledoc'; const SlideMenuDemo = () => { @@ -39,7 +38,7 @@ const SlideMenuDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Slide Menu', pathname: '/modules/slidemenu.html' }] } ]; @@ -54,7 +53,7 @@ const SlideMenuDemo = () => {

    Slide Menu

    SlideMenu displays submenus with a slide animation.

    - +
    diff --git a/pages/slider/index.js b/pages/slider/index.js index 6fed0e0012..26f7fb8560 100644 --- a/pages/slider/index.js +++ b/pages/slider/index.js @@ -1,16 +1,16 @@ -import React from 'react'; import Head from 'next/head'; +import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ImportDoc } from '../../components/doc/slider/importdoc'; +import { AccessibilityDoc } from '../../components/doc/slider/accessibilitydoc'; import { BasicDoc } from '../../components/doc/slider/basicdoc'; +import { ImportDoc } from '../../components/doc/slider/importdoc'; import { InputDoc } from '../../components/doc/slider/inputdoc'; -import { StepDoc } from '../../components/doc/slider/stepdoc'; import { RangeDoc } from '../../components/doc/slider/rangedoc'; -import { VerticalDoc } from '../../components/doc/slider/verticaldoc'; -import { ApiDoc } from '../../components/doc/slider/apidoc'; -import { AccessibilityDoc } from '../../components/doc/slider/accessibilitydoc'; +import { StepDoc } from '../../components/doc/slider/stepdoc'; import { StyleDoc } from '../../components/doc/slider/styledoc'; +import { VerticalDoc } from '../../components/doc/slider/verticaldoc'; const SliderDemo = () => { const docs = [ @@ -57,7 +57,7 @@ const SliderDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Slider', pathname: '/modules/slider.html' }] } ]; @@ -72,6 +72,7 @@ const SliderDemo = () => {

    Slider

    Slider is a component to provide input with a drag handle.

    +
    diff --git a/pages/speeddial/index.js b/pages/speeddial/index.js index 6dd42111da..950e457725 100644 --- a/pages/speeddial/index.js +++ b/pages/speeddial/index.js @@ -1,19 +1,17 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; +import { AccessibilityDoc } from '../../components/doc/speeddial/accessibilitydoc'; +import { CircleDoc } from '../../components/doc/speeddial/circledoc'; +import { CustomDoc } from '../../components/doc/speeddial/customdoc'; import { ImportDoc } from '../../components/doc/speeddial/importdoc'; import { LinearDoc } from '../../components/doc/speeddial/lineardoc'; -import { CircleDoc } from '../../components/doc/speeddial/circledoc'; -import { TooltipDoc } from '../../components/doc/speeddial/tooltipdoc'; -import { TransitionDoc } from '../../components/doc/speeddial/customdoc'; import { MaskDoc } from '../../components/doc/speeddial/maskdoc'; -import { ApiDoc } from '../../components/doc/speeddial/apidoc'; -import { AccessibilityDoc } from '../../components/doc/speeddial/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/speeddial/styledoc'; -import { SemiCircleDoc } from '../../components/doc/speeddial/semicircledoc'; import { QuarterCircleDoc } from '../../components/doc/speeddial/quartercircledoc'; -import { CustomDoc } from '../../components/doc/speeddial/customdoc'; +import { SemiCircleDoc } from '../../components/doc/speeddial/semicircledoc'; +import { StyleDoc } from '../../components/doc/speeddial/styledoc'; +import { TooltipDoc } from '../../components/doc/speeddial/tooltipdoc'; const SpeedDialDemo = () => { const docs = [ @@ -70,7 +68,7 @@ const SpeedDialDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Speed Dial', pathname: '/modules/speeddial.html' }] } ]; @@ -86,7 +84,7 @@ const SpeedDialDemo = () => {

    When pressed, a floating action button can display multiple primary actions that can be performed on a page.

    - +
    diff --git a/pages/splitbutton/index.js b/pages/splitbutton/index.js index 65253e35f6..13a8dd6f63 100644 --- a/pages/splitbutton/index.js +++ b/pages/splitbutton/index.js @@ -2,20 +2,19 @@ import Head from 'next/head'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; +import { AccessibilityDoc } from '../../components/doc/splitbutton/accessibilitydoc'; import { BasicDoc } from '../../components/doc/splitbutton/basic'; +import { DisabledDoc } from '../../components/doc/splitbutton/disableddoc'; import { ImportDoc } from '../../components/doc/splitbutton/importdoc'; -import { SeveritiesDoc } from '../../components/doc/splitbutton/severitiesdoc'; +import { LoadingDoc } from '../../components/doc/splitbutton/loadingdoc'; +import { OutlinedButtonsDoc } from '../../components/doc/splitbutton/outlinedbuttonsdoc'; import { RaisedButtonsDoc } from '../../components/doc/splitbutton/raisedbuttonsdoc'; -import { RoundedButtonsDoc } from '../../components/doc/splitbutton/roundedbuttonsdoc'; -import { TextButtonsDoc } from '../../components/doc/splitbutton/textbuttonsdoc'; import { RaisedTextButtonsDoc } from '../../components/doc/splitbutton/raisedtextbuttonsdoc'; -import { OutlinedButtonsDoc } from '../../components/doc/splitbutton/outlinedbuttonsdoc'; +import { RoundedButtonsDoc } from '../../components/doc/splitbutton/roundedbuttonsdoc'; +import { SeveritiesDoc } from '../../components/doc/splitbutton/severitiesdoc'; import { SizesDoc } from '../../components/doc/splitbutton/sizesdoc'; -import { ApiDoc } from '../../components/doc/splitbutton/apidoc'; -import { AccessibilityDoc } from '../../components/doc/splitbutton/accessibilitydoc'; import { StyleDoc } from '../../components/doc/splitbutton/styledoc'; -import { LoadingDoc } from '../../components/doc/splitbutton/loadingdoc'; -import { DisabledDoc } from '../../components/doc/splitbutton/disableddoc'; +import { TextButtonsDoc } from '../../components/doc/splitbutton/textbuttonsdoc'; const SplitButtonDemo = () => { const docs = [ @@ -87,7 +86,7 @@ const SplitButtonDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'SplitButton', pathname: '/modules/splitbutton.html' }] } ]; @@ -103,7 +102,7 @@ const SplitButtonDemo = () => {

    SplitButton groups a set of commands in an overlay with a default command.

    - +
    diff --git a/pages/splitter/index.js b/pages/splitter/index.js index 4a9dda3fae..ddafe19390 100644 --- a/pages/splitter/index.js +++ b/pages/splitter/index.js @@ -1,15 +1,14 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/splitter/importdoc'; +import { AccessibilityDoc } from '../../components/doc/splitter/accessibilitydoc'; import { HorizontalDoc } from '../../components/doc/splitter/horizontaldoc'; -import { SizeDoc } from '../../components/doc/splitter/sizedoc'; -import { VerticalDoc } from '../../components/doc/splitter/verticaldoc'; +import { ImportDoc } from '../../components/doc/splitter/importdoc'; import { NestedDoc } from '../../components/doc/splitter/nesteddoc'; -import { ApiDoc } from '../../components/doc/splitter/apidoc'; -import { AccessibilityDoc } from '../../components/doc/splitter/accessibilitydoc'; +import { SizeDoc } from '../../components/doc/splitter/sizedoc'; import { StyleDoc } from '../../components/doc/splitter/styledoc'; +import { VerticalDoc } from '../../components/doc/splitter/verticaldoc'; const SplitterDemo = () => { const docs = [ @@ -51,7 +50,10 @@ const SplitterDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [ + { name: 'Splitter', pathname: '/modules/splitter.html' }, + { name: 'SplitterPanel', pathname: '/classes/splitter.SplitterPanel.html' } + ] } ]; @@ -66,7 +68,7 @@ const SplitterDemo = () => {

    Splitter

    Splitter is utilized to separate and resize panels.

    - +
    diff --git a/pages/steps/index.js b/pages/steps/index.js index f9537c14a5..3dc1313d16 100644 --- a/pages/steps/index.js +++ b/pages/steps/index.js @@ -1,12 +1,11 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/steps/importdoc'; +import { AccessibilityDoc } from '../../components/doc/steps/accessibilitydoc'; import { BasicDoc } from '../../components/doc/steps/basicdoc'; +import { ImportDoc } from '../../components/doc/steps/importdoc'; import { InteractiveDoc } from '../../components/doc/steps/interactivedoc'; -import { ApiDoc } from '../../components/doc/steps/apidoc'; -import { AccessibilityDoc } from '../../components/doc/steps/accessibilitydoc'; import { StyleDoc } from '../../components/doc/steps/styledoc'; const StepsDemo = () => { @@ -39,7 +38,7 @@ const StepsDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Steps', pathname: '/modules/steps.html' }] } ]; @@ -54,7 +53,7 @@ const StepsDemo = () => {

    Steps

    Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.

    - +
    diff --git a/pages/styleclass/index.js b/pages/styleclass/index.js index 97d5a220c5..358fe536d5 100644 --- a/pages/styleclass/index.js +++ b/pages/styleclass/index.js @@ -3,11 +3,9 @@ import React from 'react'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/styleclass/apidoc'; - +import { AnimationDoc } from '../../components/doc/styleclass/animationdoc'; import { ImportDoc } from '../../components/doc/styleclass/importdoc'; import { ToggleClassDoc } from '../../components/doc/styleclass/toggleclassdoc'; -import { AnimationDoc } from '../../components/doc/styleclass/animationdoc'; const StyleClassDemo = () => { const docs = [ @@ -29,7 +27,7 @@ const StyleClassDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'StyleClass', pathname: '/modules/styleclass.html' }] } ]; @@ -44,7 +42,7 @@ const StyleClassDemo = () => {

    StyleClass

    StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.

    - +
    diff --git a/pages/tabmenu/index.js b/pages/tabmenu/index.js index db2ca4e61b..6f5612d217 100644 --- a/pages/tabmenu/index.js +++ b/pages/tabmenu/index.js @@ -1,12 +1,11 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/tabmenu/importdoc'; +import { AccessibilityDoc } from '../../components/doc/tabmenu/accessibilitydoc'; import { BasicDoc } from '../../components/doc/tabmenu/basicdoc'; import { ControlledDoc } from '../../components/doc/tabmenu/controlleddoc'; -import { ApiDoc } from '../../components/doc/tabmenu/apidoc'; -import { AccessibilityDoc } from '../../components/doc/tabmenu/accessibilitydoc'; +import { ImportDoc } from '../../components/doc/tabmenu/importdoc'; import { StyleDoc } from '../../components/doc/tabmenu/styledoc'; const TabMenuDemo = () => { @@ -39,7 +38,7 @@ const TabMenuDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'TabMenu', pathname: '/modules/tabmenu.html' }] } ]; @@ -54,7 +53,7 @@ const TabMenuDemo = () => {

    TabMenu

    TabMenu is a navigation/command component that displays items as tab headers.

    - +
    diff --git a/pages/tabview/index.js b/pages/tabview/index.js index 00f2be0c7b..a19391991a 100644 --- a/pages/tabview/index.js +++ b/pages/tabview/index.js @@ -2,17 +2,16 @@ import Head from 'next/head'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ImportDoc } from '../../components/doc/tabview/importdoc'; +import { AccessibilityDoc } from '../../components/doc/tabview/accessibilitydoc'; import { BasicDoc } from '../../components/doc/tabview/basicdoc'; +import { ClosableDoc } from '../../components/doc/tabview/closabledoc'; import { ControlledDoc } from '../../components/doc/tabview/controlleddoc'; import { DisabledDoc } from '../../components/doc/tabview/disableddoc'; import { HeaderIconDoc } from '../../components/doc/tabview/headericondoc'; -import { TemplateDoc } from '../../components/doc/tabview/templatedoc'; -import { ClosableDoc } from '../../components/doc/tabview/closabledoc'; +import { ImportDoc } from '../../components/doc/tabview/importdoc'; import { ScrollableDoc } from '../../components/doc/tabview/scrollabledoc'; -import { ApiDoc } from '../../components/doc/tabview/apidoc'; -import { AccessibilityDoc } from '../../components/doc/tabview/accessibilitydoc'; import { StyleDoc } from '../../components/doc/tabview/styledoc'; +import { TemplateDoc } from '../../components/doc/tabview/templatedoc'; const TabViewDemo = () => { const docs = [ @@ -69,7 +68,10 @@ const TabViewDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [ + { name: 'TabView', pathname: '/modules/tabview.html' }, + { name: 'TabPanel', pathname: '/classes/tabview.TabPanel.html' } + ] } ]; @@ -84,7 +86,7 @@ const TabViewDemo = () => {

    TabView

    TabView is a container component to group content with tabs.

    - +
    diff --git a/pages/tag/index.js b/pages/tag/index.js index cd1f2e5843..51aa3aa401 100644 --- a/pages/tag/index.js +++ b/pages/tag/index.js @@ -3,14 +3,13 @@ import React from 'react'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/tag/apidoc'; import { AccessibilityDoc } from '../../components/doc/tag/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/tag/styledoc'; -import { ImportDoc } from '../../components/doc/tag/importdoc'; import { BasicDoc } from '../../components/doc/tag/basicdoc'; -import { SeverityDoc } from '../../components/doc/tag/severitydoc'; -import { PillDoc } from '../../components/doc/tag/pilldoc'; import { IconDoc } from '../../components/doc/tag/icondoc'; +import { ImportDoc } from '../../components/doc/tag/importdoc'; +import { PillDoc } from '../../components/doc/tag/pilldoc'; +import { SeverityDoc } from '../../components/doc/tag/severitydoc'; +import { StyleDoc } from '../../components/doc/tag/styledoc'; import { TemplateDoc } from '../../components/doc/tag/templatedoc'; const TerminalDemo = () => { @@ -58,7 +57,7 @@ const TerminalDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Tag', pathname: '/modules/tag.html' }] } ]; @@ -73,7 +72,7 @@ const TerminalDemo = () => {

    Tag

    Tag component is used to categorize content.

    - +
    diff --git a/pages/terminal/index.js b/pages/terminal/index.js index 9f0eb44ef3..eeef2e4673 100644 --- a/pages/terminal/index.js +++ b/pages/terminal/index.js @@ -3,11 +3,10 @@ import React from 'react'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ApiDoc } from '../../components/doc/terminal/apidoc'; import { AccessibilityDoc } from '../../components/doc/terminal/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/terminal/styledoc'; -import { ImportDoc } from '../../components/doc/terminal/importdoc'; import { BasicDoc } from '../../components/doc/terminal/basicdoc'; +import { ImportDoc } from '../../components/doc/terminal/importdoc'; +import { StyleDoc } from '../../components/doc/terminal/styledoc'; const TerminalDemo = () => { const docs = [ @@ -34,7 +33,7 @@ const TerminalDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Terminal', pathname: '/modules/terminal.html' }] } ]; @@ -49,7 +48,7 @@ const TerminalDemo = () => {

    Terminal

    Terminal is a text based user interface.

    - +
    diff --git a/pages/theming/index.js b/pages/theming/index.js index ce1748f366..df8ec71acb 100644 --- a/pages/theming/index.js +++ b/pages/theming/index.js @@ -1,12 +1,12 @@ -import React from 'react'; +import getConfig from 'next/config'; +import Head from 'next/head'; import Link from 'next/link'; +import React from 'react'; +import css from 'styled-jsx/css'; import { CodeHighlight } from '../../components/doc/common/codehighlight'; -import Head from 'next/head'; -import getConfig from 'next/config'; -import { Panel } from '../../components/lib/panel/Panel'; import { Button } from '../../components/lib/button/Button'; +import { Panel } from '../../components/lib/panel/Panel'; import stylesModule from './theming.module.css'; -import css from 'styled-jsx/css'; const ThemingPage = () => { const contextPath = getConfig().publicRuntimeConfig.contextPath; @@ -94,13 +94,12 @@ primereact/resources/themes/rhea/theme.css

    CSS of the themes share the same license as PrimeReact which is MIT, this means the generated CSS can be customized per your needs however this should be avoided if your customizations are not simple. For instance even to change a primary color, since there is no variable a find and replace should be performed various times. On the other hand, this can be achieved by changing a single variable e.g. $primaryColor. Visit the{' '} - SASS API for the documentation of available customization options. + SASS API for the documentation of available customization options.

    Designer is the ultimate tool to create your own PrimeReact experience powered by a SASS based theme engine with 500+ variables and a Visual Designer. PrimeReact only - ships the generated CSS of Material, Bootstrap, Tailwind and PrimeOne themes whereas Designer provides full access to the whole SASS structure and the variables of these pre-built themes for easier - customization. In addition, designer provides exclusive premium themes to subscribers including Soho, Viva, Mira and Nano that are not available in core PrimeReact distribution at NPM. + ships the generated CSS of the themes whereas Designer provides full access to the whole SASS structure and the variables of these pre-built themes for easier customization.

    Whether you have your own style guide or just need a custom theme, Designer is the right tool to design and bring them to existence.

    @@ -278,7 +277,7 @@ html { PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeReact can be used with any CSS utility library like bootstrap and tailwind however PrimeFlex has benefits like integration with PrimeReact themes usign CSS variables so that colors classes e.g. bg-blue-500 receive the color code from the PrimeReact theme being used. PrimeReact follows the CSS utility approach of PrimeFlex and currently does not provide an extended style property like sx. Same approach is also utilized in{' '} - PrimeBlocks for PrimeReact project as well. + PrimeBlocks for PrimeReact project as well.

    Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.

    diff --git a/pages/tieredmenu/index.js b/pages/tieredmenu/index.js index 9b95ffbfcf..8a2faf2949 100644 --- a/pages/tieredmenu/index.js +++ b/pages/tieredmenu/index.js @@ -1,12 +1,11 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/tieredmenu/importdoc'; +import { AccessibilityDoc } from '../../components/doc/tieredmenu/accessibilitydoc'; import { BasicDoc } from '../../components/doc/tieredmenu/basicdoc'; +import { ImportDoc } from '../../components/doc/tieredmenu/importdoc'; import { PopupDoc } from '../../components/doc/tieredmenu/popupdoc'; -import { ApiDoc } from '../../components/doc/tieredmenu/apidoc'; -import { AccessibilityDoc } from '../../components/doc/tieredmenu/accessibilitydoc'; import { StyleDoc } from '../../components/doc/tieredmenu/styledoc'; const TieredMenuDemo = () => { @@ -39,7 +38,7 @@ const TieredMenuDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'TieredMenu', pathname: '/modules/tieredmenu.html' }] } ]; @@ -54,7 +53,7 @@ const TieredMenuDemo = () => {

    TieredMenu

    TieredMenu displays submenus in nested overlays.

    - +
    diff --git a/pages/timeline/index.js b/pages/timeline/index.js index c7ecabc434..83f9845c1e 100644 --- a/pages/timeline/index.js +++ b/pages/timeline/index.js @@ -1,16 +1,15 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ApiDoc } from '../../components/doc/timeline/apidoc'; import { AccessibilityDoc } from '../../components/doc/timeline/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/timeline/styledoc'; -import { HorizontalDoc } from '../../components/doc/timeline/horizontaldoc'; import { AlignmentDoc } from '../../components/doc/timeline/aligndoc'; -import { OppositeContentDoc } from '../../components/doc/timeline/oppositecontentdoc'; import { CustomizedDoc } from '../../components/doc/timeline/customizeddoc'; +import { HorizontalDoc } from '../../components/doc/timeline/horizontaldoc'; import { ImportDoc } from '../../components/doc/timeline/importdoc'; +import { OppositeContentDoc } from '../../components/doc/timeline/oppositecontentdoc'; +import { StyleDoc } from '../../components/doc/timeline/styledoc'; const TimelineDemo = () => { const docs = [ @@ -52,7 +51,7 @@ const TimelineDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Timeline', pathname: '/modules/timeline.html' }] } ]; @@ -69,7 +68,7 @@ const TimelineDemo = () => {

    Timeline visualizes a series of chained events.

    - +
    diff --git a/pages/toast/index.js b/pages/toast/index.js index 2afbc1eea7..256143c98c 100644 --- a/pages/toast/index.js +++ b/pages/toast/index.js @@ -2,16 +2,15 @@ import Head from 'next/head'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ImportDoc } from '../../components/doc/toast/importdoc'; -import { ApiDoc } from '../../components/doc/toast/apidoc'; import { AccessibilityDoc } from '../../components/doc/toast/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/toast/styledoc'; -import { SeverityDoc } from '../../components/doc/toast/severitydoc'; +import { BasicDoc } from '../../components/doc/toast/basicdoc'; +import { ImportDoc } from '../../components/doc/toast/importdoc'; +import { MultipleDoc } from '../../components/doc/toast/multipledoc'; import { PositionDoc } from '../../components/doc/toast/positiondoc'; -import { TemplateDoc } from '../../components/doc/toast/templatedoc'; +import { SeverityDoc } from '../../components/doc/toast/severitydoc'; import { StickyDoc } from '../../components/doc/toast/stickydoc'; -import { MultipleDoc } from '../../components/doc/toast/multipledoc'; -import { BasicDoc } from '../../components/doc/toast/basicdoc'; +import { StyleDoc } from '../../components/doc/toast/styledoc'; +import { TemplateDoc } from '../../components/doc/toast/templatedoc'; const ToastDemo = () => { const docs = [ @@ -63,7 +62,7 @@ const ToastDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Toast', pathname: '/modules/toast.html' }] } ]; @@ -78,7 +77,7 @@ const ToastDemo = () => {

    Toast

    Toast is used to display messages in an overlay.

    - +
    diff --git a/pages/togglebutton/index.js b/pages/togglebutton/index.js index c238f1c000..3798f9f5fc 100644 --- a/pages/togglebutton/index.js +++ b/pages/togglebutton/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/togglebutton/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/togglebutton/apidoc'; import { BasicDoc } from '../../components/doc/togglebutton/basicdoc'; import { CustomizedDoc } from '../../components/doc/togglebutton/customizeddoc'; import { ImportDoc } from '../../components/doc/togglebutton/importdoc'; @@ -59,7 +58,7 @@ const ToggleButtonDemo = () => { id: 'api', label: 'API', type: 'api', - component: ApiDoc + doc: [{ name: 'ToggleButton', pathname: '/modules/togglebutton.html' }] } ]; @@ -75,7 +74,7 @@ const ToggleButtonDemo = () => {

    ToggleButton is used to select a boolean value using a button.

    - +
    diff --git a/pages/toolbar/index.js b/pages/toolbar/index.js index 525b2f6d3b..5554e02a2c 100644 --- a/pages/toolbar/index.js +++ b/pages/toolbar/index.js @@ -1,11 +1,10 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/toolbar/importdoc'; -import { BasicDoc } from '../../components/doc/toolbar/basicdoc'; -import { ApiDoc } from '../../components/doc/toolbar/apidoc'; import { AccessibilityDoc } from '../../components/doc/toolbar/accessibilitydoc'; +import { BasicDoc } from '../../components/doc/toolbar/basicdoc'; +import { ImportDoc } from '../../components/doc/toolbar/importdoc'; import { StyleDoc } from '../../components/doc/toolbar/styledoc'; const ToolbarDemo = () => { @@ -33,7 +32,7 @@ const ToolbarDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Toolbar', pathname: '/modules/toolbar.html' }] } ]; @@ -48,7 +47,7 @@ const ToolbarDemo = () => {

    Toolbar

    Toolbar is a grouping component for buttons and other content.

    - +
    diff --git a/pages/tooltip/index.js b/pages/tooltip/index.js index ca2c3c5de6..1284483eb4 100644 --- a/pages/tooltip/index.js +++ b/pages/tooltip/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/tooltip/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/tooltip/apidoc'; import { AutoHideDoc } from '../../components/doc/tooltip/autohidedoc'; import { DelayDoc } from '../../components/doc/tooltip/delaydoc'; import { DisabledDoc } from '../../components/doc/tooltip/disableddoc'; @@ -81,7 +80,7 @@ const TooltipDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Tooltip', pathname: '/modules/tooltip.html' }] } ]; @@ -97,7 +96,7 @@ const TooltipDemo = () => {

    Tooltip functionality is integrated within various PrimeReact components.

    - +
    diff --git a/pages/tree/index.js b/pages/tree/index.js index 89a5d9d28c..f755f5c8b2 100644 --- a/pages/tree/index.js +++ b/pages/tree/index.js @@ -2,23 +2,22 @@ import Head from 'next/head'; import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { ImportDoc } from '../../components/doc/tree/importdoc'; -import { ApiDoc } from '../../components/doc/tree/apidoc'; import { AccessibilityDoc } from '../../components/doc/tree/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/tree/styledoc'; import { BasicDoc } from '../../components/doc/tree/basicdoc'; -import { ProgrammaticDoc } from '../../components/doc/tree/programmaticdoc'; -import { TreeEventsDoc } from '../../components/doc/tree/eventsdoc'; -import { LazyDoc } from '../../components/doc/tree/lazydoc'; -import { TemplateDoc } from '../../components/doc/tree/templatedoc'; -import { DragAndDropDoc } from '../../components/doc/tree/draganddropdoc'; import { ContextMenuDoc } from '../../components/doc/tree/contextmenudoc'; +import { DragAndDropDoc } from '../../components/doc/tree/draganddropdoc'; +import { TreeEventsDoc } from '../../components/doc/tree/eventsdoc'; import { LenientFilterDoc } from '../../components/doc/tree/filter/lenientfilterdoc'; import { StrictFilterDoc } from '../../components/doc/tree/filter/strictfilterdoc'; -import { SingleSelectionDoc } from '../../components/doc/tree/selection/singleselectiondoc'; +import { ImportDoc } from '../../components/doc/tree/importdoc'; +import { LazyDoc } from '../../components/doc/tree/lazydoc'; +import { ProgrammaticDoc } from '../../components/doc/tree/programmaticdoc'; +import { CheckboxSelectionDoc } from '../../components/doc/tree/selection/checkboxselectiondoc'; import { MultipleSelectionWithKeyDoc } from '../../components/doc/tree/selection/multipleselectionwithkeydoc'; import { MultipleSelectionWithoutKeyDoc } from '../../components/doc/tree/selection/multipleselectionwithoutkeydoc'; -import { CheckboxSelectionDoc } from '../../components/doc/tree/selection/checkboxselectiondoc'; +import { SingleSelectionDoc } from '../../components/doc/tree/selection/singleselectiondoc'; +import { StyleDoc } from '../../components/doc/tree/styledoc'; +import { TemplateDoc } from '../../components/doc/tree/templatedoc'; const TreeDemo = () => { const docs = [ @@ -119,7 +118,7 @@ const TreeDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'Tree', pathname: '/modules/tree.html' }] } ]; @@ -135,7 +134,7 @@ const TreeDemo = () => {

    Tree is used to display hierarchical data.

    - +
    diff --git a/pages/treeselect/index.js b/pages/treeselect/index.js index 82bffb0679..7a0c3e0fbe 100644 --- a/pages/treeselect/index.js +++ b/pages/treeselect/index.js @@ -3,7 +3,6 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/treeselect/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/treeselect/apidoc'; import { BasicDoc } from '../../components/doc/treeselect/basicdoc'; import { CheckboxDoc } from '../../components/doc/treeselect/checkboxdoc'; import { DefaultDoc } from '../../components/doc/treeselect/defaultdoc'; @@ -14,8 +13,8 @@ import { InvalidDoc } from '../../components/doc/treeselect/invaliddoc'; import { MultipleDoc } from '../../components/doc/treeselect/multipledoc'; import { ProgrammaticDoc } from '../../components/doc/treeselect/programmaticdoc'; import { StyleDoc } from '../../components/doc/treeselect/styledoc'; -import { FormikDoc } from '../../components/doc/treeselect/validation/formikdoc'; -import { HookFormDoc } from '../../components/doc/treeselect/validation/hookformdoc'; +import { FormikDoc } from '../../components/doc/treeselect/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/treeselect/form/hookformdoc'; const TreeSelectDemo = () => { const docs = [ @@ -94,7 +93,7 @@ const TreeSelectDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'TreeSelect', pathname: '/modules/treeselect.html' }] } ]; @@ -110,7 +109,7 @@ const TreeSelectDemo = () => {

    TreeSelect is a form component to choose from hierarchical data.

    - +
    diff --git a/pages/treetable/index.js b/pages/treetable/index.js index c5db4fdf0c..8312b78bf2 100644 --- a/pages/treetable/index.js +++ b/pages/treetable/index.js @@ -1,41 +1,40 @@ import Head from 'next/head'; import React from 'react'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ApiDoc } from '../../components/doc/treetable/apidoc'; import { AccessibilityDoc } from '../../components/doc/treetable/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/treetable/styledoc'; -import { PaginatorDoc } from '../../components/doc/treetable/paginatordoc'; -import { TemplateDoc } from '../../components/doc/treetable/templatedoc'; -import { ImportDoc } from '../../components/doc/treetable/importdoc'; import { BasicDoc } from '../../components/doc/treetable/basicdoc'; -import { ProgrammaticDoc } from '../../components/doc/treetable/programmaticdoc'; import { ColGroupDoc } from '../../components/doc/treetable/colgroupdoc'; -import { LazyDoc } from '../../components/doc/treetable/lazydoc'; -import { EditDoc } from '../../components/doc/treetable/editdoc'; -import { ReorderDoc } from '../../components/doc/treetable/reorderdoc'; import { ColToggleDoc } from '../../components/doc/treetable/coltoggledoc'; -import { StyledTreeTableDoc } from '../../components/doc/treetable/styledtreetabledoc'; import { ContextMenuDoc } from '../../components/doc/treetable/contextmenudoc'; -import { ResponsiveDoc } from '../../components/doc/treetable/responsivedoc'; +import { EditDoc } from '../../components/doc/treetable/editdoc'; import { LenientFilterDoc } from '../../components/doc/treetable/filter/lenientfilterdoc'; import { StrictFilterDoc } from '../../components/doc/treetable/filter/strictfilterdoc'; -import { VerticalDoc } from '../../components/doc/treetable/scroll/verticaldoc'; -import { HorizontalDoc } from '../../components/doc/treetable/scroll/horizontaldoc'; -import { HorizontalAndVerticalDoc } from '../../components/doc/treetable/scroll/horizontalandverticaldoc'; -import { FrozenColumnsDoc } from '../../components/doc/treetable/scroll/frozencolsdoc'; -import { SingleDoc } from '../../components/doc/treetable/sort/singledoc'; -import { MultipleDoc } from '../../components/doc/treetable/sort/multipledoc'; -import { FitModeDoc } from '../../components/doc/treetable/resize/fitmodedoc'; +import { ImportDoc } from '../../components/doc/treetable/importdoc'; +import { LazyDoc } from '../../components/doc/treetable/lazydoc'; +import { PaginatorDoc } from '../../components/doc/treetable/paginatordoc'; +import { ProgrammaticDoc } from '../../components/doc/treetable/programmaticdoc'; +import { ReorderDoc } from '../../components/doc/treetable/reorderdoc'; import { ExpandModeDoc } from '../../components/doc/treetable/resize/expandmodedoc'; +import { FitModeDoc } from '../../components/doc/treetable/resize/fitmodedoc'; import { ScrollableDoc } from '../../components/doc/treetable/resize/scrollabledoc'; import { ScrollableWithVariableWidthDoc } from '../../components/doc/treetable/resize/scrollablewithvariabledoc'; +import { ResponsiveDoc } from '../../components/doc/treetable/responsivedoc'; +import { FrozenColumnsDoc } from '../../components/doc/treetable/scroll/frozencolsdoc'; +import { HorizontalAndVerticalDoc } from '../../components/doc/treetable/scroll/horizontalandverticaldoc'; +import { HorizontalDoc } from '../../components/doc/treetable/scroll/horizontaldoc'; +import { VerticalDoc } from '../../components/doc/treetable/scroll/verticaldoc'; import { CheckboxDoc } from '../../components/doc/treetable/selection/checkboxdoc'; import { EventsDoc } from '../../components/doc/treetable/selection/eventsdoc'; import { MultipleSelectionDoc } from '../../components/doc/treetable/selection/multipledoc'; import { MultipleWithMetaKeysDoc } from '../../components/doc/treetable/selection/multiplewithmetadoc'; import { SingleSelectionDoc } from '../../components/doc/treetable/selection/singledoc'; +import { MultipleDoc } from '../../components/doc/treetable/sort/multipledoc'; +import { SingleDoc } from '../../components/doc/treetable/sort/singledoc'; +import { StyleDoc } from '../../components/doc/treetable/styledoc'; +import { StyledTreeTableDoc } from '../../components/doc/treetable/styledtreetabledoc'; +import { TemplateDoc } from '../../components/doc/treetable/templatedoc'; const TreeTableDemo = () => { const docs = [ @@ -239,7 +238,10 @@ const TreeTableDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [ + { name: 'TreeTable', pathname: '/modules/treetable.html' }, + { name: 'Column', pathname: '/modules/column.html' } + ] } ]; @@ -256,7 +258,7 @@ const TreeTableDemo = () => {

    TreeTable is used to display hierarchical data in tabular format.

    - +
    diff --git a/pages/tristatecheckbox/index.js b/pages/tristatecheckbox/index.js index 395c1c02e1..ee7cbc6ca3 100644 --- a/pages/tristatecheckbox/index.js +++ b/pages/tristatecheckbox/index.js @@ -3,14 +3,13 @@ import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; import { AccessibilityDoc } from '../../components/doc/tristatecheckbox/accessibilitydoc'; -import { ApiDoc } from '../../components/doc/tristatecheckbox/apidoc'; import { BasicDoc } from '../../components/doc/tristatecheckbox/basicdoc'; import { DisabledDoc } from '../../components/doc/tristatecheckbox/disableddoc'; import { ImportDoc } from '../../components/doc/tristatecheckbox/importdoc'; import { InvalidDoc } from '../../components/doc/tristatecheckbox/invaliddoc'; import { StyleDoc } from '../../components/doc/tristatecheckbox/styledoc'; -import { FormikDoc } from '../../components/doc/tristatecheckbox/validation/formikdoc'; -import { HookFormDoc } from '../../components/doc/tristatecheckbox/validation/hookformdoc'; +import { FormikDoc } from '../../components/doc/tristatecheckbox/form/formikdoc'; +import { HookFormDoc } from '../../components/doc/tristatecheckbox/form/hookformdoc'; const TriStateCheckboxDemo = () => { const docs = [ @@ -64,7 +63,7 @@ const TriStateCheckboxDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'TriStateCheckbox', pathname: '/modules/tristatecheckbox.html' }] } ]; @@ -80,7 +79,7 @@ const TriStateCheckboxDemo = () => {

    TriStateCheckbox is used to select either "true", "false" or "null" as the value.

    - +
    diff --git a/pages/virtualscroller/index.js b/pages/virtualscroller/index.js index 8455b9392e..07abf166ba 100644 --- a/pages/virtualscroller/index.js +++ b/pages/virtualscroller/index.js @@ -1,15 +1,14 @@ import Head from 'next/head'; +import { DocActions } from '../../components/doc/common/docactions'; import { DocSectionNav } from '../../components/doc/common/docsectionnav'; import { DocSections } from '../../components/doc/common/docsections'; -import { DocActions } from '../../components/doc/common/docactions'; -import { ImportDoc } from '../../components/doc/virtualscroller/importdoc'; -import { BasicDoc } from '../../components/doc/virtualscroller/basicdoc'; -import { ApiDoc } from '../../components/doc/virtualscroller/apidoc'; import { AccessibilityDoc } from '../../components/doc/virtualscroller/accessibilitydoc'; -import { StyleDoc } from '../../components/doc/virtualscroller/styledoc'; -import { ScrollDelayDoc } from '../../components/doc/virtualscroller/scrolldelaydoc'; -import { LoadingDoc } from '../../components/doc/virtualscroller/loadingdoc'; +import { BasicDoc } from '../../components/doc/virtualscroller/basicdoc'; +import { ImportDoc } from '../../components/doc/virtualscroller/importdoc'; import { LazyDoc } from '../../components/doc/virtualscroller/lazydoc'; +import { LoadingDoc } from '../../components/doc/virtualscroller/loadingdoc'; +import { ScrollDelayDoc } from '../../components/doc/virtualscroller/scrolldelaydoc'; +import { StyleDoc } from '../../components/doc/virtualscroller/styledoc'; import { TemplateDoc } from '../../components/doc/virtualscroller/templatedoc'; const VirtualScrollerDemo = () => { @@ -57,7 +56,7 @@ const VirtualScrollerDemo = () => { { id: 'api', label: 'API', - component: ApiDoc + doc: [{ name: 'VirtualScroller', pathname: '/modules/virtualscroller.html' }] } ]; @@ -73,7 +72,7 @@ const VirtualScrollerDemo = () => {

    VirtualScroller is a performant approach to handle huge data efficiently.

    - +
    diff --git a/public/scripts/prism/prism.js b/public/scripts/prism/prism.js index 317a668c6f..31bc3c7c64 100644 --- a/public/scripts/prism/prism.js +++ b/public/scripts/prism/prism.js @@ -1,13 +1,17 @@ -/* PrismJS 1.25.0 -https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+jsx+tsx+scss+typescript&plugins=toolbar+copy-to-clipboard */ -var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var t=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,n=0,e={},M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=l.reach);y+=m.value.length,m=m.next){var k=m.value;if(t.length>n.length)return;if(!(k instanceof W)){var x,b=1;if(h){if(!(x=z(p,y,n,f))||x.index>=n.length)break;var w=x.index,A=x.index+x[0].length,P=y;for(P+=m.value.length;P<=w;)m=m.next,P+=m.value.length;if(P-=m.value.length,y=P,m.value instanceof W)continue;for(var E=m;E!==t.tail&&(Pl.reach&&(l.reach=j);var C=m.prev;S&&(C=I(t,C,S),y+=S.length),q(t,C,b);var N=new W(o,g?M.tokenize(L,g):L,d,L);if(m=I(t,C,N),O&&I(t,m,O),1l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){var n=[],t=e.head.next;for(;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=M.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=M.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:W};function W(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function z(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function q(e,n,t){for(var r=n.next,a=0;a"+a.content+""},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(M.highlight(r,M.languages[t],t)),a&&u.close()},!1)),M;var r=M.util.currentScript();function a(){M.manual||M.highlightAll()}if(r&&(M.filename=r.src,r.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var l=document.readyState;"loading"===l||"interactive"===l&&r&&r.defer?document.addEventListener("DOMContentLoaded",a):window.requestAnimationFrame?window.requestAnimationFrame(a):window.setTimeout(a,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); -Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml; -!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism); +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+json+json5+markup-templating+php+jsx+tsx+scss+typescript&plugins=toolbar+copy-to-clipboard */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(jg.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a"+i.content+""},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml; +!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism); Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}; -Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript; -!function(o){var t=o.util.clone(o.languages.javascript),e="(?:\\{*\\.{3}(?:[^{}]|)*\\})";function n(t,n){return t=t.replace(//g,function(){return"(?:\\s|//.*(?!.)|/\\*(?:[^*]|\\*(?!/))\\*/)"}).replace(//g,function(){return"(?:\\{(?:\\{(?:\\{[^{}]*\\}|[^{}])*\\}|[^{}])*\\})"}).replace(//g,function(){return e}),RegExp(t,n)}e=n(e).source,o.languages.jsx=o.languages.extend("markup",t),o.languages.jsx.tag.pattern=n("+(?:[\\w.:$-]+(?:=(?:\"(?:\\\\[^]|[^\\\\\"])*\"|'(?:\\\\[^]|[^\\\\'])*'|[^\\s{'\"/>=]+|))?|))**/?)?>"),o.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,o.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,o.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,o.languages.jsx.tag.inside.comment=t.comment,o.languages.insertBefore("inside","attr-name",{spread:{pattern:n(""),inside:o.languages.jsx}},o.languages.jsx.tag),o.languages.insertBefore("inside","special-attr",{script:{pattern:n("="),inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:o.languages.jsx},alias:"language-javascript"}},o.languages.jsx.tag);var i=function(t){return t?"string"==typeof t?t:"string"==typeof t.content?t.content:t.content.map(i).join(""):""},r=function(t){for(var n=[],e=0;e"===a.content[a.content.length-1].content||n.push({tagName:i(a.content[0].content[1]),openedBraces:0}):0|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript; +Prism.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},Prism.languages.webmanifest=Prism.languages.json; +!function(n){var e=/("|')(?:\\(?:\r\n?|\n|.)|(?!\1)[^\\\r\n])*\1/;n.languages.json5=n.languages.extend("json",{property:[{pattern:RegExp(e.source+"(?=\\s*:)"),greedy:!0},{pattern:/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/,alias:"unquoted"}],string:{pattern:e,greedy:!0},number:/[+-]?\b(?:NaN|Infinity|0x[a-fA-F\d]+)\b|[+-]?(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[eE][+-]?\d+\b)?/})}(Prism); +!function(e){function n(e,n){return"___"+e.toUpperCase()+n+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(t,a,r,o){if(t.language===a){var c=t.tokenStack=[];t.code=t.code.replace(r,(function(e){if("function"==typeof o&&!o(e))return e;for(var r,i=c.length;-1!==t.code.indexOf(r=n(a,i));)++i;return c[i]=e,r})),t.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(t,a){if(t.language===a&&t.tokenStack){t.grammar=e.languages[a];var r=0,o=Object.keys(t.tokenStack);!function c(i){for(var u=0;u=o.length);u++){var g=i[u];if("string"==typeof g||g.content&&"string"==typeof g.content){var l=o[r],s=t.tokenStack[l],f="string"==typeof g?g:g.content,p=n(a,l),k=f.indexOf(p);if(k>-1){++r;var m=f.substring(0,k),d=new e.Token(a,e.tokenize(s,t.grammar),"language-"+a,s),h=f.substring(k+p.length),v=[];m&&v.push.apply(v,c([m])),v.push(d),h&&v.push.apply(v,c([h])),"string"==typeof g?i.splice.apply(i,[u,1].concat(v)):g.content=v}}else g.content&&c(g.content)}return i}(t.tokens)}}}})}(Prism); +!function(e){var a=/\/\*[\s\S]*?\*\/|\/\/.*|#(?!\[).*/,t=[{pattern:/\b(?:false|true)\b/i,alias:"boolean"},{pattern:/(::\s*)\b[a-z_]\w*\b(?!\s*\()/i,greedy:!0,lookbehind:!0},{pattern:/(\b(?:case|const)\s+)\b[a-z_]\w*(?=\s*[;=])/i,greedy:!0,lookbehind:!0},/\b(?:null)\b/i,/\b[A-Z_][A-Z0-9_]*\b(?!\s*\()/],i=/\b0b[01]+(?:_[01]+)*\b|\b0o[0-7]+(?:_[0-7]+)*\b|\b0x[\da-f]+(?:_[\da-f]+)*\b|(?:\b\d+(?:_\d+)*\.?(?:\d+(?:_\d+)*)?|\B\.\d+)(?:e[+-]?\d+)?/i,n=/|\?\?=?|\.{3}|\??->|[!=]=?=?|::|\*\*=?|--|\+\+|&&|\|\||<<|>>|[?~]|[/^|%*&<>.+-]=?/,s=/[{}\[\](),:;]/;e.languages.php={delimiter:{pattern:/\?>$|^<\?(?:php(?=\s)|=)?/i,alias:"important"},comment:a,variable:/\$+(?:\w+\b|(?=\{))/,package:{pattern:/(namespace\s+|use\s+(?:function\s+)?)(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,lookbehind:!0,inside:{punctuation:/\\/}},"class-name-definition":{pattern:/(\b(?:class|enum|interface|trait)\s+)\b[a-z_]\w*(?!\\)\b/i,lookbehind:!0,alias:"class-name"},"function-definition":{pattern:/(\bfunction\s+)[a-z_]\w*(?=\s*\()/i,lookbehind:!0,alias:"function"},keyword:[{pattern:/(\(\s*)\b(?:array|bool|boolean|float|int|integer|object|string)\b(?=\s*\))/i,alias:"type-casting",greedy:!0,lookbehind:!0},{pattern:/([(,?]\s*)\b(?:array(?!\s*\()|bool|callable|(?:false|null)(?=\s*\|)|float|int|iterable|mixed|object|self|static|string)\b(?=\s*\$)/i,alias:"type-hint",greedy:!0,lookbehind:!0},{pattern:/(\)\s*:\s*(?:\?\s*)?)\b(?:array(?!\s*\()|bool|callable|(?:false|null)(?=\s*\|)|float|int|iterable|mixed|never|object|self|static|string|void)\b/i,alias:"return-type",greedy:!0,lookbehind:!0},{pattern:/\b(?:array(?!\s*\()|bool|float|int|iterable|mixed|object|string|void)\b/i,alias:"type-declaration",greedy:!0},{pattern:/(\|\s*)(?:false|null)\b|\b(?:false|null)(?=\s*\|)/i,alias:"type-declaration",greedy:!0,lookbehind:!0},{pattern:/\b(?:parent|self|static)(?=\s*::)/i,alias:"static-context",greedy:!0},{pattern:/(\byield\s+)from\b/i,lookbehind:!0},/\bclass\b/i,{pattern:/((?:^|[^\s>:]|(?:^|[^-])>|(?:^|[^:]):)\s*)\b(?:abstract|and|array|as|break|callable|case|catch|clone|const|continue|declare|default|die|do|echo|else|elseif|empty|enddeclare|endfor|endforeach|endif|endswitch|endwhile|enum|eval|exit|extends|final|finally|fn|for|foreach|function|global|goto|if|implements|include|include_once|instanceof|insteadof|interface|isset|list|match|namespace|never|new|or|parent|print|private|protected|public|readonly|require|require_once|return|self|static|switch|throw|trait|try|unset|use|var|while|xor|yield|__halt_compiler)\b/i,lookbehind:!0}],"argument-name":{pattern:/([(,]\s*)\b[a-z_]\w*(?=\s*:(?!:))/i,lookbehind:!0},"class-name":[{pattern:/(\b(?:extends|implements|instanceof|new(?!\s+self|\s+static))\s+|\bcatch\s*\()\b[a-z_]\w*(?!\\)\b/i,greedy:!0,lookbehind:!0},{pattern:/(\|\s*)\b[a-z_]\w*(?!\\)\b/i,greedy:!0,lookbehind:!0},{pattern:/\b[a-z_]\w*(?!\\)\b(?=\s*\|)/i,greedy:!0},{pattern:/(\|\s*)(?:\\?\b[a-z_]\w*)+\b/i,alias:"class-name-fully-qualified",greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/(?:\\?\b[a-z_]\w*)+\b(?=\s*\|)/i,alias:"class-name-fully-qualified",greedy:!0,inside:{punctuation:/\\/}},{pattern:/(\b(?:extends|implements|instanceof|new(?!\s+self\b|\s+static\b))\s+|\bcatch\s*\()(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,alias:"class-name-fully-qualified",greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/\b[a-z_]\w*(?=\s*\$)/i,alias:"type-declaration",greedy:!0},{pattern:/(?:\\?\b[a-z_]\w*)+(?=\s*\$)/i,alias:["class-name-fully-qualified","type-declaration"],greedy:!0,inside:{punctuation:/\\/}},{pattern:/\b[a-z_]\w*(?=\s*::)/i,alias:"static-context",greedy:!0},{pattern:/(?:\\?\b[a-z_]\w*)+(?=\s*::)/i,alias:["class-name-fully-qualified","static-context"],greedy:!0,inside:{punctuation:/\\/}},{pattern:/([(,?]\s*)[a-z_]\w*(?=\s*\$)/i,alias:"type-hint",greedy:!0,lookbehind:!0},{pattern:/([(,?]\s*)(?:\\?\b[a-z_]\w*)+(?=\s*\$)/i,alias:["class-name-fully-qualified","type-hint"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/(\)\s*:\s*(?:\?\s*)?)\b[a-z_]\w*(?!\\)\b/i,alias:"return-type",greedy:!0,lookbehind:!0},{pattern:/(\)\s*:\s*(?:\?\s*)?)(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,alias:["class-name-fully-qualified","return-type"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}}],constant:t,function:{pattern:/(^|[^\\\w])\\?[a-z_](?:[\w\\]*\w)?(?=\s*\()/i,lookbehind:!0,inside:{punctuation:/\\/}},property:{pattern:/(->\s*)\w+/,lookbehind:!0},number:i,operator:n,punctuation:s};var l={pattern:/\{\$(?:\{(?:\{[^{}]+\}|[^{}]+)\}|[^{}])+\}|(^|[^\\{])\$+(?:\w+(?:\[[^\r\n\[\]]+\]|->\w+)?)/,lookbehind:!0,inside:e.languages.php},r=[{pattern:/<<<'([^']+)'[\r\n](?:.*[\r\n])*?\1;/,alias:"nowdoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<<'[^']+'|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<'?|[';]$/}}}},{pattern:/<<<(?:"([^"]+)"[\r\n](?:.*[\r\n])*?\1;|([a-z_]\w*)[\r\n](?:.*[\r\n])*?\2;)/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<<(?:"[^"]+"|[a-z_]\w*)|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<"?|[";]$/}},interpolation:l}},{pattern:/`(?:\\[\s\S]|[^\\`])*`/,alias:"backtick-quoted-string",greedy:!0},{pattern:/'(?:\\[\s\S]|[^\\'])*'/,alias:"single-quoted-string",greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,alias:"double-quoted-string",greedy:!0,inside:{interpolation:l}}];e.languages.insertBefore("php","variable",{string:r,attribute:{pattern:/#\[(?:[^"'\/#]|\/(?![*/])|\/\/.*$|#(?!\[).*$|\/\*(?:[^*]|\*(?!\/))*\*\/|"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*')+\](?=\s*[a-z$#])/im,greedy:!0,inside:{"attribute-content":{pattern:/^(#\[)[\s\S]+(?=\]$)/,lookbehind:!0,inside:{comment:a,string:r,"attribute-class-name":[{pattern:/([^:]|^)\b[a-z_]\w*(?!\\)\b/i,alias:"class-name",greedy:!0,lookbehind:!0},{pattern:/([^:]|^)(?:\\?\b[a-z_]\w*)+/i,alias:["class-name","class-name-fully-qualified"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}}],constant:t,number:i,operator:n,punctuation:s}},delimiter:{pattern:/^#\[|\]$/,alias:"punctuation"}}}}),e.hooks.add("before-tokenize",(function(a){/<\?/.test(a.code)&&e.languages["markup-templating"].buildPlaceholders(a,"php",/<\?(?:[^"'/#]|\/(?![*/])|("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|(?:\/\/|#(?!\[))(?:[^?\n\r]|\?(?!>))*(?=$|\?>|[\r\n])|#\[|\/\*(?:[^*]|\*(?!\/))*(?:\*\/|$))*?(?:\?>|$)/g)})),e.hooks.add("after-tokenize",(function(a){e.languages["markup-templating"].tokenizePlaceholders(a,"php")}))}(Prism); +!function(t){var n=t.util.clone(t.languages.javascript),e="(?:\\{*\\.{3}(?:[^{}]|)*\\})";function a(t,n){return t=t.replace(//g,(function(){return"(?:\\s|//.*(?!.)|/\\*(?:[^*]|\\*(?!/))\\*/)"})).replace(//g,(function(){return"(?:\\{(?:\\{(?:\\{[^{}]*\\}|[^{}])*\\}|[^{}])*\\})"})).replace(//g,(function(){return e})),RegExp(t,n)}e=a(e).source,t.languages.jsx=t.languages.extend("markup",n),t.languages.jsx.tag.pattern=a("+(?:[\\w.:$-]+(?:=(?:\"(?:\\\\[^]|[^\\\\\"])*\"|'(?:\\\\[^]|[^\\\\'])*'|[^\\s{'\"/>=]+|))?|))**/?)?>"),t.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,t.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,t.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,t.languages.jsx.tag.inside.comment=n.comment,t.languages.insertBefore("inside","attr-name",{spread:{pattern:a(""),inside:t.languages.jsx}},t.languages.jsx.tag),t.languages.insertBefore("inside","special-attr",{script:{pattern:a("="),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:t.languages.jsx}}},t.languages.jsx.tag);var s=function(t){return t?"string"==typeof t?t:"string"==typeof t.content?t.content:t.content.map(s).join(""):""},g=function(n){for(var e=[],a=0;a0&&e[e.length-1].tagName===s(o.content[0].content[1])&&e.pop():"/>"===o.content[o.content.length-1].content||e.push({tagName:s(o.content[0].content[1]),openedBraces:0}):e.length>0&&"punctuation"===o.type&&"{"===o.content?e[e.length-1].openedBraces++:e.length>0&&e[e.length-1].openedBraces>0&&"punctuation"===o.type&&"}"===o.content?e[e.length-1].openedBraces--:i=!0),(i||"string"==typeof o)&&e.length>0&&0===e[e.length-1].openedBraces){var r=s(o);a0&&("string"==typeof n[a-1]||"plain-text"===n[a-1].type)&&(r=s(n[a-1])+r,n.splice(a-1,1),a--),n[a]=new t.Token("plain-text",r,null,r)}o.content&&"string"!=typeof o.content&&g(o.content)}};t.hooks.add("after-tokenize",(function(t){"jsx"!==t.language&&"tsx"!==t.language||g(t.tokens)}))}(Prism); !function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var s=e.languages.extend("typescript",{});delete s["class-name"],e.languages.typescript["class-name"].inside=s,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:s}}}}),e.languages.ts=e.languages.typescript}(Prism); !function(e){var a=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",a),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var t=e.languages.tsx.tag;t.pattern=RegExp("(^|[^\\w$]|(?==?|and|not|or)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss; -!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var i=[],l={},d=function(){};Prism.plugins.toolbar={};var e=Prism.plugins.toolbar.registerButton=function(e,n){var t;t="function"==typeof n?n:function(e){var t;return"function"==typeof n.onClick?((t=document.createElement("button")).type="button",t.addEventListener("click",function(){n.onClick.call(this,e)})):"string"==typeof n.url?(t=document.createElement("a")).href=n.url:t=document.createElement("span"),n.className&&t.classList.add(n.className),t.textContent=n.text,t},e in l?console.warn('There is a button with the key "'+e+'" registered already.'):i.push(l[e]=t)},t=Prism.plugins.toolbar.hook=function(a){var e=a.element.parentNode;if(e&&/pre/i.test(e.nodeName)&&!e.parentNode.classList.contains("code-toolbar")){var t=document.createElement("div");t.classList.add("code-toolbar"),e.parentNode.insertBefore(t,e),t.appendChild(e);var r=document.createElement("div");r.classList.add("toolbar");var n=i,o=function(e){for(;e;){var t=e.getAttribute("data-toolbar-order");if(null!=t)return(t=t.trim()).length?t.split(/\s*,\s*/g):[];e=e.parentElement}}(a.element);o&&(n=o.map(function(e){return l[e]||d})),n.forEach(function(e){var t=e(a);if(t){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(t),r.appendChild(n)}}),t.appendChild(r)}};e("label",function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-label")){var n,a,r=t.getAttribute("data-label");try{a=document.querySelector("template#"+r)}catch(e){}return a?n=a.content:(t.hasAttribute("data-url")?(n=document.createElement("a")).href=t.getAttribute("data-url"):n=document.createElement("span"),n.textContent=r),n}}),Prism.hooks.add("complete",t)}}(); -!function(){function u(t,e){t.addEventListener("click",function(){!function(t){navigator.clipboard?navigator.clipboard.writeText(t.getText()).then(t.success,function(){o(t)}):o(t)}(e)})}function o(e){var t=document.createElement("textarea");t.value=e.getText(),t.style.top="0",t.style.left="0",t.style.position="fixed",document.body.appendChild(t),t.focus(),t.select();try{var o=document.execCommand("copy");setTimeout(function(){o?e.success():e.error()},1)}catch(t){setTimeout(function(){e.error(t)},1)}document.body.removeChild(t)}"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){var e=t.element,o=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,c=t;c&&!c.hasAttribute(n);)c=c.parentElement;c&&(e[o]=c.getAttribute(n))}return e}(e),n=document.createElement("button");n.className="copy-to-clipboard-button",n.setAttribute("type","button");var c=document.createElement("span");return n.appendChild(c),i("copy"),u(n,{getText:function(){return e.textContent},success:function(){i("copy-success"),r()},error:function(){i("copy-error"),setTimeout(function(){!function(t){window.getSelection().selectAllChildren(t)}(e)},1),r()}}),n;function r(){setTimeout(function(){i("copy")},o["copy-timeout"])}function i(t){c.textContent=o[t],n.setAttribute("data-copy-state",t)}}):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}(); +!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var e=[],t={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var r;r="function"==typeof a?a:function(e){var t;return"function"==typeof a.onClick?((t=document.createElement("button")).type="button",t.addEventListener("click",(function(){a.onClick.call(this,e)}))):"string"==typeof a.url?(t=document.createElement("a")).href=a.url:t=document.createElement("span"),a.className&&t.classList.add(a.className),t.textContent=a.text,t},n in t?console.warn('There is a button with the key "'+n+'" registered already.'):e.push(t[n]=r)},r=Prism.plugins.toolbar.hook=function(a){var r=a.element.parentNode;if(r&&/pre/i.test(r.nodeName)&&!r.parentNode.classList.contains("code-toolbar")){var o=document.createElement("div");o.classList.add("code-toolbar"),r.parentNode.insertBefore(o,r),o.appendChild(r);var i=document.createElement("div");i.classList.add("toolbar");var l=e,d=function(e){for(;e;){var t=e.getAttribute("data-toolbar-order");if(null!=t)return(t=t.trim()).length?t.split(/\s*,\s*/g):[];e=e.parentElement}}(a.element);d&&(l=d.map((function(e){return t[e]||n}))),l.forEach((function(e){var t=e(a);if(t){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(t),i.appendChild(n)}})),o.appendChild(i)}};a("label",(function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-label")){var n,a,r=t.getAttribute("data-label");try{a=document.querySelector("template#"+r)}catch(e){}return a?n=a.content:(t.hasAttribute("data-url")?(n=document.createElement("a")).href=t.getAttribute("data-url"):n=document.createElement("span"),n.textContent=r),n}})),Prism.hooks.add("complete",r)}}(); +!function(){function t(t){var e=document.createElement("textarea");e.value=t.getText(),e.style.top="0",e.style.left="0",e.style.position="fixed",document.body.appendChild(e),e.focus(),e.select();try{var o=document.execCommand("copy");setTimeout((function(){o?t.success():t.error()}),1)}catch(e){setTimeout((function(){t.error(e)}),1)}document.body.removeChild(e)}"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",(function(e){var o=e.element,n=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,c=t;c&&!c.hasAttribute(n);)c=c.parentElement;c&&(e[o]=c.getAttribute(n))}return e}(o),c=document.createElement("button");c.className="copy-to-clipboard-button",c.setAttribute("type","button");var r=document.createElement("span");return c.appendChild(r),u("copy"),function(e,o){e.addEventListener("click",(function(){!function(e){navigator.clipboard?navigator.clipboard.writeText(e.getText()).then(e.success,(function(){t(e)})):t(e)}(o)}))}(c,{getText:function(){return o.textContent},success:function(){u("copy-success"),i()},error:function(){u("copy-error"),setTimeout((function(){!function(t){window.getSelection().selectAllChildren(t)}(o)}),1),i()}}),c;function i(){setTimeout((function(){u("copy")}),n["copy-timeout"])}function u(t){r.textContent=n[t],c.setAttribute("data-copy-state",t)}})):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}(); diff --git a/public/themes/mira/fonts/Inter-Bold.woff b/public/themes/mira/fonts/Inter-Bold.woff new file mode 100644 index 0000000000..110bb66ceb Binary files /dev/null and b/public/themes/mira/fonts/Inter-Bold.woff differ diff --git a/public/themes/mira/fonts/Inter-Bold.woff2 b/public/themes/mira/fonts/Inter-Bold.woff2 new file mode 100644 index 0000000000..2532ddd062 Binary files /dev/null and b/public/themes/mira/fonts/Inter-Bold.woff2 differ diff --git a/public/themes/mira/fonts/Inter-Medium.woff b/public/themes/mira/fonts/Inter-Medium.woff new file mode 100644 index 0000000000..1180184628 Binary files /dev/null and b/public/themes/mira/fonts/Inter-Medium.woff differ diff --git a/public/themes/mira/fonts/Inter-Medium.woff2 b/public/themes/mira/fonts/Inter-Medium.woff2 new file mode 100644 index 0000000000..12454556b6 Binary files /dev/null and b/public/themes/mira/fonts/Inter-Medium.woff2 differ diff --git a/public/themes/mira/fonts/Inter-Regular.woff b/public/themes/mira/fonts/Inter-Regular.woff new file mode 100644 index 0000000000..5785a99c43 Binary files /dev/null and b/public/themes/mira/fonts/Inter-Regular.woff differ diff --git a/public/themes/mira/fonts/Inter-Regular.woff2 b/public/themes/mira/fonts/Inter-Regular.woff2 new file mode 100644 index 0000000000..52c1e3b3ce Binary files /dev/null and b/public/themes/mira/fonts/Inter-Regular.woff2 differ diff --git a/public/themes/mira/fonts/Inter-SemiBold.woff b/public/themes/mira/fonts/Inter-SemiBold.woff new file mode 100644 index 0000000000..6ddf47ec3d Binary files /dev/null and b/public/themes/mira/fonts/Inter-SemiBold.woff differ diff --git a/public/themes/mira/fonts/Inter-SemiBold.woff2 b/public/themes/mira/fonts/Inter-SemiBold.woff2 new file mode 100644 index 0000000000..3ba0884fa4 Binary files /dev/null and b/public/themes/mira/fonts/Inter-SemiBold.woff2 differ diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css new file mode 100644 index 0000000000..aea0ef9f08 --- /dev/null +++ b/public/themes/mira/theme.css @@ -0,0 +1,6237 @@ +:root { + --surface-a:#ffffff; + --surface-b:#ECEFF4; + --surface-c:#D8DEE9; + --surface-d:#E5E9F0; + --surface-e:#ffffff; + --surface-f:#ffffff; + --text-color:#4C566A; + --text-color-secondary:#81A1C1; + --primary-color:#5E81AC; + --primary-color-text:#ffffff; + --font-family:Inter, sans-serif; + --surface-0: #ffffff; + --surface-50: #edeef0; + --surface-100: #dbdde1; + --surface-200: #b7bbc3; + --surface-300: #949aa6; + --surface-400: #707888; + --surface-500: #4c566a; + --surface-600: #3d4555; + --surface-700: #2e3440; + --surface-800: #1e222a; + --surface-900: #0f1115; + --gray-50: #edeef0; + --gray-100: #dbdde1; + --gray-200: #b7bbc3; + --gray-300: #949aa6; + --gray-400: #707888; + --gray-500: #4c566a; + --gray-600: #3d4555; + --gray-700: #2e3440; + --gray-800: #1e222a; + --gray-900: #0f1115; + --content-padding:1rem; + --inline-spacing:0.5rem; + --border-radius:4px; + --surface-ground:#ECEFF4; + --surface-section:#ffffff; + --surface-card:#ffffff; + --surface-overlay:#ffffff; + --surface-border:#E5E9F0; + --surface-hover:#D8DEE9; + --maskbg: rgba(112, 120, 136, 0.5); + --focus-ring: 0 0 0 0.2rem #C0D0E0; + color-scheme: light; +} + +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400; + src: local("Inter"), local("Inter-Regular"), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 500; + src: local("Inter Medium"), local("Inter-Medium"), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 600; + src: local("Inter SemiBold"), local("Inter-SemiBold"), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 700; + src: local("Inter Bold"), local("Inter-Bold"), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +* { + box-sizing: border-box; +} + +.p-component { + font-family: "Inter", sans-serif; + font-size: 1rem; + font-weight: normal; +} + +.p-component-overlay { + background-color: rgba(112, 120, 136, 0.5); + transition-duration: 0.2s; +} + +.p-disabled, .p-component:disabled { + opacity: 0.6; +} + +.p-error { + color: #BF616A; +} + +.p-text-secondary { + color: #81A1C1; +} + +.pi { + font-size: 1rem; +} + +.p-link { + font-size: 1rem; + font-family: "Inter", sans-serif; + border-radius: 4px; +} +.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} + +.p-component-overlay-enter { + animation: p-component-overlay-enter-animation 150ms forwards; +} + +.p-component-overlay-leave { + animation: p-component-overlay-leave-animation 150ms forwards; +} + +@keyframes p-component-overlay-enter-animation { + from { + background-color: transparent; + } + to { + background-color: var(--maskbg); + } +} +@keyframes p-component-overlay-leave-animation { + from { + background-color: var(--maskbg); + } + to { + background-color: transparent; + } +} + +:root { + --blue-50:#f7f9fb; + --blue-100:#d8e1eb; + --blue-200:#bac9db; + --blue-300:#9bb1cc; + --blue-400:#7d99bc; + --blue-500:#5e81ac; + --blue-600:#506e92; + --blue-700:#425a78; + --blue-800:#34475f; + --blue-900:#263445; + --green-50:#f9faf7; + --green-100:#e0e9da; + --green-200:#c8d7bd; + --green-300:#b0c6a0; + --green-400:#97b483; + --green-500:#7fa366; + --green-600:#6c8b57; + --green-700:#597247; + --green-800:#465a38; + --green-900:#334129; + --yellow-50:#fdfcf8; + --yellow-100:#f6f1df; + --yellow-200:#efe6c6; + --yellow-300:#e8dbad; + --yellow-400:#e1d093; + --yellow-500:#dac57a; + --yellow-600:#b9a768; + --yellow-700:#998a55; + --yellow-800:#786c43; + --yellow-900:#574f31; + --cyan-50:#f8fbfc; + --cyan-100:#ddebf0; + --cyan-200:#c2dbe5; + --cyan-300:#a7cbd9; + --cyan-400:#8cbbce; + --cyan-500:#71abc2; + --cyan-600:#6091a5; + --cyan-700:#4f7888; + --cyan-800:#3e5e6b; + --cyan-900:#2d444e; + --pink-50:#fcf7f9; + --pink-100:#f0d9e2; + --pink-200:#e3bbcb; + --pink-300:#d79db3; + --pink-400:#cb7f9c; + --pink-500:#bf6185; + --pink-600:#a25271; + --pink-700:#86445d; + --pink-800:#693549; + --pink-900:#4c2735; + --indigo-50:#f6f8fa; + --indigo-100:#d5dbe9; + --indigo-200:#b3bfd8; + --indigo-300:#91a3c7; + --indigo-400:#7086b5; + --indigo-500:#4e6aa4; + --indigo-600:#425a8b; + --indigo-700:#374a73; + --indigo-800:#2b3a5a; + --indigo-900:#1f2a42; + --teal-50:#f7fbf9; + --teal-100:#d8ebe4; + --teal-200:#badbcf; + --teal-300:#9bccba; + --teal-400:#7dbca5; + --teal-500:#5eac90; + --teal-600:#50927a; + --teal-700:#427865; + --teal-800:#345f4f; + --teal-900:#26453a; + --orange-50:#fdf9f8; + --orange-100:#f4e2dd; + --orange-200:#ebcbc2; + --orange-300:#e2b5a6; + --orange-400:#d99e8b; + --orange-500:#d08770; + --orange-600:#b1735f; + --orange-700:#925f4e; + --orange-800:#724a3e; + --orange-900:#53362d; + --bluegray-50:#f9f9fa; + --bluegray-100:#e0e4e8; + --bluegray-200:#c8ced6; + --bluegray-300:#afb8c3; + --bluegray-400:#97a3b1; + --bluegray-500:#7e8d9f; + --bluegray-600:#6b7887; + --bluegray-700:#58636f; + --bluegray-800:#454e57; + --bluegray-900:#323840; + --purple-50:#faf7fa; + --purple-100:#e7dbe6; + --purple-200:#d4bed2; + --purple-300:#c0a1be; + --purple-400:#ad84aa; + --purple-500:#9a6796; + --purple-600:#835880; + --purple-700:#6c4869; + --purple-800:#553953; + --purple-900:#3e293c; + --red-50:#fcf7f8; + --red-100:#f0d9db; + --red-200:#e3bbbf; + --red-300:#d79da3; + --red-400:#cb7f86; + --red-500:#bf616a; + --red-600:#a2525a; + --red-700:#86444a; + --red-800:#69353a; + --red-900:#4c272a; + --primary-50:#f7f9fb; + --primary-100:#d8e1eb; + --primary-200:#bac9db; + --primary-300:#9bb1cc; + --primary-400:#7d99bc; + --primary-500:#5e81ac; + --primary-600:#506e92; + --primary-700:#425a78; + --primary-800:#34475f; + --primary-900:#263445; +} + +.p-autocomplete .p-autocomplete-loader { + right: 0.5rem; +} +.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 2.857rem; +} +.p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.5rem; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { + border-color: #81A1C1; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0.25rem 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { + font-family: "Inter", sans-serif; + font-size: 1rem; + color: #4C566A; + padding: 0; + margin: 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #D8DEE9; + color: #2E3440; + border-radius: 4px; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; +} +.p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #BF616A; +} + +.p-autocomplete-panel { + background: #ffffff; + color: #4C566A; + border: 0 none; + border-radius: 4px; + 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-autocomplete-panel .p-autocomplete-items { + padding: 0.5rem 0; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #4C566A; + background: transparent; + transition: none; + border-radius: 0; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { + color: #4C566A; + background: transparent; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: #4C566A; + background: #ffffff; + font-weight: 600; +} + +.p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #BF616A; +} + +.p-datepicker { + padding: 0.5rem; + background: #ffffff; + color: #4C566A; + border: 1px solid #D8DEE9; + border-radius: 4px; +} +.p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 0 none; + 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-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; +} +.p-datepicker .p-datepicker-header { + padding: 0.5rem; + color: #4C566A; + background: #ffffff; + font-weight: 600; + margin: 0; + border-bottom: 1px solid #E5E9F0; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev, +.p-datepicker .p-datepicker-header .p-datepicker-next { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 2rem; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #4C566A; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; +} +.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: #5E81AC; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + margin-right: 0.5rem; +} +.p-datepicker table { + font-size: 1rem; + margin: 0.5rem 0; +} +.p-datepicker table th { + padding: 0.5rem; +} +.p-datepicker table th > span { + width: 2.5rem; + height: 2.5rem; +} +.p-datepicker table td { + padding: 0.5rem; +} +.p-datepicker table td > span { + width: 2.5rem; + height: 2.5rem; + border-radius: 4px; + transition: none; + border: 1px solid transparent; +} +.p-datepicker table td > span.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-datepicker table td > span:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-datepicker table td.p-datepicker-today > span { + background: #EBCB8B; + color: #2E3440; + border-color: transparent; +} +.p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-datepicker .p-datepicker-buttonbar { + padding: 1rem 0; + border-top: 1px solid #E5E9F0; +} +.p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; +} +.p-datepicker .p-timepicker { + border-top: 1px solid #E5E9F0; + padding: 0.5rem; +} +.p-datepicker .p-timepicker button { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datepicker .p-timepicker button:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-datepicker .p-timepicker button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-datepicker .p-timepicker button:last-child { + margin-top: 0.2em; +} +.p-datepicker .p-timepicker span { + font-size: 1.25rem; +} +.p-datepicker .p-timepicker > div { + padding: 0 0.5rem; +} +.p-datepicker.p-datepicker-timeonly .p-timepicker { + border-top: 0 none; +} +.p-datepicker .p-monthpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #E5E9F0; + padding-right: 0.5rem; + padding-left: 0.5rem; + padding-top: 0; + padding-bottom: 0; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { + padding-left: 0; +} +.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: #D8DEE9; +} +.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #D8DEE9; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #D8DEE9; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} + +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} +.p-cascadeselect { + background: #ffffff; + border: 1px solid #D8DEE9; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 4px; +} +.p-cascadeselect:not(.p-disabled):hover { + border-color: #81A1C1; +} +.p-cascadeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.5rem; +} +.p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #4C566A; +} +.p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #81A1C1; + width: 2.357rem; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.p-cascadeselect.p-invalid.p-component { + border-color: #BF616A; +} + +.p-cascadeselect-panel { + background: #ffffff; + color: #4C566A; + border: 0 none; + border-radius: 4px; + 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-cascadeselect-panel .p-cascadeselect-items { + padding: 0.5rem 0; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 0; + border: 0 none; + color: #4C566A; + background: transparent; + transition: none; + 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 .p-cascadeselect-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + color: #4C566A; + background: transparent; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { + font-size: 0.875rem; +} + +.p-input-filled .p-cascadeselect { + background: #ECEFF4; +} +.p-input-filled .p-cascadeselect:not(.p-disabled):hover { + background-color: #ECEFF4; +} +.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-checkbox { + width: 20px; + height: 20px; +} +.p-checkbox .p-checkbox-box { + border: 2px solid #D8DEE9; + background: #ffffff; + width: 20px; + height: 20px; + color: #4C566A; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; +} +.p-checkbox .p-checkbox-box.p-highlight { + border-color: #5E81AC; + background: #5E81AC; +} +.p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + border-color: #48678c; + background: #81A1C1; + color: #ffffff; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #81A1C1; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #48678c; + background: #81A1C1; + color: #ffffff; +} +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: #BF616A; +} + +.p-input-filled .p-checkbox .p-checkbox-box { + background-color: #ECEFF4; +} +.p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + background: #5E81AC; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #ECEFF4; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #81A1C1; +} + +.p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; +} +.p-chips .p-chips-multiple-container:not(.p-disabled):hover { + border-color: #81A1C1; +} +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.p-chips .p-chips-multiple-container .p-chips-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #D8DEE9; + color: #2E3440; + border-radius: 4px; +} +.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.5rem; +} +.p-chips .p-chips-multiple-container .p-chips-input-token { + padding: 0.25rem 0; +} +.p-chips .p-chips-multiple-container .p-chips-input-token input { + font-family: "Inter", sans-serif; + font-size: 1rem; + color: #4C566A; + padding: 0; + margin: 0; +} +.p-chips.p-invalid.p-component > .p-inputtext { + border-color: #BF616A; +} + +.p-colorpicker-preview { + width: 2rem; + height: 2rem; +} + +.p-colorpicker-panel { + background: #323232; + border: 1px solid #191919; +} +.p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; +} + +.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 { + background: #ffffff; + border: 1px solid #D8DEE9; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 4px; +} +.p-dropdown:not(.p-disabled):hover { + border-color: #81A1C1; +} +.p-dropdown:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.p-dropdown.p-dropdown-clearable .p-dropdown-label { + padding-right: 1.5rem; +} +.p-dropdown .p-dropdown-label { + background: transparent; + border: 0 none; +} +.p-dropdown .p-dropdown-label.p-placeholder { + color: #4C566A; +} +.p-dropdown .p-dropdown-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-dropdown .p-dropdown-trigger { + background: transparent; + color: #81A1C1; + width: 2.357rem; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.p-dropdown .p-dropdown-clear-icon { + color: #81A1C1; + right: 2.357rem; +} +.p-dropdown.p-invalid.p-component { + border-color: #BF616A; +} + +.p-dropdown-panel { + background: #ffffff; + color: #4C566A; + border: 0 none; + border-radius: 4px; + 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-panel .p-dropdown-header { + padding: 0.5rem 1rem; + border-bottom: 0 none; + color: #4C566A; + background: #ECEFF4; + margin: 0; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter { + padding-right: 1.5rem; + margin-right: -1.5rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { + right: 0.5rem; + color: #81A1C1; +} +.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; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #4C566A; + background: transparent; + transition: none; + border-radius: 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + color: #4C566A; + background: transparent; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: #4C566A; + background: #ffffff; + font-weight: 600; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: #4C566A; + background: transparent; +} + +.p-input-filled .p-dropdown { + background: #ECEFF4; +} +.p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: #ECEFF4; +} +.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-editor-container .p-editor-toolbar { + background: #ffffff; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #E5E9F0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #81A1C1; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #81A1C1; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #81A1C1; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + 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); + border-radius: 4px; + padding: 0.5rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #4C566A; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #4C566A; + background: transparent; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #E5E9F0; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #4C566A; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #4C566A; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #4C566A; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #4C566A; +} +.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: #5E81AC; +} +.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: #5E81AC; +} +.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: #5E81AC; +} +.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: #5E81AC; +} + +.p-inputgroup-addon { + background: #ffffff; + color: #81A1C1; + border-top: 1px solid #D8DEE9; + border-left: 1px solid #D8DEE9; + border-bottom: 1px solid #D8DEE9; + padding: 0.5rem 0.5rem; + min-width: 2.357rem; +} +.p-inputgroup-addon:last-child { + border-right: 1px solid #D8DEE9; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { + border-radius: 0; + margin: 0; +} +.p-inputgroup > .p-component + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { + border-left: 0 none; +} +.p-inputgroup > .p-component:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { + z-index: 1; +} +.p-inputgroup > .p-component:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { + z-index: 1; +} + +.p-inputgroup-addon:first-child, +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.p-inputgroup .p-float-label:first-child input { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.p-inputgroup-addon:last-child, +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.p-inputgroup .p-float-label:last-child input { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.p-fluid .p-inputgroup .p-button { + width: auto; +} +.p-fluid .p-inputgroup .p-button.p-button-icon-only { + width: 2.357rem; +} + +.p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #BF616A; +} + +.p-inputswitch { + width: 3rem; + height: 1.75rem; +} +.p-inputswitch .p-inputswitch-slider { + background: #D8DEE9; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 30px; +} +.p-inputswitch .p-inputswitch-slider:before { + background: #5E81AC; + width: 1.25rem; + height: 1.25rem; + left: 0.25rem; + margin-top: -0.625rem; + 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 #C0D0E0; +} +.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #ECEFF4; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #5E81AC; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; +} +.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #81A1C1; +} +.p-inputswitch.p-invalid .p-inputswitch-slider { + border-color: #BF616A; +} + +.p-inputtext { + font-family: "Inter", sans-serif; + font-size: 1rem; + color: #4C566A; + background: #ffffff; + padding: 0.5rem 0.5rem; + border: 1px solid #D8DEE9; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + appearance: none; + border-radius: 4px; +} +.p-inputtext:enabled:hover { + border-color: #81A1C1; +} +.p-inputtext:enabled:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.p-inputtext.p-invalid.p-component { + border-color: #BF616A; +} +.p-inputtext.p-inputtext-sm { + font-size: 0.875rem; + padding: 0.4375rem 0.4375rem; +} +.p-inputtext.p-inputtext-lg { + font-size: 1.25rem; + padding: 0.625rem 0.625rem; +} + +.p-float-label > label { + left: 0.5rem; + color: #4C566A; + transition-duration: 0.2s; +} + +.p-float-label > label.p-error { + color: #BF616A; +} + +.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: #81A1C1; +} + +.p-input-icon-left > .p-inputtext { + padding-left: 2rem; +} + +.p-input-icon-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: #81A1C1; +} + +.p-input-icon-right > .p-inputtext { + padding-right: 2rem; +} + +::-webkit-input-placeholder { + color: #4C566A; +} + +:-moz-placeholder { + color: #4C566A; +} + +::-moz-placeholder { + color: #4C566A; +} + +:-ms-input-placeholder { + color: #4C566A; +} + +.p-input-filled .p-inputtext { + background-color: #ECEFF4; +} +.p-input-filled .p-inputtext:enabled:hover { + background-color: #ECEFF4; +} +.p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; +} + +.p-inputtext-sm .p-inputtext { + font-size: 0.875rem; + padding: 0.4375rem 0.4375rem; +} + +.p-inputtext-lg .p-inputtext { + font-size: 1.25rem; + padding: 0.625rem 0.625rem; +} + +.p-listbox { + background: #ffffff; + color: #4C566A; + border: 1px solid #D8DEE9; + border-radius: 4px; +} +.p-listbox .p-listbox-header { + padding: 0.5rem 1rem; + border-bottom: 0 none; + color: #4C566A; + background: #ECEFF4; + margin: 0; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-listbox .p-listbox-header .p-listbox-filter { + padding-right: 1.5rem; +} +.p-listbox .p-listbox-header .p-listbox-filter-icon { + right: 0.5rem; + color: #81A1C1; +} +.p-listbox .p-listbox-list { + padding: 0.5rem 0; +} +.p-listbox .p-listbox-list .p-listbox-item { + margin: 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #4C566A; + transition: none; + border-radius: 0; +} +.p-listbox .p-listbox-list .p-listbox-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-listbox .p-listbox-list .p-listbox-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: #4C566A; + background: #ffffff; + font-weight: 600; +} +.p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 1rem; + color: #4C566A; + background: transparent; +} +.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #4C566A; + background: transparent; +} +.p-listbox.p-invalid { + border-color: #BF616A; +} + +.p-mention-panel { + background: #ffffff; + color: #4C566A; + border: 0 none; + border-radius: 4px; + 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-mention-panel .p-mention-items { + padding: 0.5rem 0; +} +.p-mention-panel .p-mention-items .p-mention-item { + margin: 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #4C566A; + background: transparent; + transition: none; + border-radius: 0; +} +.p-mention-panel .p-mention-items .p-mention-item:hover { + color: #4C566A; + background: transparent; +} +.p-mention-panel .p-mention-items .p-mention-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} + +.p-multiselect { + background: #ffffff; + border: 1px solid #D8DEE9; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 4px; +} +.p-multiselect:not(.p-disabled):hover { + border-color: #81A1C1; +} +.p-multiselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.5rem; +} +.p-multiselect .p-multiselect-label { + padding: 0.5rem 0.5rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-multiselect .p-multiselect-label.p-placeholder { + color: #4C566A; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #D8DEE9; + color: #2E3440; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} +.p-multiselect .p-multiselect-trigger { + background: transparent; + color: #81A1C1; + width: 2.357rem; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.p-multiselect .p-multiselect-clear-icon { + color: #81A1C1; + right: 2.357rem; +} +.p-multiselect.p-invalid.p-component { + border-color: #BF616A; +} + +.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: #4C566A; + border: 0 none; + border-radius: 4px; + 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-multiselect-panel .p-multiselect-header { + padding: 0.5rem 1rem; + border-bottom: 0 none; + color: #4C566A; + background: #ECEFF4; + margin: 0; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.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; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { + right: 0.5rem; + color: #81A1C1; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-multiselect-panel .p-multiselect-items { + padding: 0.5rem 0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #4C566A; + background: transparent; + transition: none; + border-radius: 0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + color: #4C566A; + background: transparent; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { + margin-right: 0.5rem; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: #4C566A; + background: #ffffff; + font-weight: 600; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 1rem; + color: #4C566A; + background: transparent; +} + +.p-input-filled .p-multiselect { + background: #ECEFF4; +} +.p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: #ECEFF4; +} +.p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-password.p-invalid.p-component > .p-inputtext { + border-color: #BF616A; +} + +.p-password-panel { + padding: 1rem; + background: #ffffff; + color: #4C566A; + border: 0 none; + 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); + border-radius: 4px; +} +.p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #E5E9F0; +} +.p-password-panel .p-password-meter .p-password-strength.weak { + background: #BF616A; +} +.p-password-panel .p-password-meter .p-password-strength.medium { + background: #D08770; +} +.p-password-panel .p-password-meter .p-password-strength.strong { + background: #7FA366; +} + +.p-radiobutton { + width: 20px; + height: 20px; +} +.p-radiobutton .p-radiobutton-box { + border: 2px solid #D8DEE9; + background: #ffffff; + width: 20px; + height: 20px; + color: #4C566A; + 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: #81A1C1; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 10px; + height: 10px; + transition-duration: 0.2s; + background-color: #ffffff; +} +.p-radiobutton .p-radiobutton-box.p-highlight { + border-color: #5E81AC; + background: #5E81AC; +} +.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + border-color: #5E81AC; + background: #81A1C1; + color: #ffffff; +} +.p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #BF616A; +} +.p-radiobutton:focus { + outline: 0 none; +} + +.p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #ECEFF4; +} +.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: #ECEFF4; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #5E81AC; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #81A1C1; +} + +.p-rating { + gap: 0.5rem; +} +.p-rating .p-rating-item .p-rating-icon { + color: #4C566A; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + font-size: 1.143rem; +} +.p-rating .p-rating-item .p-rating-icon.p-rating-cancel { + color: #BF616A; +} +.p-rating .p-rating-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #5E81AC; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #5E81AC; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #D88889; +} + +.p-selectbutton .p-button { + background: #ffffff; + border: 2px solid #D8DEE9; + color: #4C566A; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #81A1C1; +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #ECEFF4; + border-color: #81A1C1; + color: #4C566A; +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + color: #81A1C1; +} +.p-selectbutton .p-button.p-highlight { + background: #5E81AC; + border-color: #5E81AC; + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight:hover { + background: #81A1C1; + border-color: #5E81AC; + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #ffffff; +} +.p-selectbutton.p-invalid > .p-button { + border-color: #BF616A; +} + +.p-slider { + background: #E5E9F0; + border: 0 none; + border-radius: 4px; +} +.p-slider.p-slider-horizontal { + height: 0.286rem; +} +.p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -0.5715rem; + margin-left: -0.5715rem; +} +.p-slider.p-slider-vertical { + width: 0.286rem; +} +.p-slider.p-slider-vertical .p-slider-handle { + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; +} +.p-slider .p-slider-handle { + height: 1.143rem; + width: 1.143rem; + background: #ffffff; + border: 2px solid #5E81AC; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-slider .p-slider-handle:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-slider .p-slider-range { + background: #5E81AC; +} +.p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #5E81AC; + border-color: #5E81AC; +} + +.p-treeselect { + background: #ffffff; + border: 1px solid #D8DEE9; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 4px; +} +.p-treeselect:not(.p-disabled):hover { + border-color: #81A1C1; +} +.p-treeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; +} +.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; +} +.p-treeselect .p-treeselect-label.p-placeholder { + color: #4C566A; +} +.p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #E5E9F0; + color: #4C566A; + border-radius: 16px; +} +.p-treeselect .p-treeselect-trigger { + background: transparent; + color: #81A1C1; + width: 2.357rem; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.p-treeselect.p-invalid.p-component { + border-color: #BF616A; +} + +.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.5rem; +} + +.p-treeselect-panel { + background: #ffffff; + color: #4C566A; + border: 0 none; + border-radius: 4px; + 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-treeselect-panel .p-treeselect-header { + padding: 0.5rem 1rem; + border-bottom: 0 none; + color: #4C566A; + background: #ECEFF4; + margin: 0; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container { + margin-right: 0.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter { + padding-right: 1.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon { + right: 0.5rem; + color: #81A1C1; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter { + padding-right: 3rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon { + right: 2rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-tree { + border: 0 none; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { + padding: 0.5rem 1rem; + color: #4C566A; + background: transparent; +} + +.p-input-filled .p-treeselect { + background: #ECEFF4; +} +.p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #ECEFF4; +} +.p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-togglebutton.p-button { + background: #ffffff; + border: 2px solid #D8DEE9; + color: #4C566A; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-togglebutton.p-button .p-button-icon-left, +.p-togglebutton.p-button .p-button-icon-right { + color: #81A1C1; +} +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #ECEFF4; + border-color: #81A1C1; + color: #4C566A; +} +.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 { + color: #81A1C1; +} +.p-togglebutton.p-button.p-highlight { + background: #5E81AC; + border-color: #5E81AC; + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight .p-button-icon-left, +.p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight:hover { + background: #81A1C1; + border-color: #5E81AC; + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #ffffff; +} +.p-togglebutton.p-button.p-invalid > .p-button { + border-color: #BF616A; +} + +.p-button { + color: #ffffff; + background: #5E81AC; + border: 2px solid #5E81AC; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 4px; +} +.p-button:enabled:hover, .p-button:not(button):not(a):not(.p-disabled):hover { + background: #81A1C1; + color: #ffffff; + border-color: #51749e; +} +.p-button:enabled:active, .p-button:not(button):not(a):not(.p-disabled):active { + background: #48678c; + color: #ffffff; + border-color: #48678c; +} +.p-button.p-button-outlined { + background-color: transparent; + color: #5E81AC; + border: 2px solid; +} +.p-button.p-button-outlined:enabled:hover, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(94, 129, 172, 0.12); + color: #5E81AC; + border: 2px solid; +} +.p-button.p-button-outlined:enabled:active, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(94, 129, 172, 0.24); + color: #5E81AC; + border: 2px solid; +} +.p-button.p-button-outlined.p-button-plain { + color: #81A1C1; + border-color: #81A1C1; +} +.p-button.p-button-outlined.p-button-plain:enabled:hover, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: #ffffff; + color: #81A1C1; +} +.p-button.p-button-outlined.p-button-plain:enabled:active, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: #E5E9F0; + color: #81A1C1; +} +.p-button.p-button-text { + background-color: transparent; + color: #5E81AC; + border-color: transparent; +} +.p-button.p-button-text:enabled:hover, .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(94, 129, 172, 0.12); + color: #5E81AC; + border-color: transparent; +} +.p-button.p-button-text:enabled:active, .p-button.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(94, 129, 172, 0.24); + color: #5E81AC; + border-color: transparent; +} +.p-button.p-button-text.p-button-plain { + color: #81A1C1; +} +.p-button.p-button-text.p-button-plain:enabled:hover, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: #ffffff; + color: #81A1C1; +} +.p-button.p-button-text.p-button-plain:enabled:active, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: #E5E9F0; + color: #81A1C1; +} +.p-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-button .p-button-label { + transition-duration: 0.2s; +} +.p-button .p-button-icon-left { + margin-right: 0.5rem; +} +.p-button .p-button-icon-right { + margin-left: 0.5rem; +} +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} +.p-button .p-badge { + margin-left: 0.5rem; + min-width: 1rem; + height: 1rem; + line-height: 1rem; + color: #5E81AC; + background-color: #ffffff; +} +.p-button.p-button-raised { + box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2), 0 12px 10px 0 rgba(0, 0, 0, 0.06); +} +.p-button.p-button-rounded { + border-radius: 2rem; +} +.p-button.p-button-icon-only { + width: 2.357rem; + padding: 0.5rem 0; +} +.p-button.p-button-icon-only .p-button-icon-left, +.p-button.p-button-icon-only .p-button-icon-right { + margin: 0; +} +.p-button.p-button-icon-only.p-button-rounded { + border-radius: 50%; + height: 2.357rem; +} +.p-button.p-button-sm { + font-size: 0.875rem; + padding: 0.4375rem 0.875rem; +} +.p-button.p-button-sm .p-button-icon { + font-size: 0.875rem; +} +.p-button.p-button-lg { + font-size: 1.25rem; + padding: 0.625rem 1.25rem; +} +.p-button.p-button-lg .p-button-icon { + font-size: 1.25rem; +} +.p-button.p-button-loading-label-only.p-button-loading-left .p-button-label { + margin-left: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-right .p-button-label { + margin-right: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-top .p-button-label { + margin-top: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label { + margin-bottom: 0.5rem; +} +.p-button.p-button-loading-label-only .p-button-loading-icon { + margin: 0; +} + +.p-fluid .p-button { + width: 100%; +} +.p-fluid .p-button-icon-only { + width: 2.357rem; +} +.p-fluid .p-buttonset { + display: flex; +} +.p-fluid .p-buttonset .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 { + color: #ffffff; + background: #4C566A; + border: 2px solid #4C566A; +} +.p-button.p-button-secondary:enabled:hover, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary:enabled:hover, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover { + background: #707888; + color: #ffffff; + border-color: #4C566A; +} +.p-button.p-button-secondary:enabled:focus, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-secondary:enabled:focus, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #b3bac8; +} +.p-button.p-button-secondary:enabled:active, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary:enabled:active, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active { + background: #2E3440; + color: #ffffff; + border-color: #2E3440; +} +.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 { + background-color: transparent; + color: #4C566A; + border: 2px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(76, 86, 106, 0.12); + color: #4C566A; + border: 2px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(76, 86, 106, 0.24); + color: #4C566A; + border: 2px 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 { + background-color: transparent; + color: #4C566A; + border-color: transparent; +} +.p-button.p-button-secondary.p-button-text:enabled:hover, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(76, 86, 106, 0.12); + border-color: transparent; + color: #4C566A; +} +.p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(76, 86, 106, 0.24); + border-color: transparent; + color: #4C566A; +} + +.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 { + color: #ffffff; + background: #639BB2; + border: 2px solid #639BB2; +} +.p-button.p-button-info:enabled:hover, .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info:enabled:hover, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover { + background: #88C0D0; + color: #ffffff; + border-color: #639BB2; +} +.p-button.p-button-info:enabled:focus, .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-info:enabled:focus, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #c1d7e0; +} +.p-button.p-button-info:enabled:active, .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info:enabled:active, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active { + background: #497e94; + color: #ffffff; + border-color: #497e94; +} +.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 { + background-color: transparent; + color: #639BB2; + border: 2px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:hover, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(99, 155, 178, 0.12); + color: #639BB2; + border: 2px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:active, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(99, 155, 178, 0.24); + color: #639BB2; + border: 2px 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 { + background-color: transparent; + color: #639BB2; + border-color: transparent; +} +.p-button.p-button-info.p-button-text:enabled:hover, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(99, 155, 178, 0.12); + border-color: transparent; + color: #639BB2; +} +.p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(99, 155, 178, 0.24); + border-color: transparent; + color: #639BB2; +} + +.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 { + color: #ffffff; + background: #7FA366; + border: 2px solid #7FA366; +} +.p-button.p-button-success:enabled:hover, .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success:enabled:hover, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover { + background: #A3BE8C; + color: #ffffff; + border-color: #7FA366; +} +.p-button.p-button-success:enabled:focus, .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-success:enabled:focus, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #ccdac2; +} +.p-button.p-button-success:enabled:active, .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success:enabled:active, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active { + background: #658450; + color: #ffffff; + border-color: #658450; +} +.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 { + background-color: transparent; + color: #7FA366; + border: 2px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:hover, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(127, 163, 102, 0.12); + color: #7FA366; + border: 2px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:active, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(127, 163, 102, 0.24); + color: #7FA366; + border: 2px 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 { + background-color: transparent; + color: #7FA366; + border-color: transparent; +} +.p-button.p-button-success.p-button-text:enabled:hover, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(127, 163, 102, 0.12); + border-color: transparent; + color: #7FA366; +} +.p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(127, 163, 102, 0.24); + border-color: transparent; + color: #7FA366; +} + +.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 { + color: #ffffff; + background: #D08770; + border: 2px solid #D08770; +} +.p-button.p-button-warning:enabled:hover, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning:enabled:hover, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover { + background: #E2AC94; + color: #ffffff; + border-color: #D08770; +} +.p-button.p-button-warning:enabled:focus, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-warning:enabled:focus, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #eccfc6; +} +.p-button.p-button-warning:enabled:active, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning:enabled:active, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active { + background: #c05f40; + color: #ffffff; + border-color: #c05f40; +} +.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 { + background-color: transparent; + color: #D08770; + border: 2px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:hover, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(208, 135, 112, 0.12); + color: #D08770; + border: 2px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:active, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(208, 135, 112, 0.24); + color: #D08770; + border: 2px 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 { + background-color: transparent; + color: #D08770; + border-color: transparent; +} +.p-button.p-button-warning.p-button-text:enabled:hover, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(208, 135, 112, 0.12); + border-color: transparent; + color: #D08770; +} +.p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(208, 135, 112, 0.24); + border-color: transparent; + color: #D08770; +} + +.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 { + color: #ffffff; + background: #9A6796; + border: 2px solid #9A6796; +} +.p-button.p-button-help:enabled:hover, .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help:enabled:hover, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover { + background: #B48EAD; + color: #ffffff; + border-color: #9A6796; +} +.p-button.p-button-help:enabled:focus, .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-help:enabled:focus, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #d7c2d5; +} +.p-button.p-button-help:enabled:active, .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help:enabled:active, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active { + background: #7c5278; + color: #ffffff; + border-color: #7c5278; +} +.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 { + background-color: transparent; + color: #9A6796; + border: 2px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:hover, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(154, 103, 150, 0.12); + color: #9A6796; + border: 2px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:active, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(154, 103, 150, 0.24); + color: #9A6796; + border: 2px 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 { + background-color: transparent; + color: #9A6796; + border-color: transparent; +} +.p-button.p-button-help.p-button-text:enabled:hover, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(154, 103, 150, 0.12); + border-color: transparent; + color: #9A6796; +} +.p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(154, 103, 150, 0.24); + border-color: transparent; + color: #9A6796; +} + +.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 { + color: #ffffff; + background: #BF616A; + border: 2px solid #BF616A; +} +.p-button.p-button-danger:enabled:hover, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger:enabled:hover, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover { + background: #D88889; + color: #ffffff; + border-color: #BF616A; +} +.p-button.p-button-danger:enabled:focus, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-danger:enabled:focus, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #e5c0c3; +} +.p-button.p-button-danger:enabled:active, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger:enabled:active, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active { + background: #a4424c; + color: #ffffff; + border-color: #a4424c; +} +.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 { + background-color: transparent; + color: #BF616A; + border: 2px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:hover, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(191, 97, 106, 0.12); + color: #BF616A; + border: 2px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:active, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(191, 97, 106, 0.24); + color: #BF616A; + border: 2px 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 { + background-color: transparent; + color: #BF616A; + border-color: transparent; +} +.p-button.p-button-danger.p-button-text:enabled:hover, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(191, 97, 106, 0.12); + border-color: transparent; + color: #BF616A; +} +.p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(191, 97, 106, 0.24); + border-color: transparent; + color: #BF616A; +} + +.p-button.p-button-link { + color: #48678c; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover { + background: transparent; + color: #48678c; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-label, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus, .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus { + background: transparent; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: transparent; +} +.p-button.p-button-link:enabled:active, .p-button.p-button-link:not(button):not(a):not(.p-disabled):active { + background: transparent; + color: #48678c; + border-color: transparent; +} + +.p-splitbutton { + border-radius: 4px; +} +.p-splitbutton.p-button-outlined > .p-button { + background-color: transparent; + color: #5E81AC; + border: 2px solid; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(94, 129, 172, 0.12); + color: #5E81AC; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(94, 129, 172, 0.24); + color: #5E81AC; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button { + color: #81A1C1; + border-color: #81A1C1; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: #ffffff; + color: #81A1C1; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: #E5E9F0; + color: #81A1C1; +} +.p-splitbutton.p-button-text > .p-button { + background-color: transparent; + color: #5E81AC; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(94, 129, 172, 0.12); + color: #5E81AC; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(94, 129, 172, 0.24); + color: #5E81AC; + border-color: transparent; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button { + color: #81A1C1; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: #ffffff; + color: #81A1C1; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: #E5E9F0; + color: #81A1C1; +} +.p-splitbutton.p-button-raised { + box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2), 0 12px 10px 0 rgba(0, 0, 0, 0.06); +} +.p-splitbutton.p-button-rounded { + border-radius: 2rem; +} +.p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; +} +.p-splitbutton.p-button-sm > .p-button { + font-size: 0.875rem; + padding: 0.4375rem 0.875rem; +} +.p-splitbutton.p-button-sm > .p-button .p-button-icon { + font-size: 0.875rem; +} +.p-splitbutton.p-button-lg > .p-button { + font-size: 1.25rem; + padding: 0.625rem 1.25rem; +} +.p-splitbutton.p-button-lg > .p-button .p-button-icon { + font-size: 1.25rem; +} + +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button { + background-color: transparent; + color: #4C566A; + border: 2px solid; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(76, 86, 106, 0.12); + color: #4C566A; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(76, 86, 106, 0.24); + color: #4C566A; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button { + background-color: transparent; + color: #4C566A; + border-color: transparent; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(76, 86, 106, 0.12); + border-color: transparent; + color: #4C566A; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(76, 86, 106, 0.24); + border-color: transparent; + color: #4C566A; +} + +.p-splitbutton.p-button-info.p-button-outlined > .p-button { + background-color: transparent; + color: #639BB2; + border: 2px solid; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(99, 155, 178, 0.12); + color: #639BB2; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(99, 155, 178, 0.24); + color: #639BB2; +} +.p-splitbutton.p-button-info.p-button-text > .p-button { + background-color: transparent; + color: #639BB2; + border-color: transparent; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(99, 155, 178, 0.12); + border-color: transparent; + color: #639BB2; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(99, 155, 178, 0.24); + border-color: transparent; + color: #639BB2; +} + +.p-splitbutton.p-button-success.p-button-outlined > .p-button { + background-color: transparent; + color: #7FA366; + border: 2px solid; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(127, 163, 102, 0.12); + color: #7FA366; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(127, 163, 102, 0.24); + color: #7FA366; +} +.p-splitbutton.p-button-success.p-button-text > .p-button { + background-color: transparent; + color: #7FA366; + border-color: transparent; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(127, 163, 102, 0.12); + border-color: transparent; + color: #7FA366; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(127, 163, 102, 0.24); + border-color: transparent; + color: #7FA366; +} + +.p-splitbutton.p-button-warning.p-button-outlined > .p-button { + background-color: transparent; + color: #D08770; + border: 2px solid; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(208, 135, 112, 0.12); + color: #D08770; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(208, 135, 112, 0.24); + color: #D08770; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button { + background-color: transparent; + color: #D08770; + border-color: transparent; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(208, 135, 112, 0.12); + border-color: transparent; + color: #D08770; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(208, 135, 112, 0.24); + border-color: transparent; + color: #D08770; +} + +.p-splitbutton.p-button-help.p-button-outlined > .p-button { + background-color: transparent; + color: #9A6796; + border: 2px solid; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(154, 103, 150, 0.12); + color: #9A6796; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(154, 103, 150, 0.24); + color: #9A6796; +} +.p-splitbutton.p-button-help.p-button-text > .p-button { + background-color: transparent; + color: #9A6796; + border-color: transparent; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(154, 103, 150, 0.12); + border-color: transparent; + color: #9A6796; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(154, 103, 150, 0.24); + border-color: transparent; + color: #9A6796; +} + +.p-splitbutton.p-button-danger.p-button-outlined > .p-button { + background-color: transparent; + color: #BF616A; + border: 2px solid; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(191, 97, 106, 0.12); + color: #BF616A; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(191, 97, 106, 0.24); + color: #BF616A; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button { + background-color: transparent; + color: #BF616A; + border-color: transparent; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(191, 97, 106, 0.12); + border-color: transparent; + color: #BF616A; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(191, 97, 106, 0.24); + border-color: transparent; + color: #BF616A; +} + +.p-speeddial-button.p-button.p-button-icon-only { + width: 4rem; + height: 4rem; +} +.p-speeddial-button.p-button.p-button-icon-only .p-button-icon { + font-size: 2rem; +} + +.p-speeddial-action { + width: 3rem; + height: 3rem; + background: #4C566A; + color: #fff; +} +.p-speeddial-action:hover { + background: #3B4252; + color: #fff; +} + +.p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; +} + +.p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; +} + +.p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; +} + +.p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; +} +.p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; +} + +.p-speeddial-mask { + background-color: rgba(112, 120, 136, 0.5); +} + +.p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin: 0.5rem; +} +.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-carousel .p-carousel-content .p-carousel-prev:focus, +.p-carousel .p-carousel-content .p-carousel-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-carousel .p-carousel-indicators { + padding: 1rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #E5E9F0; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 0; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #81A1C1; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #D8DEE9; + color: #2E3440; +} + +.p-datatable .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datatable .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datatable .p-datatable-header { + background: #ffffff; + color: #4C566A; + border: 1px solid #ffffff; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datatable .p-datatable-footer { + background: #ECEFF4; + color: #4C566A; + border: 1px solid #ffffff; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #ffffff; + border-width: 0 0 1px 0; + font-weight: 600; + color: #4C566A; + background: #ECEFF4; + transition: none; +} +.p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #ffffff; + border-width: 0 0 1px 0; + font-weight: 600; + color: #4C566A; + background: #ECEFF4; +} +.p-datatable .p-sortable-column .p-sortable-column-icon { + color: #81A1C1; + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #2E3440; + background: #D8DEE9; + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { + background: #ffffff; + color: #4C566A; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #81A1C1; +} +.p-datatable .p-sortable-column.p-highlight { + background: #ECEFF4; + color: #4C566A; +} +.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #4C566A; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover { + background: #ffffff; + color: #4C566A; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #4C566A; +} +.p-datatable .p-sortable-column:focus { + box-shadow: inset 0 0 0 0.15rem #C0D0E0; + outline: 0 none; +} +.p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #4C566A; + transition: none; +} +.p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #ECEFF4; + border-width: 0 0 1px 0; + padding: 1rem 1rem; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { + margin-right: 0.5rem; +} +.p-datatable .p-datatable-tbody > tr > td > .p-column-title { + font-weight: 600; +} +.p-datatable .p-datatable-tbody > tr > td.p-highlight { + background: #D8DEE9; + color: #2E3440; +} +.p-datatable .p-datatable-tbody > tr.p-highlight { + background: #D8DEE9; + color: #2E3440; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #D8DEE9; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #D8DEE9; +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: #ffffff; + color: #4C566A; +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus { + outline: 0.15rem solid #C0D0E0; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover { + background: #ffffff; + color: #4C566A; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus { + outline: 0.15rem solid #C0D0E0; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: #ffffff; + color: #4C566A; +} +.p-datatable .p-column-resizer-helper { + background: #5E81AC; +} +.p-datatable .p-datatable-scrollable-header, +.p-datatable .p-datatable-scrollable-footer { + background: #ffffff; +} +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { + background-color: #ECEFF4; +} +.p-datatable .p-datatable-loading-icon { + font-size: 2rem; +} +.p-datatable.p-datatable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-footer { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-top { + border-width: 0 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-bottom { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + background: #f6f7fa; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #D8DEE9; + color: #2E3440; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { + color: #2E3440; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { + color: #2E3440; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { + background: #f6f7fa; +} +.p-datatable.p-datatable-sm .p-datatable-header { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-lg .p-datatable-header { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-footer { + padding: 1.25rem 1.25rem; +} + +.p-datatable-drag-selection-helper { + background: rgba(94, 129, 172, 0.16); +} + +.p-dataview .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-dataview .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-dataview .p-dataview-header { + background: #ffffff; + color: #4C566A; + border: 1px solid #ffffff; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-dataview .p-dataview-content { + background: #ffffff; + color: #4C566A; + border: 0 none; + padding: 0; +} +.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { + border: solid #ffffff; + border-width: 0 0 1px 0; +} +.p-dataview .p-dataview-footer { + background: #ECEFF4; + color: #4C566A; + border: 1px solid #ffffff; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} +.p-dataview .p-dataview-loading-icon { + font-size: 2rem; +} + +.p-datascroller .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datascroller .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datascroller .p-datascroller-header { + background: #ffffff; + color: #4C566A; + border: 1px solid #ffffff; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datascroller .p-datascroller-content { + background: #ffffff; + color: #4C566A; + border: 0 none; + padding: 0; +} +.p-datascroller.p-datascroller-inline .p-datascroller-list > li { + border: solid #ffffff; + border-width: 0 0 1px 0; +} +.p-datascroller .p-datascroller-footer { + background: #ECEFF4; + color: #4C566A; + border: 1px solid #ffffff; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.p-column-filter-row .p-column-filter-menu-button, +.p-column-filter-row .p-column-filter-clear-button { + margin-left: 0.5rem; +} + +.p-column-filter-menu-button { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-column-filter-menu-button:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #ffffff; + color: #4C566A; +} +.p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { + background: #D8DEE9; + color: #2E3440; +} +.p-column-filter-menu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} + +.p-column-filter-clear-button { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-column-filter-clear-button:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-column-filter-clear-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} + +.p-column-filter-overlay { + background: #ffffff; + color: #4C566A; + border: 0 none; + border-radius: 4px; + 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); + min-width: 12.5rem; +} +.p-column-filter-overlay .p-column-filter-row-items { + padding: 0.5rem 0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #4C566A; + background: transparent; + transition: none; + border-radius: 0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #4C566A; + background: transparent; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #E5E9F0; + margin: 0.25rem 0; +} + +.p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 1rem; + border-bottom: 0 none; + color: #4C566A; + background: #ECEFF4; + margin: 0; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 1rem; + border-bottom: 1px solid #E5E9F0; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { + margin-bottom: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-top: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint:last-child { + border-bottom: 0 none; +} +.p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0.5rem 1rem; +} +.p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 1rem; +} + +.fc { + /* FullCalendar 4 */ + /* FullCalendar 5 */ +} +.fc.fc-unthemed .fc-view-container th { + background: #ffffff; + border: 1px solid #E5E9F0; + color: #4C566A; +} +.fc.fc-unthemed .fc-view-container td.fc-widget-content { + border: 1px solid #E5E9F0; + color: #4C566A; +} +.fc.fc-unthemed .fc-view-container td.fc-head-container { + border: 1px solid #E5E9F0; +} +.fc.fc-unthemed .fc-view-container .fc-view { + background: #ffffff; +} +.fc.fc-unthemed .fc-view-container .fc-row { + border-right: 1px solid #E5E9F0; +} +.fc.fc-unthemed .fc-view-container .fc-event { + background: #51749e; + border: 1px solid #51749e; + color: #ffffff; +} +.fc.fc-unthemed .fc-view-container .fc-divider { + background: #ffffff; + border: 1px solid #E5E9F0; +} +.fc.fc-unthemed .fc-toolbar .fc-button { + color: #ffffff; + background: #5E81AC; + border: 2px solid #5E81AC; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 4px; + display: flex; + align-items: center; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { + background: #81A1C1; + color: #ffffff; + border-color: #51749e; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { + background: #48678c; + color: #ffffff; + border-color: #48678c; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-unthemed .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #ffffff; + border: 2px solid #D8DEE9; + color: #4C566A; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: #ECEFF4; + border-color: #81A1C1; + color: #4C566A; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #5E81AC; + border-color: #5E81AC; + color: #ffffff; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #81A1C1; + border-color: #5E81AC; + color: #ffffff; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + z-index: 1; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { + border-color: #E5E9F0; +} +.fc.fc-theme-standard .fc-view-harness th { + background: #ffffff; + border-color: #E5E9F0; + color: #4C566A; +} +.fc.fc-theme-standard .fc-view-harness td { + color: #4C566A; + border-color: #E5E9F0; +} +.fc.fc-theme-standard .fc-view-harness .fc-view { + background: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover { + background: none; + border: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { + border: 1px solid #E5E9F0; + padding: 1rem; + background: #ffffff; + color: #4C566A; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + font-family: "PrimeIcons" !important; + font-size: 1rem; + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { + content: "\e90b"; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { + padding: 1rem; + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + border-top: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { + color: #ffffff; + background: #51749e; + border-color: #51749e; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { + color: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { + background: #51749e; + border-color: #51749e; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { + background: transparent; + color: #4C566A; +} +.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { + background: #ffffff; +} +.fc.fc-theme-standard .fc-toolbar .fc-button { + color: #ffffff; + background: #5E81AC; + border: 2px solid #5E81AC; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 4px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { + background: #81A1C1; + color: #ffffff; + border-color: #51749e; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { + background: #48678c; + color: #ffffff; + border-color: #48678c; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:disabled { + opacity: 0.6; + color: #ffffff; + background: #5E81AC; + border: 2px solid #5E81AC; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #ffffff; + border: 2px solid #D8DEE9; + color: #4C566A; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: #ECEFF4; + border-color: #81A1C1; + color: #4C566A; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #5E81AC; + border-color: #5E81AC; + color: #ffffff; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #81A1C1; + border-color: #5E81AC; + color: #ffffff; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + z-index: 1; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.fc.fc-theme-standard .fc-highlight { + color: #2E3440; + background: #D8DEE9; +} + +.p-orderlist .p-orderlist-controls { + padding: 1rem; +} +.p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; +} +.p-orderlist .p-orderlist-header { + background: #ffffff; + color: #4C566A; + border: 1px solid #E5E9F0; + padding: 1rem; + font-weight: 600; + border-bottom: 0 none; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-orderlist .p-orderlist-filter-container { + padding: 1rem; + background: #ffffff; + border: 1px solid #E5E9F0; + border-bottom: 0 none; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input { + padding-right: 1.5rem; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon { + right: 0.5rem; + color: #81A1C1; +} +.p-orderlist .p-orderlist-list { + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + padding: 0.5rem 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 1rem; + margin: 0; + border: 0 none; + color: #4C566A; + background: transparent; + transition: transform 0.2s, none; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: transparent; + color: #4C566A; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #f6f7fa; +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: transparent; +} + +@media screen and (max-width: 769px) { + .p-orderlist { + flex-direction: column; + } + .p-orderlist .p-orderlist-controls { + padding: 1rem; + flex-direction: row; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-orderlist .p-orderlist-controls .p-button:last-child { + margin-right: 0; + } +} +.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: transparent; + color: #4C566A; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight { + background: #D8DEE9; + color: #2E3440; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: #8699bb; +} +.p-organizationchart .p-organizationchart-line-down { + background: #E5E9F0; +} +.p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #E5E9F0; + border-color: #E5E9F0; +} +.p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #E5E9F0; + border-color: #E5E9F0; +} +.p-organizationchart .p-organizationchart-node-content { + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + padding: 1rem; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} + +.p-paginator { + background: #ffffff; + color: #4C566A; + border: solid #ffffff; + border-width: 0; + padding: 0.5rem 1rem; + border-radius: 4px; +} +.p-paginator .p-paginator-first, +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; + color: #4C566A; + min-width: 2.357rem; + height: 2.357rem; + margin: 0.143rem; + transition: none; + border-radius: 4px; +} +.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background: #ECEFF4; + border-color: #5E81AC; + color: #4C566A; +} +.p-paginator .p-paginator-first { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-paginator .p-paginator-last { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.p-paginator .p-dropdown { + margin-left: 0.5rem; + height: 2.357rem; +} +.p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; +} +.p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; +} +.p-paginator .p-paginator-page-input .p-inputtext { + max-width: 2.357rem; +} +.p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #4C566A; + min-width: 2.357rem; + height: 2.357rem; + margin: 0.143rem; + padding: 0 0.5rem; +} +.p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #4C566A; + min-width: 2.357rem; + height: 2.357rem; + margin: 0.143rem; + transition: none; + border-radius: 4px; +} +.p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: #D8DEE9; + border-color: #D8DEE9; + color: #2E3440; +} +.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: #ECEFF4; + border-color: #5E81AC; + color: #4C566A; +} + +.p-picklist .p-picklist-buttons { + padding: 1rem; +} +.p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; +} +.p-picklist .p-picklist-header { + background: #ffffff; + color: #4C566A; + border: 1px solid #E5E9F0; + padding: 1rem; + font-weight: 600; + border-bottom: 0 none; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-picklist .p-picklist-filter-container { + padding: 1rem; + background: #ffffff; + border: 1px solid #E5E9F0; + border-bottom: 0 none; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-input { + padding-right: 1.5rem; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-icon { + right: 0.5rem; + color: #81A1C1; +} +.p-picklist .p-picklist-list { + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + padding: 0.5rem 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 1rem; + margin: 0; + border: 0 none; + color: #4C566A; + background: transparent; + transition: transform 0.2s, none; +} +.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: transparent; + color: #4C566A; +} +.p-picklist .p-picklist-list .p-picklist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #2E3440; + background: #D8DEE9; +} + +@media screen and (max-width: 769px) { + .p-picklist { + flex-direction: column; + } + .p-picklist .p-picklist-buttons { + padding: 1rem; + flex-direction: row; + } + .p-picklist .p-picklist-buttons .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-picklist .p-picklist-buttons .p-button:last-child { + margin-right: 0; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before { + content: "\e930"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before { + content: "\e92c"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before { + content: "\e933"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before { + content: "\e92f"; + } +} +.p-tree { + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + padding: 1rem; + border-radius: 4px; +} +.p-tree .p-tree-container .p-treenode { + padding: 0.143rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 4px; + transition: none; + padding: 0; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #81A1C1; +} +.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 { + color: #4C566A; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: #D8DEE9; + color: #2E3440; +} +.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: #2E3440; +} +.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: #2E3440; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { + background: transparent; + color: #4C566A; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { + background: transparent; + color: #4C566A; +} +.p-tree .p-tree-filter-container { + margin-bottom: 0.5rem; +} +.p-tree .p-tree-filter-container .p-tree-filter { + width: 100%; + padding-right: 1.5rem; +} +.p-tree .p-tree-filter-container .p-tree-filter-icon { + right: 0.5rem; + color: #81A1C1; +} +.p-tree .p-treenode-children { + padding: 0 0 0 1rem; +} +.p-tree .p-tree-loading-icon { + font-size: 2rem; +} +.p-tree .p-treenode-droppoint { + height: 0.5rem; +} +.p-tree .p-treenode-droppoint.p-treenode-droppoint-active { + background: #9fadc9; +} + +.p-treetable .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-treetable .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-treetable .p-treetable-header { + background: #ffffff; + color: #4C566A; + border: 1px solid #ffffff; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-treetable .p-treetable-footer { + background: #ECEFF4; + color: #4C566A; + border: 1px solid #ffffff; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #ffffff; + border-width: 0 0 1px 0; + font-weight: 600; + color: #4C566A; + background: #ECEFF4; + transition: none; +} +.p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #ffffff; + border-width: 0 0 1px 0; + font-weight: 600; + color: #4C566A; + background: #ECEFF4; +} +.p-treetable .p-sortable-column { + outline-color: #C0D0E0; +} +.p-treetable .p-sortable-column .p-sortable-column-icon { + color: #81A1C1; + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #2E3440; + background: #D8DEE9; + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #ffffff; + color: #4C566A; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #81A1C1; +} +.p-treetable .p-sortable-column.p-highlight { + background: #ECEFF4; + color: #4C566A; +} +.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #4C566A; +} +.p-treetable .p-treetable-tbody > tr { + background: #ffffff; + color: #4C566A; + transition: none; +} +.p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #ECEFF4; + border-width: 0 0 1px 0; + padding: 1rem 1rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon { + color: #4C566A; +} +.p-treetable .p-treetable-tbody > tr:focus { + outline: 0.15rem solid #C0D0E0; + outline-offset: -0.15rem; +} +.p-treetable .p-treetable-tbody > tr.p-highlight { + background: #D8DEE9; + color: #2E3440; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { + color: #2E3440; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { + color: #2E3440; +} +.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: #ffffff; + color: #4C566A; +} +.p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #4C566A; +} +.p-treetable .p-column-resizer-helper { + background: #5E81AC; +} +.p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #ffffff; +} +.p-treetable .p-treetable-loading-icon { + font-size: 2rem; +} +.p-treetable.p-treetable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.875rem 0.875rem; +} +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-lg .p-treetable-header { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-footer { + padding: 1.25rem 1.25rem; +} + +.p-timeline .p-timeline-event-marker { + border: 0 none; + border-radius: 50%; + width: 1rem; + height: 1rem; + background-color: #5E81AC; +} +.p-timeline .p-timeline-event-connector { + background-color: #E5E9F0; +} +.p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; +} +.p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; +} + +.p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1rem; + border: 1px solid #E5E9F0; + color: #4C566A; + background: #ffffff; + font-weight: 600; + border-radius: 4px; + transition: none; +} +.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + margin-right: 0.5rem; +} +.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #ffffff; + border-color: #E5E9F0; + color: #4C566A; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #E5E9F0; + color: #4C566A; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-color: #E5E9F0; + background: #ffffff; + color: #4C566A; +} +.p-accordion .p-accordion-content { + padding: 1rem; + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-accordion .p-accordion-tab { + margin-bottom: 0; +} +.p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link { + border-radius: 0; +} +.p-accordion .p-accordion-tab .p-accordion-content { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link { + border-top: 0 none; +} +.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link, .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-top: 0 none; +} +.p-accordion .p-accordion-tab:first-child .p-accordion-header .p-accordion-header-link { + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} + +.p-card { + background: #ffffff; + color: #4C566A; + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + border-radius: 4px; +} +.p-card .p-card-body { + padding: 1rem; +} +.p-card .p-card-title { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.5rem; +} +.p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #81A1C1; +} +.p-card .p-card-content { + padding: 1rem 0; +} +.p-card .p-card-footer { + padding: 1rem 0 0 0; +} + +.p-fieldset { + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + border-radius: 4px; +} +.p-fieldset .p-fieldset-legend { + padding: 1rem; + border: 1px solid #E5E9F0; + color: #4C566A; + background: #ffffff; + font-weight: 600; + border-radius: 4px; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1rem; + color: #4C566A; + border-radius: 4px; + transition: none; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + margin-right: 0.5rem; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #ffffff; + border-color: #E5E9F0; + color: #4C566A; +} +.p-fieldset .p-fieldset-content { + padding: 1rem; +} + +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #E5E9F0; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #E5E9F0; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + +.p-panel .p-panel-header { + border: 1px solid #E5E9F0; + padding: 1rem; + background: #ffffff; + color: #4C566A; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-panel .p-panel-header .p-panel-title { + font-weight: 600; +} +.p-panel .p-panel-header .p-panel-header-icon { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-panel .p-panel-header .p-panel-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-panel.p-panel-toggleable .p-panel-header { + padding: 0.5rem 1rem; +} +.p-panel .p-panel-content { + padding: 1rem; + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + border-top: 0 none; +} +.p-panel .p-panel-footer { + padding: 0.5rem 1rem; + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + border-top: 0 none; +} + +.p-splitter { + border: 1px solid #E5E9F0; + background: #ffffff; + border-radius: 4px; + color: #4C566A; +} +.p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + background: #ECEFF4; +} +.p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #c2c7d1; +} +.p-splitter .p-splitter-gutter-resizing { + background: #c2c7d1; +} + +.p-scrollpanel .p-scrollpanel-bar { + background: #ECEFF4; + border: 0 none; +} + +.p-tabview .p-tabview-nav { + background: #ffffff; + border: 2px solid #E5E9F0; + border-width: 0 0 2px 0; +} +.p-tabview .p-tabview-nav li { + margin-right: 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link { + border: solid #E5E9F0; + border-width: 0 0 2px 0; + border-color: transparent transparent #E5E9F0 transparent; + background: #ffffff; + color: #4C566A; + padding: 1rem; + font-weight: 600; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + transition: none; + margin: 0 0 -2px 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #C0D0E0; +} +.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #81A1C1; + color: #4C566A; +} +.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #5E81AC; + color: #4C566A; +} +.p-tabview .p-tabview-close { + margin-left: 0.5rem; +} +.p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #4C566A; + width: 2.357rem; + box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2), 0 12px 10px 0 rgba(0, 0, 0, 0.06); + border-radius: 0; +} +.p-tabview .p-tabview-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #C0D0E0; +} +.p-tabview .p-tabview-panels { + background: #ffffff; + padding: 1rem; + border: 0 none; + color: #4C566A; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} + +.p-toolbar { + background: #ffffff; + border: 1px solid #E5E9F0; + padding: 1rem; + border-radius: 4px; + gap: 0.5rem; +} +.p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; +} + +.p-confirm-popup { + background: #ffffff; + color: #4C566A; + border: 0 none; + border-radius: 4px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-confirm-popup .p-confirm-popup-content { + padding: 1rem; +} +.p-confirm-popup .p-confirm-popup-footer { + text-align: right; + padding: 0 1rem 1rem 1rem; +} +.p-confirm-popup .p-confirm-popup-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-confirm-popup .p-confirm-popup-footer button:last-child { + margin: 0; +} +.p-confirm-popup:after { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-confirm-popup:before { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; +} +.p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #ffffff; +} +.p-confirm-popup .p-confirm-popup-icon { + font-size: 1.5rem; +} +.p-confirm-popup .p-confirm-popup-message { + margin-left: 1rem; +} + +.p-dialog { + border-radius: 4px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); + border: 0 none; +} +.p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #4C566A; + padding: 1.5rem; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-dialog .p-dialog-header .p-dialog-title { + font-weight: 600; + font-size: 1.25rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; +} +.p-dialog .p-dialog-content { + background: #ffffff; + color: #4C566A; + padding: 0 1.5rem 2rem 1.5rem; +} +.p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-dialog .p-dialog-footer { + border-top: 0 none; + background: #ffffff; + color: #4C566A; + padding: 0 1.5rem 1.5rem 1.5rem; + text-align: right; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-dialog .p-dialog-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 1rem; +} + +.p-overlaypanel { + background: #ffffff; + color: #4C566A; + border: 0 none; + border-radius: 4px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-overlaypanel .p-overlaypanel-content { + padding: 1rem; +} +.p-overlaypanel .p-overlaypanel-close { + background: #5E81AC; + color: #ffffff; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; + position: absolute; + top: -1rem; + right: -1rem; +} +.p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #81A1C1; + color: #ffffff; +} +.p-overlaypanel:after { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-overlaypanel:before { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #f2f2f2; +} +.p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; +} +.p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #ffffff; +} + +.p-sidebar { + background: #ffffff; + color: #4C566A; + border: 0 none; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-sidebar .p-sidebar-header { + padding: 1rem; +} +.p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 2rem; + height: 2rem; + color: #81A1C1; + border: 2px solid transparent; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #4C566A; + border-color: #5E81AC; + background: #ffffff; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:focus, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; +} +.p-sidebar .p-sidebar-content { + padding: 1rem; +} + +.p-tooltip .p-tooltip-text { + background: #4C566A; + color: #ffffff; + padding: 0.5rem 0.5rem; + 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); + border-radius: 4px; +} +.p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #4C566A; +} +.p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #4C566A; +} +.p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #4C566A; +} +.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #4C566A; +} + +.p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1rem; + border: 1px solid #E5E9F0; + color: #4C566A; + border-bottom: 0 none; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-fileupload .p-fileupload-buttonbar .p-button { + margin-right: 0.5rem; +} +.p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 2rem 1rem; + border: 1px solid #E5E9F0; + color: #4C566A; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-fileupload .p-progressbar { + height: 0.25rem; +} +.p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; +} +.p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; +} + +.p-breadcrumb { + background: #ffffff; + border: 1px solid #E5E9F0; + border-radius: 4px; + padding: 1rem; +} +.p-breadcrumb ul li .p-menuitem-link { + transition: none; + border-radius: 4px; +} +.p-breadcrumb ul li .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; +} +.p-breadcrumb ul li.p-breadcrumb-chevron { + margin: 0 0.5rem 0 0.5rem; + color: #4C566A; +} +.p-breadcrumb ul li:last-child .p-menuitem-text { + color: #4C566A; +} +.p-breadcrumb ul li:last-child .p-menuitem-icon { + color: #81A1C1; +} + +.p-contextmenu { + padding: 0.25rem 0; + background: #ffffff; + color: #4C566A; + border: 0 none; + 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); + border-radius: 4px; + width: 12.5rem; +} +.p-contextmenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 0; + transition: none; + user-select: none; +} +.p-contextmenu .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-contextmenu .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-contextmenu .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-contextmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-contextmenu .p-submenu-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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); + border-radius: 4px; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #ffffff; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-contextmenu .p-menu-separator { + border-top: 1px solid #E5E9F0; + margin: 0.25rem 0; +} +.p-contextmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-dock .p-dock-list { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.5rem; + border-radius: 0.5rem; +} +.p-dock .p-dock-item { + padding: 0.5rem; +} +.p-dock .p-dock-action { + width: 4rem; + height: 4rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; +} + +@media screen and (max-width: 960px) { + .p-dock.p-dock-top .p-dock-container, .p-dock.p-dock-bottom .p-dock-container { + overflow-x: auto; + width: 100%; + } + .p-dock.p-dock-top .p-dock-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-container .p-dock-list { + margin: 0 auto; + } + .p-dock.p-dock-left .p-dock-container, .p-dock.p-dock-right .p-dock-container { + overflow-y: auto; + height: 100%; + } + .p-dock.p-dock-left .p-dock-container .p-dock-list, .p-dock.p-dock-right .p-dock-container .p-dock-list { + margin: auto 0; + } + .p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + transform: none; + margin: 0; + } +} +.p-megamenu { + padding: 0.5rem; + background: #ECEFF4; + color: #4C566A; + border: 1px solid #E5E9F0; + border-radius: 4px; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 4px; + transition: none; + user-select: none; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #81A1C1; + margin-left: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-megamenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 0; + transition: none; + user-select: none; +} +.p-megamenu .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-megamenu .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-megamenu .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-megamenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #4C566A; + border: 0 none; + 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-megamenu .p-megamenu-submenu-header { + margin: 0; + padding: 0.75rem 1rem; + color: #4C566A; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-megamenu .p-megamenu-submenu { + padding: 0.25rem 0; + width: 12.5rem; +} +.p-megamenu .p-megamenu-submenu .p-menu-separator { + border-top: 1px solid #E5E9F0; + margin: 0.25rem 0; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #ffffff; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-megamenu.p-megamenu-vertical { + width: 12.5rem; + padding: 0.25rem 0; +} + +.p-menu { + padding: 0.25rem 0; + background: #ffffff; + color: #4C566A; + border: 1px solid #E5E9F0; + border-radius: 4px; + width: 12.5rem; +} +.p-menu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 0; + transition: none; + user-select: none; +} +.p-menu .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-menu .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-menu .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-menu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-menu.p-menu-overlay { + background: #ffffff; + border: 0 none; + 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-menu .p-submenu-header { + margin: 0; + padding: 0.75rem 1rem; + color: #4C566A; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.p-menu .p-menu-separator { + border-top: 1px solid #E5E9F0; + margin: 0.25rem 0; +} + +.p-menubar { + padding: 0.5rem; + background: #ECEFF4; + color: #4C566A; + border: 1px solid #E5E9F0; + border-radius: 4px; +} +.p-menubar .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 0; + transition: none; + user-select: none; +} +.p-menubar .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-menubar .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-menubar .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-menubar .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 4px; + transition: none; + user-select: none; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #81A1C1; + margin-left: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-menubar .p-submenu-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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); + width: 12.5rem; +} +.p-menubar .p-submenu-list .p-menu-separator { + border-top: 1px solid #E5E9F0; + margin: 0.25rem 0; +} +.p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #ffffff; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} + +@media screen and (max-width: 960px) { + .p-menubar { + position: relative; + } + .p-menubar .p-menubar-button { + display: flex; + width: 2rem; + height: 2rem; + color: #81A1C1; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-menubar .p-menubar-button:hover { + color: #81A1C1; + background: #ffffff; + } + .p-menubar .p-menubar-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + } + .p-menubar .p-menubar-root-list { + position: absolute; + display: none; + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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); + width: 100%; + } + .p-menubar .p-menubar-root-list .p-menu-separator { + border-top: 1px solid #E5E9F0; + margin: 0.25rem 0; + } + .p-menubar .p-menubar-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 0; + transition: none; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #4C566A; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #81A1C1; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-menubar .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list ul li a { + padding-left: 2.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li a { + padding-left: 3.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li a { + padding-left: 5.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li a { + padding-left: 6.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a { + padding-left: 8.25rem; + } + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } +} +.p-panelmenu .p-panelmenu-header > a { + padding: 1rem; + border: 1px solid #E5E9F0; + color: #4C566A; + background: #ffffff; + font-weight: 600; + border-radius: 4px; + transition: none; +} +.p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + background: #ffffff; + border-color: #E5E9F0; + color: #4C566A; +} +.p-panelmenu .p-panelmenu-header.p-highlight { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight > a { + background: #ffffff; + border-color: #E5E9F0; + color: #4C566A; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover { + border-color: #E5E9F0; + background: #ffffff; + color: #4C566A; +} +.p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0; + border: 1px solid #E5E9F0; + background: #ffffff; + color: #4C566A; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 0; + transition: none; + user-select: none; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) { + padding: 0 0 0 1rem; +} +.p-panelmenu .p-panelmenu-panel { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-panel .p-panelmenu-header > a { + border-radius: 0; +} +.p-panelmenu .p-panelmenu-panel .p-panelmenu-content { + border-radius: 0; +} +.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header > a { + border-top: 0 none; +} +.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover > a, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover > a { + border-top: 0 none; +} +.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header > a { + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) > a { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} + +.p-slidemenu { + padding: 0.25rem 0; + background: #ffffff; + color: #4C566A; + border: 1px solid #E5E9F0; + border-radius: 4px; + width: 12.5rem; +} +.p-slidemenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 0; + transition: none; + user-select: none; +} +.p-slidemenu .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-slidemenu .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-slidemenu .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-slidemenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-slidemenu.p-slidemenu-overlay { + background: #ffffff; + border: 0 none; + 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-slidemenu .p-slidemenu-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link { + background: #ffffff; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text { + color: #4C566A; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon { + color: #81A1C1; +} +.p-slidemenu .p-slidemenu-separator { + border-top: 1px solid #E5E9F0; + margin: 0.25rem 0; +} +.p-slidemenu .p-slidemenu-icon { + font-size: 0.875rem; +} +.p-slidemenu .p-slidemenu-backward { + padding: 0.75rem 1rem; + color: #4C566A; +} + +.p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: none; + border-radius: 4px; + background: #ffffff; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #4C566A; + border: 1px solid #ffffff; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + z-index: 1; + border-radius: 50%; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-title { + margin-top: 0.5rem; + color: #81A1C1; +} +.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-steps .p-steps-item.p-highlight .p-steps-number { + background: #D8DEE9; + color: #2E3440; +} +.p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 600; + color: #4C566A; +} +.p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #E5E9F0; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; +} + +.p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 2px solid #E5E9F0; + border-width: 0 0 2px 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem { + margin-right: 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + border: solid #E5E9F0; + border-width: 0 0 2px 0; + border-color: transparent transparent #E5E9F0 transparent; + background: #ffffff; + color: #4C566A; + padding: 1rem; + font-weight: 600; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + transition: none; + margin: 0 0 -2px 0; + height: calc(100% + 2px); +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #C0D0E0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #81A1C1; + color: #4C566A; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #5E81AC; + color: #4C566A; +} + +.p-tieredmenu { + padding: 0.25rem 0; + background: #ffffff; + color: #4C566A; + border: 1px solid #E5E9F0; + border-radius: 4px; + width: 12.5rem; +} +.p-tieredmenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #4C566A; + border-radius: 0; + transition: none; + user-select: none; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-icon { + color: #81A1C1; + margin-right: 0.5rem; +} +.p-tieredmenu .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { + background: #ffffff; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #4C566A; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #81A1C1; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #81A1C1; +} +.p-tieredmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; +} +.p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 0 none; + 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-tieredmenu .p-submenu-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #ffffff; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #4C566A; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #81A1C1; +} +.p-tieredmenu .p-menu-separator { + border-top: 1px solid #E5E9F0; + margin: 0.25rem 0; +} +.p-tieredmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-inline-message { + padding: 0.5rem 0.5rem; + margin: 0; + border-radius: 4px; +} +.p-inline-message.p-inline-message-info { + background: #b8d9e3; + border: solid #2e4f5d; + border-width: 0px; + color: #2e4f5d; +} +.p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #17282e; +} +.p-inline-message.p-inline-message-success { + background: #c8d8ba; + border: solid #3f5332; + border-width: 0px; + color: #202919; +} +.p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #202919; +} +.p-inline-message.p-inline-message-warn { + background: #f1d6ca; + border: solid #783b28; + border-width: 0px; + color: #3c1d14; +} +.p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #3c1d14; +} +.p-inline-message.p-inline-message-error { + background: #e8b8b8; + border: solid #662a2f; + border-width: 0px; + color: #331518; +} +.p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #331518; +} +.p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; +} +.p-inline-message .p-inline-message-text { + font-size: 1rem; +} +.p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; +} + +.p-message { + margin: 1rem 0; + border-radius: 4px; +} +.p-message .p-message-wrapper { + padding: 1rem 1.5rem; +} +.p-message .p-message-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-message .p-message-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-message.p-message-info { + background: #b8d9e3; + border: solid #2e4f5d; + border-width: 0 0 0 6px; + color: #2e4f5d; +} +.p-message.p-message-info .p-message-icon { + color: #17282e; +} +.p-message.p-message-info .p-message-close { + color: #17282e; +} +.p-message.p-message-success { + background: #c8d8ba; + border: solid #3f5332; + border-width: 0 0 0 6px; + color: #202919; +} +.p-message.p-message-success .p-message-icon { + color: #202919; +} +.p-message.p-message-success .p-message-close { + color: #202919; +} +.p-message.p-message-warn { + background: #f1d6ca; + border: solid #783b28; + border-width: 0 0 0 6px; + color: #3c1d14; +} +.p-message.p-message-warn .p-message-icon { + color: #3c1d14; +} +.p-message.p-message-warn .p-message-close { + color: #3c1d14; +} +.p-message.p-message-error { + background: #e8b8b8; + border: solid #662a2f; + border-width: 0 0 0 6px; + color: #331518; +} +.p-message.p-message-error .p-message-icon { + color: #331518; +} +.p-message.p-message-error .p-message-close { + color: #331518; +} +.p-message .p-message-text { + font-size: 1rem; + font-weight: 500; +} +.p-message .p-message-icon { + font-size: 1.5rem; + margin-right: 0.5rem; +} + +.p-toast { + opacity: 0.9; +} +.p-toast .p-toast-message { + margin: 0 0 1rem 0; + 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); + border-radius: 4px; +} +.p-toast .p-toast-message .p-toast-message-content { + padding: 1rem; + border-width: 0 0 0 6px; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 700; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + margin: 0.5rem 0 0 0; +} +.p-toast .p-toast-message .p-toast-icon-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-toast .p-toast-message .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-toast .p-toast-message .p-toast-icon-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} +.p-toast .p-toast-message.p-toast-message-info { + background: #b8d9e3; + border: solid #2e4f5d; + border-width: 0 0 0 6px; + color: #2e4f5d; +} +.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + color: #17282e; +} +.p-toast .p-toast-message.p-toast-message-success { + background: #c8d8ba; + border: solid #3f5332; + border-width: 0 0 0 6px; + color: #202919; +} +.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + color: #202919; +} +.p-toast .p-toast-message.p-toast-message-warn { + background: #f1d6ca; + border: solid #783b28; + border-width: 0 0 0 6px; + color: #3c1d14; +} +.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + color: #3c1d14; +} +.p-toast .p-toast-message.p-toast-message-error { + background: #e8b8b8; + border: solid #662a2f; + border-width: 0 0 0 6px; + color: #331518; +} +.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + color: #331518; +} + +.p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #ECEFF4; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #ECEFF4; +} +.p-galleria .p-galleria-item-nav { + background: transparent; + color: #ECEFF4; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 4px; + margin: 0 0.5rem; +} +.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #ECEFF4; +} +.p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #ECEFF4; + padding: 1rem; +} +.p-galleria .p-galleria-indicators { + padding: 1rem; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #D8DEE9; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #81A1C1; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #D8DEE9; + color: #2E3440; +} +.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { + margin-right: 0.5rem; +} +.p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator { + margin-bottom: 0.5rem; +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators { + background: rgba(0, 0, 0, 0.5); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button { + background: rgba(255, 255, 255, 0.4); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover { + background: rgba(255, 255, 255, 0.6); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #D8DEE9; + color: #2E3440; +} +.p-galleria .p-galleria-thumbnail-container { + background: rgba(0, 0, 0, 0.9); + padding: 1rem 0.25rem; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { + margin: 0.5rem; + background-color: transparent; + color: #ECEFF4; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { + background: rgba(255, 255, 255, 0.1); + color: #ECEFF4; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + transition: none; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} + +.p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-preview-indicator { + background-color: transparent; + color: #f8f9fa; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} + +.p-image-preview-container:hover > .p-image-preview-indicator { + background-color: rgba(0, 0, 0, 0.5); +} + +.p-image-toolbar { + padding: 1rem; +} + +.p-image-action.p-link { + color: #f8f9fa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-image-action.p-link:last-child { + margin-right: 0; +} +.p-image-action.p-link:hover { + color: #f8f9fa; + background-color: rgba(255, 255, 255, 0.1); +} +.p-image-action.p-link i { + font-size: 1.5rem; +} + +.p-avatar { + background-color: #E5E9F0; + border-radius: 4px; +} +.p-avatar.p-avatar-lg { + width: 3rem; + height: 3rem; + font-size: 1.5rem; +} +.p-avatar.p-avatar-lg .p-avatar-icon { + font-size: 1.5rem; +} +.p-avatar.p-avatar-xl { + width: 4rem; + height: 4rem; + font-size: 2rem; +} +.p-avatar.p-avatar-xl .p-avatar-icon { + font-size: 2rem; +} + +.p-avatar-group .p-avatar { + border: 2px solid #ffffff; +} + +.p-chip { + background-color: #E5E9F0; + color: #4C566A; + border-radius: 16px; + padding: 0 0.5rem; +} +.p-chip .p-chip-text { + line-height: 1.5; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} +.p-chip .p-chip-icon { + margin-right: 0.5rem; +} +.p-chip img { + width: 2rem; + height: 2rem; + margin-left: -0.5rem; + margin-right: 0.5rem; +} +.p-chip .p-chip-remove-icon { + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-left: 0.5rem; +} +.p-chip .p-chip-remove-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} + +.p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + 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); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-scrolltop.p-link { + background: rgba(0, 0, 0, 0.7); +} +.p-scrolltop.p-link:hover { + background: rgba(0, 0, 0, 0.8); +} +.p-scrolltop .p-scrolltop-icon { + font-size: 1.5rem; + color: #ECEFF4; +} + +.p-skeleton { + background-color: #E5E9F0; + border-radius: 4px; +} +.p-skeleton:after { + background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); +} + +.p-tag { + background: #5E81AC; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 4px; +} +.p-tag.p-tag-success { + background-color: #7FA366; + color: #ffffff; +} +.p-tag.p-tag-info { + background-color: #639BB2; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #D08770; + color: #ffffff; +} +.p-tag.p-tag-danger { + background-color: #BF616A; + color: #ffffff; +} +.p-tag .p-tag-icon { + margin-right: 0.25rem; + font-size: 0.75rem; +} + +.p-inplace .p-inplace-display { + padding: 0.5rem 0.5rem; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #ffffff; + color: #4C566A; +} +.p-inplace .p-inplace-display:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; +} + +.p-progressbar { + border: 0 none; + height: 1.5rem; + background: #E5E9F0; + border-radius: 4px; +} +.p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #5E81AC; +} +.p-progressbar .p-progressbar-label { + color: #ffffff; + line-height: 1.5rem; +} + +.p-terminal { + background: #ffffff; + color: #4C566A; + border: 1px solid #E5E9F0; + padding: 1rem; +} +.p-terminal .p-terminal-input { + font-size: 1rem; + font-family: "Inter", sans-serif; +} + +.p-badge { + background: #5E81AC; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + min-width: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; +} +.p-badge.p-badge-secondary { + background-color: #4C566A; + color: #ffffff; +} +.p-badge.p-badge-success { + background-color: #7FA366; + color: #ffffff; +} +.p-badge.p-badge-info { + background-color: #639BB2; + color: #ffffff; +} +.p-badge.p-badge-warning { + background-color: #D08770; + color: #ffffff; +} +.p-badge.p-badge-danger { + background-color: #BF616A; + color: #ffffff; +} +.p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; +} +.p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; +} + +.p-tag { + background: #5E81AC; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 4px; +} +.p-tag.p-tag-success { + background-color: #7FA366; + color: #ffffff; +} +.p-tag.p-tag-info { + background-color: #639BB2; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #D08770; + color: #ffffff; +} +.p-tag.p-tag-danger { + background-color: #BF616A; + color: #ffffff; +} + +/* Customizations to the designer theme should be defined here */ +.p-inputtext:enabled:hover { + background-color: #ECEFF4; +} +.p-inputtext:enabled:focus { + background-color: #ffffff; +} + +.p-chips .p-chips-multiple-container:not(.p-disabled):hover { + background-color: #ECEFF4; +} +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-autocomplete .p-autocomplete-panel .p-autocomplete-item:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { + background-color: #ECEFF4; +} + +.p-dropdown:not(.p-disabled):hover { + background-color: #ECEFF4; +} + +.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-multiselect:not(.p-disabled):hover { + background-color: #ECEFF4; +} + +.p-button { + font-weight: 500; +} + +.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + background-color: #D8DEE9; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + border-color: transparent; +} + +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #D8DEE9; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + border-color: transparent; +} + +.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover:not(.p-disabled) .p-accordion-header-link:focus { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-datepicker table td > span.p-highlight { + color: #ffffff; + background: #5E81AC; +} +.p-datepicker table td > span.p-highlight:hover { + background-color: #81A1C1; + border: 2px solid #5E81AC; +} +.p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #ffffff; + background: #5E81AC; +} + +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-menubar .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-menu .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + border: 1px solid #5E81AC; +} +.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + border: 1px solid #5E81AC; +} + +.p-datatable .p-sortable-column:not(.p-highlight):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-datatable .p-sortable-column.p-highlight { + background-color: #D8DEE9; +} +.p-datatable .p-sortable-column.p-highlight:hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + outline: 1px solid #81A1C1; +} + +.p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #81A1C1; + color: #ffffff; + border: 2px solid #51749e; +} + +.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { + background: #ffffff; + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-treetable .p-sortable-column:not(.p-highlight):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-treetable .p-sortable-column.p-highlight { + background-color: #D8DEE9; +} +.p-treetable .p-sortable-column.p-highlight:hover { + background-color: #ffffff; + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-treetable .p-sortable-column:focus { + box-shadow: inset 0 0 0 0.2rem #C0D0E0; + outline: 0 none; +} +.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { + outline: 1px solid #81A1C1; +} + +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover { + box-shadow: inset 0 0 0 0.1rem #81A1C1; +} + +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #5E81AC; + color: #ffffff; +} + +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #5E81AC; + color: #ffffff; +} + +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #5E81AC; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #5E81AC; +} diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css new file mode 100644 index 0000000000..f74d004ecc --- /dev/null +++ b/public/themes/nano/theme.css @@ -0,0 +1,6009 @@ +:root { + --surface-a:#ffffff; + --surface-b:#f2f4f8; + --surface-c:#dde1e6; + --surface-d:#dee2e6; + --surface-e:#ffffff; + --surface-f:#ffffff; + --text-color:#343a3f; + --text-color-secondary:#697077; + --primary-color:#1174c0; + --primary-color-text:#ffffff; + --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --surface-0: #ffffff; + --surface-50: #eff0f0; + --surface-100: #dfe0e1; + --surface-200: #bfc1c4; + --surface-300: #9fa3a6; + --surface-400: #7f8489; + --surface-500: #5f656b; + --surface-600: #4c5156; + --surface-700: #393d40; + --surface-800: #26282b; + --surface-900: #131415; + --gray-50: #eff0f0; + --gray-100: #dfe0e1; + --gray-200: #bfc1c4; + --gray-300: #9fa3a6; + --gray-400: #7f8489; + --gray-500: #5f656b; + --gray-600: #4c5156; + --gray-700: #393d40; + --gray-800: #26282b; + --gray-900: #131415; + --content-padding:0.5rem; + --inline-spacing:0.5rem; + --border-radius:1px; + --surface-ground:#f2f4f8; + --surface-section:#ffffff; + --surface-card:#ffffff; + --surface-overlay:#ffffff; + --surface-border:#dee2e6; + --surface-hover:#dde1e6; + --maskbg: rgba(0, 0, 0, 0.4); + --focus-ring: 0 0 0 0.2rem #90c9f5; + color-scheme: light; +} + +* { + box-sizing: border-box; +} + +.p-component { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 1rem; + font-weight: normal; +} + +.p-component-overlay { + background-color: rgba(0, 0, 0, 0.4); + transition-duration: 0.2s; +} + +.p-disabled, .p-component:disabled { + opacity: 0.6; +} + +.p-error { + color: #d8222f; +} + +.p-text-secondary { + color: #697077; +} + +.pi { + font-size: 1rem; +} + +.p-link { + font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + border-radius: 1px; +} +.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} + +.p-component-overlay-enter { + animation: p-component-overlay-enter-animation 150ms forwards; +} + +.p-component-overlay-leave { + animation: p-component-overlay-leave-animation 150ms forwards; +} + +@keyframes p-component-overlay-enter-animation { + from { + background-color: transparent; + } + to { + background-color: var(--maskbg); + } +} +@keyframes p-component-overlay-leave-animation { + from { + background-color: var(--maskbg); + } + to { + background-color: transparent; + } +} + +:root { + --blue-50:#f4f9fd; + --blue-100:#c9e2f4; + --blue-200:#9ecbec; + --blue-300:#74b3e4; + --blue-400:#499cdb; + --blue-500:#1e85d3; + --blue-600:#1a71b3; + --blue-700:#155d94; + --blue-800:#114974; + --blue-900:#0c3554; + --green-50:#f5fbf7; + --green-100:#cfead7; + --green-200:#a9dab7; + --green-300:#84ca97; + --green-400:#5eb978; + --green-500:#38a958; + --green-600:#30904b; + --green-700:#27763e; + --green-800:#1f5d30; + --green-900:#164423; + --yellow-50:#fefcf5; + --yellow-100:#fbf0cf; + --yellow-200:#f9e4a8; + --yellow-300:#f6d982; + --yellow-400:#f3cd5b; + --yellow-500:#f0c135; + --yellow-600:#cca42d; + --yellow-700:#a88725; + --yellow-800:#846a1d; + --yellow-900:#604d15; + --cyan-50:#f4fcfe; + --cyan-100:#caf0fc; + --cyan-200:#a0e4fa; + --cyan-300:#75d9f8; + --cyan-400:#4bcdf5; + --cyan-500:#21c1f3; + --cyan-600:#1ca4cf; + --cyan-700:#1787aa; + --cyan-800:#126a86; + --cyan-900:#0d4d61; + --pink-50:#fdf6f6; + --pink-100:#f5d3d6; + --pink-200:#eeb0b5; + --pink-300:#e68e94; + --pink-400:#df6b74; + --pink-500:#d74853; + --pink-600:#b73d47; + --pink-700:#97323a; + --pink-800:#76282e; + --pink-900:#561d21; + --indigo-50:#f3f6fc; + --indigo-100:#c6d4f0; + --indigo-200:#99b2e4; + --indigo-300:#6b90d8; + --indigo-400:#3e6ecc; + --indigo-500:#114cc0; + --indigo-600:#0e41a3; + --indigo-700:#0c3586; + --indigo-800:#092a6a; + --indigo-900:#071e4d; + --teal-50:#f3f9f8; + --teal-100:#c6e0df; + --teal-200:#98c7c5; + --teal-300:#6baeac; + --teal-400:#3d9692; + --teal-500:#107d79; + --teal-600:#0e6a67; + --teal-700:#0b5855; + --teal-800:#094543; + --teal-900:#063230; + --orange-50:#fef9f5; + --orange-100:#fbe4cf; + --orange-200:#f9cfa8; + --orange-300:#f6ba82; + --orange-400:#f3a45b; + --orange-500:#f08f35; + --orange-600:#cc7a2d; + --orange-700:#a86425; + --orange-800:#844f1d; + --orange-900:#603915; + --bluegray-50:#f8f8f8; + --bluegray-100:#dbddde; + --bluegray-200:#bfc2c5; + --bluegray-300:#a2a6ab; + --bluegray-400:#868b91; + --bluegray-500:#697077; + --bluegray-600:#595f65; + --bluegray-700:#4a4e53; + --bluegray-800:#3a3e41; + --bluegray-900:#2a2d30; + --purple-50:#f9f6ff; + --purple-100:#e3d3fd; + --purple-200:#ccb1fc; + --purple-300:#b68efb; + --purple-400:#9f6cf9; + --purple-500:#8949f8; + --purple-600:#743ed3; + --purple-700:#6033ae; + --purple-800:#4b2888; + --purple-900:#371d63; + --red-50:#fff4f5; + --red-100:#ffccce; + --red-200:#ffa4a7; + --red-300:#ff7c80; + --red-400:#ff5359; + --red-500:#ff2b32; + --red-600:#d9252b; + --red-700:#b31e23; + --red-800:#8c181c; + --red-900:#661114; + --primary-50:#f3f8fc; + --primary-100:#c6def0; + --primary-200:#99c3e4; + --primary-300:#6ba9d8; + --primary-400:#3e8ecc; + --primary-500:#1174c0; + --primary-600:#0e63a3; + --primary-700:#0c5186; + --primary-800:#09406a; + --primary-900:#072e4d; +} + +.p-autocomplete .p-autocomplete-loader { + right: 0.25rem; +} +.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 2.607rem; +} +.p-autocomplete .p-autocomplete-multiple-container { + padding: 0.125rem 0.25rem; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { + border-color: #1174c0; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0.125rem 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 1rem; + color: #343a3f; + padding: 0; + margin: 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.125rem 0.25rem; + margin-right: 0.5rem; + background: #44A1D9; + color: #ffffff; + border-radius: 1px; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; +} +.p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #d8222f; +} + +.p-autocomplete-panel { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + 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-autocomplete-panel .p-autocomplete-items { + padding: 0.25rem 0; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 0; + padding: 0.25rem 0.5rem; + border: 0 none; + color: #343a3f; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { + color: #343a3f; + background: #dde1e6; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.25rem 0.5rem; + color: #343a3f; + background: #ffffff; + font-weight: 600; +} + +.p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #d8222f; +} + +.p-datepicker { + padding: 0.25rem; + background: #ffffff; + color: #343a3f; + border: 1px solid #a5acb3; + border-radius: 1px; +} +.p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 0 none; + 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-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; +} +.p-datepicker .p-datepicker-header { + padding: 0.5rem; + color: #343a3f; + background: #ffffff; + font-weight: 600; + margin: 0; + border-bottom: 1px solid #dee2e6; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev, +.p-datepicker .p-datepicker-header .p-datepicker-next { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 1rem; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #343a3f; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; +} +.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: #1174c0; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + margin-right: 0.5rem; +} +.p-datepicker table { + font-size: 1rem; + margin: 0.25rem 0; +} +.p-datepicker table th { + padding: 0.5rem; +} +.p-datepicker table th > span { + width: 1.75rem; + height: 1.75rem; +} +.p-datepicker table td { + padding: 0.5rem; +} +.p-datepicker table td > span { + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + transition: box-shadow 0.2s; + border: 1px solid transparent; +} +.p-datepicker table td > span.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-datepicker table td > span:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-datepicker table td.p-datepicker-today > span { + background: #a5acb3; + color: #343a3f; + border-color: transparent; +} +.p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-datepicker .p-datepicker-buttonbar { + padding: 0.5rem 0; + border-top: 1px solid #dee2e6; +} +.p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; +} +.p-datepicker .p-timepicker { + border-top: 1px solid #dee2e6; + padding: 0.5rem; +} +.p-datepicker .p-timepicker button { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datepicker .p-timepicker button:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-datepicker .p-timepicker button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-datepicker .p-timepicker button:last-child { + margin-top: 0.2em; +} +.p-datepicker .p-timepicker span { + font-size: 1rem; +} +.p-datepicker .p-timepicker > div { + padding: 0 0.5rem; +} +.p-datepicker.p-datepicker-timeonly .p-timepicker { + border-top: 0 none; +} +.p-datepicker .p-monthpicker { + margin: 0.25rem 0; +} +.p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 1px; +} +.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-datepicker .p-yearpicker { + margin: 0.25rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 1px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #dee2e6; + padding-right: 0.25rem; + padding-left: 0.25rem; + padding-top: 0; + padding-bottom: 0; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { + padding-left: 0; +} +.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: #dde1e6; +} +.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #dde1e6; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #dde1e6; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} + +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} +.p-cascadeselect { + background: #ffffff; + border: 1px solid #a5acb3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 1px; +} +.p-cascadeselect:not(.p-disabled):hover { + border-color: #1174c0; +} +.p-cascadeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.25rem 0.25rem; +} +.p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #697077; +} +.p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #697077; + width: 2.357rem; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} +.p-cascadeselect.p-invalid.p-component { + border-color: #d8222f; +} + +.p-cascadeselect-panel { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + 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-cascadeselect-panel .p-cascadeselect-items { + padding: 0.25rem 0; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 0; + border: 0 none; + color: #343a3f; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.25rem 0.5rem; +} +.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 #90c9f5; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + color: #343a3f; + background: #dde1e6; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { + font-size: 0.875rem; +} + +.p-input-filled .p-cascadeselect { + background: #f2f4f8; +} +.p-input-filled .p-cascadeselect:not(.p-disabled):hover { + background-color: #f2f4f8; +} +.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-checkbox { + width: 14px; + height: 14px; +} +.p-checkbox .p-checkbox-box { + border: 2px solid #a5acb3; + background: #ffffff; + width: 14px; + height: 14px; + color: #343a3f; + border-radius: 1px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 12px; +} +.p-checkbox .p-checkbox-box.p-highlight { + border-color: #1174c0; + background: #1174c0; +} +.p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + border-color: #0e5d9a; + background: #0e5d9a; + color: #ffffff; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #1174c0; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #0e5d9a; + background: #0e5d9a; + color: #ffffff; +} +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: #d8222f; +} + +.p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f2f4f8; +} +.p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + background: #1174c0; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f2f4f8; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #0e5d9a; +} + +.p-chips .p-chips-multiple-container { + padding: 0.125rem 0.25rem; +} +.p-chips .p-chips-multiple-container:not(.p-disabled):hover { + border-color: #1174c0; +} +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-chips .p-chips-multiple-container .p-chips-token { + padding: 0.125rem 0.25rem; + margin-right: 0.5rem; + background: #44A1D9; + color: #ffffff; + border-radius: 1px; +} +.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.5rem; +} +.p-chips .p-chips-multiple-container .p-chips-input-token { + padding: 0.125rem 0; +} +.p-chips .p-chips-multiple-container .p-chips-input-token input { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 1rem; + color: #343a3f; + padding: 0; + margin: 0; +} +.p-chips.p-invalid.p-component > .p-inputtext { + border-color: #d8222f; +} + +.p-colorpicker-preview { + width: 2rem; + height: 2rem; +} + +.p-colorpicker-panel { + background: #323232; + border: 1px solid #191919; +} +.p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; +} + +.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 { + background: #ffffff; + border: 1px solid #a5acb3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 1px; +} +.p-dropdown:not(.p-disabled):hover { + border-color: #1174c0; +} +.p-dropdown:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-dropdown.p-dropdown-clearable .p-dropdown-label { + padding-right: 1.25rem; +} +.p-dropdown .p-dropdown-label { + background: transparent; + border: 0 none; +} +.p-dropdown .p-dropdown-label.p-placeholder { + color: #697077; +} +.p-dropdown .p-dropdown-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-dropdown .p-dropdown-trigger { + background: transparent; + color: #697077; + width: 2.357rem; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} +.p-dropdown .p-dropdown-clear-icon { + color: #697077; + right: 2.357rem; +} +.p-dropdown.p-invalid.p-component { + border-color: #d8222f; +} + +.p-dropdown-panel { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + 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-panel .p-dropdown-header { + padding: 0.25rem 0.5rem; + border-bottom: 0 none; + color: #343a3f; + background: #f2f4f8; + margin: 0; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter { + padding-right: 1.25rem; + margin-right: -1.25rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { + right: 0.25rem; + color: #697077; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { + padding-right: 2.5rem; + margin-right: -2.5rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { + right: 1.5rem; +} +.p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 0; + padding: 0.25rem 0.5rem; + border: 0 none; + color: #343a3f; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + color: #343a3f; + background: #dde1e6; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { + margin: 0; + padding: 0.25rem 0.5rem; + color: #343a3f; + background: #ffffff; + font-weight: 600; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.25rem 0.5rem; + color: #343a3f; + background: transparent; +} + +.p-input-filled .p-dropdown { + background: #f2f4f8; +} +.p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: #f2f4f8; +} +.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-editor-container .p-editor-toolbar { + background: #f2f4f8; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #697077; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #697077; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #697077; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + 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); + border-radius: 1px; + padding: 0.25rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #343a3f; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #343a3f; + background: #dde1e6; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.25rem 0.5rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dee2e6; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #343a3f; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #343a3f; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #343a3f; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #343a3f; +} +.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: #1174c0; +} +.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: #1174c0; +} +.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: #1174c0; +} +.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: #1174c0; +} + +.p-inputgroup-addon { + background: #dde1e6; + color: #697077; + border-top: 1px solid #a5acb3; + border-left: 1px solid #a5acb3; + border-bottom: 1px solid #a5acb3; + padding: 0.25rem 0.25rem; + min-width: 2.357rem; +} +.p-inputgroup-addon:last-child { + border-right: 1px solid #a5acb3; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { + border-radius: 0; + margin: 0; +} +.p-inputgroup > .p-component + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { + border-left: 0 none; +} +.p-inputgroup > .p-component:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { + z-index: 1; +} +.p-inputgroup > .p-component:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { + z-index: 1; +} + +.p-inputgroup-addon:first-child, +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; +} + +.p-inputgroup .p-float-label:first-child input { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; +} + +.p-inputgroup-addon:last-child, +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext { + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} + +.p-inputgroup .p-float-label:last-child input { + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} + +.p-fluid .p-inputgroup .p-button { + width: auto; +} +.p-fluid .p-inputgroup .p-button.p-button-icon-only { + width: 2.357rem; +} + +.p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #d8222f; +} + +.p-inputswitch { + width: 2rem; + height: 1.155rem; +} +.p-inputswitch .p-inputswitch-slider { + background: #a5acb3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 30px; +} +.p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 0.825rem; + height: 0.825rem; + left: 0.165rem; + margin-top: -0.4125rem; + border-radius: 50%; + transition-duration: 0.2s; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + transform: translateX(0.825rem); +} +.p-inputswitch.p-focus .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #929ba3; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #1174c0; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; +} +.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #0f68ad; +} +.p-inputswitch.p-invalid .p-inputswitch-slider { + border-color: #d8222f; +} + +.p-inputtext { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 1rem; + color: #343a3f; + background: #ffffff; + padding: 0.25rem 0.25rem; + border: 1px solid #a5acb3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + appearance: none; + border-radius: 1px; +} +.p-inputtext:enabled:hover { + border-color: #1174c0; +} +.p-inputtext:enabled:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-inputtext.p-invalid.p-component { + border-color: #d8222f; +} +.p-inputtext.p-inputtext-sm { + font-size: 0.875rem; + padding: 0.21875rem 0.21875rem; +} +.p-inputtext.p-inputtext-lg { + font-size: 1.25rem; + padding: 0.3125rem 0.3125rem; +} + +.p-float-label > label { + left: 0.25rem; + color: #697077; + transition-duration: 0.2s; +} + +.p-float-label > label.p-error { + color: #d8222f; +} + +.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.25rem; + color: #697077; +} + +.p-input-icon-left > .p-inputtext { + padding-left: 1.5rem; +} + +.p-input-icon-left.p-float-label > label { + left: 1.5rem; +} + +.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.25rem; + color: #697077; +} + +.p-input-icon-right > .p-inputtext { + padding-right: 1.5rem; +} + +::-webkit-input-placeholder { + color: #697077; +} + +:-moz-placeholder { + color: #697077; +} + +::-moz-placeholder { + color: #697077; +} + +:-ms-input-placeholder { + color: #697077; +} + +.p-input-filled .p-inputtext { + background-color: #f2f4f8; +} +.p-input-filled .p-inputtext:enabled:hover { + background-color: #f2f4f8; +} +.p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; +} + +.p-inputtext-sm .p-inputtext { + font-size: 0.875rem; + padding: 0.21875rem 0.21875rem; +} + +.p-inputtext-lg .p-inputtext { + font-size: 1.25rem; + padding: 0.3125rem 0.3125rem; +} + +.p-listbox { + background: #ffffff; + color: #343a3f; + border: 1px solid #a5acb3; + border-radius: 1px; +} +.p-listbox .p-listbox-header { + padding: 0.25rem 0.5rem; + border-bottom: 0 none; + color: #343a3f; + background: #f2f4f8; + margin: 0; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-listbox .p-listbox-header .p-listbox-filter { + padding-right: 1.25rem; +} +.p-listbox .p-listbox-header .p-listbox-filter-icon { + right: 0.25rem; + color: #697077; +} +.p-listbox .p-listbox-list { + padding: 0.25rem 0; +} +.p-listbox .p-listbox-list .p-listbox-item { + margin: 0; + padding: 0.25rem 0.5rem; + border: 0 none; + color: #343a3f; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-listbox .p-listbox-list .p-listbox-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-listbox .p-listbox-list .p-listbox-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.25rem 0.5rem; + color: #343a3f; + background: #ffffff; + font-weight: 600; +} +.p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.25rem 0.5rem; + color: #343a3f; + background: transparent; +} +.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #343a3f; + background: #dde1e6; +} +.p-listbox.p-invalid { + border-color: #d8222f; +} + +.p-mention-panel { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + 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-mention-panel .p-mention-items { + padding: 0.25rem 0; +} +.p-mention-panel .p-mention-items .p-mention-item { + margin: 0; + padding: 0.25rem 0.5rem; + border: 0 none; + color: #343a3f; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-mention-panel .p-mention-items .p-mention-item:hover { + color: #343a3f; + background: #dde1e6; +} +.p-mention-panel .p-mention-items .p-mention-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} + +.p-multiselect { + background: #ffffff; + border: 1px solid #a5acb3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 1px; +} +.p-multiselect:not(.p-disabled):hover { + border-color: #1174c0; +} +.p-multiselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.25rem; +} +.p-multiselect .p-multiselect-label { + padding: 0.25rem 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-multiselect .p-multiselect-label.p-placeholder { + color: #697077; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.125rem 0.25rem; + margin-right: 0.5rem; + background: #44A1D9; + color: #ffffff; + border-radius: 1px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} +.p-multiselect .p-multiselect-trigger { + background: transparent; + color: #697077; + width: 2.357rem; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} +.p-multiselect .p-multiselect-clear-icon { + color: #697077; + right: 2.357rem; +} +.p-multiselect.p-invalid.p-component { + border-color: #d8222f; +} + +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.125rem 0.25rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { + padding: 0.25rem 0.25rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.25rem; +} + +.p-multiselect-panel { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + 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-multiselect-panel .p-multiselect-header { + padding: 0.25rem 0.5rem; + border-bottom: 0 none; + color: #343a3f; + background: #f2f4f8; + margin: 0; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.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.25rem; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { + right: 0.25rem; + color: #697077; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-multiselect-panel .p-multiselect-items { + padding: 0.25rem 0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 0; + padding: 0.25rem 0.5rem; + border: 0 none; + color: #343a3f; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + color: #343a3f; + background: #dde1e6; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { + margin-right: 0.5rem; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { + margin: 0; + padding: 0.25rem 0.5rem; + color: #343a3f; + background: #ffffff; + font-weight: 600; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.25rem 0.5rem; + color: #343a3f; + background: transparent; +} + +.p-input-filled .p-multiselect { + background: #f2f4f8; +} +.p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: #f2f4f8; +} +.p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-password.p-invalid.p-component > .p-inputtext { + border-color: #d8222f; +} + +.p-password-panel { + padding: 0.5rem; + background: #ffffff; + color: #343a3f; + border: 0 none; + 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); + border-radius: 1px; +} +.p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #dee2e6; +} +.p-password-panel .p-password-meter .p-password-strength.weak { + background: #d8222f; +} +.p-password-panel .p-password-meter .p-password-strength.medium { + background: #f0c135; +} +.p-password-panel .p-password-meter .p-password-strength.strong { + background: #207f3b; +} + +.p-radiobutton { + width: 14px; + height: 14px; +} +.p-radiobutton .p-radiobutton-box { + border: 2px solid #a5acb3; + background: #ffffff; + width: 14px; + height: 14px; + color: #343a3f; + 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: #1174c0; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 8px; + height: 8px; + transition-duration: 0.2s; + background-color: #ffffff; +} +.p-radiobutton .p-radiobutton-box.p-highlight { + border-color: #1174c0; + background: #1174c0; +} +.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + border-color: #0e5d9a; + background: #0e5d9a; + color: #ffffff; +} +.p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #d8222f; +} +.p-radiobutton:focus { + outline: 0 none; +} + +.p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #f2f4f8; +} +.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f2f4f8; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #1174c0; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #0e5d9a; +} + +.p-rating { + gap: 0.5rem; +} +.p-rating .p-rating-item .p-rating-icon { + color: #343a3f; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + font-size: 1.143rem; +} +.p-rating .p-rating-item .p-rating-icon.p-rating-cancel { + color: #e74c3c; +} +.p-rating .p-rating-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #1174c0; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #1174c0; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #c0392b; +} + +.p-selectbutton .p-button { + background: #ffffff; + border: 1px solid #a5acb3; + color: #343a3f; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #697077; +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #dde1e6; + border-color: #a5acb3; + color: #343a3f; +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + color: #697077; +} +.p-selectbutton .p-button.p-highlight { + background: #1174c0; + border-color: #1174c0; + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight:hover { + background: #0f68ad; + border-color: #0f68ad; + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #ffffff; +} +.p-selectbutton.p-invalid > .p-button { + border-color: #d8222f; +} + +.p-slider { + background: #dee2e6; + border: 0 none; + border-radius: 1px; +} +.p-slider.p-slider-horizontal { + height: 0.286rem; +} +.p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -0.5715rem; + margin-left: -0.5715rem; +} +.p-slider.p-slider-vertical { + width: 0.286rem; +} +.p-slider.p-slider-vertical .p-slider-handle { + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; +} +.p-slider .p-slider-handle { + height: 1.143rem; + width: 1.143rem; + background: #ffffff; + border: 2px solid #1174c0; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-slider .p-slider-handle:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-slider .p-slider-range { + background: #1174c0; +} +.p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #1174c0; + border-color: #1174c0; +} + +.p-treeselect { + background: #ffffff; + border: 1px solid #a5acb3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 1px; +} +.p-treeselect:not(.p-disabled):hover { + border-color: #1174c0; +} +.p-treeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; +} +.p-treeselect .p-treeselect-label { + padding: 0.25rem 0.25rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-treeselect .p-treeselect-label.p-placeholder { + color: #697077; +} +.p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.125rem 0.25rem; + margin-right: 0.5rem; + background: #dee2e6; + color: #343a3f; + border-radius: 16px; +} +.p-treeselect .p-treeselect-trigger { + background: transparent; + color: #697077; + width: 2.357rem; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} +.p-treeselect.p-invalid.p-component { + border-color: #d8222f; +} + +.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.125rem 0.25rem; +} + +.p-treeselect-panel { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + 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-treeselect-panel .p-treeselect-header { + padding: 0.25rem 0.5rem; + border-bottom: 0 none; + color: #343a3f; + background: #f2f4f8; + margin: 0; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container { + margin-right: 0.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter { + padding-right: 1.25rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon { + right: 0.25rem; + color: #697077; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter { + padding-right: 2.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon { + right: 1.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-tree { + border: 0 none; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { + padding: 0.25rem 0.5rem; + color: #343a3f; + background: transparent; +} + +.p-input-filled .p-treeselect { + background: #f2f4f8; +} +.p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f2f4f8; +} +.p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-togglebutton.p-button { + background: #ffffff; + border: 1px solid #a5acb3; + color: #343a3f; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-togglebutton.p-button .p-button-icon-left, +.p-togglebutton.p-button .p-button-icon-right { + color: #697077; +} +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #dde1e6; + border-color: #a5acb3; + color: #343a3f; +} +.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 { + color: #697077; +} +.p-togglebutton.p-button.p-highlight { + background: #1174c0; + border-color: #1174c0; + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight .p-button-icon-left, +.p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight:hover { + background: #0f68ad; + border-color: #0f68ad; + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #ffffff; +} +.p-togglebutton.p-button.p-invalid > .p-button { + border-color: #d8222f; +} + +.p-button { + color: #ffffff; + background: #1174c0; + border: 1px solid #1174c0; + padding: 0.25rem 0.5rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 1px; +} +.p-button:enabled:hover, .p-button:not(button):not(a):not(.p-disabled):hover { + background: #0f68ad; + color: #ffffff; + border-color: #0f68ad; +} +.p-button:enabled:active, .p-button:not(button):not(a):not(.p-disabled):active { + background: #0e5d9a; + color: #ffffff; + border-color: #0e5d9a; +} +.p-button.p-button-outlined { + background-color: transparent; + color: #1174c0; + border: 1px solid; +} +.p-button.p-button-outlined:enabled:hover, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(17, 116, 192, 0.04); + color: #1174c0; + border: 1px solid; +} +.p-button.p-button-outlined:enabled:active, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(17, 116, 192, 0.16); + color: #1174c0; + border: 1px solid; +} +.p-button.p-button-outlined.p-button-plain { + color: #697077; + border-color: #697077; +} +.p-button.p-button-outlined.p-button-plain:enabled:hover, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: #dde1e6; + color: #697077; +} +.p-button.p-button-outlined.p-button-plain:enabled:active, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: #dee2e6; + color: #697077; +} +.p-button.p-button-text { + background-color: transparent; + color: #1174c0; + border-color: transparent; +} +.p-button.p-button-text:enabled:hover, .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(17, 116, 192, 0.04); + color: #1174c0; + border-color: transparent; +} +.p-button.p-button-text:enabled:active, .p-button.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(17, 116, 192, 0.16); + color: #1174c0; + border-color: transparent; +} +.p-button.p-button-text.p-button-plain { + color: #697077; +} +.p-button.p-button-text.p-button-plain:enabled:hover, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: #dde1e6; + color: #697077; +} +.p-button.p-button-text.p-button-plain:enabled:active, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: #dee2e6; + color: #697077; +} +.p-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-button .p-button-label { + transition-duration: 0.2s; +} +.p-button .p-button-icon-left { + margin-right: 0.5rem; +} +.p-button .p-button-icon-right { + margin-left: 0.5rem; +} +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} +.p-button .p-badge { + margin-left: 0.5rem; + min-width: 1rem; + height: 1rem; + line-height: 1rem; + color: #1174c0; + background-color: #ffffff; +} +.p-button.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} +.p-button.p-button-rounded { + border-radius: 2rem; +} +.p-button.p-button-icon-only { + width: 2.357rem; + padding: 0.25rem 0; +} +.p-button.p-button-icon-only .p-button-icon-left, +.p-button.p-button-icon-only .p-button-icon-right { + margin: 0; +} +.p-button.p-button-icon-only.p-button-rounded { + border-radius: 50%; + height: 2.357rem; +} +.p-button.p-button-sm { + font-size: 0.875rem; + padding: 0.21875rem 0.4375rem; +} +.p-button.p-button-sm .p-button-icon { + font-size: 0.875rem; +} +.p-button.p-button-lg { + font-size: 1.25rem; + padding: 0.3125rem 0.625rem; +} +.p-button.p-button-lg .p-button-icon { + font-size: 1.25rem; +} +.p-button.p-button-loading-label-only.p-button-loading-left .p-button-label { + margin-left: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-right .p-button-label { + margin-right: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-top .p-button-label { + margin-top: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label { + margin-bottom: 0.5rem; +} +.p-button.p-button-loading-label-only .p-button-loading-icon { + margin: 0; +} + +.p-fluid .p-button { + width: 100%; +} +.p-fluid .p-button-icon-only { + width: 2.357rem; +} +.p-fluid .p-buttonset { + display: flex; +} +.p-fluid .p-buttonset .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 { + color: #ffffff; + background: #697077; + border: 1px solid #697077; +} +.p-button.p-button-secondary:enabled:hover, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary:enabled:hover, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover { + background: #5f656b; + color: #ffffff; + border-color: #5f656b; +} +.p-button.p-button-secondary:enabled:focus, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-secondary:enabled:focus, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #c2c6c9; +} +.p-button.p-button-secondary:enabled:active, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary:enabled:active, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active { + background: #545a5f; + color: #ffffff; + border-color: #545a5f; +} +.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 { + background-color: transparent; + color: #697077; + border: 1px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(105, 112, 119, 0.04); + color: #697077; + border: 1px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(105, 112, 119, 0.16); + color: #697077; + 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 { + background-color: transparent; + color: #697077; + border-color: transparent; +} +.p-button.p-button-secondary.p-button-text:enabled:hover, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(105, 112, 119, 0.04); + border-color: transparent; + color: #697077; +} +.p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(105, 112, 119, 0.16); + border-color: transparent; + color: #697077; +} + +.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 { + color: #ffffff; + background: #107d79; + border: 1px solid #107d79; +} +.p-button.p-button-info:enabled:hover, .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info:enabled:hover, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover { + background: #0e716d; + color: #ffffff; + border-color: #0e716d; +} +.p-button.p-button-info:enabled:focus, .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-info:enabled:focus, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #7ceeea; +} +.p-button.p-button-info:enabled:active, .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info:enabled:active, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active { + background: #0d6461; + color: #ffffff; + border-color: #0d6461; +} +.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 { + background-color: transparent; + color: #107d79; + border: 1px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:hover, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(16, 125, 121, 0.04); + color: #107d79; + border: 1px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:active, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(16, 125, 121, 0.16); + color: #107d79; + 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 { + background-color: transparent; + color: #107d79; + border-color: transparent; +} +.p-button.p-button-info.p-button-text:enabled:hover, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(16, 125, 121, 0.04); + border-color: transparent; + color: #107d79; +} +.p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(16, 125, 121, 0.16); + border-color: transparent; + color: #107d79; +} + +.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 { + color: #ffffff; + background: #207f3b; + border: 1px solid #207f3b; +} +.p-button.p-button-success:enabled:hover, .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success:enabled:hover, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover { + background: #1d7235; + color: #ffffff; + border-color: #1d7235; +} +.p-button.p-button-success:enabled:focus, .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-success:enabled:focus, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #8fe3a7; +} +.p-button.p-button-success:enabled:active, .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success:enabled:active, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active { + background: #1a662f; + color: #ffffff; + border-color: #1a662f; +} +.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 { + background-color: transparent; + color: #207f3b; + border: 1px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:hover, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(32, 127, 59, 0.04); + color: #207f3b; + border: 1px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:active, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(32, 127, 59, 0.16); + color: #207f3b; + 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 { + background-color: transparent; + color: #207f3b; + border-color: transparent; +} +.p-button.p-button-success.p-button-text:enabled:hover, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(32, 127, 59, 0.04); + border-color: transparent; + color: #207f3b; +} +.p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(32, 127, 59, 0.16); + border-color: transparent; + color: #207f3b; +} + +.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 { + color: #212529; + background: #f0c135; + border: 1px solid #f0c135; +} +.p-button.p-button-warning:enabled:hover, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning:enabled:hover, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover { + background: #eeb91a; + color: #212529; + border-color: #eeb91a; +} +.p-button.p-button-warning:enabled:focus, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-warning:enabled:focus, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #f9e6ae; +} +.p-button.p-button-warning:enabled:active, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning:enabled:active, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active { + background: #daa710; + color: #212529; + border-color: #daa710; +} +.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 { + background-color: transparent; + color: #f0c135; + border: 1px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:hover, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(240, 193, 53, 0.04); + color: #f0c135; + border: 1px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:active, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(240, 193, 53, 0.16); + color: #f0c135; + 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 { + background-color: transparent; + color: #f0c135; + border-color: transparent; +} +.p-button.p-button-warning.p-button-text:enabled:hover, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(240, 193, 53, 0.04); + border-color: transparent; + color: #f0c135; +} +.p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(240, 193, 53, 0.16); + border-color: transparent; + color: #f0c135; +} + +.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 { + color: #ffffff; + background: #8949f8; + border: 1px solid #8949f8; +} +.p-button.p-button-help:enabled:hover, .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help:enabled:hover, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover { + background: #752af7; + color: #ffffff; + border-color: #752af7; +} +.p-button.p-button-help:enabled:focus, .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-help:enabled:focus, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #d0b6fc; +} +.p-button.p-button-help:enabled:active, .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help:enabled:active, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active { + background: #610bf6; + color: #ffffff; + border-color: #610bf6; +} +.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 { + background-color: transparent; + color: #8949f8; + border: 1px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:hover, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(137, 73, 248, 0.04); + color: #8949f8; + border: 1px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:active, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(137, 73, 248, 0.16); + color: #8949f8; + 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 { + background-color: transparent; + color: #8949f8; + border-color: transparent; +} +.p-button.p-button-help.p-button-text:enabled:hover, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(137, 73, 248, 0.04); + border-color: transparent; + color: #8949f8; +} +.p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(137, 73, 248, 0.16); + border-color: transparent; + color: #8949f8; +} + +.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 { + color: #ffffff; + background: #d8222f; + border: 1px solid #d8222f; +} +.p-button.p-button-danger:enabled:hover, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger:enabled:hover, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover { + background: #c21f2a; + color: #ffffff; + border-color: #c21f2a; +} +.p-button.p-button-danger:enabled:focus, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-danger:enabled:focus, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #f1a5ab; +} +.p-button.p-button-danger:enabled:active, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger:enabled:active, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active { + background: #ad1b26; + color: #ffffff; + border-color: #ad1b26; +} +.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 { + background-color: transparent; + color: #d8222f; + border: 1px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:hover, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(216, 34, 47, 0.04); + color: #d8222f; + border: 1px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:active, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(216, 34, 47, 0.16); + color: #d8222f; + 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 { + background-color: transparent; + color: #d8222f; + border-color: transparent; +} +.p-button.p-button-danger.p-button-text:enabled:hover, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(216, 34, 47, 0.04); + border-color: transparent; + color: #d8222f; +} +.p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(216, 34, 47, 0.16); + border-color: transparent; + color: #d8222f; +} + +.p-button.p-button-link { + color: #0e5d9a; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover { + background: transparent; + color: #0e5d9a; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-label, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus, .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus { + background: transparent; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: transparent; +} +.p-button.p-button-link:enabled:active, .p-button.p-button-link:not(button):not(a):not(.p-disabled):active { + background: transparent; + color: #0e5d9a; + border-color: transparent; +} + +.p-splitbutton { + border-radius: 1px; +} +.p-splitbutton.p-button-outlined > .p-button { + background-color: transparent; + color: #1174c0; + border: 1px solid; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(17, 116, 192, 0.04); + color: #1174c0; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(17, 116, 192, 0.16); + color: #1174c0; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button { + color: #697077; + border-color: #697077; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: #dde1e6; + color: #697077; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: #dee2e6; + color: #697077; +} +.p-splitbutton.p-button-text > .p-button { + background-color: transparent; + color: #1174c0; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(17, 116, 192, 0.04); + color: #1174c0; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(17, 116, 192, 0.16); + color: #1174c0; + border-color: transparent; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button { + color: #697077; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: #dde1e6; + color: #697077; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: #dee2e6; + color: #697077; +} +.p-splitbutton.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} +.p-splitbutton.p-button-rounded { + border-radius: 2rem; +} +.p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; +} +.p-splitbutton.p-button-sm > .p-button { + font-size: 0.875rem; + padding: 0.21875rem 0.4375rem; +} +.p-splitbutton.p-button-sm > .p-button .p-button-icon { + font-size: 0.875rem; +} +.p-splitbutton.p-button-lg > .p-button { + font-size: 1.25rem; + padding: 0.3125rem 0.625rem; +} +.p-splitbutton.p-button-lg > .p-button .p-button-icon { + font-size: 1.25rem; +} + +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button { + background-color: transparent; + color: #697077; + border: 1px solid; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(105, 112, 119, 0.04); + color: #697077; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(105, 112, 119, 0.16); + color: #697077; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button { + background-color: transparent; + color: #697077; + border-color: transparent; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(105, 112, 119, 0.04); + border-color: transparent; + color: #697077; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(105, 112, 119, 0.16); + border-color: transparent; + color: #697077; +} + +.p-splitbutton.p-button-info.p-button-outlined > .p-button { + background-color: transparent; + color: #107d79; + border: 1px solid; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(16, 125, 121, 0.04); + color: #107d79; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(16, 125, 121, 0.16); + color: #107d79; +} +.p-splitbutton.p-button-info.p-button-text > .p-button { + background-color: transparent; + color: #107d79; + border-color: transparent; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(16, 125, 121, 0.04); + border-color: transparent; + color: #107d79; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(16, 125, 121, 0.16); + border-color: transparent; + color: #107d79; +} + +.p-splitbutton.p-button-success.p-button-outlined > .p-button { + background-color: transparent; + color: #207f3b; + border: 1px solid; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(32, 127, 59, 0.04); + color: #207f3b; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(32, 127, 59, 0.16); + color: #207f3b; +} +.p-splitbutton.p-button-success.p-button-text > .p-button { + background-color: transparent; + color: #207f3b; + border-color: transparent; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(32, 127, 59, 0.04); + border-color: transparent; + color: #207f3b; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(32, 127, 59, 0.16); + border-color: transparent; + color: #207f3b; +} + +.p-splitbutton.p-button-warning.p-button-outlined > .p-button { + background-color: transparent; + color: #f0c135; + border: 1px solid; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(240, 193, 53, 0.04); + color: #f0c135; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(240, 193, 53, 0.16); + color: #f0c135; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button { + background-color: transparent; + color: #f0c135; + border-color: transparent; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(240, 193, 53, 0.04); + border-color: transparent; + color: #f0c135; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(240, 193, 53, 0.16); + border-color: transparent; + color: #f0c135; +} + +.p-splitbutton.p-button-help.p-button-outlined > .p-button { + background-color: transparent; + color: #8949f8; + border: 1px solid; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(137, 73, 248, 0.04); + color: #8949f8; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(137, 73, 248, 0.16); + color: #8949f8; +} +.p-splitbutton.p-button-help.p-button-text > .p-button { + background-color: transparent; + color: #8949f8; + border-color: transparent; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(137, 73, 248, 0.04); + border-color: transparent; + color: #8949f8; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(137, 73, 248, 0.16); + border-color: transparent; + color: #8949f8; +} + +.p-splitbutton.p-button-danger.p-button-outlined > .p-button { + background-color: transparent; + color: #d8222f; + border: 1px solid; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(216, 34, 47, 0.04); + color: #d8222f; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(216, 34, 47, 0.16); + color: #d8222f; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button { + background-color: transparent; + color: #d8222f; + border-color: transparent; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(216, 34, 47, 0.04); + border-color: transparent; + color: #d8222f; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(216, 34, 47, 0.16); + border-color: transparent; + color: #d8222f; +} + +.p-speeddial-button.p-button.p-button-icon-only { + width: 2.75rem; + height: 2.75rem; +} +.p-speeddial-button.p-button.p-button-icon-only .p-button-icon { + font-size: 1rem; +} + +.p-speeddial-action { + width: 2.25rem; + height: 2.25rem; + background: #343a3f; + color: #fff; +} +.p-speeddial-action:hover { + background: #21272a; + color: #fff; +} + +.p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; +} + +.p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; +} + +.p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; +} + +.p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; +} +.p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; +} + +.p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); +} + +.p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin: 0.5rem; +} +.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-carousel .p-carousel-content .p-carousel-prev:focus, +.p-carousel .p-carousel-content .p-carousel-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-carousel .p-carousel-indicators { + padding: 1rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #dde1e6; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 0; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #dee2e6; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #44A1D9; + color: #ffffff; +} + +.p-datatable .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datatable .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datatable .p-datatable-header { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datatable .p-datatable-footer { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + font-weight: 600; + color: #343a3f; + background: #f2f4f8; + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + font-weight: 600; + color: #343a3f; + background: #f2f4f8; +} +.p-datatable .p-sortable-column .p-sortable-column-icon { + color: #697077; + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #ffffff; + background: #44A1D9; + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { + background: #dde1e6; + color: #343a3f; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #697077; +} +.p-datatable .p-sortable-column.p-highlight { + background: #f2f4f8; + color: #1174c0; +} +.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #1174c0; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover { + background: #dde1e6; + color: #1174c0; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #1174c0; +} +.p-datatable .p-sortable-column:focus { + box-shadow: inset 0 0 0 0.15rem #90c9f5; + outline: 0 none; +} +.p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #343a3f; + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + padding: 0.25rem 1rem; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { + margin-right: 0.5rem; +} +.p-datatable .p-datatable-tbody > tr > td > .p-column-title { + font-weight: 600; +} +.p-datatable .p-datatable-tbody > tr > td.p-highlight { + background: #44A1D9; + color: #ffffff; +} +.p-datatable .p-datatable-tbody > tr.p-highlight { + background: #44A1D9; + color: #ffffff; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #44A1D9; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #44A1D9; +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: #dde1e6; + color: #343a3f; +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus { + outline: 0.15rem solid #90c9f5; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover { + background: #dde1e6; + color: #343a3f; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus { + outline: 0.15rem solid #90c9f5; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: #dde1e6; + color: #343a3f; +} +.p-datatable .p-column-resizer-helper { + background: #1174c0; +} +.p-datatable .p-datatable-scrollable-header, +.p-datatable .p-datatable-scrollable-footer { + background: #f2f4f8; +} +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { + background-color: #f2f4f8; +} +.p-datatable .p-datatable-loading-icon { + font-size: 2rem; +} +.p-datatable.p-datatable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-footer { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-top { + border-width: 0 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-bottom { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + background: #fcfcfc; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #44A1D9; + color: #ffffff; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { + color: #ffffff; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { + color: #ffffff; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { + background: #fcfcfc; +} +.p-datatable.p-datatable-sm .p-datatable-header { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.125rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-lg .p-datatable-header { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 0.3125rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-footer { + padding: 1.25rem 1.25rem; +} + +.p-datatable-drag-selection-helper { + background: rgba(17, 116, 192, 0.16); +} + +.p-dataview .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-dataview .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-dataview .p-dataview-header { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-dataview .p-dataview-content { + background: #ffffff; + color: #343a3f; + border: 0 none; + padding: 0; +} +.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { + border: solid #dde1e6; + border-width: 0 0 1px 0; +} +.p-dataview .p-dataview-footer { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; +} +.p-dataview .p-dataview-loading-icon { + font-size: 2rem; +} + +.p-datascroller .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datascroller .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datascroller .p-datascroller-header { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datascroller .p-datascroller-content { + background: #ffffff; + color: #343a3f; + border: 0 none; + padding: 0; +} +.p-datascroller.p-datascroller-inline .p-datascroller-list > li { + border: solid #dde1e6; + border-width: 0 0 1px 0; +} +.p-datascroller .p-datascroller-footer { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; +} + +.p-column-filter-row .p-column-filter-menu-button, +.p-column-filter-row .p-column-filter-clear-button { + margin-left: 0.5rem; +} + +.p-column-filter-menu-button { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-column-filter-menu-button:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: transparent; + color: #343a3f; +} +.p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { + background: #44A1D9; + color: #ffffff; +} +.p-column-filter-menu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} + +.p-column-filter-clear-button { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-column-filter-clear-button:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-column-filter-clear-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} + +.p-column-filter-overlay { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + 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); + min-width: 12.5rem; +} +.p-column-filter-overlay .p-column-filter-row-items { + padding: 0.25rem 0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 0; + padding: 0.25rem 0.5rem; + border: 0 none; + color: #343a3f; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #343a3f; + background: #dde1e6; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; +} + +.p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.25rem 0.5rem; + border-bottom: 0 none; + color: #343a3f; + background: #f2f4f8; + margin: 0; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 0.5rem; + border-bottom: 1px solid #dee2e6; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { + margin-bottom: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-top: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint:last-child { + border-bottom: 0 none; +} +.p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0.5rem 1rem; +} +.p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 0.5rem; +} + +.fc { + /* FullCalendar 4 */ + /* FullCalendar 5 */ +} +.fc.fc-unthemed .fc-view-container th { + background: #f2f4f8; + border: 1px solid #dee2e6; + color: #343a3f; +} +.fc.fc-unthemed .fc-view-container td.fc-widget-content { + border: 1px solid #dee2e6; + color: #343a3f; +} +.fc.fc-unthemed .fc-view-container td.fc-head-container { + border: 1px solid #dee2e6; +} +.fc.fc-unthemed .fc-view-container .fc-view { + background: #ffffff; +} +.fc.fc-unthemed .fc-view-container .fc-row { + border-right: 1px solid #dee2e6; +} +.fc.fc-unthemed .fc-view-container .fc-event { + background: #0f68ad; + border: 1px solid #0f68ad; + color: #ffffff; +} +.fc.fc-unthemed .fc-view-container .fc-divider { + background: #f2f4f8; + border: 1px solid #dee2e6; +} +.fc.fc-unthemed .fc-toolbar .fc-button { + color: #ffffff; + background: #1174c0; + border: 1px solid #1174c0; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 1px; + display: flex; + align-items: center; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { + background: #0f68ad; + color: #ffffff; + border-color: #0f68ad; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { + background: #0e5d9a; + color: #ffffff; + border-color: #0e5d9a; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-unthemed .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #ffffff; + border: 1px solid #a5acb3; + color: #343a3f; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: #dde1e6; + border-color: #a5acb3; + color: #343a3f; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #1174c0; + border-color: #1174c0; + color: #ffffff; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #0f68ad; + border-color: #0f68ad; + color: #ffffff; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + z-index: 1; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} +.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { + border-color: #dee2e6; +} +.fc.fc-theme-standard .fc-view-harness th { + background: #f2f4f8; + border-color: #dee2e6; + color: #343a3f; +} +.fc.fc-theme-standard .fc-view-harness td { + color: #343a3f; + border-color: #dee2e6; +} +.fc.fc-theme-standard .fc-view-harness .fc-view { + background: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover { + background: none; + border: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { + border: 1px solid #dee2e6; + padding: 0.75rem; + background: #f2f4f8; + color: #343a3f; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + font-family: "PrimeIcons" !important; + font-size: 1rem; + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { + content: "\e90b"; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { + padding: 0.5rem; + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + border-top: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { + color: #ffffff; + background: #0f68ad; + border-color: #0f68ad; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { + color: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { + background: #0f68ad; + border-color: #0f68ad; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { + background: #dde1e6; + color: #343a3f; +} +.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { + background: #f2f4f8; +} +.fc.fc-theme-standard .fc-toolbar .fc-button { + color: #ffffff; + background: #1174c0; + border: 1px solid #1174c0; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 1px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { + background: #0f68ad; + color: #ffffff; + border-color: #0f68ad; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { + background: #0e5d9a; + color: #ffffff; + border-color: #0e5d9a; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:disabled { + opacity: 0.6; + color: #ffffff; + background: #1174c0; + border: 1px solid #1174c0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #ffffff; + border: 1px solid #a5acb3; + color: #343a3f; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: #dde1e6; + border-color: #a5acb3; + color: #343a3f; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #1174c0; + border-color: #1174c0; + color: #ffffff; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #0f68ad; + border-color: #0f68ad; + color: #ffffff; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + z-index: 1; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} +.fc.fc-theme-standard .fc-highlight { + color: #ffffff; + background: #44A1D9; +} + +.p-orderlist .p-orderlist-controls { + padding: 0.5rem; +} +.p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; +} +.p-orderlist .p-orderlist-header { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dee2e6; + padding: 0.75rem; + font-weight: 600; + border-bottom: 0 none; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-orderlist .p-orderlist-filter-container { + padding: 0.75rem; + background: #ffffff; + border: 1px solid #dee2e6; + border-bottom: 0 none; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input { + padding-right: 1.25rem; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon { + right: 0.25rem; + color: #697077; +} +.p-orderlist .p-orderlist-list { + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + padding: 0.25rem 0; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.25rem 0.5rem; + margin: 0; + border: 0 none; + color: #343a3f; + background: transparent; + transition: transform 0.2s, box-shadow 0.2s; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #dde1e6; + color: #343a3f; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #fcfcfc; +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #dde1e6; +} + +@media screen and (max-width: 769px) { + .p-orderlist { + flex-direction: column; + } + .p-orderlist .p-orderlist-controls { + padding: 0.5rem; + flex-direction: row; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-orderlist .p-orderlist-controls .p-button:last-child { + margin-right: 0; + } +} +.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #dde1e6; + color: #343a3f; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight { + background: #44A1D9; + color: #ffffff; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: #1b5c83; +} +.p-organizationchart .p-organizationchart-line-down { + background: #dee2e6; +} +.p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #dee2e6; + border-color: #dee2e6; +} +.p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #dee2e6; + border-color: #dee2e6; +} +.p-organizationchart .p-organizationchart-node-content { + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + padding: 0.5rem; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} + +.p-paginator { + background: #ffffff; + color: #697077; + border: solid #dde1e6; + border-width: 0; + padding: 0.5rem 1rem; + border-radius: 1px; +} +.p-paginator .p-paginator-first, +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; + color: #697077; + min-width: 2.357rem; + height: 2.357rem; + margin: 0.143rem; + transition: box-shadow 0.2s; + border-radius: 1px; +} +.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background: #dde1e6; + border-color: transparent; + color: #343a3f; +} +.p-paginator .p-paginator-first { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-paginator .p-paginator-last { + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; +} +.p-paginator .p-dropdown { + margin-left: 0.5rem; + height: 2.357rem; +} +.p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; +} +.p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; +} +.p-paginator .p-paginator-page-input .p-inputtext { + max-width: 2.357rem; +} +.p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #697077; + min-width: 2.357rem; + height: 2.357rem; + margin: 0.143rem; + padding: 0 0.5rem; +} +.p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #697077; + min-width: 2.357rem; + height: 2.357rem; + margin: 0.143rem; + transition: box-shadow 0.2s; + border-radius: 1px; +} +.p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: #44A1D9; + border-color: #44A1D9; + color: #ffffff; +} +.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: #dde1e6; + border-color: transparent; + color: #343a3f; +} + +.p-picklist .p-picklist-buttons { + padding: 0.5rem; +} +.p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; +} +.p-picklist .p-picklist-header { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dee2e6; + padding: 0.75rem; + font-weight: 600; + border-bottom: 0 none; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-picklist .p-picklist-filter-container { + padding: 0.75rem; + background: #ffffff; + border: 1px solid #dee2e6; + border-bottom: 0 none; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-input { + padding-right: 1.25rem; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-icon { + right: 0.25rem; + color: #697077; +} +.p-picklist .p-picklist-list { + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + padding: 0.25rem 0; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-picklist .p-picklist-list .p-picklist-item { + padding: 0.25rem 0.5rem; + margin: 0; + border: 0 none; + color: #343a3f; + background: transparent; + transition: transform 0.2s, box-shadow 0.2s; +} +.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #dde1e6; + color: #343a3f; +} +.p-picklist .p-picklist-list .p-picklist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #ffffff; + background: #44A1D9; +} + +@media screen and (max-width: 769px) { + .p-picklist { + flex-direction: column; + } + .p-picklist .p-picklist-buttons { + padding: 0.5rem; + flex-direction: row; + } + .p-picklist .p-picklist-buttons .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-picklist .p-picklist-buttons .p-button:last-child { + margin-right: 0; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before { + content: "\e930"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before { + content: "\e92c"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before { + content: "\e933"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before { + content: "\e92f"; + } +} +.p-tree { + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + padding: 0.5rem; + border-radius: 1px; +} +.p-tree .p-tree-container .p-treenode { + padding: 0.143rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 1px; + transition: box-shadow 0.2s; + padding: 0.25rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #697077; +} +.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 { + color: #343a3f; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: #44A1D9; + color: #ffffff; +} +.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: #ffffff; +} +.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: #ffffff; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { + background: #dde1e6; + color: #343a3f; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { + background: #dde1e6; + color: #343a3f; +} +.p-tree .p-tree-filter-container { + margin-bottom: 0.5rem; +} +.p-tree .p-tree-filter-container .p-tree-filter { + width: 100%; + padding-right: 1.25rem; +} +.p-tree .p-tree-filter-container .p-tree-filter-icon { + right: 0.25rem; + color: #697077; +} +.p-tree .p-treenode-children { + padding: 0 0 0 1rem; +} +.p-tree .p-tree-loading-icon { + font-size: 2rem; +} +.p-tree .p-treenode-droppoint { + height: 0.5rem; +} +.p-tree .p-treenode-droppoint.p-treenode-droppoint-active { + background: #2785bd; +} + +.p-treetable .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-treetable .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-treetable .p-treetable-header { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-treetable .p-treetable-footer { + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + font-weight: 600; + color: #343a3f; + background: #f2f4f8; + transition: box-shadow 0.2s; +} +.p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + font-weight: 600; + color: #343a3f; + background: #f2f4f8; +} +.p-treetable .p-sortable-column { + outline-color: #90c9f5; +} +.p-treetable .p-sortable-column .p-sortable-column-icon { + color: #697077; + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #ffffff; + background: #44A1D9; + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #dde1e6; + color: #343a3f; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #697077; +} +.p-treetable .p-sortable-column.p-highlight { + background: #f2f4f8; + color: #1174c0; +} +.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #1174c0; +} +.p-treetable .p-treetable-tbody > tr { + background: #ffffff; + color: #343a3f; + transition: box-shadow 0.2s; +} +.p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #dde1e6; + border-width: 0 0 1px 0; + padding: 0.25rem 1rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon { + color: #343a3f; +} +.p-treetable .p-treetable-tbody > tr:focus { + outline: 0.15rem solid #90c9f5; + outline-offset: -0.15rem; +} +.p-treetable .p-treetable-tbody > tr.p-highlight { + background: #44A1D9; + color: #ffffff; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { + color: #ffffff; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { + color: #ffffff; +} +.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: #dde1e6; + color: #343a3f; +} +.p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #343a3f; +} +.p-treetable .p-column-resizer-helper { + background: #1174c0; +} +.p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #f2f4f8; +} +.p-treetable .p-treetable-loading-icon { + font-size: 2rem; +} +.p-treetable.p-treetable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.875rem 0.875rem; +} +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.125rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-lg .p-treetable-header { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 0.3125rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-footer { + padding: 1.25rem 1.25rem; +} + +.p-timeline .p-timeline-event-marker { + border: 0 none; + border-radius: 50%; + width: 1rem; + height: 1rem; + background-color: #1174c0; +} +.p-timeline .p-timeline-event-connector { + background-color: #dee2e6; +} +.p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; +} +.p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; +} + +.p-accordion .p-accordion-header .p-accordion-header-link { + padding: 0.75rem; + border: 1px solid #dee2e6; + color: #343a3f; + background: #f2f4f8; + font-weight: 600; + border-radius: 1px; + transition: box-shadow 0.2s; +} +.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + margin-right: 0.5rem; +} +.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #dde1e6; + border-color: #dee2e6; + color: #343a3f; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #f2f4f8; + border-color: #dee2e6; + color: #343a3f; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-color: #dee2e6; + background: #dde1e6; + color: #343a3f; +} +.p-accordion .p-accordion-content { + padding: 0.5rem; + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-accordion .p-accordion-tab { + margin-bottom: 0; +} +.p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link { + border-radius: 0; +} +.p-accordion .p-accordion-tab .p-accordion-content { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link { + border-top: 0 none; +} +.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link, .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-top: 0 none; +} +.p-accordion .p-accordion-tab:first-child .p-accordion-header .p-accordion-header-link { + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link { + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content { + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} + +.p-card { + background: #ffffff; + color: #343a3f; + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + border-radius: 1px; +} +.p-card .p-card-body { + padding: 1rem; +} +.p-card .p-card-title { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.5rem; +} +.p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #697077; +} +.p-card .p-card-content { + padding: 1rem 0; +} +.p-card .p-card-footer { + padding: 1rem 0 0 0; +} + +.p-fieldset { + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + border-radius: 1px; +} +.p-fieldset .p-fieldset-legend { + padding: 0.75rem; + border: 1px solid #dee2e6; + color: #343a3f; + background: #f2f4f8; + font-weight: 600; + border-radius: 1px; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 0.75rem; + color: #343a3f; + border-radius: 1px; + transition: box-shadow 0.2s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + margin-right: 0.5rem; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #dde1e6; + border-color: #dee2e6; + color: #343a3f; +} +.p-fieldset .p-fieldset-content { + padding: 0.5rem; +} + +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 0.5rem 0; + padding: 0 0.5rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dee2e6; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 0.5rem; + padding: 0.5rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dee2e6; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + +.p-panel .p-panel-header { + border: 1px solid #dee2e6; + padding: 0.75rem; + background: #f2f4f8; + color: #343a3f; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-panel .p-panel-header .p-panel-title { + font-weight: 600; +} +.p-panel .p-panel-header .p-panel-header-icon { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-panel .p-panel-header .p-panel-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-panel.p-panel-toggleable .p-panel-header { + padding: 0.5rem 1rem; +} +.p-panel .p-panel-content { + padding: 0.5rem; + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; + border-top: 0 none; +} +.p-panel .p-panel-footer { + padding: 0.5rem 1rem; + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + border-top: 0 none; +} + +.p-splitter { + border: 1px solid #dee2e6; + background: #ffffff; + border-radius: 1px; + color: #343a3f; +} +.p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + background: #f2f4f8; +} +.p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #dee2e6; +} +.p-splitter .p-splitter-gutter-resizing { + background: #dee2e6; +} + +.p-scrollpanel .p-scrollpanel-bar { + background: #f2f4f8; + border: 0 none; +} + +.p-tabview .p-tabview-nav { + background: #ffffff; + border: 1px solid #dee2e6; + border-width: 0 0 2px 0; +} +.p-tabview .p-tabview-nav li { + margin-right: 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link { + border: solid #dee2e6; + border-width: 0 0 2px 0; + border-color: transparent transparent #dee2e6 transparent; + background: #ffffff; + color: #697077; + padding: 0.75rem; + font-weight: 600; + border-top-right-radius: 1px; + border-top-left-radius: 1px; + transition: box-shadow 0.2s; + margin: 0 0 -2px 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #90c9f5; +} +.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #697077; + color: #697077; +} +.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #1174c0; + color: #1174c0; +} +.p-tabview .p-tabview-close { + margin-left: 0.5rem; +} +.p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #1174c0; + width: 2.357rem; + 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; +} +.p-tabview .p-tabview-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #90c9f5; +} +.p-tabview .p-tabview-panels { + background: #ffffff; + padding: 0.5rem; + border: 0 none; + color: #343a3f; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} + +.p-toolbar { + background: #f2f4f8; + border: 1px solid #dee2e6; + padding: 0.75rem; + border-radius: 1px; + gap: 0.5rem; +} +.p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; +} + +.p-confirm-popup { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-confirm-popup .p-confirm-popup-content { + padding: 0.5rem; +} +.p-confirm-popup .p-confirm-popup-footer { + text-align: right; + padding: 0 0.5rem 0.5rem 0.5rem; +} +.p-confirm-popup .p-confirm-popup-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-confirm-popup .p-confirm-popup-footer button:last-child { + margin: 0; +} +.p-confirm-popup:after { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-confirm-popup:before { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; +} +.p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #ffffff; +} +.p-confirm-popup .p-confirm-popup-icon { + font-size: 1.5rem; +} +.p-confirm-popup .p-confirm-popup-message { + margin-left: 1rem; +} + +.p-dialog { + border-radius: 1px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); + border: 0 none; +} +.p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #343a3f; + padding: 0.75rem; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-dialog .p-dialog-header .p-dialog-title { + font-weight: 600; + font-size: 1.25rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; +} +.p-dialog .p-dialog-content { + background: #ffffff; + color: #343a3f; + padding: 0 0.75rem 1rem 0.75rem; +} +.p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-dialog .p-dialog-footer { + border-top: 0 none; + background: #ffffff; + color: #343a3f; + padding: 0 0.75rem 0.75rem 0.75rem; + text-align: right; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-dialog .p-dialog-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 1rem; +} + +.p-overlaypanel { + background: #ffffff; + color: #343a3f; + border: 0 none; + border-radius: 1px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-overlaypanel .p-overlaypanel-content { + padding: 0.5rem; +} +.p-overlaypanel .p-overlaypanel-close { + background: #1174c0; + color: #ffffff; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; + position: absolute; + top: -0.5rem; + right: -0.5rem; +} +.p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #0f68ad; + color: #ffffff; +} +.p-overlaypanel:after { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-overlaypanel:before { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #f2f2f2; +} +.p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; +} +.p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #ffffff; +} + +.p-sidebar { + background: #ffffff; + color: #343a3f; + border: 0 none; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-sidebar .p-sidebar-header { + padding: 0.75rem; +} +.p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 1rem; + height: 1rem; + color: #878d96; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #343a3f; + border-color: #121619; + background: transparent; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:focus, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; +} +.p-sidebar .p-sidebar-content { + padding: 0.5rem; +} + +.p-tooltip .p-tooltip-text { + background: #343a3f; + color: #ffffff; + padding: 0.25rem 0.25rem; + 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); + border-radius: 1px; +} +.p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #343a3f; +} +.p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #343a3f; +} +.p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #343a3f; +} +.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #343a3f; +} + +.p-fileupload .p-fileupload-buttonbar { + background: #f2f4f8; + padding: 0.75rem; + border: 1px solid #dee2e6; + color: #343a3f; + border-bottom: 0 none; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-fileupload .p-fileupload-buttonbar .p-button { + margin-right: 0.5rem; +} +.p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 2rem 1rem; + border: 1px solid #dee2e6; + color: #343a3f; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-fileupload .p-progressbar { + height: 0.25rem; +} +.p-fileupload .p-fileupload-row > div { + padding: 0.25rem 1rem; +} +.p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; +} + +.p-breadcrumb { + background: #ffffff; + border: 1px solid #dee2e6; + border-radius: 1px; + padding: 0.5rem; +} +.p-breadcrumb ul li .p-menuitem-link { + transition: box-shadow 0.2s; + border-radius: 1px; +} +.p-breadcrumb ul li .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { + color: #697077; +} +.p-breadcrumb ul li.p-breadcrumb-chevron { + margin: 0 0.5rem 0 0.5rem; + color: #343a3f; +} +.p-breadcrumb ul li:last-child .p-menuitem-text { + color: #343a3f; +} +.p-breadcrumb ul li:last-child .p-menuitem-icon { + color: #697077; +} + +.p-contextmenu { + padding: 0.25rem 0; + background: #ffffff; + color: #343a3f; + border: 0 none; + 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); + border-radius: 1px; + width: 12.5rem; +} +.p-contextmenu .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-contextmenu .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-contextmenu .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-contextmenu .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-contextmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-contextmenu .p-submenu-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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); + border-radius: 1px; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #dde1e6; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-contextmenu .p-menu-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; +} +.p-contextmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-dock .p-dock-list { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.5rem; + border-radius: 0.5rem; +} +.p-dock .p-dock-item { + padding: 0.5rem; +} +.p-dock .p-dock-action { + width: 4rem; + height: 4rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; +} + +@media screen and (max-width: 960px) { + .p-dock.p-dock-top .p-dock-container, .p-dock.p-dock-bottom .p-dock-container { + overflow-x: auto; + width: 100%; + } + .p-dock.p-dock-top .p-dock-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-container .p-dock-list { + margin: 0 auto; + } + .p-dock.p-dock-left .p-dock-container, .p-dock.p-dock-right .p-dock-container { + overflow-y: auto; + height: 100%; + } + .p-dock.p-dock-left .p-dock-container .p-dock-list, .p-dock.p-dock-right .p-dock-container .p-dock-list { + margin: auto 0; + } + .p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + transform: none; + margin: 0; + } +} +.p-megamenu { + padding: 0.5rem; + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dee2e6; + border-radius: 1px; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 1px; + transition: box-shadow 0.2s; + user-select: none; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #697077; + margin-left: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-megamenu .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-megamenu .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-megamenu .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-megamenu .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-megamenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #343a3f; + border: 0 none; + 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-megamenu .p-megamenu-submenu-header { + margin: 0; + padding: 0.25rem 0.5rem; + color: #343a3f; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-megamenu .p-megamenu-submenu { + padding: 0.25rem 0; + width: 12.5rem; +} +.p-megamenu .p-megamenu-submenu .p-menu-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #dde1e6; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-megamenu.p-megamenu-vertical { + width: 12.5rem; + padding: 0.25rem 0; +} + +.p-menu { + padding: 0.25rem 0; + background: #ffffff; + color: #343a3f; + border: 1px solid #dee2e6; + border-radius: 1px; + width: 12.5rem; +} +.p-menu .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menu .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-menu .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-menu .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-menu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-menu.p-menu-overlay { + background: #ffffff; + border: 0 none; + 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-menu .p-submenu-header { + margin: 0; + padding: 0.25rem 0.5rem; + color: #343a3f; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.p-menu .p-menu-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; +} + +.p-menubar { + padding: 0.5rem; + background: #f2f4f8; + color: #343a3f; + border: 1px solid #dee2e6; + border-radius: 1px; +} +.p-menubar .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menubar .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-menubar .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-menubar .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-menubar .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 1px; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #697077; + margin-left: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-menubar .p-submenu-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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); + width: 12.5rem; +} +.p-menubar .p-submenu-list .p-menu-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; +} +.p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #dde1e6; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #697077; +} + +@media screen and (max-width: 960px) { + .p-menubar { + position: relative; + } + .p-menubar .p-menubar-button { + display: flex; + width: 1rem; + height: 1rem; + color: #697077; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-menubar .p-menubar-button:hover { + color: #697077; + background: #dde1e6; + } + .p-menubar .p-menubar-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + } + .p-menubar .p-menubar-root-list { + position: absolute; + display: none; + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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); + width: 100%; + } + .p-menubar .p-menubar-root-list .p-menu-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; + } + .p-menubar .p-menubar-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #343a3f; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #697077; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-menubar .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list ul li a { + padding-left: 1.5rem; + } + .p-menubar .p-menubar-root-list ul li ul li a { + padding-left: 2.5rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li a { + padding-left: 3.5rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li a { + padding-left: 4.5rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a { + padding-left: 5.5rem; + } + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } +} +.p-panelmenu .p-panelmenu-header > a { + padding: 0.75rem; + border: 1px solid #dee2e6; + color: #343a3f; + background: #f2f4f8; + font-weight: 600; + border-radius: 1px; + transition: box-shadow 0.2s; +} +.p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + background: #dde1e6; + border-color: #dee2e6; + color: #343a3f; +} +.p-panelmenu .p-panelmenu-header.p-highlight { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight > a { + background: #f2f4f8; + border-color: #dee2e6; + color: #343a3f; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover { + border-color: #dee2e6; + background: #dde1e6; + color: #343a3f; +} +.p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0; + border: 1px solid #dee2e6; + background: #ffffff; + color: #343a3f; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) { + padding: 0 0 0 1rem; +} +.p-panelmenu .p-panelmenu-panel { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-panel .p-panelmenu-header > a { + border-radius: 0; +} +.p-panelmenu .p-panelmenu-panel .p-panelmenu-content { + border-radius: 0; +} +.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header > a { + border-top: 0 none; +} +.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover > a, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover > a { + border-top: 0 none; +} +.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header > a { + border-top-right-radius: 1px; + border-top-left-radius: 1px; +} +.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) > a { + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} +.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content { + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; +} + +.p-slidemenu { + padding: 0.25rem 0; + background: #ffffff; + color: #343a3f; + border: 1px solid #dee2e6; + border-radius: 1px; + width: 12.5rem; +} +.p-slidemenu .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-slidemenu .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-slidemenu .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-slidemenu .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-slidemenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-slidemenu.p-slidemenu-overlay { + background: #ffffff; + border: 0 none; + 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-slidemenu .p-slidemenu-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link { + background: #dde1e6; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text { + color: #343a3f; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon { + color: #697077; +} +.p-slidemenu .p-slidemenu-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; +} +.p-slidemenu .p-slidemenu-icon { + font-size: 0.875rem; +} +.p-slidemenu .p-slidemenu-backward { + padding: 0.5rem 0.5rem; + color: #343a3f; +} + +.p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 1px; + background: #ffffff; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #343a3f; + border: 1px solid #dde1e6; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + z-index: 1; + border-radius: 50%; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-title { + margin-top: 0.5rem; + color: #697077; +} +.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-steps .p-steps-item.p-highlight .p-steps-number { + background: #44A1D9; + color: #ffffff; +} +.p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 600; + color: #343a3f; +} +.p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #dee2e6; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; +} + +.p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #dee2e6; + border-width: 0 0 2px 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem { + margin-right: 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + border: solid #dee2e6; + border-width: 0 0 2px 0; + border-color: transparent transparent #dee2e6 transparent; + background: #ffffff; + color: #697077; + padding: 0.75rem; + font-weight: 600; + border-top-right-radius: 1px; + border-top-left-radius: 1px; + transition: box-shadow 0.2s; + margin: 0 0 -2px 0; + height: calc(100% + 2px); +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #90c9f5; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #697077; + color: #697077; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #1174c0; + color: #1174c0; +} + +.p-tieredmenu { + padding: 0.25rem 0; + background: #ffffff; + color: #343a3f; + border: 1px solid #dee2e6; + border-radius: 1px; + width: 12.5rem; +} +.p-tieredmenu .p-menuitem-link { + padding: 0.5rem 0.5rem; + color: #343a3f; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-icon { + color: #697077; + margin-right: 0.5rem; +} +.p-tieredmenu .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { + background: #dde1e6; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #343a3f; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #697077; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #697077; +} +.p-tieredmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; +} +.p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 0 none; + 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-tieredmenu .p-submenu-list { + padding: 0.25rem 0; + background: #ffffff; + border: 0 none; + 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-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #dde1e6; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #343a3f; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #697077; +} +.p-tieredmenu .p-menu-separator { + border-top: 1px solid #dee2e6; + margin: 0.25rem 0; +} +.p-tieredmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-inline-message { + padding: 0.25rem 0.25rem; + margin: 0; + border-radius: 1px; +} +.p-inline-message.p-inline-message-info { + background: #CDF2FB; + border: solid #11add3; + border-width: 0px; + color: #08576a; +} +.p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #08576a; +} +.p-inline-message.p-inline-message-success { + background: #D7F8D3; + border: solid #32c620; + border-width: 0px; + color: #196310; +} +.p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #196310; +} +.p-inline-message.p-inline-message-warn { + background: #FEF8D6; + border: solid #e4c306; + border-width: 0px; + color: #726203; +} +.p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #726203; +} +.p-inline-message.p-inline-message-error { + background: #FDDED2; + border: solid #de450a; + border-width: 0px; + color: #6f2205; +} +.p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #6f2205; +} +.p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; +} +.p-inline-message .p-inline-message-text { + font-size: 1rem; +} +.p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; +} + +.p-message { + margin: 1rem 0; + border-radius: 1px; +} +.p-message .p-message-wrapper { + padding: 1rem 1.5rem; +} +.p-message .p-message-close { + width: 1rem; + height: 1rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-message .p-message-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-message.p-message-info { + background: #CDF2FB; + border: solid #11add3; + border-width: 0 0 0 6px; + color: #08576a; +} +.p-message.p-message-info .p-message-icon { + color: #08576a; +} +.p-message.p-message-info .p-message-close { + color: #08576a; +} +.p-message.p-message-success { + background: #D7F8D3; + border: solid #32c620; + border-width: 0 0 0 6px; + color: #196310; +} +.p-message.p-message-success .p-message-icon { + color: #196310; +} +.p-message.p-message-success .p-message-close { + color: #196310; +} +.p-message.p-message-warn { + background: #FEF8D6; + border: solid #e4c306; + border-width: 0 0 0 6px; + color: #726203; +} +.p-message.p-message-warn .p-message-icon { + color: #726203; +} +.p-message.p-message-warn .p-message-close { + color: #726203; +} +.p-message.p-message-error { + background: #FDDED2; + border: solid #de450a; + border-width: 0 0 0 6px; + color: #6f2205; +} +.p-message.p-message-error .p-message-icon { + color: #6f2205; +} +.p-message.p-message-error .p-message-close { + color: #6f2205; +} +.p-message .p-message-text { + font-size: 1rem; + font-weight: 500; +} +.p-message .p-message-icon { + font-size: 1.5rem; + margin-right: 0.5rem; +} + +.p-toast { + opacity: 0.9; +} +.p-toast .p-toast-message { + margin: 0 0 1rem 0; + 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); + border-radius: 1px; +} +.p-toast .p-toast-message .p-toast-message-content { + padding: 1rem; + border-width: 0 0 0 6px; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 700; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + margin: 0.5rem 0 0 0; +} +.p-toast .p-toast-message .p-toast-icon-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-toast .p-toast-message .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-toast .p-toast-message .p-toast-icon-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} +.p-toast .p-toast-message.p-toast-message-info { + background: #CDF2FB; + border: solid #11add3; + border-width: 0 0 0 6px; + color: #08576a; +} +.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + color: #08576a; +} +.p-toast .p-toast-message.p-toast-message-success { + background: #D7F8D3; + border: solid #32c620; + border-width: 0 0 0 6px; + color: #196310; +} +.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + color: #196310; +} +.p-toast .p-toast-message.p-toast-message-warn { + background: #FEF8D6; + border: solid #e4c306; + border-width: 0 0 0 6px; + color: #726203; +} +.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + color: #726203; +} +.p-toast .p-toast-message.p-toast-message-error { + background: #FDDED2; + border: solid #de450a; + border-width: 0 0 0 6px; + color: #6f2205; +} +.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + color: #6f2205; +} + +.p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f2f4f8; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f2f4f8; +} +.p-galleria .p-galleria-item-nav { + background: transparent; + color: #f2f4f8; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 1px; + margin: 0 0.5rem; +} +.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f2f4f8; +} +.p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f2f4f8; + padding: 1rem; +} +.p-galleria .p-galleria-indicators { + padding: 1rem; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #dde1e6; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #dee2e6; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #44A1D9; + color: #ffffff; +} +.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { + margin-right: 0.5rem; +} +.p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator { + margin-bottom: 0.5rem; +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators { + background: rgba(0, 0, 0, 0.5); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button { + background: rgba(255, 255, 255, 0.4); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover { + background: rgba(255, 255, 255, 0.6); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #44A1D9; + color: #ffffff; +} +.p-galleria .p-galleria-thumbnail-container { + background: rgba(0, 0, 0, 0.9); + padding: 1rem 0.25rem; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { + margin: 0.5rem; + background-color: transparent; + color: #f2f4f8; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { + background: rgba(255, 255, 255, 0.1); + color: #f2f4f8; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + transition: box-shadow 0.2s; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} + +.p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-preview-indicator { + background-color: transparent; + color: #f8f9fa; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} + +.p-image-preview-container:hover > .p-image-preview-indicator { + background-color: rgba(0, 0, 0, 0.5); +} + +.p-image-toolbar { + padding: 1rem; +} + +.p-image-action.p-link { + color: #f8f9fa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-image-action.p-link:last-child { + margin-right: 0; +} +.p-image-action.p-link:hover { + color: #f8f9fa; + background-color: rgba(255, 255, 255, 0.1); +} +.p-image-action.p-link i { + font-size: 1.5rem; +} + +.p-avatar { + background-color: #dee2e6; + border-radius: 1px; +} +.p-avatar.p-avatar-lg { + width: 3rem; + height: 3rem; + font-size: 1.5rem; +} +.p-avatar.p-avatar-lg .p-avatar-icon { + font-size: 1.5rem; +} +.p-avatar.p-avatar-xl { + width: 4rem; + height: 4rem; + font-size: 2rem; +} +.p-avatar.p-avatar-xl .p-avatar-icon { + font-size: 2rem; +} + +.p-avatar-group .p-avatar { + border: 2px solid #ffffff; +} + +.p-chip { + background-color: #dee2e6; + color: #343a3f; + border-radius: 16px; + padding: 0 0.25rem; +} +.p-chip .p-chip-text { + line-height: 1.5; + margin-top: 0.125rem; + margin-bottom: 0.125rem; +} +.p-chip .p-chip-icon { + margin-right: 0.5rem; +} +.p-chip img { + width: 1.75rem; + height: 1.75rem; + margin-left: -0.25rem; + margin-right: 0.5rem; +} +.p-chip .p-chip-remove-icon { + border-radius: 1px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-left: 0.5rem; +} +.p-chip .p-chip-remove-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} + +.p-scrolltop { + width: 2rem; + height: 2rem; + border-radius: 1px; + 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); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-scrolltop.p-link { + background: rgba(0, 0, 0, 0.7); +} +.p-scrolltop.p-link:hover { + background: rgba(0, 0, 0, 0.8); +} +.p-scrolltop .p-scrolltop-icon { + font-size: 1rem; + color: #f2f4f8; +} + +.p-skeleton { + background-color: #dde1e6; + border-radius: 1px; +} +.p-skeleton:after { + background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); +} + +.p-tag { + background: #1174c0; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 1px; +} +.p-tag.p-tag-success { + background-color: #207f3b; + color: #ffffff; +} +.p-tag.p-tag-info { + background-color: #107d79; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #f0c135; + color: #212529; +} +.p-tag.p-tag-danger { + background-color: #d8222f; + color: #ffffff; +} +.p-tag .p-tag-icon { + margin-right: 0.25rem; + font-size: 0.75rem; +} + +.p-inplace .p-inplace-display { + padding: 0.25rem 0.25rem; + border-radius: 1px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #dde1e6; + color: #343a3f; +} +.p-inplace .p-inplace-display:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; +} + +.p-progressbar { + border: 0 none; + height: 1.5rem; + background: #dee2e6; + border-radius: 1px; +} +.p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #1174c0; +} +.p-progressbar .p-progressbar-label { + color: #ffffff; + line-height: 1.5rem; +} + +.p-terminal { + background: #ffffff; + color: #343a3f; + border: 1px solid #dee2e6; + padding: 0.5rem; +} +.p-terminal .p-terminal-input { + font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +.p-badge { + background: #1174c0; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + min-width: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; +} +.p-badge.p-badge-secondary { + background-color: #697077; + color: #ffffff; +} +.p-badge.p-badge-success { + background-color: #207f3b; + color: #ffffff; +} +.p-badge.p-badge-info { + background-color: #107d79; + color: #ffffff; +} +.p-badge.p-badge-warning { + background-color: #f0c135; + color: #212529; +} +.p-badge.p-badge-danger { + background-color: #d8222f; + color: #ffffff; +} +.p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; +} +.p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; +} + +.p-tag { + background: #1174c0; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 1px; +} +.p-tag.p-tag-success { + background-color: #207f3b; + color: #ffffff; +} +.p-tag.p-tag-info { + background-color: #107d79; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #f0c135; + color: #212529; +} +.p-tag.p-tag-danger { + background-color: #d8222f; + color: #ffffff; +} diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff new file mode 100644 index 0000000000..46d4244757 Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff differ diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2 b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2 new file mode 100644 index 0000000000..f1c62e0996 Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2 differ diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff new file mode 100644 index 0000000000..e8d62dd0a3 Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff differ diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2 b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2 new file mode 100644 index 0000000000..5ba583e88b Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2 differ diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff new file mode 100644 index 0000000000..c6d3d1d9de Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff differ diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2 b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2 new file mode 100644 index 0000000000..4153a8259f Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2 differ diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css new file mode 100644 index 0000000000..fa657a9926 --- /dev/null +++ b/public/themes/soho-dark/theme.css @@ -0,0 +1,6002 @@ +:root { + --surface-a:#282936; + --surface-b:#1d1e27; + --surface-c:rgba(255, 255, 255, 0.03); + --surface-d:#3e4053; + --surface-e:#282936; + --surface-f:#282936; + --text-color:rgba(255, 255, 255, 0.87); + --text-color-secondary:rgba(255, 255, 255, 0.6); + --primary-color:#b19df7; + --primary-color-text:#1c1d26; + --font-family:Lato, Helvetica, sans-serif; + --surface-0: #1d1e27; + --surface-50: #34343d; + --surface-100: #4a4b52; + --surface-200: #616268; + --surface-300: #77787d; + --surface-400: #8e8f93; + --surface-500: #a5a5a9; + --surface-600: #bbbcbe; + --surface-700: #d2d2d4; + --surface-800: #e8e9e9; + --surface-900: #ffffff; + --gray-50: #e8e9e9; + --gray-100: #d2d2d4; + --gray-200: #bbbcbe; + --gray-300: #a5a5a9; + --gray-400: #8e8f93; + --gray-500: #77787d; + --gray-600: #616268; + --gray-700: #4a4b52; + --gray-800: #34343d; + --gray-900: #1d1e27; + --content-padding:1.25rem; + --inline-spacing:0.5rem; + --border-radius:6px; + --surface-ground:#1d1e27; + --surface-section:#1d1e27; + --surface-card:#282936; + --surface-overlay:#282936; + --surface-border:#3e4053; + --surface-hover:rgba(255,255,255,.03); + --maskbg: rgba(0, 0, 0, 0.4); + --focus-ring: 0 0 0 1px #e0d8fc; + color-scheme: dark; +} + +/* lato-300 - latin-ext_latin */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 300; + src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* lato-regular - latin-ext_latin */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 400; + src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* lato-700 - latin-ext_latin */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 700; + src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +* { + box-sizing: border-box; +} + +.p-component { + font-family: Lato, Helvetica, sans-serif; + font-size: 1rem; + font-weight: normal; +} + +.p-component-overlay { + background-color: rgba(0, 0, 0, 0.4); + transition-duration: 0.2s; +} + +.p-disabled, .p-component:disabled { + opacity: 0.4; +} + +.p-error { + color: #ff9a9a; +} + +.p-text-secondary { + color: rgba(255, 255, 255, 0.6); +} + +.pi { + font-size: 1rem; +} + +.p-link { + font-size: 1rem; + font-family: Lato, Helvetica, sans-serif; + border-radius: 6px; +} +.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} + +.p-component-overlay-enter { + animation: p-component-overlay-enter-animation 150ms forwards; +} + +.p-component-overlay-leave { + animation: p-component-overlay-leave-animation 150ms forwards; +} + +@keyframes p-component-overlay-enter-animation { + from { + background-color: transparent; + } + to { + background-color: var(--maskbg); + } +} +@keyframes p-component-overlay-leave-animation { + from { + background-color: var(--maskbg); + } + to { + background-color: transparent; + } +} + +:root { + --blue-50:#f6fbfe; + --blue-100:#d6ecfc; + --blue-200:#b5ddfa; + --blue-300:#95cef8; + --blue-400:#74bff5; + --blue-500:#54b0f3; + --blue-600:#4796cf; + --blue-700:#3b7baa; + --blue-800:#2e6186; + --blue-900:#224661; + --green-50:#f4fcf8; + --green-100:#ccf2dc; + --green-200:#a3e7c1; + --green-300:#7adca6; + --green-400:#52d28a; + --green-500:#29c76f; + --green-600:#23a95e; + --green-700:#1d8b4e; + --green-800:#176d3d; + --green-900:#10502c; + --yellow-50:#fefdf6; + --yellow-100:#fcf4d6; + --yellow-200:#faebb5; + --yellow-300:#f8e295; + --yellow-400:#f5d974; + --yellow-500:#f3d054; + --yellow-600:#cfb147; + --yellow-700:#aa923b; + --yellow-800:#86722e; + --yellow-900:#615322; + --cyan-50:#f5fcfd; + --cyan-100:#d1f2f5; + --cyan-200:#ace8ed; + --cyan-300:#87dee6; + --cyan-400:#63d3de; + --cyan-500:#3ec9d6; + --cyan-600:#35abb6; + --cyan-700:#2b8d96; + --cyan-800:#226f76; + --cyan-900:#195056; + --pink-50:#fef6f7; + --pink-100:#fad6d6; + --pink-200:#f6b5b6; + --pink-300:#f29596; + --pink-400:#ee7475; + --pink-500:#ea5455; + --pink-600:#c74748; + --pink-700:#a43b3c; + --pink-800:#812e2f; + --pink-900:#5e2222; + --indigo-50:#f6f7fe; + --indigo-100:#d6dafc; + --indigo-200:#b5bcfa; + --indigo-300:#959ff8; + --indigo-400:#7481f5; + --indigo-500:#5464f3; + --indigo-600:#4755cf; + --indigo-700:#3b46aa; + --indigo-800:#2e3786; + --indigo-900:#222861; + --teal-50:#f3fcf9; + --teal-100:#c5f1e1; + --teal-200:#97e5c9; + --teal-300:#69dab1; + --teal-400:#3bce99; + --teal-500:#0dc381; + --teal-600:#0ba66e; + --teal-700:#09895a; + --teal-800:#076b47; + --teal-900:#054e34; + --orange-50:#fffaf6; + --orange-100:#ffe8d2; + --orange-200:#ffd6ae; + --orange-300:#ffc38a; + --orange-400:#ffb166; + --orange-500:#ff9f42; + --orange-600:#d98738; + --orange-700:#b36f2e; + --orange-800:#8c5724; + --orange-900:#66401a; + --bluegray-50:#f7f8fa; + --bluegray-100:#dbdfe8; + --bluegray-200:#bec5d6; + --bluegray-300:#a1abc4; + --bluegray-400:#8592b2; + --bluegray-500:#6878a0; + --bluegray-600:#586688; + --bluegray-700:#495470; + --bluegray-800:#394258; + --bluegray-900:#2a3040; + --purple-50:#f8f6fe; + --purple-100:#ddd6fc; + --purple-200:#c2b5fa; + --purple-300:#a895f8; + --purple-400:#8d74f5; + --purple-500:#7254f3; + --purple-600:#6147cf; + --purple-700:#503baa; + --purple-800:#3f2e86; + --purple-900:#2e2261; + --red-50:#fff5f6; + --red-100:#ffcfd4; + --red-200:#ffa9b2; + --red-300:#ff848f; + --red-400:#ff5e6d; + --red-500:#ff384b; + --red-600:#d93040; + --red-700:#b32735; + --red-800:#8c1f29; + --red-900:#66161e; + --primary-50:#fbfaff; + --primary-100:#ece7fd; + --primary-200:#ddd5fc; + --primary-300:#cfc2fa; + --primary-400:#c0b0f9; + --primary-500:#b19df7; + --primary-600:#9685d2; + --primary-700:#7c6ead; + --primary-800:#615688; + --primary-900:#473f63; +} + +.p-autocomplete .p-autocomplete-loader { + right: 0.75rem; +} +.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; +} +.p-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { + border-color: #b19df7; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0.375rem 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { + font-family: Lato, Helvetica, sans-serif; + font-size: 1rem; + color: rgba(255, 255, 255, 0.87); + padding: 0; + margin: 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: rgba(177, 157, 247, 0.16); + color: #b19df7; + border-radius: 6px; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; +} +.p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #ff9a9a; +} + +.p-autocomplete-panel { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + 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-autocomplete-panel .p-autocomplete-items { + padding: 0.75rem 0; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: #333544; + font-weight: 700; +} + +.p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #ff9a9a; +} + +.p-datepicker { + padding: 0.5rem; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; +} +.p-datepicker:not(.p-datepicker-inline) { + background: #282936; + border: 1px solid #3e4053; + 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-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #282936; +} +.p-datepicker .p-datepicker-header { + padding: 0.5rem; + color: rgba(255, 255, 255, 0.87); + background: #282936; + font-weight: 700; + margin: 0; + border-bottom: 1px solid #3e4053; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev, +.p-datepicker .p-datepicker-header .p-datepicker-next { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 2rem; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; +} +.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: #b19df7; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + margin-right: 0.5rem; +} +.p-datepicker table { + font-size: 1rem; + margin: 0.5rem 0; +} +.p-datepicker table th { + padding: 0.5rem; +} +.p-datepicker table th > span { + width: 2.5rem; + height: 2.5rem; +} +.p-datepicker table td { + padding: 0.5rem; +} +.p-datepicker table td > span { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + transition: box-shadow 0.2s; + border: 1px solid transparent; +} +.p-datepicker table td > span.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-datepicker table td > span:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-datepicker table td.p-datepicker-today > span { + background: transparent; + color: #b19df7; + border-color: transparent; +} +.p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-datepicker .p-datepicker-buttonbar { + padding: 1rem 0; + border-top: 1px solid #3e4053; +} +.p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; +} +.p-datepicker .p-timepicker { + border-top: 1px solid #3e4053; + padding: 0.5rem; +} +.p-datepicker .p-timepicker button { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datepicker .p-timepicker button:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker .p-timepicker button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-datepicker .p-timepicker button:last-child { + margin-top: 0.2em; +} +.p-datepicker .p-timepicker span { + font-size: 1.25rem; +} +.p-datepicker .p-timepicker > div { + padding: 0 0.5rem; +} +.p-datepicker.p-datepicker-timeonly .p-timepicker { + border-top: 0 none; +} +.p-datepicker .p-monthpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #3e4053; + padding-right: 0.5rem; + padding-left: 0.5rem; + padding-top: 0; + padding-bottom: 0; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { + padding-left: 0; +} +.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); +} +.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} + +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} +.p-cascadeselect { + background: #1d1e27; + border: 1px solid #3e4053; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-cascadeselect:not(.p-disabled):hover { + border-color: #b19df7; +} +.p-cascadeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.75rem 0.75rem; +} +.p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: rgba(255, 255, 255, 0.6); +} +.p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: rgba(255, 255, 255, 0.6); + width: 3rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-cascadeselect.p-invalid.p-component { + border-color: #ff9a9a; +} + +.p-cascadeselect-panel { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + 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-cascadeselect-panel .p-cascadeselect-items { + padding: 0.75rem 0; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 0; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.75rem 1.25rem; +} +.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 #e0d8fc; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + 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-group-icon { + font-size: 0.875rem; +} + +.p-input-filled .p-cascadeselect { + background: #3e4053; +} +.p-input-filled .p-cascadeselect:not(.p-disabled):hover { + background-color: #3e4053; +} +.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { + background-color: #3e4053; +} + +.p-checkbox { + width: 22px; + height: 22px; +} +.p-checkbox .p-checkbox-box { + border: 2px solid #3e4053; + background: #1d1e27; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #1c1d26; + font-size: 14px; +} +.p-checkbox .p-checkbox-box.p-highlight { + border-color: #b19df7; + background: #b19df7; +} +.p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + border-color: #9378f4; + background: #9378f4; + color: #1c1d26; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #b19df7; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #9378f4; + background: #9378f4; + color: #1c1d26; +} +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: #ff9a9a; +} + +.p-input-filled .p-checkbox .p-checkbox-box { + background-color: #3e4053; +} +.p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + background: #b19df7; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #3e4053; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #9378f4; +} + +.p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; +} +.p-chips .p-chips-multiple-container:not(.p-disabled):hover { + border-color: #b19df7; +} +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-chips .p-chips-multiple-container .p-chips-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: rgba(177, 157, 247, 0.16); + color: #b19df7; + border-radius: 6px; +} +.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.5rem; +} +.p-chips .p-chips-multiple-container .p-chips-input-token { + padding: 0.375rem 0; +} +.p-chips .p-chips-multiple-container .p-chips-input-token input { + font-family: Lato, Helvetica, sans-serif; + font-size: 1rem; + color: rgba(255, 255, 255, 0.87); + padding: 0; + margin: 0; +} +.p-chips.p-invalid.p-component > .p-inputtext { + border-color: #ff9a9a; +} + +.p-colorpicker-preview { + width: 2rem; + height: 2rem; +} + +.p-colorpicker-panel { + background: #282936; + border: 1px solid #3e4053; +} +.p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: rgba(255, 255, 255, 0.87); +} + +.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 { + background: #1d1e27; + border: 1px solid #3e4053; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-dropdown:not(.p-disabled):hover { + border-color: #b19df7; +} +.p-dropdown:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-dropdown.p-dropdown-clearable .p-dropdown-label { + padding-right: 1.75rem; +} +.p-dropdown .p-dropdown-label { + background: transparent; + border: 0 none; +} +.p-dropdown .p-dropdown-label.p-placeholder { + color: rgba(255, 255, 255, 0.6); +} +.p-dropdown .p-dropdown-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-dropdown .p-dropdown-trigger { + background: transparent; + color: rgba(255, 255, 255, 0.6); + width: 3rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-dropdown .p-dropdown-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 3rem; +} +.p-dropdown.p-invalid.p-component { + border-color: #ff9a9a; +} + +.p-dropdown-panel { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + 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-panel .p-dropdown-header { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + background: #282936; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter { + padding-right: 1.75rem; + margin-right: -1.75rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { + padding-right: 3.5rem; + margin-right: -3.5rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { + right: 2.5rem; +} +.p-dropdown-panel .p-dropdown-items { + padding: 0.75rem 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { + margin: 0; + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: #333544; + font-weight: 700; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} + +.p-input-filled .p-dropdown { + background: #3e4053; +} +.p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: #3e4053; +} +.p-input-filled .p-dropdown:not(.p-disabled).p-focus { + background-color: #3e4053; +} +.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; +} + +.p-editor-container .p-editor-toolbar { + background: #282936; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #3e4053; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #282936; + border: 1px solid #3e4053; + 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); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #3e4053; +} +.p-editor-container .p-editor-content .ql-editor { + background: #1d1e27; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.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: #b19df7; +} +.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: #b19df7; +} +.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: #b19df7; +} +.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: #b19df7; +} + +.p-inputgroup-addon { + background: #282936; + color: rgba(255, 255, 255, 0.6); + border-top: 1px solid #3e4053; + border-left: 1px solid #3e4053; + border-bottom: 1px solid #3e4053; + padding: 0.75rem 0.75rem; + min-width: 3rem; +} +.p-inputgroup-addon:last-child { + border-right: 1px solid #3e4053; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { + border-radius: 0; + margin: 0; +} +.p-inputgroup > .p-component + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { + border-left: 0 none; +} +.p-inputgroup > .p-component:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { + z-index: 1; +} +.p-inputgroup > .p-component:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { + z-index: 1; +} + +.p-inputgroup-addon:first-child, +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup .p-float-label:first-child input { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup-addon:last-child, +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-inputgroup .p-float-label:last-child input { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-fluid .p-inputgroup .p-button { + width: auto; +} +.p-fluid .p-inputgroup .p-button.p-button-icon-only { + width: 3rem; +} + +.p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #ff9a9a; +} + +.p-inputswitch { + width: 3rem; + height: 1.75rem; +} +.p-inputswitch .p-inputswitch-slider { + background: #3e4053; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 30px; +} +.p-inputswitch .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.6); + width: 1.25rem; + height: 1.25rem; + left: 0.25rem; + margin-top: -0.625rem; + 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 #e0d8fc; +} +.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #b19df7; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); +} +.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #a28af5; +} +.p-inputswitch.p-invalid .p-inputswitch-slider { + border-color: #ff9a9a; +} + +.p-inputtext { + font-family: Lato, Helvetica, sans-serif; + font-size: 1rem; + color: rgba(255, 255, 255, 0.87); + background: #1d1e27; + padding: 0.75rem 0.75rem; + border: 1px solid #3e4053; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + appearance: none; + border-radius: 6px; +} +.p-inputtext:enabled:hover { + border-color: #b19df7; +} +.p-inputtext:enabled:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-inputtext.p-invalid.p-component { + border-color: #ff9a9a; +} +.p-inputtext.p-inputtext-sm { + font-size: 0.875rem; + padding: 0.65625rem 0.65625rem; +} +.p-inputtext.p-inputtext-lg { + font-size: 1.25rem; + padding: 0.9375rem 0.9375rem; +} + +.p-float-label > label { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + transition-duration: 0.2s; +} + +.p-float-label > label.p-error { + color: #ff9a9a; +} + +.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.75rem; + color: rgba(255, 255, 255, 0.6); +} + +.p-input-icon-left > .p-inputtext { + padding-left: 2.5rem; +} + +.p-input-icon-left.p-float-label > label { + left: 2.5rem; +} + +.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.75rem; + color: rgba(255, 255, 255, 0.6); +} + +.p-input-icon-right > .p-inputtext { + padding-right: 2.5rem; +} + +::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.6); +} + +:-moz-placeholder { + color: rgba(255, 255, 255, 0.6); +} + +::-moz-placeholder { + color: rgba(255, 255, 255, 0.6); +} + +:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.6); +} + +.p-input-filled .p-inputtext { + background-color: #3e4053; +} +.p-input-filled .p-inputtext:enabled:hover { + background-color: #3e4053; +} +.p-input-filled .p-inputtext:enabled:focus { + background-color: #3e4053; +} + +.p-inputtext-sm .p-inputtext { + font-size: 0.875rem; + padding: 0.65625rem 0.65625rem; +} + +.p-inputtext-lg .p-inputtext { + font-size: 1.25rem; + padding: 0.9375rem 0.9375rem; +} + +.p-listbox { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; +} +.p-listbox .p-listbox-header { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + background: #282936; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-listbox .p-listbox-header .p-listbox-filter { + padding-right: 1.75rem; +} +.p-listbox .p-listbox-header .p-listbox-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-listbox .p-listbox-list { + padding: 0.75rem 0; +} +.p-listbox .p-listbox-list .p-listbox-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-listbox .p-listbox-list .p-listbox-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 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 #e0d8fc; +} +.p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: #333544; + font-weight: 700; +} +.p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} +.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.p-invalid { + border-color: #ff9a9a; +} + +.p-mention-panel { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + 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-mention-panel .p-mention-items { + padding: 0.75rem 0; +} +.p-mention-panel .p-mention-items .p-mention-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-mention-panel .p-mention-items .p-mention-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-mention-panel .p-mention-items .p-mention-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} + +.p-multiselect { + background: #1d1e27; + border: 1px solid #3e4053; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-multiselect:not(.p-disabled):hover { + border-color: #b19df7; +} +.p-multiselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; +} +.p-multiselect .p-multiselect-label { + padding: 0.75rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-multiselect .p-multiselect-label.p-placeholder { + color: rgba(255, 255, 255, 0.6); +} +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: rgba(177, 157, 247, 0.16); + color: #b19df7; + border-radius: 6px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} +.p-multiselect .p-multiselect-trigger { + background: transparent; + color: rgba(255, 255, 255, 0.6); + width: 3rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-multiselect .p-multiselect-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 3rem; +} +.p-multiselect.p-invalid.p-component { + border-color: #ff9a9a; +} + +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.375rem 0.75rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { + padding: 0.75rem 0.75rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; +} + +.p-multiselect-panel { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + 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-multiselect-panel .p-multiselect-header { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + background: #282936; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.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.75rem; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-multiselect-panel .p-multiselect-items { + padding: 0.75rem 0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + 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 #e0d8fc; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { + margin-right: 0.5rem; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { + margin: 0; + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: #333544; + font-weight: 700; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} + +.p-input-filled .p-multiselect { + background: #3e4053; +} +.p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: #3e4053; +} +.p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: #3e4053; +} + +.p-password.p-invalid.p-component > .p-inputtext { + border-color: #ff9a9a; +} + +.p-password-panel { + padding: 1.25rem; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + 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); + border-radius: 6px; +} +.p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #3e4053; +} +.p-password-panel .p-password-meter .p-password-strength.weak { + background: #eb9a9c; +} +.p-password-panel .p-password-meter .p-password-strength.medium { + background: #ffcf91; +} +.p-password-panel .p-password-meter .p-password-strength.strong { + background: #93deac; +} + +.p-radiobutton { + width: 22px; + height: 22px; +} +.p-radiobutton .p-radiobutton-box { + border: 2px solid #3e4053; + background: #1d1e27; + width: 22px; + height: 22px; + 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: #b19df7; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 12px; + height: 12px; + transition-duration: 0.2s; + background-color: #1c1d26; +} +.p-radiobutton .p-radiobutton-box.p-highlight { + border-color: #b19df7; + background: #b19df7; +} +.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + border-color: #9378f4; + background: #9378f4; + color: #1c1d26; +} +.p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #ff9a9a; +} +.p-radiobutton:focus { + outline: 0 none; +} + +.p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #3e4053; +} +.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: #3e4053; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #b19df7; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #9378f4; +} + +.p-rating { + gap: 0.5rem; +} +.p-rating .p-rating-item .p-rating-icon { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + font-size: 1.143rem; +} +.p-rating .p-rating-item .p-rating-icon.p-rating-cancel { + color: #F48FB1; +} +.p-rating .p-rating-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #b19df7; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #b19df7; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #F48FB1; +} + +.p-selectbutton .p-button { + background: #282936; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); +} +.p-selectbutton .p-button.p-highlight { + background: #b19df7; + border-color: #b19df7; + color: #1c1d26; +} +.p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #1c1d26; +} +.p-selectbutton .p-button.p-highlight:hover { + background: #a28af5; + border-color: #a28af5; + color: #1c1d26; +} +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #1c1d26; +} +.p-selectbutton.p-invalid > .p-button { + border-color: #ff9a9a; +} + +.p-slider { + background: #3e4053; + border: 0 none; + border-radius: 6px; +} +.p-slider.p-slider-horizontal { + height: 0.286rem; +} +.p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -0.5715rem; + margin-left: -0.5715rem; +} +.p-slider.p-slider-vertical { + width: 0.286rem; +} +.p-slider.p-slider-vertical .p-slider-handle { + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; +} +.p-slider .p-slider-handle { + height: 1.143rem; + width: 1.143rem; + background: #3e4053; + border: 2px solid #b19df7; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-slider .p-slider-handle:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-slider .p-slider-range { + background: #b19df7; +} +.p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #b19df7; + border-color: #b19df7; +} + +.p-treeselect { + background: #1d1e27; + border: 1px solid #3e4053; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-treeselect:not(.p-disabled):hover { + border-color: #b19df7; +} +.p-treeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; +} +.p-treeselect .p-treeselect-label { + padding: 0.75rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-treeselect .p-treeselect-label.p-placeholder { + color: rgba(255, 255, 255, 0.6); +} +.p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: #3e4053; + color: rgba(255, 255, 255, 0.87); + border-radius: 16px; +} +.p-treeselect .p-treeselect-trigger { + background: transparent; + color: rgba(255, 255, 255, 0.6); + width: 3rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-treeselect.p-invalid.p-component { + border-color: #ff9a9a; +} + +.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.375rem 0.75rem; +} + +.p-treeselect-panel { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + 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-treeselect-panel .p-treeselect-header { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + background: #282936; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container { + margin-right: 0.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter { + padding-right: 1.75rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter { + padding-right: 3.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon { + right: 2.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-tree { + border: 0 none; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} + +.p-input-filled .p-treeselect { + background: #3e4053; +} +.p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #3e4053; +} +.p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #3e4053; +} + +.p-togglebutton.p-button { + background: #282936; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.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: #3e4053; + 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 { + color: rgba(255, 255, 255, 0.6); +} +.p-togglebutton.p-button.p-highlight { + background: #b19df7; + border-color: #b19df7; + color: #1c1d26; +} +.p-togglebutton.p-button.p-highlight .p-button-icon-left, +.p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #1c1d26; +} +.p-togglebutton.p-button.p-highlight:hover { + background: #a28af5; + border-color: #a28af5; + color: #1c1d26; +} +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #1c1d26; +} +.p-togglebutton.p-button.p-invalid > .p-button { + border-color: #ff9a9a; +} + +.p-button { + color: #1c1d26; + background: #b19df7; + border: 1px solid #b19df7; + padding: 0.75rem 1.25rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-button:enabled:hover, .p-button:not(button):not(a):not(.p-disabled):hover { + background: #a28af5; + color: #1c1d26; + border-color: #a28af5; +} +.p-button:enabled:active, .p-button:not(button):not(a):not(.p-disabled):active { + background: #9378f4; + color: #1c1d26; + border-color: #9378f4; +} +.p-button.p-button-outlined { + background-color: transparent; + color: #b19df7; + border: 1px solid; +} +.p-button.p-button-outlined:enabled:hover, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(177, 157, 247, 0.04); + color: #b19df7; + border: 1px solid; +} +.p-button.p-button-outlined:enabled:active, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; + border: 1px solid; +} +.p-button.p-button-outlined.p-button-plain { + color: rgba(255, 255, 255, 0.6); + border-color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-outlined.p-button-plain:enabled:hover, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-outlined.p-button-plain:enabled:active, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-text { + background-color: transparent; + color: #b19df7; + border-color: transparent; +} +.p-button.p-button-text:enabled:hover, .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(177, 157, 247, 0.04); + color: #b19df7; + border-color: transparent; +} +.p-button.p-button-text:enabled:active, .p-button.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; + border-color: transparent; +} +.p-button.p-button-text.p-button-plain { + color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-text.p-button-plain:enabled:hover, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-text.p-button-plain:enabled:active, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.6); +} +.p-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-button .p-button-label { + transition-duration: 0.2s; +} +.p-button .p-button-icon-left { + margin-right: 0.5rem; +} +.p-button .p-button-icon-right { + margin-left: 0.5rem; +} +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} +.p-button .p-badge { + margin-left: 0.5rem; + min-width: 1rem; + height: 1rem; + line-height: 1rem; + color: #b19df7; + background-color: #1c1d26; +} +.p-button.p-button-raised { + 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); +} +.p-button.p-button-rounded { + border-radius: 2rem; +} +.p-button.p-button-icon-only { + width: 3rem; + padding: 0.75rem 0; +} +.p-button.p-button-icon-only .p-button-icon-left, +.p-button.p-button-icon-only .p-button-icon-right { + margin: 0; +} +.p-button.p-button-icon-only.p-button-rounded { + border-radius: 50%; + height: 3rem; +} +.p-button.p-button-sm { + font-size: 0.875rem; + padding: 0.65625rem 1.09375rem; +} +.p-button.p-button-sm .p-button-icon { + font-size: 0.875rem; +} +.p-button.p-button-lg { + font-size: 1.25rem; + padding: 0.9375rem 1.5625rem; +} +.p-button.p-button-lg .p-button-icon { + font-size: 1.25rem; +} +.p-button.p-button-loading-label-only.p-button-loading-left .p-button-label { + margin-left: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-right .p-button-label { + margin-right: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-top .p-button-label { + margin-top: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label { + margin-bottom: 0.5rem; +} +.p-button.p-button-loading-label-only .p-button-loading-icon { + margin: 0; +} + +.p-fluid .p-button { + width: 100%; +} +.p-fluid .p-button-icon-only { + width: 3rem; +} +.p-fluid .p-buttonset { + display: flex; +} +.p-fluid .p-buttonset .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 { + color: #1d1e27; + background: #d4ea93; + border: 1px solid #d4ea93; +} +.p-button.p-button-secondary:enabled:hover, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary:enabled:hover, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover { + background: #c7e473; + color: #1d1e27; + border-color: #c7e473; +} +.p-button.p-button-secondary:enabled:focus, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-secondary:enabled:focus, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #e1f0b3; +} +.p-button.p-button-secondary:enabled:active, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary:enabled:active, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active { + background: #bbde53; + color: #1d1e27; + border-color: #bbde53; +} +.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 { + background-color: transparent; + color: #d4ea93; + border: 1px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(212, 234, 147, 0.04); + color: #d4ea93; + border: 1px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(212, 234, 147, 0.16); + color: #d4ea93; + 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 { + background-color: transparent; + color: #d4ea93; + border-color: transparent; +} +.p-button.p-button-secondary.p-button-text:enabled:hover, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(212, 234, 147, 0.04); + border-color: transparent; + color: #d4ea93; +} +.p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(212, 234, 147, 0.16); + border-color: transparent; + color: #d4ea93; +} + +.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 { + color: #1d1e27; + background: #9bcaff; + border: 1px solid #9bcaff; +} +.p-button.p-button-info:enabled:hover, .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info:enabled:hover, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover { + background: #72b4ff; + color: #1d1e27; + border-color: #72b4ff; +} +.p-button.p-button-info:enabled:focus, .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-info:enabled:focus, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #b9daff; +} +.p-button.p-button-info:enabled:active, .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info:enabled:active, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active { + background: #499fff; + color: #1d1e27; + border-color: #499fff; +} +.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 { + background-color: transparent; + color: #9bcaff; + border: 1px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:hover, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(155, 202, 255, 0.04); + color: #9bcaff; + border: 1px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:active, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(155, 202, 255, 0.16); + color: #9bcaff; + 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 { + background-color: transparent; + color: #9bcaff; + border-color: transparent; +} +.p-button.p-button-info.p-button-text:enabled:hover, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(155, 202, 255, 0.04); + border-color: transparent; + color: #9bcaff; +} +.p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(155, 202, 255, 0.16); + border-color: transparent; + color: #9bcaff; +} + +.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 { + color: #1d1e27; + background: #93deac; + border: 1px solid #93deac; +} +.p-button.p-button-success:enabled:hover, .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success:enabled:hover, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover { + background: #77d596; + color: #1d1e27; + border-color: #77d596; +} +.p-button.p-button-success:enabled:focus, .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-success:enabled:focus, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #b3e8c5; +} +.p-button.p-button-success:enabled:active, .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success:enabled:active, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active { + background: #5acd81; + color: #1d1e27; + border-color: #5acd81; +} +.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 { + background-color: transparent; + color: #93deac; + border: 1px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:hover, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(147, 222, 172, 0.04); + color: #93deac; + border: 1px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:active, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(147, 222, 172, 0.16); + color: #93deac; + 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 { + background-color: transparent; + color: #93deac; + border-color: transparent; +} +.p-button.p-button-success.p-button-text:enabled:hover, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(147, 222, 172, 0.04); + border-color: transparent; + color: #93deac; +} +.p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(147, 222, 172, 0.16); + border-color: transparent; + color: #93deac; +} + +.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 { + color: #1d1e27; + background: #ffcf91; + border: 1px solid #ffcf91; +} +.p-button.p-button-warning:enabled:hover, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning:enabled:hover, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover { + background: #ffbe69; + color: #1d1e27; + border-color: #ffbe69; +} +.p-button.p-button-warning:enabled:focus, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-warning:enabled:focus, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #ffddb2; +} +.p-button.p-button-warning:enabled:active, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning:enabled:active, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active { + background: #ffac41; + color: #1d1e27; + border-color: #ffac41; +} +.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 { + background-color: transparent; + color: #ffcf91; + border: 1px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:hover, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 207, 145, 0.04); + color: #ffcf91; + border: 1px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:active, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 207, 145, 0.16); + color: #ffcf91; + 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 { + background-color: transparent; + color: #ffcf91; + border-color: transparent; +} +.p-button.p-button-warning.p-button-text:enabled:hover, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 207, 145, 0.04); + border-color: transparent; + color: #ffcf91; +} +.p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 207, 145, 0.16); + border-color: transparent; + color: #ffcf91; +} + +.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 { + color: #1d1e27; + background: #86e0e7; + border: 1px solid #86e0e7; +} +.p-button.p-button-help:enabled:hover, .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help:enabled:hover, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover { + background: #68d8e1; + color: #1d1e27; + border-color: #68d8e1; +} +.p-button.p-button-help:enabled:focus, .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-help:enabled:focus, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #aae9ee; +} +.p-button.p-button-help:enabled:active, .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help:enabled:active, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active { + background: #49d0db; + color: #1d1e27; + border-color: #49d0db; +} +.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 { + background-color: transparent; + color: #86e0e7; + border: 1px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:hover, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(134, 224, 231, 0.04); + color: #86e0e7; + border: 1px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:active, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(134, 224, 231, 0.16); + color: #86e0e7; + 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 { + background-color: transparent; + color: #86e0e7; + border-color: transparent; +} +.p-button.p-button-help.p-button-text:enabled:hover, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(134, 224, 231, 0.04); + border-color: transparent; + color: #86e0e7; +} +.p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(134, 224, 231, 0.16); + border-color: transparent; + color: #86e0e7; +} + +.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 { + color: #1d1e27; + background: #eb9a9c; + border: 1px solid #eb9a9c; +} +.p-button.p-button-danger:enabled:hover, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger:enabled:hover, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover { + background: #e57a7c; + color: #1d1e27; + border-color: #e57a7c; +} +.p-button.p-button-danger:enabled:focus, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-danger:enabled:focus, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #f1b8ba; +} +.p-button.p-button-danger:enabled:active, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger:enabled:active, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active { + background: #de595c; + color: #1d1e27; + border-color: #de595c; +} +.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 { + background-color: transparent; + color: #eb9a9c; + border: 1px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:hover, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(235, 154, 156, 0.04); + color: #eb9a9c; + border: 1px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:active, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(235, 154, 156, 0.16); + color: #eb9a9c; + 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 { + background-color: transparent; + color: #eb9a9c; + border-color: transparent; +} +.p-button.p-button-danger.p-button-text:enabled:hover, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(235, 154, 156, 0.04); + border-color: transparent; + color: #eb9a9c; +} +.p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(235, 154, 156, 0.16); + border-color: transparent; + color: #eb9a9c; +} + +.p-button.p-button-link { + color: #b19df7; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover { + background: transparent; + color: #b19df7; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-label, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus, .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus { + background: transparent; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: transparent; +} +.p-button.p-button-link:enabled:active, .p-button.p-button-link:not(button):not(a):not(.p-disabled):active { + background: transparent; + color: #b19df7; + border-color: transparent; +} + +.p-splitbutton { + border-radius: 6px; +} +.p-splitbutton.p-button-outlined > .p-button { + background-color: transparent; + color: #b19df7; + border: 1px solid; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(177, 157, 247, 0.04); + color: #b19df7; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button { + color: rgba(255, 255, 255, 0.6); + border-color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-text > .p-button { + background-color: transparent; + color: #b19df7; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(177, 157, 247, 0.04); + color: #b19df7; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; + border-color: transparent; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button { + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-raised { + 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); +} +.p-splitbutton.p-button-rounded { + border-radius: 2rem; +} +.p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; +} +.p-splitbutton.p-button-sm > .p-button { + font-size: 0.875rem; + padding: 0.65625rem 1.09375rem; +} +.p-splitbutton.p-button-sm > .p-button .p-button-icon { + font-size: 0.875rem; +} +.p-splitbutton.p-button-lg > .p-button { + font-size: 1.25rem; + padding: 0.9375rem 1.5625rem; +} +.p-splitbutton.p-button-lg > .p-button .p-button-icon { + font-size: 1.25rem; +} + +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button { + background-color: transparent; + color: #d4ea93; + border: 1px solid; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(212, 234, 147, 0.04); + color: #d4ea93; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(212, 234, 147, 0.16); + color: #d4ea93; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button { + background-color: transparent; + color: #d4ea93; + border-color: transparent; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(212, 234, 147, 0.04); + border-color: transparent; + color: #d4ea93; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(212, 234, 147, 0.16); + border-color: transparent; + color: #d4ea93; +} + +.p-splitbutton.p-button-info.p-button-outlined > .p-button { + background-color: transparent; + color: #9bcaff; + border: 1px solid; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(155, 202, 255, 0.04); + color: #9bcaff; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(155, 202, 255, 0.16); + color: #9bcaff; +} +.p-splitbutton.p-button-info.p-button-text > .p-button { + background-color: transparent; + color: #9bcaff; + border-color: transparent; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(155, 202, 255, 0.04); + border-color: transparent; + color: #9bcaff; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(155, 202, 255, 0.16); + border-color: transparent; + color: #9bcaff; +} + +.p-splitbutton.p-button-success.p-button-outlined > .p-button { + background-color: transparent; + color: #93deac; + border: 1px solid; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(147, 222, 172, 0.04); + color: #93deac; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(147, 222, 172, 0.16); + color: #93deac; +} +.p-splitbutton.p-button-success.p-button-text > .p-button { + background-color: transparent; + color: #93deac; + border-color: transparent; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(147, 222, 172, 0.04); + border-color: transparent; + color: #93deac; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(147, 222, 172, 0.16); + border-color: transparent; + color: #93deac; +} + +.p-splitbutton.p-button-warning.p-button-outlined > .p-button { + background-color: transparent; + color: #ffcf91; + border: 1px solid; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 207, 145, 0.04); + color: #ffcf91; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 207, 145, 0.16); + color: #ffcf91; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button { + background-color: transparent; + color: #ffcf91; + border-color: transparent; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 207, 145, 0.04); + border-color: transparent; + color: #ffcf91; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 207, 145, 0.16); + border-color: transparent; + color: #ffcf91; +} + +.p-splitbutton.p-button-help.p-button-outlined > .p-button { + background-color: transparent; + color: #86e0e7; + border: 1px solid; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(134, 224, 231, 0.04); + color: #86e0e7; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(134, 224, 231, 0.16); + color: #86e0e7; +} +.p-splitbutton.p-button-help.p-button-text > .p-button { + background-color: transparent; + color: #86e0e7; + border-color: transparent; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(134, 224, 231, 0.04); + border-color: transparent; + color: #86e0e7; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(134, 224, 231, 0.16); + border-color: transparent; + color: #86e0e7; +} + +.p-splitbutton.p-button-danger.p-button-outlined > .p-button { + background-color: transparent; + color: #eb9a9c; + border: 1px solid; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(235, 154, 156, 0.04); + color: #eb9a9c; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(235, 154, 156, 0.16); + color: #eb9a9c; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button { + background-color: transparent; + color: #eb9a9c; + border-color: transparent; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(235, 154, 156, 0.04); + border-color: transparent; + color: #eb9a9c; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(235, 154, 156, 0.16); + border-color: transparent; + color: #eb9a9c; +} + +.p-speeddial-button.p-button.p-button-icon-only { + width: 4rem; + height: 4rem; +} +.p-speeddial-button.p-button.p-button-icon-only .p-button-icon { + font-size: 1.3rem; +} + +.p-speeddial-action { + width: 3rem; + height: 3rem; + background: rgba(255, 255, 255, 0.87); + color: #1d1e27; +} +.p-speeddial-action:hover { + background: rgba(255, 255, 255, 0.6); + color: #1d1e27; +} + +.p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; +} + +.p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; +} + +.p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; +} + +.p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; +} +.p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; +} + +.p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); +} + +.p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin: 0.5rem; +} +.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-carousel .p-carousel-content .p-carousel-prev:focus, +.p-carousel .p-carousel-content .p-carousel-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-carousel .p-carousel-indicators { + padding: 1rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #3e4053; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 0; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: rgba(255, 255, 255, 0.03); +} +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} + +.p-datatable .p-paginator-top { + border-width: 1px 0 1px 0; + border-radius: 0; +} +.p-datatable .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datatable .p-datatable-header { + background: #282936; + color: rgba(255, 255, 255, 0.6); + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-datatable .p-datatable-footer { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + font-weight: 700; + color: rgba(255, 255, 255, 0.87); + background: #282936; + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + font-weight: 700; + color: rgba(255, 255, 255, 0.87); + background: #282936; +} +.p-datatable .p-sortable-column .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.6); + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #b19df7; + background: rgba(177, 157, 247, 0.16); + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-datatable .p-sortable-column.p-highlight { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #b19df7; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #b19df7; +} +.p-datatable .p-sortable-column:focus { + box-shadow: inset 0 0 0 0.15rem #e0d8fc; + outline: 0 none; +} +.p-datatable .p-datatable-tbody > tr { + background: #282936; + color: rgba(255, 255, 255, 0.87); + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { + margin-right: 0.5rem; +} +.p-datatable .p-datatable-tbody > tr > td > .p-column-title { + font-weight: 700; +} +.p-datatable .p-datatable-tbody > tr > td.p-highlight { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-datatable .p-datatable-tbody > tr.p-highlight { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 rgba(177, 157, 247, 0.16); +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 rgba(177, 157, 247, 0.16); +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus { + outline: 0.15rem solid #e0d8fc; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus { + outline: 0.15rem solid #e0d8fc; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-datatable .p-column-resizer-helper { + background: #b19df7; +} +.p-datatable .p-datatable-scrollable-header, +.p-datatable .p-datatable-scrollable-footer { + background: #282936; +} +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { + background-color: #282936; +} +.p-datatable .p-datatable-loading-icon { + font-size: 2rem; +} +.p-datatable.p-datatable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-footer { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-top { + border-width: 0 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-bottom { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + background: #2b2c38; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { + color: #b19df7; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { + color: #b19df7; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { + background: #2b2c38; +} +.p-datatable.p-datatable-sm .p-datatable-header { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-lg .p-datatable-header { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-footer { + padding: 1.25rem 1.25rem; +} + +.p-datatable-drag-selection-helper { + background: rgba(177, 157, 247, 0.16); +} + +.p-dataview .p-paginator-top { + border-width: 1px 0 1px 0; + border-radius: 0; +} +.p-dataview .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-dataview .p-dataview-header { + background: #282936; + color: rgba(255, 255, 255, 0.6); + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-dataview .p-dataview-content { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 0 none; + padding: 0; +} +.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { + border: solid #3e4053; + border-width: 0 0 1px 0; +} +.p-dataview .p-dataview-footer { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-dataview .p-dataview-loading-icon { + font-size: 2rem; +} + +.p-datascroller .p-paginator-top { + border-width: 1px 0 1px 0; + border-radius: 0; +} +.p-datascroller .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datascroller .p-datascroller-header { + background: #282936; + color: rgba(255, 255, 255, 0.6); + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-datascroller .p-datascroller-content { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 0 none; + padding: 0; +} +.p-datascroller.p-datascroller-inline .p-datascroller-list > li { + border: solid #3e4053; + border-width: 0 0 1px 0; +} +.p-datascroller .p-datascroller-footer { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-column-filter-row .p-column-filter-menu-button, +.p-column-filter-row .p-column-filter-clear-button { + margin-left: 0.5rem; +} + +.p-column-filter-menu-button { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-column-filter-menu-button:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.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(177, 157, 247, 0.16); + color: #b19df7; +} +.p-column-filter-menu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} + +.p-column-filter-clear-button { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-column-filter-clear-button:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-column-filter-clear-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} + +.p-column-filter-overlay { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + 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); + min-width: 12.5rem; +} +.p-column-filter-overlay .p-column-filter-row-items { + padding: 0.75rem 0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #3e4053; + margin: 0.25rem 0; +} + +.p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + background: #282936; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 1.25rem; + border-bottom: 1px solid #3e4053; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { + margin-bottom: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-top: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint:last-child { + border-bottom: 0 none; +} +.p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0.75rem 1.25rem; +} +.p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 1.25rem; +} + +.fc { + /* FullCalendar 4 */ + /* FullCalendar 5 */ +} +.fc.fc-unthemed .fc-view-container th { + background: #282936; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-unthemed .fc-view-container td.fc-widget-content { + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-unthemed .fc-view-container td.fc-head-container { + border: 1px solid #3e4053; +} +.fc.fc-unthemed .fc-view-container .fc-view { + background: #282936; +} +.fc.fc-unthemed .fc-view-container .fc-row { + border-right: 1px solid #3e4053; +} +.fc.fc-unthemed .fc-view-container .fc-event { + background: #a28af5; + border: 1px solid #a28af5; + color: #1c1d26; +} +.fc.fc-unthemed .fc-view-container .fc-divider { + background: #282936; + border: 1px solid #3e4053; +} +.fc.fc-unthemed .fc-toolbar .fc-button { + color: #1c1d26; + background: #b19df7; + border: 1px solid #b19df7; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; + display: flex; + align-items: center; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { + background: #a28af5; + color: #1c1d26; + border-color: #a28af5; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { + background: #9378f4; + color: #1c1d26; + border-color: #9378f4; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-unthemed .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #282936; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #b19df7; + border-color: #b19df7; + color: #1c1d26; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #a28af5; + border-color: #a28af5; + color: #1c1d26; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + z-index: 1; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { + border-color: #3e4053; +} +.fc.fc-theme-standard .fc-view-harness th { + background: #282936; + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-theme-standard .fc-view-harness td { + color: rgba(255, 255, 255, 0.87); + border-color: #3e4053; +} +.fc.fc-theme-standard .fc-view-harness .fc-view { + background: #282936; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover { + background: none; + border: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { + border: 1px solid #3e4053; + padding: 1.25rem; + background: #282936; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + font-family: "PrimeIcons" !important; + font-size: 1rem; + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { + content: "\e90b"; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { + padding: 1.25rem; + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { + color: #1c1d26; + background: #a28af5; + border-color: #a28af5; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { + color: #1c1d26; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { + background: #a28af5; + border-color: #a28af5; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { + background: #282936; +} +.fc.fc-theme-standard .fc-toolbar .fc-button { + color: #1c1d26; + background: #b19df7; + border: 1px solid #b19df7; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { + background: #a28af5; + color: #1c1d26; + border-color: #a28af5; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { + background: #9378f4; + color: #1c1d26; + border-color: #9378f4; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:disabled { + opacity: 0.4; + color: #1c1d26; + background: #b19df7; + border: 1px solid #b19df7; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #282936; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #b19df7; + border-color: #b19df7; + color: #1c1d26; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #a28af5; + border-color: #a28af5; + color: #1c1d26; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + z-index: 1; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.fc.fc-theme-standard .fc-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} + +.p-orderlist .p-orderlist-controls { + padding: 1.25rem; +} +.p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; +} +.p-orderlist .p-orderlist-header { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + padding: 1.25rem; + font-weight: 700; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-orderlist .p-orderlist-filter-container { + padding: 1.25rem; + background: #282936; + border: 1px solid #3e4053; + border-bottom: 0 none; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input { + padding-right: 1.75rem; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-orderlist .p-orderlist-list { + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.75rem 1.25rem; + margin: 0; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: transform 0.2s, box-shadow 0.2s; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-orderlist .p-orderlist-list .p-orderlist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: rgba(255, 255, 255, 0.01); +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(255, 255, 255, 0.03); +} + +@media screen and (max-width: 960px) { + .p-orderlist { + flex-direction: column; + } + .p-orderlist .p-orderlist-controls { + padding: 1.25rem; + flex-direction: row; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-orderlist .p-orderlist-controls .p-button:last-child { + margin-right: 0; + } +} +.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-organizationchart .p-organizationchart-node-content.p-highlight { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: rgba(83, 39, 237, 0.16); +} +.p-organizationchart .p-organizationchart-line-down { + background: #3e4053; +} +.p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #3e4053; + border-color: #3e4053; +} +.p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #3e4053; + border-color: #3e4053; +} +.p-organizationchart .p-organizationchart-node-content { + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} + +.p-paginator { + background: #282936; + color: rgba(255, 255, 255, 0.6); + border: solid #3e4053; + border-width: 1px; + padding: 0.5rem 1rem; + border-radius: 6px; +} +.p-paginator .p-paginator-first, +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; + color: rgba(255, 255, 255, 0.6); + min-width: 3rem; + height: 3rem; + margin: 0.143rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: rgba(255, 255, 255, 0.87); +} +.p-paginator .p-paginator-first { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-paginator .p-paginator-last { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-paginator .p-dropdown { + margin-left: 0.5rem; + height: 3rem; +} +.p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; +} +.p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; +} +.p-paginator .p-paginator-page-input .p-inputtext { + max-width: 3rem; +} +.p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: rgba(255, 255, 255, 0.6); + min-width: 3rem; + height: 3rem; + margin: 0.143rem; + padding: 0 0.5rem; +} +.p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: rgba(255, 255, 255, 0.6); + min-width: 3rem; + height: 3rem; + margin: 0.143rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: rgba(177, 157, 247, 0.16); + border-color: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + border-color: transparent; + color: rgba(255, 255, 255, 0.87); +} + +.p-picklist .p-picklist-buttons { + padding: 1.25rem; +} +.p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; +} +.p-picklist .p-picklist-header { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + padding: 1.25rem; + font-weight: 700; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-picklist .p-picklist-filter-container { + padding: 1.25rem; + background: #282936; + border: 1px solid #3e4053; + border-bottom: 0 none; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-input { + padding-right: 1.75rem; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-picklist .p-picklist-list { + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-picklist .p-picklist-list .p-picklist-item { + padding: 0.75rem 1.25rem; + margin: 0; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: transform 0.2s, box-shadow 0.2s; +} +.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-picklist .p-picklist-list .p-picklist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #b19df7; + background: rgba(177, 157, 247, 0.16); +} + +@media screen and (max-width: 960px) { + .p-picklist { + flex-direction: column; + } + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + flex-direction: row; + } + .p-picklist .p-picklist-buttons .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-picklist .p-picklist-buttons .p-button:last-child { + margin-right: 0; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before { + content: "\e930"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before { + content: "\e92c"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before { + content: "\e933"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before { + content: "\e92f"; + } +} +.p-tree { + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + padding: 1.25rem; + border-radius: 6px; +} +.p-tree .p-tree-container .p-treenode { + padding: 0.143rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: box-shadow 0.2s; + padding: 0.5rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: rgba(255, 255, 255, 0.6); +} +.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 { + color: rgba(255, 255, 255, 0.87); +} +.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.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: #b19df7; +} +.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: #b19df7; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-tree .p-tree-filter-container { + margin-bottom: 0.5rem; +} +.p-tree .p-tree-filter-container .p-tree-filter { + width: 100%; + padding-right: 1.75rem; +} +.p-tree .p-tree-filter-container .p-tree-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-tree .p-treenode-children { + padding: 0 0 0 1rem; +} +.p-tree .p-tree-loading-icon { + font-size: 2rem; +} +.p-tree .p-treenode-droppoint { + height: 0.5rem; +} +.p-tree .p-treenode-droppoint.p-treenode-droppoint-active { + background: rgba(118, 82, 241, 0.16); +} + +.p-treetable .p-paginator-top { + border-width: 1px 0 1px 0; + border-radius: 0; +} +.p-treetable .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-treetable .p-treetable-header { + background: #282936; + color: rgba(255, 255, 255, 0.6); + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-treetable .p-treetable-footer { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + font-weight: 700; + color: rgba(255, 255, 255, 0.87); + background: #282936; + transition: box-shadow 0.2s; +} +.p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + font-weight: 700; + color: rgba(255, 255, 255, 0.87); + background: #282936; +} +.p-treetable .p-sortable-column { + outline-color: #e0d8fc; +} +.p-treetable .p-sortable-column .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.6); + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #b19df7; + background: rgba(177, 157, 247, 0.16); + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-treetable .p-sortable-column.p-highlight { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #b19df7; +} +.p-treetable .p-treetable-tbody > tr { + background: #282936; + color: rgba(255, 255, 255, 0.87); + transition: box-shadow 0.2s; +} +.p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #3e4053; + border-width: 0 0 1px 0; + padding: 1rem 1rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-treetable .p-treetable-tbody > tr:focus { + outline: 0.15rem solid #e0d8fc; + outline-offset: -0.15rem; +} +.p-treetable .p-treetable-tbody > tr.p-highlight { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { + color: #b19df7; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { + color: #b19df7; +} +.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(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: rgba(255, 255, 255, 0.87); +} +.p-treetable .p-column-resizer-helper { + background: #b19df7; +} +.p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #282936; +} +.p-treetable .p-treetable-loading-icon { + font-size: 2rem; +} +.p-treetable.p-treetable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.875rem 0.875rem; +} +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-lg .p-treetable-header { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-footer { + padding: 1.25rem 1.25rem; +} + +.p-timeline .p-timeline-event-marker { + border: 2px solid #b19df7; + border-radius: 50%; + width: 1rem; + height: 1rem; + background-color: #1c1d26; +} +.p-timeline .p-timeline-event-connector { + background-color: #3e4053; +} +.p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; +} +.p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; +} + +.p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.25rem; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + background: #282936; + font-weight: 700; + border-radius: 6px; + transition: box-shadow 0.2s; +} +.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + margin-right: 0.5rem; +} +.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: rgba(255, 255, 255, 0.03); + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #282936; + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-color: #3e4053; + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-accordion .p-accordion-content { + padding: 1.25rem; + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-accordion .p-accordion-tab { + margin-bottom: 4px; +} + +.p-card { + background: #282936; + color: rgba(255, 255, 255, 0.87); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; +} +.p-card .p-card-body { + padding: 1.25rem; +} +.p-card .p-card-title { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.5rem; +} +.p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: rgba(255, 255, 255, 0.6); +} +.p-card .p-card-content { + padding: 1.25rem 0; +} +.p-card .p-card-footer { + padding: 1.25rem 0 0 0; +} + +.p-fieldset { + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; +} +.p-fieldset .p-fieldset-legend { + padding: 1.25rem; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + background: #282936; + font-weight: 700; + border-radius: 6px; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.2s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + margin-right: 0.5rem; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.p-fieldset .p-fieldset-content { + padding: 1.25rem; +} + +.p-divider .p-divider-content { + background-color: #282936; +} +.p-divider.p-divider-horizontal { + margin: 1.25rem 0; + padding: 0 1.25rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #3e4053; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1.25rem; + padding: 1.25rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #3e4053; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + +.p-panel .p-panel-header { + border: 1px solid #3e4053; + padding: 1.25rem; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-panel .p-panel-header .p-panel-title { + font-weight: 700; +} +.p-panel .p-panel-header .p-panel-header-icon { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-panel .p-panel-header .p-panel-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.25rem; +} +.p-panel .p-panel-content { + padding: 1.25rem; + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; +} +.p-panel .p-panel-footer { + padding: 0.75rem 1.25rem; + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} + +.p-splitter { + border: 1px solid #3e4053; + background: #282936; + border-radius: 6px; + color: rgba(255, 255, 255, 0.87); +} +.p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + background: rgba(255, 255, 255, 0.03); +} +.p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #3e4053; +} +.p-splitter .p-splitter-gutter-resizing { + background: #3e4053; +} + +.p-scrollpanel .p-scrollpanel-bar { + background: #3e4053; + border: 0 none; +} + +.p-tabview .p-tabview-nav { + background: transparent; + border: 1px solid #3e4053; + border-width: 0 0 2px 0; +} +.p-tabview .p-tabview-nav li { + margin-right: 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link { + border: solid #3e4053; + border-width: 0 0 2px 0; + border-color: transparent transparent #3e4053 transparent; + background: #282936; + color: rgba(255, 255, 255, 0.6); + padding: 1.25rem; + font-weight: 700; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: box-shadow 0.2s; + margin: 0 0 -2px 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #e0d8fc; +} +.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #282936; + border-color: #b19df7; + color: rgba(255, 255, 255, 0.87); +} +.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #282936; + border-color: #b19df7; + color: #b19df7; +} +.p-tabview .p-tabview-close { + margin-left: 0.5rem; +} +.p-tabview .p-tabview-nav-btn.p-link { + background: #282936; + color: #b19df7; + width: 3rem; + 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); + border-radius: 0; +} +.p-tabview .p-tabview-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #e0d8fc; +} +.p-tabview .p-tabview-panels { + background: #282936; + padding: 1.25rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-toolbar { + background: #282936; + border: 1px solid #3e4053; + padding: 1.25rem; + border-radius: 6px; + gap: 0.5rem; +} +.p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; +} + +.p-confirm-popup { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-confirm-popup .p-confirm-popup-content { + padding: 1.25rem; +} +.p-confirm-popup .p-confirm-popup-footer { + text-align: right; + padding: 0 1.25rem 1.25rem 1.25rem; +} +.p-confirm-popup .p-confirm-popup-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-confirm-popup .p-confirm-popup-footer button:last-child { + margin: 0; +} +.p-confirm-popup:after { + border: solid transparent; + border-color: rgba(40, 41, 54, 0); + border-bottom-color: #282936; +} +.p-confirm-popup:before { + border: solid transparent; + border-color: rgba(62, 64, 83, 0); + border-bottom-color: #3e4053; +} +.p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #282936; +} +.p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #3e4053; +} +.p-confirm-popup .p-confirm-popup-icon { + font-size: 1.5rem; +} +.p-confirm-popup .p-confirm-popup-message { + margin-left: 1rem; +} + +.p-dialog { + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); + border: 1px solid #3e4053; +} +.p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #282936; + color: rgba(255, 255, 255, 0.87); + padding: 1.5rem; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-dialog .p-dialog-header .p-dialog-title { + font-weight: 700; + font-size: 1.25rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-dialog .p-dialog-header .p-dialog-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; +} +.p-dialog .p-dialog-content { + background: #282936; + color: rgba(255, 255, 255, 0.87); + padding: 0 1.5rem 2rem 1.5rem; +} +.p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-dialog .p-dialog-footer { + border-top: 0 none; + background: #282936; + color: rgba(255, 255, 255, 0.87); + padding: 0 1.5rem 1.5rem 1.5rem; + text-align: right; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-dialog .p-dialog-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 1rem; +} + +.p-overlaypanel { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-overlaypanel .p-overlaypanel-content { + padding: 1.25rem; +} +.p-overlaypanel .p-overlaypanel-close { + background: #b19df7; + color: #1c1d26; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; + position: absolute; + top: -1rem; + right: -1rem; +} +.p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #a28af5; + color: #1c1d26; +} +.p-overlaypanel:after { + border: solid transparent; + border-color: rgba(40, 41, 54, 0); + border-bottom-color: #282936; +} +.p-overlaypanel:before { + border: solid transparent; + border-color: rgba(62, 64, 83, 0); + border-bottom-color: #3b3d4f; +} +.p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #282936; +} +.p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #3e4053; +} + +.p-sidebar { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-sidebar .p-sidebar-header { + padding: 1.25rem; +} +.p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(255, 255, 255, 0.03); +} +.p-sidebar .p-sidebar-header .p-sidebar-close:focus, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; +} +.p-sidebar .p-sidebar-content { + padding: 1.25rem; +} + +.p-tooltip .p-tooltip-text { + background: #3e4053; + color: rgba(255, 255, 255, 0.87); + padding: 0.75rem 0.75rem; + 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); + border-radius: 6px; +} +.p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #3e4053; +} +.p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #3e4053; +} +.p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #3e4053; +} +.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #3e4053; +} + +.p-fileupload .p-fileupload-buttonbar { + background: #282936; + padding: 1.25rem; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-fileupload .p-fileupload-buttonbar .p-button { + margin-right: 0.5rem; +} +.p-fileupload .p-fileupload-content { + background: #282936; + padding: 2rem 1rem; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-fileupload .p-progressbar { + height: 0.25rem; +} +.p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; +} +.p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; +} + +.p-breadcrumb { + background: #333544; + border: 1px solid #3e4053; + border-radius: 6px; + padding: 1rem; +} +.p-breadcrumb ul li .p-menuitem-link { + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-breadcrumb ul li .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-breadcrumb ul li.p-breadcrumb-chevron { + margin: 0 0.5rem 0 0.5rem; + color: rgba(255, 255, 255, 0.87); +} +.p-breadcrumb ul li:last-child .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-breadcrumb ul li:last-child .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); +} + +.p-contextmenu { + padding: 0.25rem 0; + background: #333544; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + 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); + border-radius: 6px; + width: 12.5rem; +} +.p-contextmenu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-contextmenu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-contextmenu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-contextmenu .p-submenu-list { + padding: 0.25rem 0; + background: #333544; + border: 1px solid #3e4053; + 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); + border-radius: 6px; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: rgba(177, 157, 247, 0.16); +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #b19df7; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #b19df7; +} +.p-contextmenu .p-menu-separator { + border-top: 1px solid #3e4053; + margin: 0.25rem 0; +} +.p-contextmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-dock .p-dock-list { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.5rem; + border-radius: 0.5rem; +} +.p-dock .p-dock-item { + padding: 0.5rem; +} +.p-dock .p-dock-action { + width: 4rem; + height: 4rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; +} + +@media screen and (max-width: 960px) { + .p-dock.p-dock-top .p-dock-container, .p-dock.p-dock-bottom .p-dock-container { + overflow-x: auto; + width: 100%; + } + .p-dock.p-dock-top .p-dock-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-container .p-dock-list { + margin: 0 auto; + } + .p-dock.p-dock-left .p-dock-container, .p-dock.p-dock-right .p-dock-container { + overflow-y: auto; + height: 100%; + } + .p-dock.p-dock-left .p-dock-container .p-dock-list, .p-dock.p-dock-right .p-dock-container .p-dock-list { + margin: auto 0; + } + .p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + transform: none; + margin: 0; + } +} +.p-megamenu { + padding: 0.5rem; + background: #333544; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.2s; + user-select: none; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + margin-left: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(177, 157, 247, 0.16); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #b19df7; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #b19df7; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #b19df7; +} +.p-megamenu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-megamenu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-megamenu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-megamenu .p-megamenu-panel { + background: #333544; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + 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-megamenu .p-megamenu-submenu-header { + margin: 0; + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: #333544; + font-weight: 700; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-megamenu .p-megamenu-submenu { + padding: 0.25rem 0; + width: 12.5rem; +} +.p-megamenu .p-megamenu-submenu .p-menu-separator { + border-top: 1px solid #3e4053; + margin: 0.25rem 0; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: rgba(177, 157, 247, 0.16); +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #b19df7; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #b19df7; +} +.p-megamenu.p-megamenu-vertical { + width: 12.5rem; + padding: 0.25rem 0; +} + +.p-menu { + padding: 0.25rem 0; + background: #333544; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + width: 12.5rem; +} +.p-menu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-menu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-menu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-menu.p-menu-overlay { + background: #333544; + border: 1px solid #3e4053; + 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-menu .p-submenu-header { + margin: 0; + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + background: #333544; + font-weight: 700; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.p-menu .p-menu-separator { + border-top: 1px solid #3e4053; + margin: 0.25rem 0; +} + +.p-menubar { + padding: 0.5rem; + background: #333544; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; +} +.p-menubar .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menubar .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-menubar .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + margin-left: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(177, 157, 247, 0.16); +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #b19df7; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #b19df7; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #b19df7; +} +.p-menubar .p-submenu-list { + padding: 0.25rem 0; + background: #333544; + border: 1px solid #3e4053; + 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); + width: 12.5rem; +} +.p-menubar .p-submenu-list .p-menu-separator { + border-top: 1px solid #3e4053; + margin: 0.25rem 0; +} +.p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: rgba(177, 157, 247, 0.16); +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #b19df7; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #b19df7; +} + +@media screen and (max-width: 960px) { + .p-menubar { + position: relative; + } + .p-menubar .p-menubar-button { + display: flex; + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-menubar .p-menubar-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menubar-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + } + .p-menubar .p-menubar-root-list { + position: absolute; + display: none; + padding: 0.25rem 0; + background: #333544; + border: 1px solid #3e4053; + 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); + width: 100%; + } + .p-menubar .p-menubar-root-list .p-menu-separator { + border-top: 1px solid #3e4053; + margin: 0.25rem 0; + } + .p-menubar .p-menubar-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-menubar .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list ul li a { + padding-left: 2.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li a { + padding-left: 3.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li a { + padding-left: 5.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li a { + padding-left: 6.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a { + padding-left: 8.25rem; + } + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } +} +.p-panelmenu .p-panelmenu-header > a { + padding: 1.25rem; + border: 1px solid #3e4053; + color: rgba(255, 255, 255, 0.87); + background: #282936; + font-weight: 700; + border-radius: 6px; + transition: box-shadow 0.2s; +} +.p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + background: rgba(255, 255, 255, 0.03); + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-header.p-highlight { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight > a { + background: #282936; + border-color: #3e4053; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover { + border-color: #3e4053; + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0; + border: 1px solid #3e4053; + background: #282936; + color: rgba(255, 255, 255, 0.87); + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) { + padding: 0 0 0 1rem; +} +.p-panelmenu .p-panelmenu-panel { + margin-bottom: 4px; +} + +.p-slidemenu { + padding: 0.25rem 0; + background: #333544; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + width: 12.5rem; +} +.p-slidemenu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-slidemenu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-slidemenu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-slidemenu.p-slidemenu-overlay { + background: #333544; + border: 1px solid #3e4053; + 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-slidemenu .p-slidemenu-list { + padding: 0.25rem 0; + background: #333544; + border: 1px solid #3e4053; + 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link { + background: rgba(177, 157, 247, 0.16); +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text { + color: #b19df7; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon { + color: #b19df7; +} +.p-slidemenu .p-slidemenu-separator { + border-top: 1px solid #3e4053; + margin: 0.25rem 0; +} +.p-slidemenu .p-slidemenu-icon { + font-size: 0.875rem; +} +.p-slidemenu .p-slidemenu-backward { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); +} + +.p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + z-index: 1; + border-radius: 50%; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-title { + margin-top: 0.5rem; + color: rgba(255, 255, 255, 0.6); +} +.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-steps .p-steps-item.p-highlight .p-steps-number { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 700; + color: rgba(255, 255, 255, 0.87); +} +.p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #3e4053; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; +} + +.p-tabmenu .p-tabmenu-nav { + background: transparent; + border: 1px solid #3e4053; + border-width: 0 0 2px 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem { + margin-right: 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + border: solid #3e4053; + border-width: 0 0 2px 0; + border-color: transparent transparent #3e4053 transparent; + background: #282936; + color: rgba(255, 255, 255, 0.6); + padding: 1.25rem; + font-weight: 700; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: box-shadow 0.2s; + margin: 0 0 -2px 0; + height: calc(100% + 2px); +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #e0d8fc; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #282936; + border-color: #b19df7; + color: rgba(255, 255, 255, 0.87); +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #282936; + border-color: #b19df7; + color: #b19df7; +} + +.p-tieredmenu { + padding: 0.25rem 0; + background: #333544; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + border-radius: 6px; + width: 12.5rem; +} +.p-tieredmenu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-tieredmenu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; +} +.p-tieredmenu.p-tieredmenu-overlay { + background: #333544; + border: 1px solid #3e4053; + 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-tieredmenu .p-submenu-list { + padding: 0.25rem 0; + background: #333544; + border: 1px solid #3e4053; + 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-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: rgba(177, 157, 247, 0.16); +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #b19df7; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #b19df7; +} +.p-tieredmenu .p-menu-separator { + border-top: 1px solid #3e4053; + margin: 0.25rem 0; +} +.p-tieredmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-inline-message { + padding: 0.75rem 0.75rem; + margin: 0; + border-radius: 6px; +} +.p-inline-message.p-inline-message-info { + background: #e9e9ff; + border: solid #696cff; + border-width: 1px; + color: #696cff; +} +.p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #696cff; +} +.p-inline-message.p-inline-message-success { + background: #e4f8f0; + border: solid #1ea97c; + border-width: 1px; + color: #1ea97c; +} +.p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #1ea97c; +} +.p-inline-message.p-inline-message-warn { + background: #fff2e2; + border: solid #cc8925; + border-width: 1px; + color: #cc8925; +} +.p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #cc8925; +} +.p-inline-message.p-inline-message-error { + background: #ffe7e6; + border: solid #ff5757; + border-width: 1px; + color: #ff5757; +} +.p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ff5757; +} +.p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; +} +.p-inline-message .p-inline-message-text { + font-size: 1rem; +} +.p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; +} + +.p-message { + margin: 1rem 0; + border-radius: 6px; +} +.p-message .p-message-wrapper { + padding: 1.25rem 1.75rem; +} +.p-message .p-message-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-message .p-message-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-message.p-message-info { + background: #e9e9ff; + border: solid #696cff; + border-width: 0 0 0 6px; + color: #696cff; +} +.p-message.p-message-info .p-message-icon { + color: #696cff; +} +.p-message.p-message-info .p-message-close { + color: #696cff; +} +.p-message.p-message-success { + background: #e4f8f0; + border: solid #1ea97c; + border-width: 0 0 0 6px; + color: #1ea97c; +} +.p-message.p-message-success .p-message-icon { + color: #1ea97c; +} +.p-message.p-message-success .p-message-close { + color: #1ea97c; +} +.p-message.p-message-warn { + background: #fff2e2; + border: solid #cc8925; + border-width: 0 0 0 6px; + color: #cc8925; +} +.p-message.p-message-warn .p-message-icon { + color: #cc8925; +} +.p-message.p-message-warn .p-message-close { + color: #cc8925; +} +.p-message.p-message-error { + background: #ffe7e6; + border: solid #ff5757; + border-width: 0 0 0 6px; + color: #ff5757; +} +.p-message.p-message-error .p-message-icon { + color: #ff5757; +} +.p-message.p-message-error .p-message-close { + color: #ff5757; +} +.p-message .p-message-text { + font-size: 1rem; + font-weight: 400; +} +.p-message .p-message-icon { + font-size: 1.5rem; + margin-right: 0.5rem; +} + +.p-toast { + opacity: 0.9; +} +.p-toast .p-toast-message { + margin: 0 0 1rem 0; + box-shadow: none; + border-radius: 6px; +} +.p-toast .p-toast-message .p-toast-message-content { + padding: 1rem; + border-width: 0 0 0 6px; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 700; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + margin: 0.5rem 0 0 0; +} +.p-toast .p-toast-message .p-toast-icon-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-toast .p-toast-message .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-toast .p-toast-message .p-toast-icon-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} +.p-toast .p-toast-message.p-toast-message-info { + background: #e9e9ff; + border: solid #696cff; + border-width: 0 0 0 6px; + color: #696cff; +} +.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + color: #696cff; +} +.p-toast .p-toast-message.p-toast-message-success { + background: #e4f8f0; + border: solid #1ea97c; + border-width: 0 0 0 6px; + color: #1ea97c; +} +.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + color: #1ea97c; +} +.p-toast .p-toast-message.p-toast-message-warn { + background: #fff2e2; + border: solid #cc8925; + border-width: 0 0 0 6px; + color: #cc8925; +} +.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + color: #cc8925; +} +.p-toast .p-toast-message.p-toast-message-error { + background: #ffe7e6; + border: solid #ff5757; + border-width: 0 0 0 6px; + color: #ff5757; +} +.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + color: #ff5757; +} + +.p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f8f9fa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f8f9fa; +} +.p-galleria .p-galleria-item-nav { + background: transparent; + color: #f8f9fa; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 6px; + margin: 0 0.5rem; +} +.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f8f9fa; +} +.p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f8f9fa; + padding: 1rem; +} +.p-galleria .p-galleria-indicators { + padding: 1rem; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #3e4053; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: rgba(255, 255, 255, 0.1); +} +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { + margin-right: 0.5rem; +} +.p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator { + margin-bottom: 0.5rem; +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators { + background: rgba(0, 0, 0, 0.5); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button { + background: rgba(255, 255, 255, 0.4); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover { + background: rgba(255, 255, 255, 0.6); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; +} +.p-galleria .p-galleria-thumbnail-container { + background: rgba(0, 0, 0, 0.9); + padding: 1rem 0.25rem; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { + margin: 0.5rem; + background-color: transparent; + color: #f8f9fa; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { + background: rgba(255, 255, 255, 0.1); + color: #f8f9fa; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + transition: box-shadow 0.2s; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} + +.p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-preview-indicator { + background-color: transparent; + color: #f8f9fa; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} + +.p-image-preview-container:hover > .p-image-preview-indicator { + background-color: rgba(0, 0, 0, 0.5); +} + +.p-image-toolbar { + padding: 1rem; +} + +.p-image-action.p-link { + color: #f8f9fa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-image-action.p-link:last-child { + margin-right: 0; +} +.p-image-action.p-link:hover { + color: #f8f9fa; + background-color: rgba(255, 255, 255, 0.1); +} +.p-image-action.p-link i { + font-size: 1.5rem; +} + +.p-avatar { + background-color: #3e4053; + border-radius: 6px; +} +.p-avatar.p-avatar-lg { + width: 3rem; + height: 3rem; + font-size: 1.5rem; +} +.p-avatar.p-avatar-lg .p-avatar-icon { + font-size: 1.5rem; +} +.p-avatar.p-avatar-xl { + width: 4rem; + height: 4rem; + font-size: 2rem; +} +.p-avatar.p-avatar-xl .p-avatar-icon { + font-size: 2rem; +} + +.p-avatar-group .p-avatar { + border: 2px solid #282936; +} + +.p-chip { + background-color: #3e4053; + color: rgba(255, 255, 255, 0.87); + border-radius: 16px; + padding: 0 0.75rem; +} +.p-chip .p-chip-text { + line-height: 1.5; + margin-top: 0.375rem; + margin-bottom: 0.375rem; +} +.p-chip .p-chip-icon { + margin-right: 0.5rem; +} +.p-chip img { + width: 2.25rem; + height: 2.25rem; + margin-left: -0.75rem; + margin-right: 0.5rem; +} +.p-chip .p-chip-remove-icon { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-left: 0.5rem; +} +.p-chip .p-chip-remove-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} + +.p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + 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); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-scrolltop.p-link { + background: rgba(177, 157, 247, 0.16); +} +.p-scrolltop.p-link:hover { + background: rgba(177, 157, 247, 0.3616); +} +.p-scrolltop .p-scrolltop-icon { + font-size: 1.5rem; + color: #b19df7; +} + +.p-skeleton { + background-color: rgba(255, 255, 255, 0.06); + border-radius: 6px; +} +.p-skeleton:after { + background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); +} + +.p-tag { + background: #b19df7; + color: #1c1d26; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; +} +.p-tag.p-tag-success { + background-color: #93deac; + color: #1d1e27; +} +.p-tag.p-tag-info { + background-color: #9bcaff; + color: #1d1e27; +} +.p-tag.p-tag-warning { + background-color: #ffcf91; + color: #1d1e27; +} +.p-tag.p-tag-danger { + background-color: #eb9a9c; + color: #1d1e27; +} +.p-tag .p-tag-icon { + margin-right: 0.25rem; + font-size: 0.75rem; +} + +.p-inplace .p-inplace-display { + padding: 0.75rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); +} +.p-inplace .p-inplace-display:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; +} + +.p-progressbar { + border: 0 none; + height: 1.5rem; + background: #3e4053; + border-radius: 6px; +} +.p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #b19df7; +} +.p-progressbar .p-progressbar-label { + color: #1c1d26; + line-height: 1.5rem; +} + +.p-terminal { + background: #282936; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3e4053; + padding: 1.25rem; +} +.p-terminal .p-terminal-input { + font-size: 1rem; + font-family: Lato, Helvetica, sans-serif; +} + +.p-badge { + background: #b19df7; + color: #1c1d26; + font-size: 0.75rem; + font-weight: 700; + min-width: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; +} +.p-badge.p-badge-secondary { + background-color: #d4ea93; + color: #1d1e27; +} +.p-badge.p-badge-success { + background-color: #93deac; + color: #1d1e27; +} +.p-badge.p-badge-info { + background-color: #9bcaff; + color: #1d1e27; +} +.p-badge.p-badge-warning { + background-color: #ffcf91; + color: #1d1e27; +} +.p-badge.p-badge-danger { + background-color: #eb9a9c; + color: #1d1e27; +} +.p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; +} +.p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; +} + +.p-tag { + background: #b19df7; + color: #1c1d26; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; +} +.p-tag.p-tag-success { + background-color: #93deac; + color: #1d1e27; +} +.p-tag.p-tag-info { + background-color: #9bcaff; + color: #1d1e27; +} +.p-tag.p-tag-warning { + background-color: #ffcf91; + color: #1d1e27; +} +.p-tag.p-tag-danger { + background-color: #eb9a9c; + color: #1d1e27; +} + +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #b19df7; +} + +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #b19df7; +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #b19df7; +} + +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #b19df7; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #b19df7; +} diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff new file mode 100644 index 0000000000..46d4244757 Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff differ diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2 b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2 new file mode 100644 index 0000000000..f1c62e0996 Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2 differ diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff new file mode 100644 index 0000000000..e8d62dd0a3 Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff differ diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2 b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2 new file mode 100644 index 0000000000..5ba583e88b Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2 differ diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff new file mode 100644 index 0000000000..c6d3d1d9de Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff differ diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2 b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2 new file mode 100644 index 0000000000..4153a8259f Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2 differ diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css new file mode 100644 index 0000000000..15f0cc1d1d --- /dev/null +++ b/public/themes/soho-light/theme.css @@ -0,0 +1,6056 @@ +:root { + --surface-a:#ffffff; + --surface-b:#eff3f8; + --surface-c:#f6f9fc; + --surface-d:#dfe7ef; + --surface-e:#ffffff; + --surface-f:#ffffff; + --text-color:#043d75; + --text-color-secondary:#708da9; + --primary-color:#7254f3; + --primary-color-text:#ffffff; + --font-family:Lato, Helvetica, sans-serif; + --surface-0: #ffffff; + --surface-50: #f1f4f6; + --surface-100: #e2e8ee; + --surface-200: #c6d1dd; + --surface-300: #a9bbcb; + --surface-400: #8da4ba; + --surface-500: #708da9; + --surface-600: #5a7187; + --surface-700: #435565; + --surface-800: #2d3844; + --surface-900: #161c22; + --gray-50: #f1f4f6; + --gray-100: #e2e8ee; + --gray-200: #c6d1dd; + --gray-300: #a9bbcb; + --gray-400: #8da4ba; + --gray-500: #708da9; + --gray-600: #5a7187; + --gray-700: #435565; + --gray-800: #2d3844; + --gray-900: #161c22; + --content-padding:1.25rem; + --inline-spacing:0.5rem; + --border-radius:6px; + --surface-ground:#eff3f8; + --surface-section:#ffffff; + --surface-card:#ffffff; + --surface-overlay:#ffffff; + --surface-border:#dfe7ef; + --surface-hover:#f6f9fc; + --maskbg: rgba(0, 0, 0, 0.4); + --focus-ring: 0 0 0 1px #c7bbfa; + color-scheme: light; +} + +/* lato-300 - latin-ext_latin */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 300; + src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* lato-regular - latin-ext_latin */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 400; + src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* lato-700 - latin-ext_latin */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 700; + src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +* { + box-sizing: border-box; +} + +.p-component { + font-family: Lato, Helvetica, sans-serif; + font-size: 1rem; + font-weight: normal; +} + +.p-component-overlay { + background-color: rgba(0, 0, 0, 0.4); + transition-duration: 0.2s; +} + +.p-disabled, .p-component:disabled { + opacity: 0.6; +} + +.p-error { + color: #ff6767; +} + +.p-text-secondary { + color: #708da9; +} + +.pi { + font-size: 1rem; +} + +.p-link { + font-size: 1rem; + font-family: Lato, Helvetica, sans-serif; + border-radius: 6px; +} +.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} + +.p-component-overlay-enter { + animation: p-component-overlay-enter-animation 150ms forwards; +} + +.p-component-overlay-leave { + animation: p-component-overlay-leave-animation 150ms forwards; +} + +@keyframes p-component-overlay-enter-animation { + from { + background-color: transparent; + } + to { + background-color: var(--maskbg); + } +} +@keyframes p-component-overlay-leave-animation { + from { + background-color: var(--maskbg); + } + to { + background-color: transparent; + } +} + +:root { + --blue-50:#f6fbfe; + --blue-100:#d6ecfc; + --blue-200:#b5ddfa; + --blue-300:#95cef8; + --blue-400:#74bff5; + --blue-500:#54b0f3; + --blue-600:#4796cf; + --blue-700:#3b7baa; + --blue-800:#2e6186; + --blue-900:#224661; + --green-50:#f4fcf8; + --green-100:#ccf2dc; + --green-200:#a3e7c1; + --green-300:#7adca6; + --green-400:#52d28a; + --green-500:#29c76f; + --green-600:#23a95e; + --green-700:#1d8b4e; + --green-800:#176d3d; + --green-900:#10502c; + --yellow-50:#fefdf6; + --yellow-100:#fcf4d6; + --yellow-200:#faebb5; + --yellow-300:#f8e295; + --yellow-400:#f5d974; + --yellow-500:#f3d054; + --yellow-600:#cfb147; + --yellow-700:#aa923b; + --yellow-800:#86722e; + --yellow-900:#615322; + --cyan-50:#f5fcfd; + --cyan-100:#d1f2f5; + --cyan-200:#ace8ed; + --cyan-300:#87dee6; + --cyan-400:#63d3de; + --cyan-500:#3ec9d6; + --cyan-600:#35abb6; + --cyan-700:#2b8d96; + --cyan-800:#226f76; + --cyan-900:#195056; + --pink-50:#fef6f7; + --pink-100:#fad6d6; + --pink-200:#f6b5b6; + --pink-300:#f29596; + --pink-400:#ee7475; + --pink-500:#ea5455; + --pink-600:#c74748; + --pink-700:#a43b3c; + --pink-800:#812e2f; + --pink-900:#5e2222; + --indigo-50:#f6f7fe; + --indigo-100:#d6dafc; + --indigo-200:#b5bcfa; + --indigo-300:#959ff8; + --indigo-400:#7481f5; + --indigo-500:#5464f3; + --indigo-600:#4755cf; + --indigo-700:#3b46aa; + --indigo-800:#2e3786; + --indigo-900:#222861; + --teal-50:#f3fcf9; + --teal-100:#c5f1e1; + --teal-200:#97e5c9; + --teal-300:#69dab1; + --teal-400:#3bce99; + --teal-500:#0dc381; + --teal-600:#0ba66e; + --teal-700:#09895a; + --teal-800:#076b47; + --teal-900:#054e34; + --orange-50:#fffaf6; + --orange-100:#ffe8d2; + --orange-200:#ffd6ae; + --orange-300:#ffc38a; + --orange-400:#ffb166; + --orange-500:#ff9f42; + --orange-600:#d98738; + --orange-700:#b36f2e; + --orange-800:#8c5724; + --orange-900:#66401a; + --bluegray-50:#f7f8fa; + --bluegray-100:#dbdfe8; + --bluegray-200:#bec5d6; + --bluegray-300:#a1abc4; + --bluegray-400:#8592b2; + --bluegray-500:#6878a0; + --bluegray-600:#586688; + --bluegray-700:#495470; + --bluegray-800:#394258; + --bluegray-900:#2a3040; + --purple-50:#f8f6fe; + --purple-100:#ddd6fc; + --purple-200:#c2b5fa; + --purple-300:#a895f8; + --purple-400:#8d74f5; + --purple-500:#7254f3; + --purple-600:#6147cf; + --purple-700:#503baa; + --purple-800:#3f2e86; + --purple-900:#2e2261; + --red-50:#fff5f6; + --red-100:#ffcfd4; + --red-200:#ffa9b2; + --red-300:#ff848f; + --red-400:#ff5e6d; + --red-500:#ff384b; + --red-600:#d93040; + --red-700:#b32735; + --red-800:#8c1f29; + --red-900:#66161e; + --primary-50:#f8f6fe; + --primary-100:#ddd6fc; + --primary-200:#c2b5fa; + --primary-300:#a895f8; + --primary-400:#8d74f5; + --primary-500:#7254f3; + --primary-600:#6147cf; + --primary-700:#503baa; + --primary-800:#3f2e86; + --primary-900:#2e2261; +} + +.p-autocomplete .p-autocomplete-loader { + right: 0.75rem; +} +.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.75rem; +} +.p-autocomplete .p-autocomplete-multiple-container { + padding: 0.375rem 0.75rem; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { + border-color: #7254f3; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0.375rem 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { + font-family: Lato, Helvetica, sans-serif; + font-size: 1rem; + color: #043d75; + padding: 0; + margin: 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: #e2dcfc; + color: #7254f3; + border-radius: 6px; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; +} +.p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #ff6767; +} + +.p-autocomplete-panel { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-autocomplete-panel .p-autocomplete-items { + padding: 0.75rem 0; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: #043d75; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { + color: #043d75; + background: #f6f9fc; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.75rem 1.25rem; + color: #708da9; + background: #eff3f8; + font-weight: 700; +} + +.p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #ff6767; +} + +.p-datepicker { + padding: 0.5rem; + background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%); + color: #ffffff; + border: 0 none; + border-radius: 6px; +} +.p-datepicker:not(.p-datepicker-inline) { + background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%); + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: transparent; +} +.p-datepicker .p-datepicker-header { + padding: 0.5rem; + color: #ffffff; + background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%); + font-weight: 700; + margin: 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev, +.p-datepicker .p-datepicker-header .p-datepicker-next { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 2rem; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #ffffff; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; +} +.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: #7254f3; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + margin-right: 0.5rem; +} +.p-datepicker table { + font-size: 1rem; + margin: 0.5rem 0; +} +.p-datepicker table th { + padding: 0.5rem; +} +.p-datepicker table th > span { + width: 2.5rem; + height: 2.5rem; +} +.p-datepicker table td { + padding: 0.5rem; +} +.p-datepicker table td > span { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + transition: box-shadow 0.2s; + border: 1px solid transparent; +} +.p-datepicker table td > span.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-datepicker table td > span:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-datepicker table td.p-datepicker-today > span { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; + border-color: transparent; +} +.p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-datepicker .p-datepicker-buttonbar { + padding: 1rem 0; + border-top: 1px solid #dfe7ef; +} +.p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; +} +.p-datepicker .p-timepicker { + border-top: 1px solid #dfe7ef; + padding: 0.5rem; +} +.p-datepicker .p-timepicker button { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datepicker .p-timepicker button:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-datepicker .p-timepicker button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-datepicker .p-timepicker button:last-child { + margin-top: 0.2em; +} +.p-datepicker .p-timepicker span { + font-size: 1.25rem; +} +.p-datepicker .p-timepicker > div { + padding: 0 0.5rem; +} +.p-datepicker.p-datepicker-timeonly .p-timepicker { + border-top: 0 none; +} +.p-datepicker .p-monthpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #dfe7ef; + padding-right: 0.5rem; + padding-left: 0.5rem; + padding-top: 0; + padding-bottom: 0; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { + padding-left: 0; +} +.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.2); +} +.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.2); +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.2); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} + +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} +.p-cascadeselect { + background: #ffffff; + border: 1px solid #d3dbe3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-cascadeselect:not(.p-disabled):hover { + border-color: #7254f3; +} +.p-cascadeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.75rem 0.75rem; +} +.p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #708da9; +} +.p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #708da9; + width: 3rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-cascadeselect.p-invalid.p-component { + border-color: #ff6767; +} + +.p-cascadeselect-panel { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-cascadeselect-panel .p-cascadeselect-items { + padding: 0.75rem 0; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 0; + border: 0 none; + color: #043d75; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.75rem 1.25rem; +} +.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 #c7bbfa; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + color: #043d75; + background: #f6f9fc; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { + font-size: 0.875rem; +} + +.p-input-filled .p-cascadeselect { + background: #f6f9fc; +} +.p-input-filled .p-cascadeselect:not(.p-disabled):hover { + background-color: #f6f9fc; +} +.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-checkbox { + width: 22px; + height: 22px; +} +.p-checkbox .p-checkbox-box { + border: 2px solid #d3dbe3; + background: #ffffff; + width: 22px; + height: 22px; + color: #043d75; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; +} +.p-checkbox .p-checkbox-box.p-highlight { + border-color: #7254f3; + background: #7254f3; +} +.p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + border-color: #5935f1; + background: #5935f1; + color: #ffffff; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #7254f3; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #5935f1; + background: #5935f1; + color: #ffffff; +} +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: #ff6767; +} + +.p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f6f9fc; +} +.p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + background: #7254f3; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f6f9fc; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #5935f1; +} + +.p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; +} +.p-chips .p-chips-multiple-container:not(.p-disabled):hover { + border-color: #7254f3; +} +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-chips .p-chips-multiple-container .p-chips-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: #e2dcfc; + color: #7254f3; + border-radius: 6px; +} +.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.5rem; +} +.p-chips .p-chips-multiple-container .p-chips-input-token { + padding: 0.375rem 0; +} +.p-chips .p-chips-multiple-container .p-chips-input-token input { + font-family: Lato, Helvetica, sans-serif; + font-size: 1rem; + color: #043d75; + padding: 0; + margin: 0; +} +.p-chips.p-invalid.p-component > .p-inputtext { + border-color: #ff6767; +} + +.p-colorpicker-preview { + width: 2rem; + height: 2rem; +} + +.p-colorpicker-panel { + background: #323232; + border: 1px solid #191919; +} +.p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; +} + +.p-colorpicker-overlay-panel { + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} + +.p-dropdown { + background: #ffffff; + border: 1px solid #d3dbe3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-dropdown:not(.p-disabled):hover { + border-color: #7254f3; +} +.p-dropdown:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-dropdown.p-dropdown-clearable .p-dropdown-label { + padding-right: 1.75rem; +} +.p-dropdown .p-dropdown-label { + background: transparent; + border: 0 none; +} +.p-dropdown .p-dropdown-label.p-placeholder { + color: #708da9; +} +.p-dropdown .p-dropdown-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-dropdown .p-dropdown-trigger { + background: transparent; + color: #708da9; + width: 3rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-dropdown .p-dropdown-clear-icon { + color: #708da9; + right: 3rem; +} +.p-dropdown.p-invalid.p-component { + border-color: #ff6767; +} + +.p-dropdown-panel { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-dropdown-panel .p-dropdown-header { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #dfe7ef; + color: #708da9; + background: #eff3f8; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter { + padding-right: 1.75rem; + margin-right: -1.75rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { + right: 0.75rem; + color: #708da9; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { + padding-right: 3.5rem; + margin-right: -3.5rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { + right: 2.5rem; +} +.p-dropdown-panel .p-dropdown-items { + padding: 0.75rem 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: #043d75; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + color: #043d75; + background: #f6f9fc; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { + margin: 0; + padding: 0.75rem 1.25rem; + color: #708da9; + background: #eff3f8; + font-weight: 700; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.75rem 1.25rem; + color: #043d75; + background: transparent; +} + +.p-input-filled .p-dropdown { + background: #f6f9fc; +} +.p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: #f6f9fc; +} +.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-editor-container .p-editor-toolbar { + background: #eff3f8; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 1px solid #dfe7ef; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #708da9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #708da9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #708da9; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding: 0.75rem 0; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #043d75; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #043d75; + background: #f6f9fc; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.75rem 1.25rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 1px solid #dfe7ef; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #043d75; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #043d75; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #043d75; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #043d75; +} +.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: #7254f3; +} +.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: #7254f3; +} +.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: #7254f3; +} +.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: #7254f3; +} + +.p-inputgroup-addon { + background: #f6f9fc; + color: #708da9; + border-top: 1px solid #d3dbe3; + border-left: 1px solid #d3dbe3; + border-bottom: 1px solid #d3dbe3; + padding: 0.75rem 0.75rem; + min-width: 3rem; +} +.p-inputgroup-addon:last-child { + border-right: 1px solid #d3dbe3; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { + border-radius: 0; + margin: 0; +} +.p-inputgroup > .p-component + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { + border-left: 0 none; +} +.p-inputgroup > .p-component:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { + z-index: 1; +} +.p-inputgroup > .p-component:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { + z-index: 1; +} + +.p-inputgroup-addon:first-child, +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup .p-float-label:first-child input { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup-addon:last-child, +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-inputgroup .p-float-label:last-child input { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-fluid .p-inputgroup .p-button { + width: auto; +} +.p-fluid .p-inputgroup .p-button.p-button-icon-only { + width: 3rem; +} + +.p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #ff6767; +} + +.p-inputswitch { + width: 3rem; + height: 1.75rem; +} +.p-inputswitch .p-inputswitch-slider { + background: #d3dbe3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 30px; +} +.p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + left: 0.25rem; + margin-top: -0.625rem; + 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 #c7bbfa; +} +.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b8c5d2; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #7254f3; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; +} +.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #6545f2; +} +.p-inputswitch.p-invalid .p-inputswitch-slider { + border-color: #ff6767; +} + +.p-inputtext { + font-family: Lato, Helvetica, sans-serif; + font-size: 1rem; + color: #043d75; + background: #ffffff; + padding: 0.75rem 0.75rem; + border: 1px solid #d3dbe3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + appearance: none; + border-radius: 6px; +} +.p-inputtext:enabled:hover { + border-color: #7254f3; +} +.p-inputtext:enabled:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-inputtext.p-invalid.p-component { + border-color: #ff6767; +} +.p-inputtext.p-inputtext-sm { + font-size: 0.875rem; + padding: 0.65625rem 0.65625rem; +} +.p-inputtext.p-inputtext-lg { + font-size: 1.25rem; + padding: 0.9375rem 0.9375rem; +} + +.p-float-label > label { + left: 0.75rem; + color: #708da9; + transition-duration: 0.2s; +} + +.p-float-label > label.p-error { + color: #ff6767; +} + +.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.75rem; + color: #708da9; +} + +.p-input-icon-left > .p-inputtext { + padding-left: 2.5rem; +} + +.p-input-icon-left.p-float-label > label { + left: 2.5rem; +} + +.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.75rem; + color: #708da9; +} + +.p-input-icon-right > .p-inputtext { + padding-right: 2.5rem; +} + +::-webkit-input-placeholder { + color: #708da9; +} + +:-moz-placeholder { + color: #708da9; +} + +::-moz-placeholder { + color: #708da9; +} + +:-ms-input-placeholder { + color: #708da9; +} + +.p-input-filled .p-inputtext { + background-color: #f6f9fc; +} +.p-input-filled .p-inputtext:enabled:hover { + background-color: #f6f9fc; +} +.p-input-filled .p-inputtext:enabled:focus { + background-color: #ffffff; +} + +.p-inputtext-sm .p-inputtext { + font-size: 0.875rem; + padding: 0.65625rem 0.65625rem; +} + +.p-inputtext-lg .p-inputtext { + font-size: 1.25rem; + padding: 0.9375rem 0.9375rem; +} + +.p-listbox { + background: #ffffff; + color: #043d75; + border: 1px solid #d3dbe3; + border-radius: 6px; +} +.p-listbox .p-listbox-header { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #dfe7ef; + color: #708da9; + background: #eff3f8; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-listbox .p-listbox-header .p-listbox-filter { + padding-right: 1.75rem; +} +.p-listbox .p-listbox-header .p-listbox-filter-icon { + right: 0.75rem; + color: #708da9; +} +.p-listbox .p-listbox-list { + padding: 0.75rem 0; +} +.p-listbox .p-listbox-list .p-listbox-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: #043d75; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-listbox .p-listbox-list .p-listbox-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-listbox .p-listbox-list .p-listbox-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.75rem 1.25rem; + color: #708da9; + background: #eff3f8; + font-weight: 700; +} +.p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.75rem 1.25rem; + color: #043d75; + background: transparent; +} +.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #043d75; + background: #f6f9fc; +} +.p-listbox.p-invalid { + border-color: #ff6767; +} + +.p-mention-panel { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-mention-panel .p-mention-items { + padding: 0.75rem 0; +} +.p-mention-panel .p-mention-items .p-mention-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: #043d75; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-mention-panel .p-mention-items .p-mention-item:hover { + color: #043d75; + background: #f6f9fc; +} +.p-mention-panel .p-mention-items .p-mention-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} + +.p-multiselect { + background: #ffffff; + border: 1px solid #d3dbe3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-multiselect:not(.p-disabled):hover { + border-color: #7254f3; +} +.p-multiselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; +} +.p-multiselect .p-multiselect-label { + padding: 0.75rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-multiselect .p-multiselect-label.p-placeholder { + color: #708da9; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: #e2dcfc; + color: #7254f3; + border-radius: 6px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} +.p-multiselect .p-multiselect-trigger { + background: transparent; + color: #708da9; + width: 3rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-multiselect .p-multiselect-clear-icon { + color: #708da9; + right: 3rem; +} +.p-multiselect.p-invalid.p-component { + border-color: #ff6767; +} + +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.375rem 0.75rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { + padding: 0.75rem 0.75rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; +} + +.p-multiselect-panel { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-multiselect-panel .p-multiselect-header { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #dfe7ef; + color: #708da9; + background: #eff3f8; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.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.75rem; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { + right: 0.75rem; + color: #708da9; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-multiselect-panel .p-multiselect-items { + padding: 0.75rem 0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: #043d75; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + color: #043d75; + background: #f6f9fc; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { + margin-right: 0.5rem; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { + margin: 0; + padding: 0.75rem 1.25rem; + color: #708da9; + background: #eff3f8; + font-weight: 700; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.75rem 1.25rem; + color: #043d75; + background: transparent; +} + +.p-input-filled .p-multiselect { + background: #f6f9fc; +} +.p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: #f6f9fc; +} +.p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-password.p-invalid.p-component > .p-inputtext { + border-color: #ff6767; +} + +.p-password-panel { + padding: 1.25rem; + background: #ffffff; + color: #043d75; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; +} +.p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #dfe7ef; +} +.p-password-panel .p-password-meter .p-password-strength.weak { + background: #ea5455; +} +.p-password-panel .p-password-meter .p-password-strength.medium { + background: #ff9f42; +} +.p-password-panel .p-password-meter .p-password-strength.strong { + background: #29c76f; +} + +.p-radiobutton { + width: 22px; + height: 22px; +} +.p-radiobutton .p-radiobutton-box { + border: 2px solid #d3dbe3; + background: #ffffff; + width: 22px; + height: 22px; + color: #043d75; + 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: #7254f3; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 12px; + height: 12px; + transition-duration: 0.2s; + background-color: #ffffff; +} +.p-radiobutton .p-radiobutton-box.p-highlight { + border-color: #7254f3; + background: #7254f3; +} +.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + border-color: #5935f1; + background: #5935f1; + color: #ffffff; +} +.p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #ff6767; +} +.p-radiobutton:focus { + outline: 0 none; +} + +.p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #f6f9fc; +} +.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f6f9fc; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #7254f3; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #5935f1; +} + +.p-rating { + gap: 0.5rem; +} +.p-rating .p-rating-item .p-rating-icon { + color: #043d75; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + font-size: 1.143rem; +} +.p-rating .p-rating-item .p-rating-icon.p-rating-cancel { + color: #ea5455; +} +.p-rating .p-rating-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #7254f3; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #7254f3; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #e73d3e; +} + +.p-selectbutton .p-button { + background: #ffffff; + border: 1px solid #d3dbe3; + color: #043d75; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #708da9; +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f6f9fc; + border-color: #d3dbe3; + color: #043d75; +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + color: #708da9; +} +.p-selectbutton .p-button.p-highlight { + background: #7254f3; + border-color: #7254f3; + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight:hover { + background: #6545f2; + border-color: #6545f2; + color: #ffffff; +} +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #ffffff; +} +.p-selectbutton.p-invalid > .p-button { + border-color: #ff6767; +} + +.p-slider { + background: #dfe7ef; + border: 0 none; + border-radius: 6px; +} +.p-slider.p-slider-horizontal { + height: 0.286rem; +} +.p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -0.5715rem; + margin-left: -0.5715rem; +} +.p-slider.p-slider-vertical { + width: 0.286rem; +} +.p-slider.p-slider-vertical .p-slider-handle { + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; +} +.p-slider .p-slider-handle { + height: 1.143rem; + width: 1.143rem; + background: #ffffff; + border: 2px solid #7254f3; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-slider .p-slider-handle:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-slider .p-slider-range { + background: #7254f3; +} +.p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #7254f3; + border-color: #7254f3; +} + +.p-treeselect { + background: #ffffff; + border: 1px solid #d3dbe3; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-treeselect:not(.p-disabled):hover { + border-color: #7254f3; +} +.p-treeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; +} +.p-treeselect .p-treeselect-label { + padding: 0.75rem 0.75rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-treeselect .p-treeselect-label.p-placeholder { + color: #708da9; +} +.p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: #dfe7ef; + color: #043d75; + border-radius: 16px; +} +.p-treeselect .p-treeselect-trigger { + background: transparent; + color: #708da9; + width: 3rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-treeselect.p-invalid.p-component { + border-color: #ff6767; +} + +.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.375rem 0.75rem; +} + +.p-treeselect-panel { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-treeselect-panel .p-treeselect-header { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #dfe7ef; + color: #708da9; + background: #eff3f8; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container { + margin-right: 0.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter { + padding-right: 1.75rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon { + right: 0.75rem; + color: #708da9; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter { + padding-right: 3.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon { + right: 2.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-tree { + border: 0 none; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { + padding: 0.75rem 1.25rem; + color: #043d75; + background: transparent; +} + +.p-input-filled .p-treeselect { + background: #f6f9fc; +} +.p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f6f9fc; +} +.p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #ffffff; +} + +.p-togglebutton.p-button { + background: #ffffff; + border: 1px solid #d3dbe3; + color: #043d75; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-togglebutton.p-button .p-button-icon-left, +.p-togglebutton.p-button .p-button-icon-right { + color: #708da9; +} +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f6f9fc; + border-color: #d3dbe3; + color: #043d75; +} +.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 { + color: #708da9; +} +.p-togglebutton.p-button.p-highlight { + background: #7254f3; + border-color: #7254f3; + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight .p-button-icon-left, +.p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight:hover { + background: #6545f2; + border-color: #6545f2; + color: #ffffff; +} +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #ffffff; +} +.p-togglebutton.p-button.p-invalid > .p-button { + border-color: #ff6767; +} + +.p-button { + color: #ffffff; + background: #7254f3; + border: 1px solid #7254f3; + padding: 0.75rem 1.25rem; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.p-button:enabled:hover, .p-button:not(button):not(a):not(.p-disabled):hover { + background: #6545f2; + color: #ffffff; + border-color: #6545f2; +} +.p-button:enabled:active, .p-button:not(button):not(a):not(.p-disabled):active { + background: #5935f1; + color: #ffffff; + border-color: #5935f1; +} +.p-button.p-button-outlined { + background-color: transparent; + color: #7254f3; + border: 1px solid; +} +.p-button.p-button-outlined:enabled:hover, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(114, 84, 243, 0.04); + color: #7254f3; + border: 1px solid; +} +.p-button.p-button-outlined:enabled:active, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(114, 84, 243, 0.16); + color: #7254f3; + border: 1px solid; +} +.p-button.p-button-outlined.p-button-plain { + color: #708da9; + border-color: #708da9; +} +.p-button.p-button-outlined.p-button-plain:enabled:hover, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: #f6f9fc; + color: #708da9; +} +.p-button.p-button-outlined.p-button-plain:enabled:active, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: #dfe7ef; + color: #708da9; +} +.p-button.p-button-text { + background-color: transparent; + color: #7254f3; + border-color: transparent; +} +.p-button.p-button-text:enabled:hover, .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(114, 84, 243, 0.04); + color: #7254f3; + border-color: transparent; +} +.p-button.p-button-text:enabled:active, .p-button.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(114, 84, 243, 0.16); + color: #7254f3; + border-color: transparent; +} +.p-button.p-button-text.p-button-plain { + color: #708da9; +} +.p-button.p-button-text.p-button-plain:enabled:hover, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: #f6f9fc; + color: #708da9; +} +.p-button.p-button-text.p-button-plain:enabled:active, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: #dfe7ef; + color: #708da9; +} +.p-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-button .p-button-label { + transition-duration: 0.2s; +} +.p-button .p-button-icon-left { + margin-right: 0.5rem; +} +.p-button .p-button-icon-right { + margin-left: 0.5rem; +} +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} +.p-button .p-badge { + margin-left: 0.5rem; + min-width: 1rem; + height: 1rem; + line-height: 1rem; + color: #7254f3; + background-color: #ffffff; +} +.p-button.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} +.p-button.p-button-rounded { + border-radius: 2rem; +} +.p-button.p-button-icon-only { + width: 3rem; + padding: 0.75rem 0; +} +.p-button.p-button-icon-only .p-button-icon-left, +.p-button.p-button-icon-only .p-button-icon-right { + margin: 0; +} +.p-button.p-button-icon-only.p-button-rounded { + border-radius: 50%; + height: 3rem; +} +.p-button.p-button-sm { + font-size: 0.875rem; + padding: 0.65625rem 1.09375rem; +} +.p-button.p-button-sm .p-button-icon { + font-size: 0.875rem; +} +.p-button.p-button-lg { + font-size: 1.25rem; + padding: 0.9375rem 1.5625rem; +} +.p-button.p-button-lg .p-button-icon { + font-size: 1.25rem; +} +.p-button.p-button-loading-label-only.p-button-loading-left .p-button-label { + margin-left: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-right .p-button-label { + margin-right: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-top .p-button-label { + margin-top: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label { + margin-bottom: 0.5rem; +} +.p-button.p-button-loading-label-only .p-button-loading-icon { + margin: 0; +} + +.p-fluid .p-button { + width: 100%; +} +.p-fluid .p-button-icon-only { + width: 3rem; +} +.p-fluid .p-buttonset { + display: flex; +} +.p-fluid .p-buttonset .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 { + color: #ffffff; + background: #a1c30d; + border: 1px solid #a1c30d; +} +.p-button.p-button-secondary:enabled:hover, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary:enabled:hover, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover { + background: #91b00c; + color: #ffffff; + border-color: #91b00c; +} +.p-button.p-button-secondary:enabled:focus, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-secondary:enabled:focus, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #e4f78e; +} +.p-button.p-button-secondary:enabled:active, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary:enabled:active, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active { + background: #819c0a; + color: #ffffff; + border-color: #819c0a; +} +.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 { + background-color: transparent; + color: #a1c30d; + border: 1px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(161, 195, 13, 0.04); + color: #a1c30d; + border: 1px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(161, 195, 13, 0.16); + color: #a1c30d; + 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 { + background-color: transparent; + color: #a1c30d; + border-color: transparent; +} +.p-button.p-button-secondary.p-button-text:enabled:hover, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(161, 195, 13, 0.04); + border-color: transparent; + color: #a1c30d; +} +.p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(161, 195, 13, 0.16); + border-color: transparent; + color: #a1c30d; +} + +.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 { + color: #ffffff; + background: #5486f3; + border: 1px solid #5486f3; +} +.p-button.p-button-info:enabled:hover, .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info:enabled:hover, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover { + background: #3570f1; + color: #ffffff; + border-color: #3570f1; +} +.p-button.p-button-info:enabled:focus, .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-info:enabled:focus, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #bbcffa; +} +.p-button.p-button-info:enabled:active, .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info:enabled:active, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active { + background: #175bef; + color: #ffffff; + border-color: #175bef; +} +.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 { + background-color: transparent; + color: #5486f3; + border: 1px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:hover, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(84, 134, 243, 0.04); + color: #5486f3; + border: 1px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:active, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(84, 134, 243, 0.16); + color: #5486f3; + 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 { + background-color: transparent; + color: #5486f3; + border-color: transparent; +} +.p-button.p-button-info.p-button-text:enabled:hover, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(84, 134, 243, 0.04); + border-color: transparent; + color: #5486f3; +} +.p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(84, 134, 243, 0.16); + border-color: transparent; + color: #5486f3; +} + +.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 { + color: #ffffff; + background: #29c76f; + border: 1px solid #29c76f; +} +.p-button.p-button-success:enabled:hover, .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success:enabled:hover, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover { + background: #25b364; + color: #ffffff; + border-color: #25b364; +} +.p-button.p-button-success:enabled:focus, .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-success:enabled:focus, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #a5edc5; +} +.p-button.p-button-success:enabled:active, .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success:enabled:active, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active { + background: #219f59; + color: #ffffff; + border-color: #219f59; +} +.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 { + background-color: transparent; + color: #29c76f; + border: 1px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:hover, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(41, 199, 111, 0.04); + color: #29c76f; + border: 1px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:active, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(41, 199, 111, 0.16); + color: #29c76f; + 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 { + background-color: transparent; + color: #29c76f; + border-color: transparent; +} +.p-button.p-button-success.p-button-text:enabled:hover, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(41, 199, 111, 0.04); + border-color: transparent; + color: #29c76f; +} +.p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(41, 199, 111, 0.16); + border-color: transparent; + color: #29c76f; +} + +.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 { + color: #ffffff; + background: #ff9f42; + border: 1px solid #ff9f42; +} +.p-button.p-button-warning:enabled:hover, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning:enabled:hover, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover { + background: #ff8f22; + color: #ffffff; + border-color: #ff8f22; +} +.p-button.p-button-warning:enabled:focus, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-warning:enabled:focus, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #ffd9b3; +} +.p-button.p-button-warning:enabled:active, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning:enabled:active, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active { + background: #ff7e02; + color: #ffffff; + border-color: #ff7e02; +} +.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 { + background-color: transparent; + color: #ff9f42; + border: 1px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:hover, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 159, 66, 0.04); + color: #ff9f42; + border: 1px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:active, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 159, 66, 0.16); + color: #ff9f42; + 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 { + background-color: transparent; + color: #ff9f42; + border-color: transparent; +} +.p-button.p-button-warning.p-button-text:enabled:hover, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 159, 66, 0.04); + border-color: transparent; + color: #ff9f42; +} +.p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 159, 66, 0.16); + border-color: transparent; + color: #ff9f42; +} + +.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 { + color: #ffffff; + background: #3ec9d6; + border: 1px solid #3ec9d6; +} +.p-button.p-button-help:enabled:hover, .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help:enabled:hover, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover { + background: #2cbfcd; + color: #ffffff; + border-color: #2cbfcd; +} +.p-button.p-button-help:enabled:focus, .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-help:enabled:focus, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #b2e9ef; +} +.p-button.p-button-help:enabled:active, .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help:enabled:active, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active { + background: #27aab6; + color: #ffffff; + border-color: #27aab6; +} +.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 { + background-color: transparent; + color: #3ec9d6; + border: 1px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:hover, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(62, 201, 214, 0.04); + color: #3ec9d6; + border: 1px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:active, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(62, 201, 214, 0.16); + color: #3ec9d6; + 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 { + background-color: transparent; + color: #3ec9d6; + border-color: transparent; +} +.p-button.p-button-help.p-button-text:enabled:hover, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(62, 201, 214, 0.04); + border-color: transparent; + color: #3ec9d6; +} +.p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(62, 201, 214, 0.16); + border-color: transparent; + color: #3ec9d6; +} + +.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 { + color: #ffffff; + background: #ea5455; + border: 1px solid #ea5455; +} +.p-button.p-button-danger:enabled:hover, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger:enabled:hover, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover { + background: #e73839; + color: #ffffff; + border-color: #e73839; +} +.p-button.p-button-danger:enabled:focus, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-danger:enabled:focus, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.2rem #f7bbbb; +} +.p-button.p-button-danger:enabled:active, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger:enabled:active, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active { + background: #e31c1d; + color: #ffffff; + border-color: #e31c1d; +} +.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 { + background-color: transparent; + color: #ea5455; + border: 1px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:hover, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(234, 84, 85, 0.04); + color: #ea5455; + border: 1px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:active, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(234, 84, 85, 0.16); + color: #ea5455; + 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 { + background-color: transparent; + color: #ea5455; + border-color: transparent; +} +.p-button.p-button-danger.p-button-text:enabled:hover, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(234, 84, 85, 0.04); + border-color: transparent; + color: #ea5455; +} +.p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(234, 84, 85, 0.16); + border-color: transparent; + color: #ea5455; +} + +.p-button.p-button-link { + color: #5935f1; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover { + background: transparent; + color: #5935f1; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-label, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus, .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus { + background: transparent; + box-shadow: 0 0 0 0.2rem #c7bbfa; + border-color: transparent; +} +.p-button.p-button-link:enabled:active, .p-button.p-button-link:not(button):not(a):not(.p-disabled):active { + background: transparent; + color: #5935f1; + border-color: transparent; +} + +.p-splitbutton { + border-radius: 6px; +} +.p-splitbutton.p-button-outlined > .p-button { + background-color: transparent; + color: #7254f3; + border: 1px solid; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(114, 84, 243, 0.04); + color: #7254f3; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(114, 84, 243, 0.16); + color: #7254f3; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button { + color: #708da9; + border-color: #708da9; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: #f6f9fc; + color: #708da9; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: #dfe7ef; + color: #708da9; +} +.p-splitbutton.p-button-text > .p-button { + background-color: transparent; + color: #7254f3; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(114, 84, 243, 0.04); + color: #7254f3; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(114, 84, 243, 0.16); + color: #7254f3; + border-color: transparent; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button { + color: #708da9; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: #f6f9fc; + color: #708da9; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: #dfe7ef; + color: #708da9; +} +.p-splitbutton.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} +.p-splitbutton.p-button-rounded { + border-radius: 2rem; +} +.p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; +} +.p-splitbutton.p-button-sm > .p-button { + font-size: 0.875rem; + padding: 0.65625rem 1.09375rem; +} +.p-splitbutton.p-button-sm > .p-button .p-button-icon { + font-size: 0.875rem; +} +.p-splitbutton.p-button-lg > .p-button { + font-size: 1.25rem; + padding: 0.9375rem 1.5625rem; +} +.p-splitbutton.p-button-lg > .p-button .p-button-icon { + font-size: 1.25rem; +} + +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button { + background-color: transparent; + color: #a1c30d; + border: 1px solid; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(161, 195, 13, 0.04); + color: #a1c30d; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(161, 195, 13, 0.16); + color: #a1c30d; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button { + background-color: transparent; + color: #a1c30d; + border-color: transparent; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(161, 195, 13, 0.04); + border-color: transparent; + color: #a1c30d; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(161, 195, 13, 0.16); + border-color: transparent; + color: #a1c30d; +} + +.p-splitbutton.p-button-info.p-button-outlined > .p-button { + background-color: transparent; + color: #5486f3; + border: 1px solid; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(84, 134, 243, 0.04); + color: #5486f3; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(84, 134, 243, 0.16); + color: #5486f3; +} +.p-splitbutton.p-button-info.p-button-text > .p-button { + background-color: transparent; + color: #5486f3; + border-color: transparent; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(84, 134, 243, 0.04); + border-color: transparent; + color: #5486f3; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(84, 134, 243, 0.16); + border-color: transparent; + color: #5486f3; +} + +.p-splitbutton.p-button-success.p-button-outlined > .p-button { + background-color: transparent; + color: #29c76f; + border: 1px solid; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(41, 199, 111, 0.04); + color: #29c76f; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(41, 199, 111, 0.16); + color: #29c76f; +} +.p-splitbutton.p-button-success.p-button-text > .p-button { + background-color: transparent; + color: #29c76f; + border-color: transparent; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(41, 199, 111, 0.04); + border-color: transparent; + color: #29c76f; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(41, 199, 111, 0.16); + border-color: transparent; + color: #29c76f; +} + +.p-splitbutton.p-button-warning.p-button-outlined > .p-button { + background-color: transparent; + color: #ff9f42; + border: 1px solid; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 159, 66, 0.04); + color: #ff9f42; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 159, 66, 0.16); + color: #ff9f42; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button { + background-color: transparent; + color: #ff9f42; + border-color: transparent; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 159, 66, 0.04); + border-color: transparent; + color: #ff9f42; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 159, 66, 0.16); + border-color: transparent; + color: #ff9f42; +} + +.p-splitbutton.p-button-help.p-button-outlined > .p-button { + background-color: transparent; + color: #3ec9d6; + border: 1px solid; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(62, 201, 214, 0.04); + color: #3ec9d6; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(62, 201, 214, 0.16); + color: #3ec9d6; +} +.p-splitbutton.p-button-help.p-button-text > .p-button { + background-color: transparent; + color: #3ec9d6; + border-color: transparent; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(62, 201, 214, 0.04); + border-color: transparent; + color: #3ec9d6; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(62, 201, 214, 0.16); + border-color: transparent; + color: #3ec9d6; +} + +.p-splitbutton.p-button-danger.p-button-outlined > .p-button { + background-color: transparent; + color: #ea5455; + border: 1px solid; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(234, 84, 85, 0.04); + color: #ea5455; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(234, 84, 85, 0.16); + color: #ea5455; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button { + background-color: transparent; + color: #ea5455; + border-color: transparent; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(234, 84, 85, 0.04); + border-color: transparent; + color: #ea5455; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(234, 84, 85, 0.16); + border-color: transparent; + color: #ea5455; +} + +.p-speeddial-button.p-button.p-button-icon-only { + width: 4rem; + height: 4rem; +} +.p-speeddial-button.p-button.p-button-icon-only .p-button-icon { + font-size: 1.3rem; +} + +.p-speeddial-action { + width: 3rem; + height: 3rem; + background: #043d75; + color: #fff; +} +.p-speeddial-action:hover { + background: #022354; + color: #fff; +} + +.p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; +} + +.p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; +} + +.p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; +} + +.p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; +} +.p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; +} + +.p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); +} + +.p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin: 0.5rem; +} +.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-carousel .p-carousel-content .p-carousel-prev:focus, +.p-carousel .p-carousel-content .p-carousel-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-carousel .p-carousel-indicators { + padding: 1rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #d3dbe3; + width: 2rem; + height: 0.5rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 0; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #c6ccd7; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #e2dcfc; + color: #7254f3; +} + +.p-datatable .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datatable .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datatable .p-datatable-header { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-datatable .p-datatable-footer { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + font-weight: 700; + color: #708da9; + background: #eff3f8; + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + font-weight: 700; + color: #708da9; + background: #eff3f8; +} +.p-datatable .p-sortable-column .p-sortable-column-icon { + color: #708da9; + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #7254f3; + background: #e2dcfc; + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { + background: #f6f9fc; + color: #708da9; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #708da9; +} +.p-datatable .p-sortable-column.p-highlight { + background: #e2dcfc; + color: #7254f3; +} +.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #7254f3; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover { + background: #e2dcfc; + color: #7254f3; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #7254f3; +} +.p-datatable .p-sortable-column:focus { + box-shadow: inset 0 0 0 0.15rem #c7bbfa; + outline: 0 none; +} +.p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #043d75; + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + padding: 1rem 1rem; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { + margin-right: 0.5rem; +} +.p-datatable .p-datatable-tbody > tr > td > .p-column-title { + font-weight: 700; +} +.p-datatable .p-datatable-tbody > tr > td.p-highlight { + background: #e2dcfc; + color: #7254f3; +} +.p-datatable .p-datatable-tbody > tr.p-highlight { + background: #e2dcfc; + color: #7254f3; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #e2dcfc; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #e2dcfc; +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: #f6f9fc; + color: #043d75; +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus { + outline: 0.15rem solid #c7bbfa; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover { + background: #f6f9fc; + color: #043d75; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus { + outline: 0.15rem solid #c7bbfa; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: #f6f9fc; + color: #043d75; +} +.p-datatable .p-column-resizer-helper { + background: #7254f3; +} +.p-datatable .p-datatable-scrollable-header, +.p-datatable .p-datatable-scrollable-footer { + background: #eff3f8; +} +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { + background-color: #eff3f8; +} +.p-datatable .p-datatable-loading-icon { + font-size: 2rem; +} +.p-datatable.p-datatable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-footer { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-top { + border-width: 0 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-bottom { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { + border-width: 1px 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + background: #fcfcfc; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #e2dcfc; + color: #7254f3; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { + color: #7254f3; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { + color: #7254f3; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { + background: #fcfcfc; +} +.p-datatable.p-datatable-sm .p-datatable-header { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-lg .p-datatable-header { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-footer { + padding: 1.25rem 1.25rem; +} + +.p-datatable-drag-selection-helper { + background: rgba(114, 84, 243, 0.16); +} + +.p-dataview .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-dataview .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-dataview .p-dataview-header { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-dataview .p-dataview-content { + background: #ffffff; + color: #043d75; + border: 0 none; + padding: 0; +} +.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { + border: solid #dfe7ef; + border-width: 0 0 1px 0; +} +.p-dataview .p-dataview-footer { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-dataview .p-dataview-loading-icon { + font-size: 2rem; +} + +.p-datascroller .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datascroller .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-datascroller .p-datascroller-header { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-datascroller .p-datascroller-content { + background: #ffffff; + color: #043d75; + border: 0 none; + padding: 0; +} +.p-datascroller.p-datascroller-inline .p-datascroller-list > li { + border: solid #dfe7ef; + border-width: 0 0 1px 0; +} +.p-datascroller .p-datascroller-footer { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-column-filter-row .p-column-filter-menu-button, +.p-column-filter-row .p-column-filter-clear-button { + margin-left: 0.5rem; +} + +.p-column-filter-menu-button { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-column-filter-menu-button:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #f6f9fc; + color: #043d75; +} +.p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { + background: #e2dcfc; + color: #7254f3; +} +.p-column-filter-menu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} + +.p-column-filter-clear-button { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-column-filter-clear-button:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-column-filter-clear-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} + +.p-column-filter-overlay { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + min-width: 12.5rem; +} +.p-column-filter-overlay .p-column-filter-row-items { + padding: 0.75rem 0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 0; + padding: 0.75rem 1.25rem; + border: 0 none; + color: #043d75; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #043d75; + background: #f6f9fc; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #dfe7ef; + margin: 0.25rem 0; +} + +.p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.75rem 1.25rem; + border-bottom: 1px solid #dfe7ef; + color: #708da9; + background: #eff3f8; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 1.25rem; + border-bottom: 1px solid #dfe7ef; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { + margin-bottom: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-top: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint:last-child { + border-bottom: 0 none; +} +.p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0.75rem 1.25rem; +} +.p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 1.25rem; +} + +.fc { + /* FullCalendar 4 */ + /* FullCalendar 5 */ +} +.fc.fc-unthemed .fc-view-container th { + background: #eff3f8; + border: 1px solid #dfe7ef; + color: #708da9; +} +.fc.fc-unthemed .fc-view-container td.fc-widget-content { + border: 1px solid #dfe7ef; + color: #043d75; +} +.fc.fc-unthemed .fc-view-container td.fc-head-container { + border: 1px solid #dfe7ef; +} +.fc.fc-unthemed .fc-view-container .fc-view { + background: #ffffff; +} +.fc.fc-unthemed .fc-view-container .fc-row { + border-right: 1px solid #dfe7ef; +} +.fc.fc-unthemed .fc-view-container .fc-event { + background: #6545f2; + border: 1px solid #6545f2; + color: #ffffff; +} +.fc.fc-unthemed .fc-view-container .fc-divider { + background: #eff3f8; + border: 1px solid #dfe7ef; +} +.fc.fc-unthemed .fc-toolbar .fc-button { + color: #ffffff; + background: #7254f3; + border: 1px solid #7254f3; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; + display: flex; + align-items: center; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { + background: #6545f2; + color: #ffffff; + border-color: #6545f2; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { + background: #5935f1; + color: #ffffff; + border-color: #5935f1; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-unthemed .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #ffffff; + border: 1px solid #d3dbe3; + color: #043d75; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: #f6f9fc; + border-color: #d3dbe3; + color: #043d75; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #7254f3; + border-color: #7254f3; + color: #ffffff; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #6545f2; + border-color: #6545f2; + color: #ffffff; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + z-index: 1; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { + border-color: #dfe7ef; +} +.fc.fc-theme-standard .fc-view-harness th { + background: #eff3f8; + border-color: #dfe7ef; + color: #708da9; +} +.fc.fc-theme-standard .fc-view-harness td { + color: #043d75; + border-color: #dfe7ef; +} +.fc.fc-theme-standard .fc-view-harness .fc-view { + background: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover { + background: none; + border: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { + border: 1px solid #dfe7ef; + padding: 1.25rem; + background: #eff3f8; + color: #708da9; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + font-family: "PrimeIcons" !important; + font-size: 1rem; + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { + content: "\e90b"; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { + padding: 1.25rem; + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + border-top: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { + color: #ffffff; + background: #6545f2; + border-color: #6545f2; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { + color: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { + background: #6545f2; + border-color: #6545f2; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { + background: #f6f9fc; + color: #043d75; +} +.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { + background: #eff3f8; +} +.fc.fc-theme-standard .fc-toolbar .fc-button { + color: #ffffff; + background: #7254f3; + border: 1px solid #7254f3; + font-size: 1rem; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 6px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { + background: #6545f2; + color: #ffffff; + border-color: #6545f2; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { + background: #5935f1; + color: #ffffff; + border-color: #5935f1; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:disabled { + opacity: 0.6; + color: #ffffff; + background: #7254f3; + border: 1px solid #7254f3; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #ffffff; + border: 1px solid #d3dbe3; + color: #043d75; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: #f6f9fc; + border-color: #d3dbe3; + color: #043d75; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #7254f3; + border-color: #7254f3; + color: #ffffff; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #6545f2; + border-color: #6545f2; + color: #ffffff; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + z-index: 1; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.fc.fc-theme-standard .fc-highlight { + color: #7254f3; + background: #e2dcfc; +} + +.p-orderlist .p-orderlist-controls { + padding: 1.25rem; +} +.p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; +} +.p-orderlist .p-orderlist-header { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + padding: 1.25rem; + font-weight: 700; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-orderlist .p-orderlist-filter-container { + padding: 1.25rem; + background: #ffffff; + border: 1px solid #dfe7ef; + border-bottom: 0 none; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input { + padding-right: 1.75rem; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon { + right: 0.75rem; + color: #708da9; +} +.p-orderlist .p-orderlist-list { + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + padding: 0.75rem 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.75rem 1.25rem; + margin: 0; + border: 0 none; + color: #043d75; + background: transparent; + transition: transform 0.2s, box-shadow 0.2s; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f6f9fc; + color: #043d75; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #fcfcfc; +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #f6f9fc; +} + +@media screen and (max-width: 769px) { + .p-orderlist { + flex-direction: column; + } + .p-orderlist .p-orderlist-controls { + padding: 1.25rem; + flex-direction: row; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-orderlist .p-orderlist-controls .p-button:last-child { + margin-right: 0; + } +} +.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #f6f9fc; + color: #043d75; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight { + background: #e2dcfc; + color: #7254f3; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: #8167f2; +} +.p-organizationchart .p-organizationchart-line-down { + background: #dfe7ef; +} +.p-organizationchart .p-organizationchart-line-left { + border-right: 1px solid #dfe7ef; + border-color: #dfe7ef; +} +.p-organizationchart .p-organizationchart-line-top { + border-top: 1px solid #dfe7ef; + border-color: #dfe7ef; +} +.p-organizationchart .p-organizationchart-node-content { + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + padding: 1.25rem; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} + +.p-paginator { + background: #ffffff; + color: #708da9; + border: solid #f6f9fc; + border-width: 0; + padding: 0.5rem 1rem; + border-radius: 6px; +} +.p-paginator .p-paginator-first, +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; + color: #708da9; + min-width: 3rem; + height: 3rem; + margin: 0.143rem; + transition: box-shadow 0.2s; + border-radius: 50%; +} +.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background: #f6f9fc; + border-color: transparent; + color: #043d75; +} +.p-paginator .p-paginator-first { + border-top-left-radius: 50%; + border-bottom-left-radius: 50%; +} +.p-paginator .p-paginator-last { + border-top-right-radius: 50%; + border-bottom-right-radius: 50%; +} +.p-paginator .p-dropdown { + margin-left: 0.5rem; + height: 3rem; +} +.p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; +} +.p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; +} +.p-paginator .p-paginator-page-input .p-inputtext { + max-width: 3rem; +} +.p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #708da9; + min-width: 3rem; + height: 3rem; + margin: 0.143rem; + padding: 0 0.5rem; +} +.p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #708da9; + min-width: 3rem; + height: 3rem; + margin: 0.143rem; + transition: box-shadow 0.2s; + border-radius: 50%; +} +.p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: #e2dcfc; + border-color: #e2dcfc; + color: #7254f3; +} +.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: #f6f9fc; + border-color: transparent; + color: #043d75; +} + +.p-picklist .p-picklist-buttons { + padding: 1.25rem; +} +.p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; +} +.p-picklist .p-picklist-header { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + padding: 1.25rem; + font-weight: 700; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-picklist .p-picklist-filter-container { + padding: 1.25rem; + background: #ffffff; + border: 1px solid #dfe7ef; + border-bottom: 0 none; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-input { + padding-right: 1.75rem; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-icon { + right: 0.75rem; + color: #708da9; +} +.p-picklist .p-picklist-list { + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + padding: 0.75rem 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-picklist .p-picklist-list .p-picklist-item { + padding: 0.75rem 1.25rem; + margin: 0; + border: 0 none; + color: #043d75; + background: transparent; + transition: transform 0.2s, box-shadow 0.2s; +} +.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f6f9fc; + color: #043d75; +} +.p-picklist .p-picklist-list .p-picklist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #7254f3; + background: #e2dcfc; +} + +@media screen and (max-width: 769px) { + .p-picklist { + flex-direction: column; + } + .p-picklist .p-picklist-buttons { + padding: 1.25rem; + flex-direction: row; + } + .p-picklist .p-picklist-buttons .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-picklist .p-picklist-buttons .p-button:last-child { + margin-right: 0; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before { + content: "\e930"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before { + content: "\e92c"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before { + content: "\e933"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before { + content: "\e92f"; + } +} +.p-tree { + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + padding: 1.25rem; + border-radius: 6px; +} +.p-tree .p-tree-container .p-treenode { + padding: 0.143rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: box-shadow 0.2s; + padding: 0.5rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #708da9; +} +.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 { + color: #043d75; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: #e2dcfc; + color: #7254f3; +} +.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: #7254f3; +} +.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: #7254f3; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { + background: #f6f9fc; + color: #043d75; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { + background: #f6f9fc; + color: #043d75; +} +.p-tree .p-tree-filter-container { + margin-bottom: 0.5rem; +} +.p-tree .p-tree-filter-container .p-tree-filter { + width: 100%; + padding-right: 1.75rem; +} +.p-tree .p-tree-filter-container .p-tree-filter-icon { + right: 0.75rem; + color: #708da9; +} +.p-tree .p-treenode-children { + padding: 0 0 0 1rem; +} +.p-tree .p-tree-loading-icon { + font-size: 2rem; +} +.p-tree .p-treenode-droppoint { + height: 0.5rem; +} +.p-tree .p-treenode-droppoint.p-treenode-droppoint-active { + background: #9a85f5; +} + +.p-treetable .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-treetable .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} +.p-treetable .p-treetable-header { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + border-width: 1px 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-treetable .p-treetable-footer { + background: #eff3f8; + color: #708da9; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + padding: 1rem 1rem; + font-weight: 700; +} +.p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + font-weight: 700; + color: #708da9; + background: #eff3f8; + transition: box-shadow 0.2s; +} +.p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + font-weight: 700; + color: #708da9; + background: #eff3f8; +} +.p-treetable .p-sortable-column { + outline-color: #c7bbfa; +} +.p-treetable .p-sortable-column .p-sortable-column-icon { + color: #708da9; + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #7254f3; + background: #e2dcfc; + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #f6f9fc; + color: #708da9; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #708da9; +} +.p-treetable .p-sortable-column.p-highlight { + background: #e2dcfc; + color: #7254f3; +} +.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #7254f3; +} +.p-treetable .p-treetable-tbody > tr { + background: #ffffff; + color: #043d75; + transition: box-shadow 0.2s; +} +.p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid #dfe7ef; + border-width: 0 0 1px 0; + padding: 1rem 1rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon { + color: #043d75; +} +.p-treetable .p-treetable-tbody > tr:focus { + outline: 0.15rem solid #c7bbfa; + outline-offset: -0.15rem; +} +.p-treetable .p-treetable-tbody > tr.p-highlight { + background: #e2dcfc; + color: #7254f3; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { + color: #7254f3; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { + color: #7254f3; +} +.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: #f6f9fc; + color: #043d75; +} +.p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #043d75; +} +.p-treetable .p-column-resizer-helper { + background: #7254f3; +} +.p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #eff3f8; +} +.p-treetable .p-treetable-loading-icon { + font-size: 2rem; +} +.p-treetable.p-treetable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.875rem 0.875rem; +} +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-lg .p-treetable-header { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-footer { + padding: 1.25rem 1.25rem; +} + +.p-timeline .p-timeline-event-marker { + border: 2px solid #7254f3; + border-radius: 50%; + width: 1rem; + height: 1rem; + background-color: #ffffff; +} +.p-timeline .p-timeline-event-connector { + background-color: #dfe7ef; +} +.p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; +} +.p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; +} + +.p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1.25rem; + border: 1px solid #dfe7ef; + color: #708da9; + background: #eff3f8; + font-weight: 700; + border-radius: 6px; + transition: box-shadow 0.2s; +} +.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + margin-right: 0.5rem; +} +.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #f6f9fc; + border-color: #dfe7ef; + color: #708da9; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #eff3f8; + border-color: #dfe7ef; + color: #043d75; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-color: #dfe7ef; + background: #f6f9fc; + color: #043d75; +} +.p-accordion .p-accordion-content { + padding: 1.25rem; + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-accordion .p-accordion-tab { + margin-bottom: 4px; +} + +.p-card { + background: #ffffff; + color: #043d75; + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; +} +.p-card .p-card-body { + padding: 1.25rem; +} +.p-card .p-card-title { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.5rem; +} +.p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #708da9; +} +.p-card .p-card-content { + padding: 1.25rem 0; +} +.p-card .p-card-footer { + padding: 1.25rem 0 0 0; +} + +.p-fieldset { + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + border-radius: 6px; +} +.p-fieldset .p-fieldset-legend { + padding: 1.25rem; + border: 1px solid #dfe7ef; + color: #708da9; + background: #eff3f8; + font-weight: 700; + border-radius: 6px; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1.25rem; + color: #708da9; + border-radius: 6px; + transition: box-shadow 0.2s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + margin-right: 0.5rem; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #f6f9fc; + border-color: #dfe7ef; + color: #708da9; +} +.p-fieldset .p-fieldset-content { + padding: 1.25rem; +} + +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1.25rem 0; + padding: 0 1.25rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dfe7ef; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1.25rem; + padding: 1.25rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dfe7ef; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + +.p-panel .p-panel-header { + border: 1px solid #dfe7ef; + padding: 1.25rem; + background: #eff3f8; + color: #708da9; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-panel .p-panel-header .p-panel-title { + font-weight: 700; +} +.p-panel .p-panel-header .p-panel-header-icon { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-panel .p-panel-header .p-panel-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-panel.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.25rem; +} +.p-panel .p-panel-content { + padding: 1.25rem; + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; +} +.p-panel .p-panel-footer { + padding: 0.75rem 1.25rem; + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + border-top: 0 none; +} + +.p-splitter { + border: 1px solid #dfe7ef; + background: #ffffff; + border-radius: 6px; + color: #043d75; +} +.p-splitter .p-splitter-gutter { + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + background: #eff3f8; +} +.p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #dfe7ef; +} +.p-splitter .p-splitter-gutter-resizing { + background: #dfe7ef; +} + +.p-scrollpanel .p-scrollpanel-bar { + background: #eff3f8; + border: 0 none; +} + +.p-tabview .p-tabview-nav { + background: #ffffff; + border: 1px solid #dfe7ef; + border-width: 0 0 2px 0; +} +.p-tabview .p-tabview-nav li { + margin-right: 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link { + border: solid #dfe7ef; + border-width: 0 0 2px 0; + border-color: transparent transparent #dfe7ef transparent; + background: #ffffff; + color: #708da9; + padding: 1.25rem; + font-weight: 700; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: box-shadow 0.2s; + margin: 0 0 -2px 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #c7bbfa; +} +.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #c6ccd7; + color: #708da9; +} +.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #7254f3; + color: #7254f3; +} +.p-tabview .p-tabview-close { + margin-left: 0.5rem; +} +.p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #7254f3; + 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; +} +.p-tabview .p-tabview-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #c7bbfa; +} +.p-tabview .p-tabview-panels { + background: #ffffff; + padding: 1.25rem; + border: 0 none; + color: #043d75; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-toolbar { + background: #eff3f8; + border: 1px solid #dfe7ef; + padding: 1.25rem; + border-radius: 6px; + gap: 0.5rem; +} +.p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; +} + +.p-confirm-popup { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} +.p-confirm-popup .p-confirm-popup-content { + padding: 1.25rem; +} +.p-confirm-popup .p-confirm-popup-footer { + text-align: right; + padding: 0 1.25rem 1.25rem 1.25rem; +} +.p-confirm-popup .p-confirm-popup-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-confirm-popup .p-confirm-popup-footer button:last-child { + margin: 0; +} +.p-confirm-popup:after { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-confirm-popup:before { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; +} +.p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #ffffff; +} +.p-confirm-popup .p-confirm-popup-icon { + font-size: 1.5rem; +} +.p-confirm-popup .p-confirm-popup-message { + margin-left: 1rem; +} + +.p-dialog { + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + border: 0 none; +} +.p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #708da9; + padding: 1.5rem; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-dialog .p-dialog-header .p-dialog-title { + font-weight: 700; + font-size: 1.25rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; +} +.p-dialog .p-dialog-content { + background: #ffffff; + color: #043d75; + padding: 0 1.5rem 2rem 1.5rem; +} +.p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-dialog .p-dialog-footer { + border-top: 0 none; + background: #ffffff; + color: #043d75; + padding: 0 1.5rem 1.5rem 1.5rem; + text-align: right; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-dialog .p-dialog-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 1rem; +} + +.p-overlaypanel { + background: #ffffff; + color: #043d75; + border: 0 none; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} +.p-overlaypanel .p-overlaypanel-content { + padding: 1.25rem; +} +.p-overlaypanel .p-overlaypanel-close { + background: #7254f3; + color: #ffffff; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; + position: absolute; + top: -1rem; + right: -1rem; +} +.p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #6545f2; + color: #ffffff; +} +.p-overlaypanel:after { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-overlaypanel:before { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #f2f2f2; +} +.p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; +} +.p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #ffffff; +} + +.p-sidebar { + background: #ffffff; + color: #043d75; + border: 0 none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} +.p-sidebar .p-sidebar-header { + padding: 1.25rem; +} +.p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 2rem; + height: 2rem; + color: #708da9; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #043d75; + border-color: transparent; + background: #f6f9fc; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:focus, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; +} +.p-sidebar .p-sidebar-content { + padding: 1.25rem; +} + +.p-tooltip .p-tooltip-text { + background: #043d75; + color: #ffffff; + padding: 0.75rem 0.75rem; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; +} +.p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #043d75; +} +.p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #043d75; +} +.p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #043d75; +} +.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #043d75; +} + +.p-fileupload .p-fileupload-buttonbar { + background: #eff3f8; + padding: 1.25rem; + border: 1px solid #dfe7ef; + color: #708da9; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-fileupload .p-fileupload-buttonbar .p-button { + margin-right: 0.5rem; +} +.p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 2rem 1rem; + border: 1px solid #dfe7ef; + color: #043d75; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-fileupload .p-progressbar { + height: 0.25rem; +} +.p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; +} +.p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; +} + +.p-breadcrumb { + background: #eff3f8; + border: 1px solid #dfe7ef; + border-radius: 6px; + padding: 1rem; +} +.p-breadcrumb ul li .p-menuitem-link { + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-breadcrumb ul li .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { + color: #708da9; +} +.p-breadcrumb ul li.p-breadcrumb-chevron { + margin: 0 0.5rem 0 0.5rem; + color: #043d75; +} +.p-breadcrumb ul li:last-child .p-menuitem-text { + color: #043d75; +} +.p-breadcrumb ul li:last-child .p-menuitem-icon { + color: #708da9; +} + +.p-contextmenu { + padding: 0.25rem 0; + background: #eff3f8; + color: #043d75; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; + width: 12.5rem; +} +.p-contextmenu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-contextmenu .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-contextmenu .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-contextmenu .p-menuitem-link .p-submenu-icon { + color: #708da9; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-contextmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-contextmenu .p-submenu-list { + padding: 0.25rem 0; + background: #eff3f8; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #e2dcfc; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #7254f3; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #7254f3; +} +.p-contextmenu .p-menu-separator { + border-top: 1px solid #dfe7ef; + margin: 0.25rem 0; +} +.p-contextmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-dock .p-dock-list { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.5rem; + border-radius: 0.5rem; +} +.p-dock .p-dock-item { + padding: 0.5rem; +} +.p-dock .p-dock-action { + width: 4rem; + height: 4rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; +} + +@media screen and (max-width: 960px) { + .p-dock.p-dock-top .p-dock-container, .p-dock.p-dock-bottom .p-dock-container { + overflow-x: auto; + width: 100%; + } + .p-dock.p-dock-top .p-dock-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-container .p-dock-list { + margin: 0 auto; + } + .p-dock.p-dock-left .p-dock-container, .p-dock.p-dock-right .p-dock-container { + overflow-y: auto; + height: 100%; + } + .p-dock.p-dock-left .p-dock-container .p-dock-list, .p-dock.p-dock-right .p-dock-container .p-dock-list { + margin: auto 0; + } + .p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + transform: none; + margin: 0; + } +} +.p-megamenu { + padding: 0.5rem; + background: #eff3f8; + color: #043d75; + border: 1px solid #dfe7ef; + border-radius: 6px; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 6px; + transition: box-shadow 0.2s; + user-select: none; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #708da9; + margin-left: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: #e2dcfc; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #7254f3; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #7254f3; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #7254f3; +} +.p-megamenu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-megamenu .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-megamenu .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-megamenu .p-menuitem-link .p-submenu-icon { + color: #708da9; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-megamenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-megamenu .p-megamenu-panel { + background: #eff3f8; + color: #043d75; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-megamenu .p-megamenu-submenu-header { + margin: 0; + padding: 0.75rem 1.25rem; + color: #708da9; + background: #eff3f8; + font-weight: 700; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-megamenu .p-megamenu-submenu { + padding: 0.25rem 0; + width: 12.5rem; +} +.p-megamenu .p-megamenu-submenu .p-menu-separator { + border-top: 1px solid #dfe7ef; + margin: 0.25rem 0; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #e2dcfc; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #7254f3; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #7254f3; +} +.p-megamenu.p-megamenu-vertical { + width: 12.5rem; + padding: 0.25rem 0; +} + +.p-menu { + padding: 0.25rem 0; + background: #eff3f8; + color: #043d75; + border: 1px solid #dfe7ef; + border-radius: 6px; + width: 12.5rem; +} +.p-menu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menu .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-menu .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-menu .p-menuitem-link .p-submenu-icon { + color: #708da9; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-menu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-menu.p-menu-overlay { + background: #eff3f8; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-menu .p-submenu-header { + margin: 0; + padding: 0.75rem 1.25rem; + color: #708da9; + background: #eff3f8; + font-weight: 700; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.p-menu .p-menu-separator { + border-top: 1px solid #dfe7ef; + margin: 0.25rem 0; +} + +.p-menubar { + padding: 0.5rem; + background: #eff3f8; + color: #043d75; + border: 1px solid #dfe7ef; + border-radius: 6px; +} +.p-menubar .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menubar .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-menubar .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-menubar .p-menuitem-link .p-submenu-icon { + color: #708da9; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-menubar .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 6px; + transition: box-shadow 0.2s; + user-select: none; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #708da9; + margin-left: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: #e2dcfc; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #7254f3; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #7254f3; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #7254f3; +} +.p-menubar .p-submenu-list { + padding: 0.25rem 0; + background: #eff3f8; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + width: 12.5rem; +} +.p-menubar .p-submenu-list .p-menu-separator { + border-top: 1px solid #dfe7ef; + margin: 0.25rem 0; +} +.p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #e2dcfc; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #7254f3; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #7254f3; +} + +@media screen and (max-width: 960px) { + .p-menubar { + position: relative; + } + .p-menubar .p-menubar-button { + display: flex; + width: 2rem; + height: 2rem; + color: #708da9; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-menubar .p-menubar-button:hover { + color: #708da9; + background: #f6f9fc; + } + .p-menubar .p-menubar-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + } + .p-menubar .p-menubar-root-list { + position: absolute; + display: none; + padding: 0.25rem 0; + background: #eff3f8; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + width: 100%; + } + .p-menubar .p-menubar-root-list .p-menu-separator { + border-top: 1px solid #dfe7ef; + margin: 0.25rem 0; + } + .p-menubar .p-menubar-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #043d75; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #708da9; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; + } + .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-menubar .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list ul li a { + padding-left: 2.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li a { + padding-left: 3.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li a { + padding-left: 5.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li a { + padding-left: 6.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a { + padding-left: 8.25rem; + } + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } +} +.p-panelmenu .p-panelmenu-header > a { + padding: 1.25rem; + border: 1px solid #dfe7ef; + color: #708da9; + background: #eff3f8; + font-weight: 700; + border-radius: 6px; + transition: box-shadow 0.2s; +} +.p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + background: #f6f9fc; + border-color: #dfe7ef; + color: #708da9; +} +.p-panelmenu .p-panelmenu-header.p-highlight { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight > a { + background: #eff3f8; + border-color: #dfe7ef; + color: #043d75; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover { + border-color: #dfe7ef; + background: #f6f9fc; + color: #043d75; +} +.p-panelmenu .p-panelmenu-content { + padding: 0.25rem 0; + border: 1px solid #dfe7ef; + background: #ffffff; + color: #043d75; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { + color: #708da9; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) { + padding: 0 0 0 1rem; +} +.p-panelmenu .p-panelmenu-panel { + margin-bottom: 4px; +} + +.p-slidemenu { + padding: 0.25rem 0; + background: #eff3f8; + color: #043d75; + border: 1px solid #dfe7ef; + border-radius: 6px; + width: 12.5rem; +} +.p-slidemenu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-slidemenu .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-slidemenu .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-slidemenu .p-menuitem-link .p-submenu-icon { + color: #708da9; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-slidemenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-slidemenu.p-slidemenu-overlay { + background: #eff3f8; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-slidemenu .p-slidemenu-list { + padding: 0.25rem 0; + background: #eff3f8; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link { + background: #e2dcfc; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text { + color: #7254f3; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon { + color: #7254f3; +} +.p-slidemenu .p-slidemenu-separator { + border-top: 1px solid #dfe7ef; + margin: 0.25rem 0; +} +.p-slidemenu .p-slidemenu-icon { + font-size: 0.875rem; +} +.p-slidemenu .p-slidemenu-backward { + padding: 0.75rem 1.25rem; + color: #043d75; +} + +.p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #043d75; + border: 1px solid #f6f9fc; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + z-index: 1; + border-radius: 50%; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-title { + margin-top: 0.5rem; + color: #708da9; +} +.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-steps .p-steps-item.p-highlight .p-steps-number { + background: #e2dcfc; + color: #7254f3; +} +.p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 700; + color: #043d75; +} +.p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #dfe7ef; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; +} + +.p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #dfe7ef; + border-width: 0 0 2px 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem { + margin-right: 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + border: solid #dfe7ef; + border-width: 0 0 2px 0; + border-color: transparent transparent #dfe7ef transparent; + background: #ffffff; + color: #708da9; + padding: 1.25rem; + font-weight: 700; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: box-shadow 0.2s; + margin: 0 0 -2px 0; + height: calc(100% + 2px); +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #c7bbfa; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #c6ccd7; + color: #708da9; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #7254f3; + color: #7254f3; +} + +.p-tieredmenu { + padding: 0.25rem 0; + background: #eff3f8; + color: #043d75; + border: 1px solid #dfe7ef; + border-radius: 6px; + width: 12.5rem; +} +.p-tieredmenu .p-menuitem-link { + padding: 0.75rem 1.25rem; + color: #043d75; + border-radius: 0; + transition: box-shadow 0.2s; + user-select: none; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-text { + color: #043d75; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-icon { + color: #708da9; + margin-right: 0.5rem; +} +.p-tieredmenu .p-menuitem-link .p-submenu-icon { + color: #708da9; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { + background: #f6f9fc; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #043d75; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #708da9; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #708da9; +} +.p-tieredmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; +} +.p-tieredmenu.p-tieredmenu-overlay { + background: #eff3f8; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-tieredmenu .p-submenu-list { + padding: 0.25rem 0; + background: #eff3f8; + border: 0 none; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #e2dcfc; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #7254f3; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #7254f3; +} +.p-tieredmenu .p-menu-separator { + border-top: 1px solid #dfe7ef; + margin: 0.25rem 0; +} +.p-tieredmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-inline-message { + padding: 0.75rem 0.75rem; + margin: 0; + border-radius: 6px; +} +.p-inline-message.p-inline-message-info { + background: #e9e9ff; + border: solid #696cff; + border-width: 0px; + color: #696cff; +} +.p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #696cff; +} +.p-inline-message.p-inline-message-success { + background: #e4f8f0; + border: solid #1ea97c; + border-width: 0px; + color: #1ea97c; +} +.p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #1ea97c; +} +.p-inline-message.p-inline-message-warn { + background: #fff2e2; + border: solid #cc8925; + border-width: 0px; + color: #cc8925; +} +.p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #cc8925; +} +.p-inline-message.p-inline-message-error { + background: #ffe7e6; + border: solid #ff5757; + border-width: 0px; + color: #ff5757; +} +.p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #ff5757; +} +.p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; +} +.p-inline-message .p-inline-message-text { + font-size: 1rem; +} +.p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; +} + +.p-message { + margin: 1rem 0; + border-radius: 6px; +} +.p-message .p-message-wrapper { + padding: 1.25rem 1.75rem; +} +.p-message .p-message-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-message .p-message-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-message.p-message-info { + background: #e9e9ff; + border: solid #696cff; + border-width: 0 0 0 6px; + color: #696cff; +} +.p-message.p-message-info .p-message-icon { + color: #696cff; +} +.p-message.p-message-info .p-message-close { + color: #696cff; +} +.p-message.p-message-success { + background: #e4f8f0; + border: solid #1ea97c; + border-width: 0 0 0 6px; + color: #1ea97c; +} +.p-message.p-message-success .p-message-icon { + color: #1ea97c; +} +.p-message.p-message-success .p-message-close { + color: #1ea97c; +} +.p-message.p-message-warn { + background: #fff2e2; + border: solid #cc8925; + border-width: 0 0 0 6px; + color: #cc8925; +} +.p-message.p-message-warn .p-message-icon { + color: #cc8925; +} +.p-message.p-message-warn .p-message-close { + color: #cc8925; +} +.p-message.p-message-error { + background: #ffe7e6; + border: solid #ff5757; + border-width: 0 0 0 6px; + color: #ff5757; +} +.p-message.p-message-error .p-message-icon { + color: #ff5757; +} +.p-message.p-message-error .p-message-close { + color: #ff5757; +} +.p-message .p-message-text { + font-size: 1rem; + font-weight: 400; +} +.p-message .p-message-icon { + font-size: 1.5rem; + margin-right: 0.5rem; +} + +.p-toast { + opacity: 0.9; +} +.p-toast .p-toast-message { + margin: 0 0 1rem 0; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 6px; +} +.p-toast .p-toast-message .p-toast-message-content { + padding: 1rem; + border-width: 0 0 0 6px; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 700; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + margin: 0.5rem 0 0 0; +} +.p-toast .p-toast-message .p-toast-icon-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-toast .p-toast-message .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-toast .p-toast-message .p-toast-icon-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} +.p-toast .p-toast-message.p-toast-message-info { + background: #e9e9ff; + border: solid #696cff; + border-width: 0 0 0 6px; + color: #696cff; +} +.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + color: #696cff; +} +.p-toast .p-toast-message.p-toast-message-success { + background: #e4f8f0; + border: solid #1ea97c; + border-width: 0 0 0 6px; + color: #1ea97c; +} +.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + color: #1ea97c; +} +.p-toast .p-toast-message.p-toast-message-warn { + background: #fff2e2; + border: solid #cc8925; + border-width: 0 0 0 6px; + color: #cc8925; +} +.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + color: #cc8925; +} +.p-toast .p-toast-message.p-toast-message-error { + background: #ffe7e6; + border: solid #ff5757; + border-width: 0 0 0 6px; + color: #ff5757; +} +.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + color: #ff5757; +} + +.p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #eff3f8; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #eff3f8; +} +.p-galleria .p-galleria-item-nav { + background: transparent; + color: #eff3f8; + width: 4rem; + height: 4rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 6px; + margin: 0 0.5rem; +} +.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #eff3f8; +} +.p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #eff3f8; + padding: 1rem; +} +.p-galleria .p-galleria-indicators { + padding: 1rem; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #d3dbe3; + width: 1rem; + height: 1rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #c6ccd7; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #e2dcfc; + color: #7254f3; +} +.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { + margin-right: 0.5rem; +} +.p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator { + margin-bottom: 0.5rem; +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators { + background: rgba(0, 0, 0, 0.5); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button { + background: rgba(255, 255, 255, 0.4); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover { + background: rgba(255, 255, 255, 0.6); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #e2dcfc; + color: #7254f3; +} +.p-galleria .p-galleria-thumbnail-container { + background: rgba(0, 0, 0, 0.9); + padding: 1rem 0.25rem; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { + margin: 0.5rem; + background-color: transparent; + color: #eff3f8; + width: 2rem; + height: 2rem; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + border-radius: 50%; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { + background: rgba(255, 255, 255, 0.1); + color: #eff3f8; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + transition: box-shadow 0.2s; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} + +.p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-preview-indicator { + background-color: transparent; + color: #f8f9fa; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} + +.p-image-preview-container:hover > .p-image-preview-indicator { + background-color: rgba(0, 0, 0, 0.5); +} + +.p-image-toolbar { + padding: 1rem; +} + +.p-image-action.p-link { + color: #f8f9fa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-right: 0.5rem; +} +.p-image-action.p-link:last-child { + margin-right: 0; +} +.p-image-action.p-link:hover { + color: #f8f9fa; + background-color: rgba(255, 255, 255, 0.1); +} +.p-image-action.p-link i { + font-size: 1.5rem; +} + +.p-avatar { + background-color: #dfe7ef; + border-radius: 6px; +} +.p-avatar.p-avatar-lg { + width: 3rem; + height: 3rem; + font-size: 1.5rem; +} +.p-avatar.p-avatar-lg .p-avatar-icon { + font-size: 1.5rem; +} +.p-avatar.p-avatar-xl { + width: 4rem; + height: 4rem; + font-size: 2rem; +} +.p-avatar.p-avatar-xl .p-avatar-icon { + font-size: 2rem; +} + +.p-avatar-group .p-avatar { + border: 2px solid #ffffff; +} + +.p-chip { + background-color: #dfe7ef; + color: #043d75; + border-radius: 16px; + padding: 0 0.75rem; +} +.p-chip .p-chip-text { + line-height: 1.5; + margin-top: 0.375rem; + margin-bottom: 0.375rem; +} +.p-chip .p-chip-icon { + margin-right: 0.5rem; +} +.p-chip img { + width: 2.25rem; + height: 2.25rem; + margin-left: -0.75rem; + margin-right: 0.5rem; +} +.p-chip .p-chip-remove-icon { + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + margin-left: 0.5rem; +} +.p-chip .p-chip-remove-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} + +.p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; +} +.p-scrolltop.p-link { + background: rgba(0, 0, 0, 0.7); +} +.p-scrolltop.p-link:hover { + background: rgba(0, 0, 0, 0.8); +} +.p-scrolltop .p-scrolltop-icon { + font-size: 1.5rem; + color: #eff3f8; +} + +.p-skeleton { + background-color: #dfe7ef; + border-radius: 6px; +} +.p-skeleton:after { + background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); +} + +.p-tag { + background: #7254f3; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; +} +.p-tag.p-tag-success { + background-color: #29c76f; + color: #ffffff; +} +.p-tag.p-tag-info { + background-color: #5486f3; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #ff9f42; + color: #ffffff; +} +.p-tag.p-tag-danger { + background-color: #ea5455; + color: #ffffff; +} +.p-tag .p-tag-icon { + margin-right: 0.25rem; + font-size: 0.75rem; +} + +.p-inplace .p-inplace-display { + padding: 0.75rem 0.75rem; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +} +.p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #f6f9fc; + color: #043d75; +} +.p-inplace .p-inplace-display:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; +} + +.p-progressbar { + border: 0 none; + height: 1.5rem; + background: #dfe7ef; + border-radius: 6px; +} +.p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #7254f3; +} +.p-progressbar .p-progressbar-label { + color: #ffffff; + line-height: 1.5rem; +} + +.p-terminal { + background: #ffffff; + color: #043d75; + border: 1px solid #dfe7ef; + padding: 1.25rem; +} +.p-terminal .p-terminal-input { + font-size: 1rem; + font-family: Lato, Helvetica, sans-serif; +} + +.p-badge { + background: #7254f3; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + min-width: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; +} +.p-badge.p-badge-secondary { + background-color: #a1c30d; + color: #ffffff; +} +.p-badge.p-badge-success { + background-color: #29c76f; + color: #ffffff; +} +.p-badge.p-badge-info { + background-color: #5486f3; + color: #ffffff; +} +.p-badge.p-badge-warning { + background-color: #ff9f42; + color: #ffffff; +} +.p-badge.p-badge-danger { + background-color: #ea5455; + color: #ffffff; +} +.p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; +} +.p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; +} + +.p-tag { + background: #7254f3; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; +} +.p-tag.p-tag-success { + background-color: #29c76f; + color: #ffffff; +} +.p-tag.p-tag-info { + background-color: #5486f3; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #ff9f42; + color: #ffffff; +} +.p-tag.p-tag-danger { + background-color: #ea5455; + color: #ffffff; +} + +/* Customizations to the designer theme should be defined here */ +.p-datepicker .p-datepicker-header .p-datepicker-prev, +.p-datepicker .p-datepicker-header .p-datepicker-next { + color: #ffffff; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.2); +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-right: 1px solid rgba(255, 255, 255, 0.2); +} +.p-datepicker .p-datepicker-buttonbar { + border-top: 1px solid rgba(255, 255, 255, 0.2); +} +.p-datepicker .p-datepicker-buttonbar .p-button { + color: #ffffff; +} +.p-datepicker .p-datepicker-buttonbar .p-button:enabled:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.2); +} +.p-datepicker .p-timepicker { + border-top: 1px solid rgba(255, 255, 255, 0.2); +} +.p-datepicker .p-timepicker .p-link { + color: #ffffff; +} +.p-datepicker .p-timepicker .p-link:enabled:hover { + color: #ffffff; + background-color: rgba(255, 255, 255, 0.2); +} +.p-datepicker table { + font-size: 1rem; + margin: 0.5rem 0; +} +.p-datepicker table th { + color: rgba(255, 255, 255, 0.7); +} +.p-datepicker table td > span.p-highlight { + color: #ffffff; + background: rgba(255, 255, 255, 0.3); +} +.p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #ffffff; + background: rgba(255, 255, 255, 0.3); +} +.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #ffffff; + background: rgba(255, 255, 255, 0.3); +} + +.p-button .p-button-label { + font-weight: 700; +} + +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #7254f3; +} + +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #7254f3; +} + +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #7254f3; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #7254f3; +} diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff new file mode 100644 index 0000000000..263ae18e74 Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff differ diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2 b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2 new file mode 100644 index 0000000000..5145c1e4b2 Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2 differ diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff new file mode 100644 index 0000000000..b33382edf7 Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff differ diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2 b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2 new file mode 100644 index 0000000000..1f4ac79c5c Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2 differ diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff new file mode 100644 index 0000000000..2647313cdb Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff differ diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2 b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2 new file mode 100644 index 0000000000..4340e2632b Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2 differ diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff new file mode 100644 index 0000000000..77049f3cec Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff differ diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2 b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2 new file mode 100644 index 0000000000..5643f910f2 Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2 differ diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css new file mode 100644 index 0000000000..fc9ec92d8d --- /dev/null +++ b/public/themes/viva-dark/theme.css @@ -0,0 +1,6164 @@ +:root { + --surface-a:#161d21; + --surface-b:#0e1315; + --surface-c:rgba(158, 173, 230, 0.08); + --surface-d:#263238; + --surface-e:#161d21; + --surface-f:#161d21; + --text-color:rgba(255, 255, 255, 0.87); + --text-color-secondary:rgba(255, 255, 255, 0.6); + --primary-color:#9eade6; + --primary-color-text:#121212; + --font-family:Poppins, sans-serif; + --surface-0: #0e1315; + --surface-50: #262b2c; + --surface-100: #3e4244; + --surface-200: #565a5b; + --surface-300: #6e7173; + --surface-400: #87898a; + --surface-500: #9fa1a1; + --surface-600: #b7b8b9; + --surface-700: #cfd0d0; + --surface-800: #e7e7e8; + --surface-900: #ffffff; + --gray-50: #e7e7e8; + --gray-100: #cfd0d0; + --gray-200: #b7b8b9; + --gray-300: #9fa1a1; + --gray-400: #87898a; + --gray-500: #6e7173; + --gray-600: #565a5b; + --gray-700: #3e4244; + --gray-800: #262b2c; + --gray-900: #0e1315; + --content-padding:1rem; + --inline-spacing:0.5rem; + --border-radius:6px; + --surface-ground:#0e1315; + --surface-section:#0e1315; + --surface-card:#161d21; + --surface-overlay:#161d21; + --surface-border:#263238; + --surface-hover:rgba($primaryColor, .08); + --maskbg: rgba(0, 0, 0, 0.4); + --focus-ring: 0 0 0 1px #9eade6; + color-scheme: dark; +} + +/* poppins-300 - latin-ext_latin */ +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 300; + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* poppins-regular - latin-ext_latin */ +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* poppins-600 - latin-ext_latin */ +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 600; + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* poppins-700 - latin-ext_latin */ +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 700; + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +* { + box-sizing: border-box; +} + +.p-component { + font-family: Poppins, sans-serif; + font-size: 1rem; + font-weight: normal; +} + +.p-component-overlay { + background-color: rgba(0, 0, 0, 0.4); + transition-duration: 0.3s; +} + +.p-disabled, .p-component:disabled { + opacity: 0.4; +} + +.p-error { + color: #f78c79; +} + +.p-text-secondary { + color: rgba(255, 255, 255, 0.6); +} + +.pi { + font-size: 1rem; +} + +.p-link { + font-size: 1rem; + font-family: Poppins, sans-serif; + border-radius: 6px; +} +.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} + +.p-component-overlay-enter { + animation: p-component-overlay-enter-animation 150ms forwards; +} + +.p-component-overlay-leave { + animation: p-component-overlay-leave-animation 150ms forwards; +} + +@keyframes p-component-overlay-enter-animation { + from { + background-color: transparent; + } + to { + background-color: var(--maskbg); + } +} +@keyframes p-component-overlay-leave-animation { + from { + background-color: var(--maskbg); + } + to { + background-color: transparent; + } +} + +:root { + --blue-50:#f6fbfd; + --blue-100:#d6eaf5; + --blue-200:#b5d9ed; + --blue-300:#95c8e4; + --blue-400:#74b7dc; + --blue-500:#54a6d4; + --blue-600:#478db4; + --blue-700:#3b7494; + --blue-800:#2e5b75; + --blue-900:#224255; + --green-50:#f9fbf4; + --green-100:#e3eccc; + --green-200:#cddca4; + --green-300:#b7cd7c; + --green-400:#a1bd54; + --green-500:#8bae2c; + --green-600:#769425; + --green-700:#617a1f; + --green-800:#4c6018; + --green-900:#384612; + --yellow-50:#fffdf4; + --yellow-100:#fff4cc; + --yellow-200:#ffeba3; + --yellow-300:#ffe27b; + --yellow-400:#ffd952; + --yellow-500:#ffd02a; + --yellow-600:#d9b124; + --yellow-700:#b3921d; + --yellow-800:#8c7217; + --yellow-900:#665311; + --cyan-50:#f5fafc; + --cyan-100:#cfe9f3; + --cyan-200:#a8d8e9; + --cyan-300:#82c7df; + --cyan-400:#5bb5d6; + --cyan-500:#35a4cc; + --cyan-600:#2d8bad; + --cyan-700:#25738f; + --cyan-800:#1d5a70; + --cyan-900:#154252; + --pink-50:#fdf6f8; + --pink-100:#f5d6dd; + --pink-200:#edb5c2; + --pink-300:#e495a8; + --pink-400:#dc748d; + --pink-500:#d45472; + --pink-600:#b44761; + --pink-700:#943b50; + --pink-800:#752e3f; + --pink-900:#55222e; + --indigo-50:#f6f8fd; + --indigo-100:#d6ddf5; + --indigo-200:#b5c2ed; + --indigo-300:#95a8e4; + --indigo-400:#748ddc; + --indigo-500:#5472d4; + --indigo-600:#4761b4; + --indigo-700:#3b5094; + --indigo-800:#2e3f75; + --indigo-900:#222e55; + --teal-50:#f5fcfa; + --teal-100:#d1f0e8; + --teal-200:#ace3d6; + --teal-300:#88d7c4; + --teal-400:#63cbb2; + --teal-500:#3fbfa0; + --teal-600:#36a288; + --teal-700:#2c8670; + --teal-800:#236958; + --teal-900:#194c40; + --orange-50:#fffaf4; + --orange-100:#ffe5cc; + --orange-200:#ffd0a3; + --orange-300:#ffbb7b; + --orange-400:#ffa752; + --orange-500:#ff922a; + --orange-600:#d97c24; + --orange-700:#b3661d; + --orange-800:#8c5017; + --orange-900:#663a11; + --bluegray-50:#f9fafb; + --bluegray-100:#e1e5ea; + --bluegray-200:#c9d0d9; + --bluegray-300:#b1bbc8; + --bluegray-400:#99a6b7; + --bluegray-500:#8191a6; + --bluegray-600:#6e7b8d; + --bluegray-700:#5a6674; + --bluegray-800:#47505b; + --bluegray-900:#343a42; + --purple-50:#f8f6fd; + --purple-100:#ded6f5; + --purple-200:#c4b5ed; + --purple-300:#aa95e4; + --purple-400:#9074dc; + --purple-500:#7654d4; + --purple-600:#6447b4; + --purple-700:#533b94; + --purple-800:#412e75; + --purple-900:#2f2255; + --red-50:#fff7f6; + --red-100:#ffd8d2; + --red-200:#ffb9af; + --red-300:#ff9b8b; + --red-400:#ff7c68; + --red-500:#ff5d44; + --red-600:#d94f3a; + --red-700:#b34130; + --red-800:#8c3325; + --red-900:#66251b; + --primary-50:#fafbfe; + --primary-100:#e8ebf9; + --primary-200:#d5dcf4; + --primary-300:#c3ccf0; + --primary-400:#b0bdeb; + --primary-500:#9eade6; + --primary-600:#8693c4; + --primary-700:#6f79a1; + --primary-800:#575f7f; + --primary-900:#3f455c; +} + +.p-autocomplete .p-autocomplete-loader { + right: 0.75rem; +} +.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.607rem; +} +.p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { + border-color: #2d3e44; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0.25rem 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { + font-family: Poppins, sans-serif; + font-size: 1rem; + color: rgba(255, 255, 255, 0.87); + padding: 0; + margin: 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: rgba(158, 173, 230, 0.16); + color: #9eade6; + border-radius: 6px; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; +} +.p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f78c79; +} + +.p-autocomplete-panel { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #263238; + border-radius: 6px; + 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-autocomplete-panel .p-autocomplete-items { + padding: 0.5rem 0.5rem; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; +} + +.p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f78c79; +} + +.p-datepicker { + padding: 0.5rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; +} +.p-datepicker:not(.p-datepicker-inline) { + background: #161d21; + border: 1px solid #263238; + 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-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #161d21; +} +.p-datepicker .p-datepicker-header { + padding: 0.5rem; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; + margin: 0; + border-bottom: 1px solid #263238; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev, +.p-datepicker .p-datepicker-header .p-datepicker-next { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 2rem; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + font-weight: 600; + padding: 0.5rem; +} +.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: #9eade6; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + margin-right: 0.5rem; +} +.p-datepicker table { + font-size: 1rem; + margin: 0.5rem 0; +} +.p-datepicker table th { + padding: 0.5rem; +} +.p-datepicker table th > span { + width: 2.5rem; + height: 2.5rem; +} +.p-datepicker table td { + padding: 0.5rem; +} +.p-datepicker table td > span { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + transition: box-shadow 0.3s; + border: 1px solid transparent; +} +.p-datepicker table td > span.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-datepicker table td > span:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-datepicker table td.p-datepicker-today > span { + background: transparent; + color: #9eade6; + border-color: transparent; +} +.p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-datepicker .p-datepicker-buttonbar { + padding: 1rem 0; + border-top: 1px solid #263238; +} +.p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; +} +.p-datepicker .p-timepicker { + border-top: 1px solid #263238; + padding: 0.5rem; +} +.p-datepicker .p-timepicker button { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-datepicker .p-timepicker button:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-datepicker .p-timepicker button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-datepicker .p-timepicker button:last-child { + margin-top: 0.2em; +} +.p-datepicker .p-timepicker span { + font-size: 1.25rem; +} +.p-datepicker .p-timepicker > div { + padding: 0 0.5rem; +} +.p-datepicker.p-datepicker-timeonly .p-timepicker { + border-top: 0 none; +} +.p-datepicker .p-monthpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.5rem; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #263238; + padding-right: 0.5rem; + padding-left: 0.5rem; + padding-top: 0; + padding-bottom: 0; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { + padding-left: 0; +} +.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(158, 173, 230, 0.08); +} +.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} + +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} +.p-cascadeselect { + background: #0e1315; + border: 2px solid #263238; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-cascadeselect:not(.p-disabled):hover { + border-color: #2d3e44; +} +.p-cascadeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; +} +.p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: rgba(255, 255, 255, 0.6); +} +.p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: rgba(255, 255, 255, 0.6); + width: 2.857rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-cascadeselect.p-invalid.p-component { + border-color: #f78c79; +} + +.p-cascadeselect-panel { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #263238; + border-radius: 6px; + 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-cascadeselect-panel .p-cascadeselect-items { + padding: 0.5rem 0.5rem; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 0 0 4px 0; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.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-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { + font-size: 0.875rem; +} + +.p-input-filled .p-cascadeselect { + background: #263238; +} +.p-input-filled .p-cascadeselect:not(.p-disabled):hover { + background-color: #263238; +} +.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { + background-color: #263238; +} + +.p-checkbox { + width: 20px; + height: 20px; +} +.p-checkbox .p-checkbox-box { + border: 2px solid #263238; + background: #0e1315; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.3s; + color: #121212; + font-size: 14px; +} +.p-checkbox .p-checkbox-box.p-highlight { + border-color: #9eade6; + background: #9eade6; +} +.p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + border-color: #7f93de; + background: #7f93de; + color: #121212; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #2d3e44; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #7f93de; + background: #7f93de; + color: #121212; +} +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f78c79; +} + +.p-input-filled .p-checkbox .p-checkbox-box { + background-color: #263238; +} +.p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + background: #9eade6; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #263238; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #7f93de; +} + +.p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; +} +.p-chips .p-chips-multiple-container:not(.p-disabled):hover { + border-color: #2d3e44; +} +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-chips .p-chips-multiple-container .p-chips-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: rgba(158, 173, 230, 0.16); + color: #9eade6; + border-radius: 6px; +} +.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.5rem; +} +.p-chips .p-chips-multiple-container .p-chips-input-token { + padding: 0.25rem 0; +} +.p-chips .p-chips-multiple-container .p-chips-input-token input { + font-family: Poppins, sans-serif; + font-size: 1rem; + color: rgba(255, 255, 255, 0.87); + padding: 0; + margin: 0; +} +.p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f78c79; +} + +.p-colorpicker-preview { + width: 2rem; + height: 2rem; +} + +.p-colorpicker-panel { + background: #161d21; + border: 1px solid #263238; +} +.p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: rgba(255, 255, 255, 0.87); +} + +.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 { + background: #0e1315; + border: 2px solid #263238; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-dropdown:not(.p-disabled):hover { + border-color: #2d3e44; +} +.p-dropdown:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-dropdown.p-dropdown-clearable .p-dropdown-label { + padding-right: 1.75rem; +} +.p-dropdown .p-dropdown-label { + background: transparent; + border: 0 none; +} +.p-dropdown .p-dropdown-label.p-placeholder { + color: rgba(255, 255, 255, 0.6); +} +.p-dropdown .p-dropdown-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-dropdown .p-dropdown-trigger { + background: transparent; + color: rgba(255, 255, 255, 0.6); + width: 2.857rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-dropdown .p-dropdown-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 2.857rem; +} +.p-dropdown.p-invalid.p-component { + border-color: #f78c79; +} + +.p-dropdown-panel { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #263238; + border-radius: 6px; + 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-panel .p-dropdown-header { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter { + padding-right: 1.75rem; + margin-right: -1.75rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { + padding-right: 3.5rem; + margin-right: -3.5rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { + right: 2.5rem; +} +.p-dropdown-panel .p-dropdown-items { + padding: 0.5rem 0.5rem; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} + +.p-input-filled .p-dropdown { + background: #263238; +} +.p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: #263238; +} +.p-input-filled .p-dropdown:not(.p-disabled).p-focus { + background-color: #263238; +} +.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; +} + +.p-editor-container .p-editor-toolbar { + background: #161d21; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 2px solid #263238; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: rgba(255, 255, 255, 0.6); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #161d21; + border: 1px solid #263238; + 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); + border-radius: 6px; + padding: 0.5rem 0.5rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 2px solid #263238; +} +.p-editor-container .p-editor-content .ql-editor { + background: #0e1315; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: rgba(255, 255, 255, 0.87); +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: rgba(255, 255, 255, 0.87); +} +.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: #9eade6; +} +.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: #9eade6; +} +.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: #9eade6; +} +.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: #9eade6; +} + +.p-inputgroup-addon { + background: #161d21; + color: rgba(255, 255, 255, 0.6); + border-top: 2px solid #263238; + border-left: 2px solid #263238; + border-bottom: 2px solid #263238; + padding: 0.5rem 0.75rem; + min-width: 2.857rem; +} +.p-inputgroup-addon:last-child { + border-right: 2px solid #263238; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { + border-radius: 0; + margin: 0; +} +.p-inputgroup > .p-component + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { + border-left: 0 none; +} +.p-inputgroup > .p-component:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { + z-index: 1; +} +.p-inputgroup > .p-component:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { + z-index: 1; +} + +.p-inputgroup-addon:first-child, +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup .p-float-label:first-child input { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup-addon:last-child, +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-inputgroup .p-float-label:last-child input { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-fluid .p-inputgroup .p-button { + width: auto; +} +.p-fluid .p-inputgroup .p-button.p-button-icon-only { + width: 2.857rem; +} + +.p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f78c79; +} + +.p-inputswitch { + width: 3rem; + height: 1.75rem; +} +.p-inputswitch .p-inputswitch-slider { + background: #263238; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-inputswitch .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.6); + width: 1.25rem; + height: 1.25rem; + left: 0.25rem; + margin-top: -0.625rem; + border-radius: 6px; + transition-duration: 0.3s; +} +.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 #9eade6; +} +.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(158, 173, 230, 0.08); +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #9eade6; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); +} +.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #8fa0e2; +} +.p-inputswitch.p-invalid .p-inputswitch-slider { + border-color: #f78c79; +} + +.p-inputtext { + font-family: Poppins, sans-serif; + font-size: 1rem; + color: rgba(255, 255, 255, 0.87); + background: #0e1315; + padding: 0.5rem 0.75rem; + border: 2px solid #263238; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + appearance: none; + border-radius: 6px; +} +.p-inputtext:enabled:hover { + border-color: #2d3e44; +} +.p-inputtext:enabled:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-inputtext.p-invalid.p-component { + border-color: #f78c79; +} +.p-inputtext.p-inputtext-sm { + font-size: 0.875rem; + padding: 0.4375rem 0.65625rem; +} +.p-inputtext.p-inputtext-lg { + font-size: 1.25rem; + padding: 0.625rem 0.9375rem; +} + +.p-float-label > label { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + transition-duration: 0.3s; +} + +.p-float-label > label.p-error { + color: #f78c79; +} + +.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.75rem; + color: rgba(255, 255, 255, 0.6); +} + +.p-input-icon-left > .p-inputtext { + padding-left: 2.5rem; +} + +.p-input-icon-left.p-float-label > label { + left: 2.5rem; +} + +.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.75rem; + color: rgba(255, 255, 255, 0.6); +} + +.p-input-icon-right > .p-inputtext { + padding-right: 2.5rem; +} + +::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.6); +} + +:-moz-placeholder { + color: rgba(255, 255, 255, 0.6); +} + +::-moz-placeholder { + color: rgba(255, 255, 255, 0.6); +} + +:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.6); +} + +.p-input-filled .p-inputtext { + background-color: #263238; +} +.p-input-filled .p-inputtext:enabled:hover { + background-color: #263238; +} +.p-input-filled .p-inputtext:enabled:focus { + background-color: #263238; +} + +.p-inputtext-sm .p-inputtext { + font-size: 0.875rem; + padding: 0.4375rem 0.65625rem; +} + +.p-inputtext-lg .p-inputtext { + font-size: 1.25rem; + padding: 0.625rem 0.9375rem; +} + +.p-listbox { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; +} +.p-listbox .p-listbox-header { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-listbox .p-listbox-header .p-listbox-filter { + padding-right: 1.75rem; +} +.p-listbox .p-listbox-header .p-listbox-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-listbox .p-listbox-list { + padding: 0.5rem 0.5rem; +} +.p-listbox .p-listbox-list .p-listbox-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-listbox .p-listbox-list .p-listbox-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 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 #9eade6; +} +.p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; +} +.p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} +.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-listbox.p-invalid { + border-color: #f78c79; +} + +.p-mention-panel { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #263238; + border-radius: 6px; + 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-mention-panel .p-mention-items { + padding: 0.5rem 0.5rem; +} +.p-mention-panel .p-mention-items .p-mention-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-mention-panel .p-mention-items .p-mention-item:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-mention-panel .p-mention-items .p-mention-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} + +.p-multiselect { + background: #0e1315; + border: 2px solid #263238; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-multiselect:not(.p-disabled):hover { + border-color: #2d3e44; +} +.p-multiselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; +} +.p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-multiselect .p-multiselect-label.p-placeholder { + color: rgba(255, 255, 255, 0.6); +} +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: rgba(158, 173, 230, 0.16); + color: #9eade6; + border-radius: 6px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} +.p-multiselect .p-multiselect-trigger { + background: transparent; + color: rgba(255, 255, 255, 0.6); + width: 2.857rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-multiselect .p-multiselect-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 2.857rem; +} +.p-multiselect.p-invalid.p-component { + border-color: #f78c79; +} + +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { + padding: 0.5rem 0.75rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; +} + +.p-multiselect-panel { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #263238; + border-radius: 6px; + 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-multiselect-panel .p-multiselect-header { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.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.75rem; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-multiselect-panel .p-multiselect-items { + padding: 0.5rem 0.5rem; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { + margin-right: 0.5rem; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} + +.p-input-filled .p-multiselect { + background: #263238; +} +.p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: #263238; +} +.p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: #263238; +} + +.p-password.p-invalid.p-component > .p-inputtext { + border-color: #f78c79; +} + +.p-password-panel { + padding: 1rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + 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); + border-radius: 6px; +} +.p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #263238; +} +.p-password-panel .p-password-meter .p-password-strength.weak { + background: #e693a9; +} +.p-password-panel .p-password-meter .p-password-strength.medium { + background: #ffe08a; +} +.p-password-panel .p-password-meter .p-password-strength.strong { + background: #cede9c; +} + +.p-radiobutton { + width: 20px; + height: 20px; +} +.p-radiobutton .p-radiobutton-box { + border: 2px solid #263238; + background: #0e1315; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #2d3e44; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 12px; + height: 12px; + transition-duration: 0.3s; + background-color: #121212; +} +.p-radiobutton .p-radiobutton-box.p-highlight { + border-color: #9eade6; + background: #9eade6; +} +.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + border-color: #7f93de; + background: #7f93de; + color: #121212; +} +.p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f78c79; +} +.p-radiobutton:focus { + outline: 0 none; +} + +.p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #263238; +} +.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: #263238; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #9eade6; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #7f93de; +} + +.p-rating { + gap: 0.5rem; +} +.p-rating .p-rating-item .p-rating-icon { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + font-size: 1.143rem; +} +.p-rating .p-rating-item .p-rating-icon.p-rating-cancel { + color: #dF7E6C; +} +.p-rating .p-rating-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #9eade6; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #9eade6; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #f88c79; +} + +.p-selectbutton .p-button { + background: #161d21; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + border-color: #263238; + color: rgba(255, 255, 255, 0.87); +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); +} +.p-selectbutton .p-button.p-highlight { + background: rgba(158, 173, 230, 0.16); + border-color: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #9eade6; +} +.p-selectbutton .p-button.p-highlight:hover { + background: rgba(158, 173, 230, 0.24); + border-color: rgba(158, 173, 230, 0.24); + color: #9eade6; +} +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #9eade6; +} +.p-selectbutton.p-invalid > .p-button { + border-color: #f78c79; +} + +.p-slider { + background: #263238; + border: 0 none; + border-radius: 6px; +} +.p-slider.p-slider-horizontal { + height: 0.286rem; +} +.p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -0.5715rem; + margin-left: -0.5715rem; +} +.p-slider.p-slider-vertical { + width: 0.286rem; +} +.p-slider.p-slider-vertical .p-slider-handle { + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; +} +.p-slider .p-slider-handle { + height: 1.143rem; + width: 1.143rem; + background: #263238; + border: 2px solid #9eade6; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-slider .p-slider-handle:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-slider .p-slider-range { + background: #9eade6; +} +.p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #9eade6; + border-color: #9eade6; +} + +.p-treeselect { + background: #0e1315; + border: 2px solid #263238; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-treeselect:not(.p-disabled):hover { + border-color: #2d3e44; +} +.p-treeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; +} +.p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-treeselect .p-treeselect-label.p-placeholder { + color: rgba(255, 255, 255, 0.6); +} +.p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #263238; + color: rgba(255, 255, 255, 0.87); + border-radius: 16px; +} +.p-treeselect .p-treeselect-trigger { + background: transparent; + color: rgba(255, 255, 255, 0.6); + width: 2.857rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-treeselect.p-invalid.p-component { + border-color: #f78c79; +} + +.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; +} + +.p-treeselect-panel { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #263238; + border-radius: 6px; + 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-treeselect-panel .p-treeselect-header { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container { + margin-right: 0.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter { + padding-right: 1.75rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter { + padding-right: 3.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon { + right: 2.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-tree { + border: 0 none; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} + +.p-input-filled .p-treeselect { + background: #263238; +} +.p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #263238; +} +.p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #263238; +} + +.p-togglebutton.p-button { + background: #161d21; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.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(158, 173, 230, 0.08); + border-color: #263238; + 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 { + color: rgba(255, 255, 255, 0.6); +} +.p-togglebutton.p-button.p-highlight { + background: rgba(158, 173, 230, 0.16); + border-color: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-togglebutton.p-button.p-highlight .p-button-icon-left, +.p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #9eade6; +} +.p-togglebutton.p-button.p-highlight:hover { + background: rgba(158, 173, 230, 0.24); + border-color: rgba(158, 173, 230, 0.24); + color: #9eade6; +} +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #9eade6; +} +.p-togglebutton.p-button.p-invalid > .p-button { + border-color: #f78c79; +} + +.p-button { + color: #121212; + background: #9eade6; + border: 2px solid #9eade6; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-button:enabled:hover, .p-button:not(button):not(a):not(.p-disabled):hover { + background: #8fa0e2; + color: #121212; + border-color: #8fa0e2; +} +.p-button:enabled:active, .p-button:not(button):not(a):not(.p-disabled):active { + background: #7f93de; + color: #121212; + border-color: #7f93de; +} +.p-button.p-button-outlined { + background-color: transparent; + color: #9eade6; + border: 2px solid; +} +.p-button.p-button-outlined:enabled:hover, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.04); + color: #9eade6; + border: 2px solid; +} +.p-button.p-button-outlined:enabled:active, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; + border: 2px solid; +} +.p-button.p-button-outlined.p-button-plain { + color: rgba(255, 255, 255, 0.6); + border-color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-outlined.p-button-plain:enabled:hover, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-outlined.p-button-plain:enabled:active, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-text { + background-color: transparent; + color: #9eade6; + border-color: transparent; +} +.p-button.p-button-text:enabled:hover, .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.04); + color: #9eade6; + border-color: transparent; +} +.p-button.p-button-text:enabled:active, .p-button.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; + border-color: transparent; +} +.p-button.p-button-text.p-button-plain { + color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-text.p-button-plain:enabled:hover, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.6); +} +.p-button.p-button-text.p-button-plain:enabled:active, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.6); +} +.p-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-button .p-button-label { + transition-duration: 0.3s; +} +.p-button .p-button-icon-left { + margin-right: 0.5rem; +} +.p-button .p-button-icon-right { + margin-left: 0.5rem; +} +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} +.p-button .p-badge { + margin-left: 0.5rem; + min-width: 1rem; + height: 1rem; + line-height: 1rem; + color: #9eade6; + background-color: #121212; +} +.p-button.p-button-raised { + 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); +} +.p-button.p-button-rounded { + border-radius: 2rem; +} +.p-button.p-button-icon-only { + width: 2.857rem; + padding: 0.5rem 0; +} +.p-button.p-button-icon-only .p-button-icon-left, +.p-button.p-button-icon-only .p-button-icon-right { + margin: 0; +} +.p-button.p-button-icon-only.p-button-rounded { + border-radius: 50%; + height: 2.857rem; +} +.p-button.p-button-sm { + font-size: 0.875rem; + padding: 0.4375rem 0.875rem; +} +.p-button.p-button-sm .p-button-icon { + font-size: 0.875rem; +} +.p-button.p-button-lg { + font-size: 1.25rem; + padding: 0.625rem 1.25rem; +} +.p-button.p-button-lg .p-button-icon { + font-size: 1.25rem; +} +.p-button.p-button-loading-label-only.p-button-loading-left .p-button-label { + margin-left: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-right .p-button-label { + margin-right: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-top .p-button-label { + margin-top: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label { + margin-bottom: 0.5rem; +} +.p-button.p-button-loading-label-only .p-button-loading-icon { + margin: 0; +} + +.p-fluid .p-button { + width: 100%; +} +.p-fluid .p-button-icon-only { + width: 2.857rem; +} +.p-fluid .p-buttonset { + display: flex; +} +.p-fluid .p-buttonset .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 { + color: #0e1315; + background: #b4bfcd; + border: 1px solid #b4bfcd; +} +.p-button.p-button-secondary:enabled:hover, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary:enabled:hover, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover { + background: #9dabbe; + color: #0e1315; + border-color: #9dabbe; +} +.p-button.p-button-secondary:enabled:focus, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-secondary:enabled:focus, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus { + box-shadow: 1px #e1e5eb; +} +.p-button.p-button-secondary:enabled:active, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary:enabled:active, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active { + background: #8698ae; + color: #0e1315; + border-color: #8698ae; +} +.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 { + background-color: transparent; + color: #b4bfcd; + border: 2px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(180, 191, 205, 0.04); + color: #b4bfcd; + border: 2px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(180, 191, 205, 0.16); + color: #b4bfcd; + border: 2px 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 { + background-color: transparent; + color: #b4bfcd; + border-color: transparent; +} +.p-button.p-button-secondary.p-button-text:enabled:hover, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(180, 191, 205, 0.04); + border-color: transparent; + color: #b4bfcd; +} +.p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(180, 191, 205, 0.16); + border-color: transparent; + color: #b4bfcd; +} + +.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 { + color: #ffffff; + background: #35a4cc; + border: 1px solid #35a4cc; +} +.p-button.p-button-info:enabled:hover, .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info:enabled:hover, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover { + background: #2f94b9; + color: #ffffff; + border-color: #2f94b9; +} +.p-button.p-button-info:enabled:focus, .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-info:enabled:focus, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #aedbeb; +} +.p-button.p-button-info:enabled:active, .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info:enabled:active, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active { + background: #2984a4; + color: #ffffff; + border-color: #2984a4; +} +.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 { + background-color: transparent; + color: #35a4cc; + border: 2px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:hover, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(53, 164, 204, 0.04); + color: #35a4cc; + border: 2px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:active, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(53, 164, 204, 0.16); + color: #35a4cc; + border: 2px 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 { + background-color: transparent; + color: #35a4cc; + border-color: transparent; +} +.p-button.p-button-info.p-button-text:enabled:hover, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(53, 164, 204, 0.04); + border-color: transparent; + color: #35a4cc; +} +.p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(53, 164, 204, 0.16); + border-color: transparent; + color: #35a4cc; +} + +.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 { + color: #0e1315; + background: #cede9c; + border: 1px solid #cede9c; +} +.p-button.p-button-success:enabled:hover, .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success:enabled:hover, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover { + background: #c0d580; + color: #0e1315; + border-color: #c0d580; +} +.p-button.p-button-success:enabled:focus, .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-success:enabled:focus, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #ebf2d7; +} +.p-button.p-button-success:enabled:active, .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success:enabled:active, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active { + background: #b2cb63; + color: #0e1315; + border-color: #b2cb63; +} +.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 { + background-color: transparent; + color: #cede9c; + border: 2px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:hover, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(206, 222, 156, 0.04); + color: #cede9c; + border: 2px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:active, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(206, 222, 156, 0.16); + color: #cede9c; + border: 2px 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 { + background-color: transparent; + color: #cede9c; + border-color: transparent; +} +.p-button.p-button-success.p-button-text:enabled:hover, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(206, 222, 156, 0.04); + border-color: transparent; + color: #cede9c; +} +.p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(206, 222, 156, 0.16); + border-color: transparent; + color: #cede9c; +} + +.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 { + color: #0e1315; + background: #ffe08a; + border: 1px solid #ffe08a; +} +.p-button.p-button-warning:enabled:hover, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning:enabled:hover, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover { + background: #ffd663; + color: #0e1315; + border-color: #ffd663; +} +.p-button.p-button-warning:enabled:focus, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-warning:enabled:focus, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #fff3d0; +} +.p-button.p-button-warning:enabled:active, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning:enabled:active, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active { + background: #ffcb3b; + color: #0e1315; + border-color: #ffcb3b; +} +.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 { + background-color: transparent; + color: #ffe08a; + border: 2px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:hover, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 224, 138, 0.04); + color: #ffe08a; + border: 2px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:active, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 224, 138, 0.16); + color: #ffe08a; + border: 2px 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 { + background-color: transparent; + color: #ffe08a; + border-color: transparent; +} +.p-button.p-button-warning.p-button-text:enabled:hover, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 224, 138, 0.04); + border-color: transparent; + color: #ffe08a; +} +.p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 224, 138, 0.16); + border-color: transparent; + color: #ffe08a; +} + +.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 { + color: #0e1315; + background: #b09ce5; + border: 1px solid #b09ce5; +} +.p-button.p-button-help:enabled:hover, .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help:enabled:hover, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover { + background: #987edd; + color: #0e1315; + border-color: #987edd; +} +.p-button.p-button-help:enabled:focus, .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-help:enabled:focus, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #dfd7f5; +} +.p-button.p-button-help:enabled:active, .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help:enabled:active, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active { + background: #7f5fd5; + color: #0e1315; + border-color: #7f5fd5; +} +.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 { + background-color: transparent; + color: #b09ce5; + border: 2px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:hover, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(176, 156, 229, 0.04); + color: #b09ce5; + border: 2px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:active, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(176, 156, 229, 0.16); + color: #b09ce5; + border: 2px 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 { + background-color: transparent; + color: #b09ce5; + border-color: transparent; +} +.p-button.p-button-help.p-button-text:enabled:hover, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(176, 156, 229, 0.04); + border-color: transparent; + color: #b09ce5; +} +.p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(176, 156, 229, 0.16); + border-color: transparent; + color: #b09ce5; +} + +.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 { + color: #0e1315; + background: #e693a9; + border: 1px solid #e693a9; +} +.p-button.p-button-danger:enabled:hover, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger:enabled:hover, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover { + background: #df7491; + color: #0e1315; + border-color: #df7491; +} +.p-button.p-button-danger:enabled:focus, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-danger:enabled:focus, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 1px #f5d4dd; +} +.p-button.p-button-danger:enabled:active, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger:enabled:active, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active { + background: #d85678; + color: #0e1315; + border-color: #d85678; +} +.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 { + background-color: transparent; + color: #e693a9; + border: 2px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:hover, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(230, 147, 169, 0.04); + color: #e693a9; + border: 2px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:active, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(230, 147, 169, 0.16); + color: #e693a9; + border: 2px 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 { + background-color: transparent; + color: #e693a9; + border-color: transparent; +} +.p-button.p-button-danger.p-button-text:enabled:hover, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(230, 147, 169, 0.04); + border-color: transparent; + color: #e693a9; +} +.p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(230, 147, 169, 0.16); + border-color: transparent; + color: #e693a9; +} + +.p-button.p-button-link { + color: #7f93de; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover { + background: transparent; + color: #7f93de; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-label, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus, .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus { + background: transparent; + box-shadow: 0 0 0 1px #9eade6; + border-color: transparent; +} +.p-button.p-button-link:enabled:active, .p-button.p-button-link:not(button):not(a):not(.p-disabled):active { + background: transparent; + color: #7f93de; + border-color: transparent; +} + +.p-splitbutton { + border-radius: 6px; +} +.p-splitbutton.p-button-outlined > .p-button { + background-color: transparent; + color: #9eade6; + border: 2px solid; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.04); + color: #9eade6; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button { + color: rgba(255, 255, 255, 0.6); + border-color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-text > .p-button { + background-color: transparent; + color: #9eade6; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.04); + color: #9eade6; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; + border-color: transparent; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button { + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 255, 255, 0.16); + color: rgba(255, 255, 255, 0.6); +} +.p-splitbutton.p-button-raised { + 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); +} +.p-splitbutton.p-button-rounded { + border-radius: 2rem; +} +.p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; +} +.p-splitbutton.p-button-sm > .p-button { + font-size: 0.875rem; + padding: 0.4375rem 0.875rem; +} +.p-splitbutton.p-button-sm > .p-button .p-button-icon { + font-size: 0.875rem; +} +.p-splitbutton.p-button-lg > .p-button { + font-size: 1.25rem; + padding: 0.625rem 1.25rem; +} +.p-splitbutton.p-button-lg > .p-button .p-button-icon { + font-size: 1.25rem; +} + +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button { + background-color: transparent; + color: #b4bfcd; + border: 2px solid; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(180, 191, 205, 0.04); + color: #b4bfcd; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(180, 191, 205, 0.16); + color: #b4bfcd; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button { + background-color: transparent; + color: #b4bfcd; + border-color: transparent; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(180, 191, 205, 0.04); + border-color: transparent; + color: #b4bfcd; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(180, 191, 205, 0.16); + border-color: transparent; + color: #b4bfcd; +} + +.p-splitbutton.p-button-info.p-button-outlined > .p-button { + background-color: transparent; + color: #35a4cc; + border: 2px solid; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(53, 164, 204, 0.04); + color: #35a4cc; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(53, 164, 204, 0.16); + color: #35a4cc; +} +.p-splitbutton.p-button-info.p-button-text > .p-button { + background-color: transparent; + color: #35a4cc; + border-color: transparent; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(53, 164, 204, 0.04); + border-color: transparent; + color: #35a4cc; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(53, 164, 204, 0.16); + border-color: transparent; + color: #35a4cc; +} + +.p-splitbutton.p-button-success.p-button-outlined > .p-button { + background-color: transparent; + color: #cede9c; + border: 2px solid; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(206, 222, 156, 0.04); + color: #cede9c; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(206, 222, 156, 0.16); + color: #cede9c; +} +.p-splitbutton.p-button-success.p-button-text > .p-button { + background-color: transparent; + color: #cede9c; + border-color: transparent; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(206, 222, 156, 0.04); + border-color: transparent; + color: #cede9c; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(206, 222, 156, 0.16); + border-color: transparent; + color: #cede9c; +} + +.p-splitbutton.p-button-warning.p-button-outlined > .p-button { + background-color: transparent; + color: #ffe08a; + border: 2px solid; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 224, 138, 0.04); + color: #ffe08a; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 224, 138, 0.16); + color: #ffe08a; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button { + background-color: transparent; + color: #ffe08a; + border-color: transparent; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 224, 138, 0.04); + border-color: transparent; + color: #ffe08a; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 224, 138, 0.16); + border-color: transparent; + color: #ffe08a; +} + +.p-splitbutton.p-button-help.p-button-outlined > .p-button { + background-color: transparent; + color: #b09ce5; + border: 2px solid; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(176, 156, 229, 0.04); + color: #b09ce5; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(176, 156, 229, 0.16); + color: #b09ce5; +} +.p-splitbutton.p-button-help.p-button-text > .p-button { + background-color: transparent; + color: #b09ce5; + border-color: transparent; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(176, 156, 229, 0.04); + border-color: transparent; + color: #b09ce5; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(176, 156, 229, 0.16); + border-color: transparent; + color: #b09ce5; +} + +.p-splitbutton.p-button-danger.p-button-outlined > .p-button { + background-color: transparent; + color: #e693a9; + border: 2px solid; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(230, 147, 169, 0.04); + color: #e693a9; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(230, 147, 169, 0.16); + color: #e693a9; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button { + background-color: transparent; + color: #e693a9; + border-color: transparent; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(230, 147, 169, 0.04); + border-color: transparent; + color: #e693a9; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(230, 147, 169, 0.16); + border-color: transparent; + color: #e693a9; +} + +.p-speeddial-button.p-button.p-button-icon-only { + width: 4rem; + height: 4rem; +} +.p-speeddial-button.p-button.p-button-icon-only .p-button-icon { + font-size: 1.3rem; +} + +.p-speeddial-action { + width: 3rem; + height: 3rem; + background: #1e282c; + color: #fff; +} +.p-speeddial-action:hover { + background: #263238; + color: #fff; +} + +.p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; +} + +.p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; +} + +.p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; +} + +.p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; +} +.p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; +} + +.p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); +} + +.p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin: 0.5rem; +} +.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-carousel .p-carousel-content .p-carousel-prev:focus, +.p-carousel .p-carousel-content .p-carousel-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-carousel .p-carousel-indicators { + padding: 1rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #263238; + width: 2rem; + height: 0.5rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 0; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #374851; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} + +.p-datatable .p-paginator-top { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-datatable .p-paginator-bottom { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-datatable .p-datatable-header { + background: #161d21; + color: rgba(255, 255, 255, 0.6); + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datatable .p-datatable-footer { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 2px solid #263238; + border-width: 0 0 2px 0; + font-weight: 600; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + transition: box-shadow 0.3s; +} +.p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 2px solid #263238; + border-width: 0 0 2px 0; + font-weight: 600; + color: rgba(255, 255, 255, 0.87); + background: #161d21; +} +.p-datatable .p-sortable-column .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.6); + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #9eade6; + background: rgba(158, 173, 230, 0.16); + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-datatable .p-sortable-column.p-highlight { + background: #161d21; + color: #9eade6; +} +.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #9eade6; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover { + background: rgba(158, 173, 230, 0.08); + color: #9eade6; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #9eade6; +} +.p-datatable .p-sortable-column:focus { + box-shadow: inset 0 0 0 0.15rem #9eade6; + outline: 0 none; +} +.p-datatable .p-datatable-tbody > tr { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + transition: box-shadow 0.3s; +} +.p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { + margin-right: 0.5rem; +} +.p-datatable .p-datatable-tbody > tr > td > .p-column-title { + font-weight: 600; +} +.p-datatable .p-datatable-tbody > tr > td.p-highlight { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-datatable .p-datatable-tbody > tr.p-highlight { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 rgba(158, 173, 230, 0.16); +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 rgba(158, 173, 230, 0.16); +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus { + outline: 0.15rem solid #9eade6; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus { + outline: 0.15rem solid #9eade6; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-datatable .p-column-resizer-helper { + background: #9eade6; +} +.p-datatable .p-datatable-scrollable-header, +.p-datatable .p-datatable-scrollable-footer { + background: #161d21; +} +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { + background-color: #161d21; +} +.p-datatable .p-datatable-loading-icon { + font-size: 2rem; +} +.p-datatable.p-datatable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-footer { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-top { + border-width: 0 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-bottom { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { + border-width: 1px 1px 2px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + background: #1b2327; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { + color: #9eade6; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { + color: #9eade6; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { + background: #1b2327; +} +.p-datatable.p-datatable-sm .p-datatable-header { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-lg .p-datatable-header { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-footer { + padding: 1.25rem 1.25rem; +} + +.p-datatable-drag-selection-helper { + background: rgba(158, 173, 230, 0.16); +} + +.p-dataview .p-paginator-top { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-dataview .p-paginator-bottom { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-dataview .p-dataview-header { + background: #161d21; + color: rgba(255, 255, 255, 0.6); + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-dataview .p-dataview-content { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 0 none; + padding: 0; +} +.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { + border: solid #263238; + border-width: 0 0 1px 0; +} +.p-dataview .p-dataview-footer { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-dataview .p-dataview-loading-icon { + font-size: 2rem; +} + +.p-datascroller .p-paginator-top { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-datascroller .p-paginator-bottom { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-datascroller .p-datascroller-header { + background: #161d21; + color: rgba(255, 255, 255, 0.6); + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datascroller .p-datascroller-content { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 0 none; + padding: 0; +} +.p-datascroller.p-datascroller-inline .p-datascroller-list > li { + border: solid #263238; + border-width: 0 0 1px 0; +} +.p-datascroller .p-datascroller-footer { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-column-filter-row .p-column-filter-menu-button, +.p-column-filter-row .p-column-filter-clear-button { + margin-left: 0.5rem; +} + +.p-column-filter-menu-button { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-column-filter-menu-button:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.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(158, 173, 230, 0.16); + color: #9eade6; +} +.p-column-filter-menu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} + +.p-column-filter-clear-button { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-column-filter-clear-button:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-column-filter-clear-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} + +.p-column-filter-overlay { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #263238; + border-radius: 6px; + 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); + min-width: 12.5rem; +} +.p-column-filter-overlay .p-column-filter-row-items { + padding: 0.5rem 0.5rem; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #263238; + margin: 4px 0; +} + +.p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 1rem; + border-bottom: 1px solid #263238; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { + margin-bottom: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-top: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint:last-child { + border-bottom: 0 none; +} +.p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0.5rem 1rem; +} +.p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 1rem; +} + +.fc { + /* FullCalendar 4 */ + /* FullCalendar 5 */ +} +.fc.fc-unthemed .fc-view-container th { + background: #161d21; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-unthemed .fc-view-container td.fc-widget-content { + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-unthemed .fc-view-container td.fc-head-container { + border: 2px solid #263238; +} +.fc.fc-unthemed .fc-view-container .fc-view { + background: #161d21; +} +.fc.fc-unthemed .fc-view-container .fc-row { + border-right: 2px solid #263238; +} +.fc.fc-unthemed .fc-view-container .fc-event { + background: #8fa0e2; + border: 2px solid #8fa0e2; + color: #121212; +} +.fc.fc-unthemed .fc-view-container .fc-divider { + background: #161d21; + border: 2px solid #263238; +} +.fc.fc-unthemed .fc-toolbar .fc-button { + color: #121212; + background: #9eade6; + border: 2px solid #9eade6; + font-size: 1rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; + display: flex; + align-items: center; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { + background: #8fa0e2; + color: #121212; + border-color: #8fa0e2; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { + background: #7f93de; + color: #121212; + border-color: #7f93de; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-unthemed .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #161d21; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: rgba(158, 173, 230, 0.08); + border-color: #263238; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: rgba(158, 173, 230, 0.16); + border-color: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: rgba(158, 173, 230, 0.24); + border-color: rgba(158, 173, 230, 0.24); + color: #9eade6; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + z-index: 1; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { + border-color: #263238; +} +.fc.fc-theme-standard .fc-view-harness th { + background: #161d21; + border-color: #263238; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-theme-standard .fc-view-harness td { + color: rgba(255, 255, 255, 0.87); + border-color: #263238; +} +.fc.fc-theme-standard .fc-view-harness .fc-view { + background: #161d21; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover { + background: none; + border: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { + border: 2px solid #263238; + padding: 1rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + font-family: "PrimeIcons" !important; + font-size: 1rem; + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { + content: "\e90b"; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { + padding: 1rem; + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { + color: #121212; + background: #8fa0e2; + border-color: #8fa0e2; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { + color: #121212; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { + background: #8fa0e2; + border-color: #8fa0e2; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { + background: #161d21; +} +.fc.fc-theme-standard .fc-toolbar .fc-button { + color: #121212; + background: #9eade6; + border: 2px solid #9eade6; + font-size: 1rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { + background: #8fa0e2; + color: #121212; + border-color: #8fa0e2; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { + background: #7f93de; + color: #121212; + border-color: #7f93de; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:disabled { + opacity: 0.4; + color: #121212; + background: #9eade6; + border: 2px solid #9eade6; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #161d21; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: rgba(158, 173, 230, 0.08); + border-color: #263238; + color: rgba(255, 255, 255, 0.87); +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: rgba(158, 173, 230, 0.16); + border-color: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: rgba(158, 173, 230, 0.24); + border-color: rgba(158, 173, 230, 0.24); + color: #9eade6; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + z-index: 1; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.fc.fc-theme-standard .fc-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} + +.p-orderlist .p-orderlist-controls { + padding: 1rem; +} +.p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; +} +.p-orderlist .p-orderlist-header { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + padding: 1rem; + font-weight: 600; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-orderlist .p-orderlist-filter-container { + padding: 1rem; + background: #161d21; + border: 2px solid #263238; + border-bottom: 0 none; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input { + padding-right: 1.75rem; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-orderlist .p-orderlist-list { + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + padding: 0.5rem 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 1rem; + margin: 0 0 4px 0; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: transform 0.3s, box-shadow 0.3s; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-orderlist .p-orderlist-list .p-orderlist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: rgba(255, 255, 255, 0.01); +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: rgba(158, 173, 230, 0.08); +} + +@media screen and (max-width: 960px) { + .p-orderlist { + flex-direction: column; + } + .p-orderlist .p-orderlist-controls { + padding: 1rem; + flex-direction: row; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-orderlist .p-orderlist-controls .p-button:last-child { + margin-right: 0; + } +} +.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-organizationchart .p-organizationchart-node-content.p-highlight { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: rgba(57, 87, 204, 0.16); +} +.p-organizationchart .p-organizationchart-line-down { + background: #263238; +} +.p-organizationchart .p-organizationchart-line-left { + border-right: 2px solid #263238; + border-color: #263238; +} +.p-organizationchart .p-organizationchart-line-top { + border-top: 2px solid #263238; + border-color: #263238; +} +.p-organizationchart .p-organizationchart-node-content { + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + padding: 1rem; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} + +.p-paginator { + background: #161d21; + color: rgba(255, 255, 255, 0.6); + border: solid #263238; + border-width: 2px; + padding: 0.5rem 1rem; + border-radius: 6px; +} +.p-paginator .p-paginator-first, +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; + color: rgba(255, 255, 255, 0.6); + min-width: 2.857rem; + height: 2.857rem; + margin: 0.143rem; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + border-color: transparent; + color: rgba(255, 255, 255, 0.87); +} +.p-paginator .p-paginator-first { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-paginator .p-paginator-last { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-paginator .p-dropdown { + margin-left: 0.5rem; + height: 2.857rem; +} +.p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; +} +.p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; +} +.p-paginator .p-paginator-page-input .p-inputtext { + max-width: 2.857rem; +} +.p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: rgba(255, 255, 255, 0.6); + min-width: 2.857rem; + height: 2.857rem; + margin: 0.143rem; + padding: 0 0.5rem; +} +.p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: rgba(255, 255, 255, 0.6); + min-width: 2.857rem; + height: 2.857rem; + margin: 0.143rem; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: rgba(158, 173, 230, 0.16); + border-color: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + border-color: transparent; + color: rgba(255, 255, 255, 0.87); +} + +.p-picklist .p-picklist-buttons { + padding: 1rem; +} +.p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; +} +.p-picklist .p-picklist-header { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + padding: 1rem; + font-weight: 600; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-picklist .p-picklist-filter-container { + padding: 1rem; + background: #161d21; + border: 2px solid #263238; + border-bottom: 0 none; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-input { + padding-right: 1.75rem; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-picklist .p-picklist-list { + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + padding: 0.5rem 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 1rem; + margin: 0 0 4px 0; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: transform 0.3s, box-shadow 0.3s; +} +.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-picklist .p-picklist-list .p-picklist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #9eade6; + background: rgba(158, 173, 230, 0.16); +} + +@media screen and (max-width: 960px) { + .p-picklist { + flex-direction: column; + } + .p-picklist .p-picklist-buttons { + padding: 1rem; + flex-direction: row; + } + .p-picklist .p-picklist-buttons .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-picklist .p-picklist-buttons .p-button:last-child { + margin-right: 0; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before { + content: "\e930"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before { + content: "\e92c"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before { + content: "\e933"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before { + content: "\e92f"; + } +} +.p-tree { + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + padding: 1rem; + border-radius: 6px; +} +.p-tree .p-tree-container .p-treenode { + padding: 0.143rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: box-shadow 0.3s; + padding: 0.5rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: rgba(255, 255, 255, 0.6); +} +.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 { + color: rgba(255, 255, 255, 0.87); +} +.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.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: #9eade6; +} +.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: #9eade6; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-tree .p-tree-filter-container { + margin-bottom: 0.5rem; +} +.p-tree .p-tree-filter-container .p-tree-filter { + width: 100%; + padding-right: 1.75rem; +} +.p-tree .p-tree-filter-container .p-tree-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} +.p-tree .p-treenode-children { + padding: 0 0 0 1rem; +} +.p-tree .p-tree-loading-icon { + font-size: 2rem; +} +.p-tree .p-treenode-droppoint { + height: 0.5rem; +} +.p-tree .p-treenode-droppoint.p-treenode-droppoint-active { + background: rgba(96, 121, 214, 0.16); +} + +.p-treetable .p-paginator-top { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-treetable .p-paginator-bottom { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-treetable .p-treetable-header { + background: #161d21; + color: rgba(255, 255, 255, 0.6); + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-treetable .p-treetable-footer { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 2px solid #263238; + border-width: 0 0 2px 0; + font-weight: 600; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + transition: box-shadow 0.3s; +} +.p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 2px solid #263238; + border-width: 0 0 2px 0; + font-weight: 600; + color: rgba(255, 255, 255, 0.87); + background: #161d21; +} +.p-treetable .p-sortable-column { + outline-color: #9eade6; +} +.p-treetable .p-sortable-column .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.6); + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #9eade6; + background: rgba(158, 173, 230, 0.16); + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-treetable .p-sortable-column.p-highlight { + background: #161d21; + color: #9eade6; +} +.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #9eade6; +} +.p-treetable .p-treetable-tbody > tr { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + transition: box-shadow 0.3s; +} +.p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 2px solid #263238; + border-width: 0 0 2px 0; + padding: 1rem 1rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-treetable .p-treetable-tbody > tr:focus { + outline: 0.15rem solid #9eade6; + outline-offset: -0.15rem; +} +.p-treetable .p-treetable-tbody > tr.p-highlight { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { + color: #9eade6; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { + color: #9eade6; +} +.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(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: rgba(255, 255, 255, 0.87); +} +.p-treetable .p-column-resizer-helper { + background: #9eade6; +} +.p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #161d21; +} +.p-treetable .p-treetable-loading-icon { + font-size: 2rem; +} +.p-treetable.p-treetable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.875rem 0.875rem; +} +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-lg .p-treetable-header { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-footer { + padding: 1.25rem 1.25rem; +} + +.p-timeline .p-timeline-event-marker { + border: 2px solid #9eade6; + border-radius: 50%; + width: 1rem; + height: 1rem; + background-color: #161d21; +} +.p-timeline .p-timeline-event-connector { + background-color: #263238; +} +.p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; +} +.p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; +} + +.p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1rem; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; + border-radius: 6px; + transition: box-shadow 0.3s; +} +.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + margin-right: 0.5rem; +} +.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: rgba(158, 173, 230, 0.08); + border-color: #263238; + color: rgba(255, 255, 255, 0.87); +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #161d21; + border-color: #263238; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-color: #263238; + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-accordion .p-accordion-content { + padding: 1rem; + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-accordion .p-accordion-tab { + margin-bottom: 0; +} +.p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link { + border-radius: 0; +} +.p-accordion .p-accordion-tab .p-accordion-content { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link { + border-top: 0 none; +} +.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link, .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-top: 0 none; +} +.p-accordion .p-accordion-tab:first-child .p-accordion-header .p-accordion-header-link { + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-card { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; +} +.p-card .p-card-body { + padding: 1rem; +} +.p-card .p-card-title { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; +} +.p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: rgba(255, 255, 255, 0.6); +} +.p-card .p-card-content { + padding: 1rem 0; +} +.p-card .p-card-footer { + padding: 1rem 0 0 0; +} + +.p-fieldset { + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; +} +.p-fieldset .p-fieldset-legend { + padding: 1rem; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; + border-radius: 6px; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + margin-right: 0.5rem; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: rgba(158, 173, 230, 0.08); + border-color: #263238; + color: rgba(255, 255, 255, 0.87); +} +.p-fieldset .p-fieldset-content { + padding: 1rem; +} + +.p-divider .p-divider-content { + background-color: #161d21; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #263238; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #263238; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + +.p-panel .p-panel-header { + border: 2px solid #263238; + padding: 1rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-panel .p-panel-header .p-panel-title { + font-weight: 600; +} +.p-panel .p-panel-header .p-panel-header-icon { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-panel .p-panel-header .p-panel-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-panel.p-panel-toggleable .p-panel-header { + padding: 0.5rem 1rem; +} +.p-panel .p-panel-content { + padding: 1rem; + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; +} +.p-panel .p-panel-footer { + padding: 0.5rem 1rem; + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border-top: 0 none; +} + +.p-splitter { + border: 2px solid #263238; + background: #161d21; + border-radius: 6px; + color: rgba(255, 255, 255, 0.87); +} +.p-splitter .p-splitter-gutter { + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + background: rgba(255, 255, 255, 0.03); +} +.p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #263238; +} +.p-splitter .p-splitter-gutter-resizing { + background: #263238; +} + +.p-scrollpanel .p-scrollpanel-bar { + background: #263238; + border: 0 none; +} + +.p-tabview .p-tabview-nav { + background: transparent; + border: 1px solid #263238; + border-width: 0 0 2px 0; +} +.p-tabview .p-tabview-nav li { + margin-right: 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link { + border: solid #263238; + border-width: 0 0 2px 0; + border-color: transparent transparent #263238 transparent; + background: #161d21; + color: rgba(255, 255, 255, 0.6); + padding: 1rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: box-shadow 0.3s; + margin: 0 0 -2px 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #9eade6; +} +.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #161d21; + border-color: #9eade6; + color: rgba(255, 255, 255, 0.87); +} +.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #161d21; + border-color: #9eade6; + color: #9eade6; +} +.p-tabview .p-tabview-close { + margin-left: 0.5rem; +} +.p-tabview .p-tabview-nav-btn.p-link { + background: #161d21; + color: #9eade6; + width: 2.857rem; + 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); + border-radius: 0; +} +.p-tabview .p-tabview-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #9eade6; +} +.p-tabview .p-tabview-panels { + background: #161d21; + padding: 1rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-toolbar { + background: #161d21; + border: 2px solid #263238; + padding: 1rem; + border-radius: 6px; + gap: 0.5rem; +} +.p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; +} + +.p-confirm-popup { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-confirm-popup .p-confirm-popup-content { + padding: 1rem; +} +.p-confirm-popup .p-confirm-popup-footer { + text-align: right; + padding: 0 1rem 1rem 1rem; +} +.p-confirm-popup .p-confirm-popup-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-confirm-popup .p-confirm-popup-footer button:last-child { + margin: 0; +} +.p-confirm-popup:after { + border: solid transparent; + border-color: rgba(22, 29, 33, 0); + border-bottom-color: #161d21; +} +.p-confirm-popup:before { + border: solid transparent; + border-color: rgba(38, 50, 56, 0); + border-bottom-color: #263238; +} +.p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #161d21; +} +.p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #263238; +} +.p-confirm-popup .p-confirm-popup-icon { + font-size: 1.5rem; +} +.p-confirm-popup .p-confirm-popup-message { + margin-left: 1rem; +} + +.p-dialog { + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); + border: 2px solid #263238; +} +.p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + padding: 1.5rem; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-dialog .p-dialog-header .p-dialog-title { + font-weight: 600; + font-size: 1.25rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin-right: 0.5rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-dialog .p-dialog-header .p-dialog-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; +} +.p-dialog .p-dialog-content { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + padding: 0 1.5rem 2rem 1.5rem; +} +.p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-dialog .p-dialog-footer { + border-top: 0 none; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + padding: 0 1.5rem 1.5rem 1.5rem; + text-align: right; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-dialog .p-dialog-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 1rem; +} + +.p-overlaypanel { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-overlaypanel .p-overlaypanel-content { + padding: 1rem; +} +.p-overlaypanel .p-overlaypanel-close { + background: #9eade6; + color: #121212; + width: 2rem; + height: 2rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 50%; + position: absolute; + top: -1rem; + right: -1rem; +} +.p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #8fa0e2; + color: #121212; +} +.p-overlaypanel:after { + border: solid transparent; + border-color: rgba(22, 29, 33, 0); + border-bottom-color: #161d21; +} +.p-overlaypanel:before { + border: solid transparent; + border-color: rgba(38, 50, 56, 0); + border-bottom-color: #243035; +} +.p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #161d21; +} +.p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #263238; +} + +.p-sidebar { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-sidebar .p-sidebar-header { + padding: 1rem; +} +.p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: rgba(158, 173, 230, 0.08); +} +.p-sidebar .p-sidebar-header .p-sidebar-close:focus, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; +} +.p-sidebar .p-sidebar-content { + padding: 1rem; +} + +.p-tooltip .p-tooltip-text { + background: #263238; + color: rgba(255, 255, 255, 0.87); + padding: 0.5rem 0.75rem; + 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); + border-radius: 6px; +} +.p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #263238; +} +.p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #263238; +} +.p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #263238; +} +.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #263238; +} + +.p-fileupload .p-fileupload-buttonbar { + background: #161d21; + padding: 1rem; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-fileupload .p-fileupload-buttonbar .p-button { + margin-right: 0.5rem; +} +.p-fileupload .p-fileupload-content { + background: #161d21; + padding: 2rem 1rem; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-fileupload .p-progressbar { + height: 0.25rem; +} +.p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; +} +.p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; +} + +.p-breadcrumb { + background: #161d21; + border: 2px solid #263238; + border-radius: 6px; + padding: 1rem; +} +.p-breadcrumb ul li .p-menuitem-link { + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-breadcrumb ul li .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-breadcrumb ul li.p-breadcrumb-chevron { + margin: 0 0.5rem 0 0.5rem; + color: rgba(255, 255, 255, 0.87); +} +.p-breadcrumb ul li:last-child .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-breadcrumb ul li:last-child .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); +} + +.p-contextmenu { + padding: 0.5rem 0.5rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + 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); + border-radius: 6px; + width: 12.5rem; +} +.p-contextmenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-contextmenu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-contextmenu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-contextmenu .p-submenu-list { + padding: 0.5rem 0.5rem; + background: #161d21; + border: 2px solid #263238; + 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); + border-radius: 6px; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: rgba(158, 173, 230, 0.08); +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-contextmenu .p-menu-separator { + border-top: 1px solid #263238; + margin: 4px 0; +} +.p-contextmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-dock .p-dock-list { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.5rem; + border-radius: 0.5rem; +} +.p-dock .p-dock-item { + padding: 0.5rem; +} +.p-dock .p-dock-action { + width: 4rem; + height: 4rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; +} + +@media screen and (max-width: 960px) { + .p-dock.p-dock-top .p-dock-container, .p-dock.p-dock-bottom .p-dock-container { + overflow-x: auto; + width: 100%; + } + .p-dock.p-dock-top .p-dock-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-container .p-dock-list { + margin: 0 auto; + } + .p-dock.p-dock-left .p-dock-container, .p-dock.p-dock-right .p-dock-container { + overflow-y: auto; + height: 100%; + } + .p-dock.p-dock-left .p-dock-container .p-dock-list, .p-dock.p-dock-right .p-dock-container .p-dock-list { + margin: auto 0; + } + .p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + transform: none; + margin: 0; + } +} +.p-megamenu { + padding: 0.5rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + margin-left: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-megamenu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-megamenu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-megamenu .p-megamenu-panel { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + 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-megamenu .p-megamenu-submenu-header { + margin: 0; + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-megamenu .p-megamenu-submenu { + padding: 0.5rem 0.5rem; + width: 12.5rem; +} +.p-megamenu .p-megamenu-submenu .p-menu-separator { + border-top: 1px solid #263238; + margin: 4px 0; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: rgba(158, 173, 230, 0.08); +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-megamenu.p-megamenu-vertical { + width: 12.5rem; + padding: 0.5rem 0.5rem; +} + +.p-menu { + padding: 0.5rem 0.5rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; + width: 12.5rem; +} +.p-menu .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-menu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-menu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-menu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-menu.p-menu-overlay { + background: #161d21; + border: 2px solid #263238; + 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-menu .p-submenu-header { + margin: 0; + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.p-menu .p-menu-separator { + border-top: 1px solid #263238; + margin: 4px 0; +} + +.p-menubar { + padding: 0.5rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; +} +.p-menubar .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-menubar .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-menubar .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + margin-left: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-submenu-list { + padding: 0.5rem 0.5rem; + background: #161d21; + border: 2px solid #263238; + 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); + width: 12.5rem; +} +.p-menubar .p-submenu-list .p-menu-separator { + border-top: 1px solid #263238; + margin: 4px 0; +} +.p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: rgba(158, 173, 230, 0.08); +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} + +@media screen and (max-width: 960px) { + .p-menubar { + position: relative; + } + .p-menubar .p-menubar-button { + display: flex; + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .p-menubar .p-menubar-button:hover { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); + } + .p-menubar .p-menubar-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + } + .p-menubar .p-menubar-root-list { + position: absolute; + display: none; + padding: 0.5rem 0.5rem; + background: #161d21; + border: 2px solid #263238; + 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); + width: 100%; + } + .p-menubar .p-menubar-root-list .p-menu-separator { + border-top: 1px solid #263238; + margin: 4px 0; + } + .p-menubar .p-menubar-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + transition: transform 0.3s; + } + .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.3s; + transform: rotate(90deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-menubar .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list ul li a { + padding-left: 2.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li a { + padding-left: 3.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li a { + padding-left: 5.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li a { + padding-left: 6.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a { + padding-left: 8.25rem; + } + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } +} +.p-panelmenu .p-panelmenu-header > a { + padding: 1rem; + border: 2px solid #263238; + color: rgba(255, 255, 255, 0.87); + background: #161d21; + font-weight: 600; + border-radius: 6px; + transition: box-shadow 0.3s; +} +.p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + background: rgba(158, 173, 230, 0.08); + border-color: #263238; + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-header.p-highlight { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight > a { + background: #161d21; + border-color: #263238; + color: rgba(255, 255, 255, 0.87); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover { + border-color: #263238; + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content { + padding: 0.5rem 0.5rem; + border: 2px solid #263238; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) { + padding: 0 0 0 1rem; +} +.p-panelmenu .p-panelmenu-panel { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-panel .p-panelmenu-header > a { + border-radius: 0; +} +.p-panelmenu .p-panelmenu-panel .p-panelmenu-content { + border-radius: 0; +} +.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header > a { + border-top: 0 none; +} +.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover > a, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover > a { + border-top: 0 none; +} +.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header > a { + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) > a { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-slidemenu { + padding: 0.5rem 0.5rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; + width: 12.5rem; +} +.p-slidemenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-slidemenu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-slidemenu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-slidemenu.p-slidemenu-overlay { + background: #161d21; + border: 2px solid #263238; + 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-slidemenu .p-slidemenu-list { + padding: 0.5rem 0.5rem; + background: #161d21; + border: 2px solid #263238; + 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link { + background: rgba(158, 173, 230, 0.08); +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-slidemenu .p-slidemenu-separator { + border-top: 1px solid #263238; + margin: 4px 0; +} +.p-slidemenu .p-slidemenu-icon { + font-size: 0.875rem; +} +.p-slidemenu .p-slidemenu-backward { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); +} + +.p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; + background: transparent; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + z-index: 1; + border-radius: 50%; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-title { + margin-top: 0.5rem; + color: rgba(255, 255, 255, 0.6); +} +.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-steps .p-steps-item.p-highlight .p-steps-number { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 600; + color: rgba(255, 255, 255, 0.87); +} +.p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #263238; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; +} + +.p-tabmenu .p-tabmenu-nav { + background: transparent; + border: 1px solid #263238; + border-width: 0 0 2px 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem { + margin-right: 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + border: solid #263238; + border-width: 0 0 2px 0; + border-color: transparent transparent #263238 transparent; + background: #161d21; + color: rgba(255, 255, 255, 0.6); + padding: 1rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: box-shadow 0.3s; + margin: 0 0 -2px 0; + height: calc(100% + 2px); +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #9eade6; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #161d21; + border-color: #9eade6; + color: rgba(255, 255, 255, 0.87); +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #161d21; + border-color: #9eade6; + color: #9eade6; +} + +.p-tieredmenu { + padding: 0.5rem 0.5rem; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-radius: 6px; + width: 12.5rem; +} +.p-tieredmenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem-link .p-menuitem-icon { + color: rgba(255, 255, 255, 0.6); + margin-right: 0.5rem; +} +.p-tieredmenu .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.6); +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; +} +.p-tieredmenu.p-tieredmenu-overlay { + background: #161d21; + border: 2px solid #263238; + 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-tieredmenu .p-submenu-list { + padding: 0.5rem 0.5rem; + background: #161d21; + border: 2px solid #263238; + 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-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: rgba(158, 173, 230, 0.08); +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: rgba(255, 255, 255, 0.87); +} +.p-tieredmenu .p-menu-separator { + border-top: 1px solid #263238; + margin: 4px 0; +} +.p-tieredmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; +} +.p-inline-message.p-inline-message-info { + background: #a3d7e6; + border: 4px solid #65bcd6; + border-width: 2px; + color: #0e1315; +} +.p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #0e1315; +} +.p-inline-message.p-inline-message-success { + background: #bfd47f; + border: 4px solid #a2c044; + border-width: 2px; + color: #0e1315; +} +.p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #0e1315; +} +.p-inline-message.p-inline-message-warn { + background: #ff9c3e; + border: 4px solid #ff8817; + border-width: 2px; + color: #0e1315; +} +.p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #0e1315; +} +.p-inline-message.p-inline-message-error { + background: #e6a3b2; + border: 4px solid #de8499; + border-width: 2px; + color: #0e1315; +} +.p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #0e1315; +} +.p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; +} +.p-inline-message .p-inline-message-text { + font-size: 1rem; +} +.p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; +} + +.p-message { + margin: 1rem 0; + border-radius: 6px; +} +.p-message .p-message-wrapper { + padding: 1rem 1.5rem; +} +.p-message .p-message-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-message .p-message-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-message.p-message-info { + background: #a3d7e6; + border: 4px solid #65bcd6; + border-width: 0 0 0 6px; + color: #0e1315; +} +.p-message.p-message-info .p-message-icon { + color: #0e1315; +} +.p-message.p-message-info .p-message-close { + color: #0e1315; +} +.p-message.p-message-success { + background: #bfd47f; + border: 4px solid #a2c044; + border-width: 0 0 0 6px; + color: #0e1315; +} +.p-message.p-message-success .p-message-icon { + color: #0e1315; +} +.p-message.p-message-success .p-message-close { + color: #0e1315; +} +.p-message.p-message-warn { + background: #ff9c3e; + border: 4px solid #ff8817; + border-width: 0 0 0 6px; + color: #0e1315; +} +.p-message.p-message-warn .p-message-icon { + color: #0e1315; +} +.p-message.p-message-warn .p-message-close { + color: #0e1315; +} +.p-message.p-message-error { + background: #e6a3b2; + border: 4px solid #de8499; + border-width: 0 0 0 6px; + color: #0e1315; +} +.p-message.p-message-error .p-message-icon { + color: #0e1315; +} +.p-message.p-message-error .p-message-close { + color: #0e1315; +} +.p-message .p-message-text { + font-size: 1rem; + font-weight: 400; +} +.p-message .p-message-icon { + font-size: 1.5rem; + margin-right: 0.5rem; +} + +.p-toast { + opacity: 0.9; +} +.p-toast .p-toast-message { + margin: 0 0 1rem 0; + box-shadow: none; + border-radius: 6px; +} +.p-toast .p-toast-message .p-toast-message-content { + padding: 1rem; + border-width: 0 0 0 6px; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 600; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + margin: 0.5rem 0 0 0; +} +.p-toast .p-toast-message .p-toast-icon-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-toast .p-toast-message .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-toast .p-toast-message .p-toast-icon-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} +.p-toast .p-toast-message.p-toast-message-info { + background: #a3d7e6; + border: 4px solid #65bcd6; + border-width: 0 0 0 6px; + color: #0e1315; +} +.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + color: #0e1315; +} +.p-toast .p-toast-message.p-toast-message-success { + background: #bfd47f; + border: 4px solid #a2c044; + border-width: 0 0 0 6px; + color: #0e1315; +} +.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + color: #0e1315; +} +.p-toast .p-toast-message.p-toast-message-warn { + background: #ff9c3e; + border: 4px solid #ff8817; + border-width: 0 0 0 6px; + color: #0e1315; +} +.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + color: #0e1315; +} +.p-toast .p-toast-message.p-toast-message-error { + background: #e6a3b2; + border: 4px solid #de8499; + border-width: 0 0 0 6px; + color: #0e1315; +} +.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + color: #0e1315; +} + +.p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f8f9fa; + width: 4rem; + height: 4rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 50%; +} +.p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f8f9fa; +} +.p-galleria .p-galleria-item-nav { + background: transparent; + color: #f8f9fa; + width: 4rem; + height: 4rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 6px; + margin: 0 0.5rem; +} +.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f8f9fa; +} +.p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f8f9fa; + padding: 1rem; +} +.p-galleria .p-galleria-indicators { + padding: 1rem; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #263238; + width: 1rem; + height: 1rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 50%; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #374851; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { + margin-right: 0.5rem; +} +.p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator { + margin-bottom: 0.5rem; +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators { + background: rgba(0, 0, 0, 0.5); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button { + background: rgba(255, 255, 255, 0.4); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover { + background: rgba(255, 255, 255, 0.6); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; +} +.p-galleria .p-galleria-thumbnail-container { + background: rgba(0, 0, 0, 0.9); + padding: 1rem 0.25rem; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { + margin: 0.5rem; + background-color: transparent; + color: #f8f9fa; + width: 2rem; + height: 2rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 50%; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { + background: rgba(255, 255, 255, 0.1); + color: #f8f9fa; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + transition: box-shadow 0.3s; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} + +.p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-preview-indicator { + background-color: transparent; + color: #f8f9fa; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} + +.p-image-preview-container:hover > .p-image-preview-indicator { + background-color: rgba(0, 0, 0, 0.5); +} + +.p-image-toolbar { + padding: 1rem; +} + +.p-image-action.p-link { + color: #f8f9fa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin-right: 0.5rem; +} +.p-image-action.p-link:last-child { + margin-right: 0; +} +.p-image-action.p-link:hover { + color: #f8f9fa; + background-color: rgba(255, 255, 255, 0.1); +} +.p-image-action.p-link i { + font-size: 1.5rem; +} + +.p-avatar { + background-color: #263238; + border-radius: 6px; +} +.p-avatar.p-avatar-lg { + width: 3rem; + height: 3rem; + font-size: 1.5rem; +} +.p-avatar.p-avatar-lg .p-avatar-icon { + font-size: 1.5rem; +} +.p-avatar.p-avatar-xl { + width: 4rem; + height: 4rem; + font-size: 2rem; +} +.p-avatar.p-avatar-xl .p-avatar-icon { + font-size: 2rem; +} + +.p-avatar-group .p-avatar { + border: 2px solid #161d21; +} + +.p-chip { + background-color: #263238; + color: rgba(255, 255, 255, 0.87); + border-radius: 16px; + padding: 0 0.75rem; +} +.p-chip .p-chip-text { + line-height: 1.5; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} +.p-chip .p-chip-icon { + margin-right: 0.5rem; +} +.p-chip img { + width: 2rem; + height: 2rem; + margin-left: -0.75rem; + margin-right: 0.5rem; +} +.p-chip .p-chip-remove-icon { + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin-left: 0.5rem; +} +.p-chip .p-chip-remove-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} + +.p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + 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); + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-scrolltop.p-link { + background: rgba(158, 173, 230, 0.16); +} +.p-scrolltop.p-link:hover { + background: rgba(158, 173, 230, 0.3616); +} +.p-scrolltop .p-scrolltop-icon { + font-size: 1.5rem; + color: #9eade6; +} + +.p-skeleton { + background-color: rgba(255, 255, 255, 0.06); + border-radius: 6px; +} +.p-skeleton:after { + background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); +} + +.p-tag { + background: #9eade6; + color: #121212; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; +} +.p-tag.p-tag-success { + background-color: #cede9c; + color: #0e1315; +} +.p-tag.p-tag-info { + background-color: #35a4cc; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #ffe08a; + color: #0e1315; +} +.p-tag.p-tag-danger { + background-color: #e693a9; + color: #0e1315; +} +.p-tag .p-tag-icon { + margin-right: 0.25rem; + font-size: 0.75rem; +} + +.p-inplace .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-inplace .p-inplace-display:not(.p-disabled):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); +} +.p-inplace .p-inplace-display:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; +} + +.p-progressbar { + border: 0 none; + height: 1.5rem; + background: #263238; + border-radius: 6px; +} +.p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #9eade6; +} +.p-progressbar .p-progressbar-label { + color: #121212; + line-height: 1.5rem; +} + +.p-terminal { + background: #161d21; + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + padding: 1rem; +} +.p-terminal .p-terminal-input { + font-size: 1rem; + font-family: Poppins, sans-serif; +} + +.p-badge { + background: #9eade6; + color: #121212; + font-size: 0.75rem; + font-weight: 700; + min-width: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; +} +.p-badge.p-badge-secondary { + background-color: #b4bfcd; + color: #0e1315; +} +.p-badge.p-badge-success { + background-color: #cede9c; + color: #0e1315; +} +.p-badge.p-badge-info { + background-color: #35a4cc; + color: #ffffff; +} +.p-badge.p-badge-warning { + background-color: #ffe08a; + color: #0e1315; +} +.p-badge.p-badge-danger { + background-color: #e693a9; + color: #0e1315; +} +.p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; +} +.p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; +} + +.p-tag { + background: #9eade6; + color: #121212; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; +} +.p-tag.p-tag-success { + background-color: #cede9c; + color: #0e1315; +} +.p-tag.p-tag-info { + background-color: #35a4cc; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #ffe08a; + color: #0e1315; +} +.p-tag.p-tag-danger { + background-color: #e693a9; + color: #0e1315; +} + +/* Customizations to the designer theme should be defined here */ +/* Customizations to the designer theme should be defined here */ +.p-button .p-button-label { + font-weight: 600; +} + +.p-buttonset .p-button-label, +.p-togglebutton .p-button-label { + font-weight: 400; +} + +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #9eade6; +} + +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #9eade6; +} + +.p-panel { + border: 2px solid #263238; + border-radius: 6px; +} +.p-panel .p-panel-header { + border: 0 none; +} +.p-panel .p-panel-content { + border: 0 none; +} + +.p-fieldset .p-fieldset-legend { + border-color: transparent; +} + +.p-accordion .p-accordion-toggle-icon { + order: 10; + margin-left: auto; +} +.p-accordion .p-accordion-toggle-icon.pi-chevron-right::before { + content: "\e90d"; +} +.p-accordion .p-accordion-toggle-icon.pi-chevron-down::before { + content: "\e90f"; +} +.p-accordion .p-accordion-header.p-highlight .p-accordion-header-link { + padding-bottom: calc(1rem + 2px); + border-bottom: 0 none; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-bottom: 0 none; +} + +.p-inline-message.p-inline-message-info { + border-color: #a3d7e6; +} +.p-inline-message.p-inline-message-success { + border-color: #bfd47f; +} +.p-inline-message.p-inline-message-warn { + border-color: #ff9c3e; +} +.p-inline-message.p-inline-message-error { + border-color: #e6a3b2; +} + +.p-inputtext:enabled:focus { + box-shadow: none; +} + +.p-dropdown:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-multiselect:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-cascadeselect:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-autocomplete.p-autocomplete-multiple:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-orderlist .p-orderlist-list { + border-top: 0 none; +} + +.p-picklist .p-picklist-list { + border-top: 0 none; +} + +.p-panelmenu .p-panelmenu-icon.pi-chevron-right, .p-panelmenu .p-panelmenu-icon.pi-chevron-down { + order: 10; + margin-left: auto; +} +.p-panelmenu .p-panelmenu-icon.pi-chevron-right::before { + content: "\e90d"; +} +.p-panelmenu .p-panelmenu-icon.pi-chevron-down::before { + content: "\e90f"; +} +.p-panelmenu .p-panelmenu-header.p-highlight > a { + padding-bottom: calc(1rem + 2px); + border-bottom: 0 none; +} +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + padding-bottom: calc(1rem + 2px); + border-bottom: 0 none; +} + +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #9eade6; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #9eade6; +} diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff new file mode 100644 index 0000000000..263ae18e74 Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff differ diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2 b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2 new file mode 100644 index 0000000000..5145c1e4b2 Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2 differ diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff new file mode 100644 index 0000000000..b33382edf7 Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff differ diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2 b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2 new file mode 100644 index 0000000000..1f4ac79c5c Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2 differ diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff new file mode 100644 index 0000000000..2647313cdb Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff differ diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2 b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2 new file mode 100644 index 0000000000..4340e2632b Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2 differ diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff new file mode 100644 index 0000000000..77049f3cec Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff differ diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2 b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2 new file mode 100644 index 0000000000..5643f910f2 Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2 differ diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css new file mode 100644 index 0000000000..82465efc9f --- /dev/null +++ b/public/themes/viva-light/theme.css @@ -0,0 +1,6164 @@ +:root { + --surface-a:#ffffff; + --surface-b:#f5f5f5; + --surface-c:#edf0fA; + --surface-d:#ebebeb; + --surface-e:#ffffff; + --surface-f:#ffffff; + --text-color:#6c6c6c; + --text-color-secondary:#898989; + --primary-color:#5472d4; + --primary-color-text:#ffffff; + --font-family:Poppins, sans-serif; + --surface-0: #ffffff; + --surface-50: #f1f3f5; + --surface-100: #e2e6eb; + --surface-200: #c6cdd7; + --surface-300: #a9b4c2; + --surface-400: #8d9bae; + --surface-500: #70829a; + --surface-600: #5a687b; + --surface-700: #434e5c; + --surface-800: #2d343e; + --surface-900: #161a1f; + --gray-50: #f1f3f5; + --gray-100: #e2e6eb; + --gray-200: #c6cdd7; + --gray-300: #a9b4c2; + --gray-400: #8d9bae; + --gray-500: #70829a; + --gray-600: #5a687b; + --gray-700: #434e5c; + --gray-800: #2d343e; + --gray-900: #161a1f; + --content-padding:1rem; + --inline-spacing:0.5rem; + --border-radius:6px; + --surface-ground:#f5f5f5; + --surface-section:#ffffff; + --surface-card:#ffffff; + --surface-overlay:#ffffff; + --surface-border:#ebebeb; + --surface-hover:#edf0fA; + --maskbg: rgba(0, 0, 0, 0.4); + --focus-ring: 0 0 0 0.1rem #bbc7ee; + color-scheme: light; +} + +/* poppins-300 - latin-ext_latin */ +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 300; + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* poppins-regular - latin-ext_latin */ +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* poppins-600 - latin-ext_latin */ +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 600; + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +/* poppins-700 - latin-ext_latin */ +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 700; + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} +* { + box-sizing: border-box; +} + +.p-component { + font-family: Poppins, sans-serif; + font-size: 1rem; + font-weight: normal; +} + +.p-component-overlay { + background-color: rgba(0, 0, 0, 0.4); + transition-duration: 0.3s; +} + +.p-disabled, .p-component:disabled { + opacity: 0.6; +} + +.p-error { + color: #f88c79; +} + +.p-text-secondary { + color: #898989; +} + +.pi { + font-size: 1rem; +} + +.p-link { + font-size: 1rem; + font-family: Poppins, sans-serif; + border-radius: 6px; +} +.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} + +.p-component-overlay-enter { + animation: p-component-overlay-enter-animation 150ms forwards; +} + +.p-component-overlay-leave { + animation: p-component-overlay-leave-animation 150ms forwards; +} + +@keyframes p-component-overlay-enter-animation { + from { + background-color: transparent; + } + to { + background-color: var(--maskbg); + } +} +@keyframes p-component-overlay-leave-animation { + from { + background-color: var(--maskbg); + } + to { + background-color: transparent; + } +} + +:root { + --blue-50:#f6fbfd; + --blue-100:#d6eaf5; + --blue-200:#b5d9ed; + --blue-300:#95c8e4; + --blue-400:#74b7dc; + --blue-500:#54a6d4; + --blue-600:#478db4; + --blue-700:#3b7494; + --blue-800:#2e5b75; + --blue-900:#224255; + --green-50:#f9fbf4; + --green-100:#e3eccc; + --green-200:#cddca4; + --green-300:#b7cd7c; + --green-400:#a1bd54; + --green-500:#8bae2c; + --green-600:#769425; + --green-700:#617a1f; + --green-800:#4c6018; + --green-900:#384612; + --yellow-50:#fffdf4; + --yellow-100:#fff4cc; + --yellow-200:#ffeba3; + --yellow-300:#ffe27b; + --yellow-400:#ffd952; + --yellow-500:#ffd02a; + --yellow-600:#d9b124; + --yellow-700:#b3921d; + --yellow-800:#8c7217; + --yellow-900:#665311; + --cyan-50:#f5fafc; + --cyan-100:#cfe9f3; + --cyan-200:#a8d8e9; + --cyan-300:#82c7df; + --cyan-400:#5bb5d6; + --cyan-500:#35a4cc; + --cyan-600:#2d8bad; + --cyan-700:#25738f; + --cyan-800:#1d5a70; + --cyan-900:#154252; + --pink-50:#fdf6f8; + --pink-100:#f5d6dd; + --pink-200:#edb5c2; + --pink-300:#e495a8; + --pink-400:#dc748d; + --pink-500:#d45472; + --pink-600:#b44761; + --pink-700:#943b50; + --pink-800:#752e3f; + --pink-900:#55222e; + --indigo-50:#f6f8fd; + --indigo-100:#d6ddf5; + --indigo-200:#b5c2ed; + --indigo-300:#95a8e4; + --indigo-400:#748ddc; + --indigo-500:#5472d4; + --indigo-600:#4761b4; + --indigo-700:#3b5094; + --indigo-800:#2e3f75; + --indigo-900:#222e55; + --teal-50:#f5fcfa; + --teal-100:#d1f0e8; + --teal-200:#ace3d6; + --teal-300:#88d7c4; + --teal-400:#63cbb2; + --teal-500:#3fbfa0; + --teal-600:#36a288; + --teal-700:#2c8670; + --teal-800:#236958; + --teal-900:#194c40; + --orange-50:#fffaf4; + --orange-100:#ffe5cc; + --orange-200:#ffd0a3; + --orange-300:#ffbb7b; + --orange-400:#ffa752; + --orange-500:#ff922a; + --orange-600:#d97c24; + --orange-700:#b3661d; + --orange-800:#8c5017; + --orange-900:#663a11; + --bluegray-50:#f9fafb; + --bluegray-100:#e1e5ea; + --bluegray-200:#c9d0d9; + --bluegray-300:#b1bbc8; + --bluegray-400:#99a6b7; + --bluegray-500:#8191a6; + --bluegray-600:#6e7b8d; + --bluegray-700:#5a6674; + --bluegray-800:#47505b; + --bluegray-900:#343a42; + --purple-50:#f8f6fd; + --purple-100:#ded6f5; + --purple-200:#c4b5ed; + --purple-300:#aa95e4; + --purple-400:#9074dc; + --purple-500:#7654d4; + --purple-600:#6447b4; + --purple-700:#533b94; + --purple-800:#412e75; + --purple-900:#2f2255; + --red-50:#fff7f6; + --red-100:#ffd8d2; + --red-200:#ffb9af; + --red-300:#ff9b8b; + --red-400:#ff7c68; + --red-500:#ff5d44; + --red-600:#d94f3a; + --red-700:#b34130; + --red-800:#8c3325; + --red-900:#66251b; + --primary-50:#f6f8fd; + --primary-100:#d6ddf5; + --primary-200:#b5c2ed; + --primary-300:#95a8e4; + --primary-400:#748ddc; + --primary-500:#5472d4; + --primary-600:#4761b4; + --primary-700:#3b5094; + --primary-800:#2e3f75; + --primary-900:#222e55; +} + +.p-autocomplete .p-autocomplete-loader { + right: 0.75rem; +} +.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader { + right: 3.607rem; +} +.p-autocomplete .p-autocomplete-multiple-container { + padding: 0.25rem 0.75rem; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { + border-color: #cecece; +} +.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { + padding: 0.25rem 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { + font-family: Poppins, sans-serif; + font-size: 1rem; + color: #6c6c6c; + padding: 0; + margin: 0; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #ced6f1; + color: #585858; + border-radius: 6px; +} +.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { + margin-left: 0.5rem; +} +.p-autocomplete.p-invalid.p-component > .p-inputtext { + border-color: #f88c79; +} + +.p-autocomplete-panel { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + 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-autocomplete-panel .p-autocomplete-items { + padding: 0.5rem 0.5rem; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #6c6c6c; + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; +} + +.p-calendar.p-invalid.p-component > .p-inputtext { + border-color: #f88c79; +} + +.p-datepicker { + padding: 0.5rem; + background: #ffffff; + color: #6c6c6c; + border: 2px solid #e1e1e1; + border-radius: 6px; +} +.p-datepicker:not(.p-datepicker-inline) { + background: #ffffff; + border: 0 none; + 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-datepicker:not(.p-datepicker-inline) .p-datepicker-header { + background: #ffffff; +} +.p-datepicker .p-datepicker-header { + padding: 0.5rem; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; + margin: 0; + border-bottom: 1px solid #ebebeb; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev, +.p-datepicker .p-datepicker-header .p-datepicker-next { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, +.p-datepicker .p-datepicker-header .p-datepicker-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-datepicker .p-datepicker-header .p-datepicker-title { + line-height: 2rem; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #6c6c6c; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + font-weight: 600; + padding: 0.5rem; +} +.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: #5472d4; +} +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + margin-right: 0.5rem; +} +.p-datepicker table { + font-size: 1rem; + margin: 0.5rem 0; +} +.p-datepicker table th { + padding: 0.5rem; +} +.p-datepicker table th > span { + width: 2.5rem; + height: 2.5rem; +} +.p-datepicker table td { + padding: 0.5rem; +} +.p-datepicker table td > span { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + transition: box-shadow 0.3s; + border: 1px solid transparent; +} +.p-datepicker table td > span.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-datepicker table td > span:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-datepicker table td.p-datepicker-today > span { + background: #e1e1e1; + color: #6c6c6c; + border-color: transparent; +} +.p-datepicker table td.p-datepicker-today > span.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-datepicker .p-datepicker-buttonbar { + padding: 1rem 0; + border-top: 1px solid #ebebeb; +} +.p-datepicker .p-datepicker-buttonbar .p-button { + width: auto; +} +.p-datepicker .p-timepicker { + border-top: 1px solid #ebebeb; + padding: 0.5rem; +} +.p-datepicker .p-timepicker button { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-datepicker .p-timepicker button:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-datepicker .p-timepicker button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-datepicker .p-timepicker button:last-child { + margin-top: 0.2em; +} +.p-datepicker .p-timepicker span { + font-size: 1.25rem; +} +.p-datepicker .p-timepicker > div { + padding: 0 0.5rem; +} +.p-datepicker.p-datepicker-timeonly .p-timepicker { + border-top: 0 none; +} +.p-datepicker .p-monthpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-monthpicker .p-monthpicker-month { + padding: 0.5rem; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + border-left: 1px solid #ebebeb; + padding-right: 0.5rem; + padding-left: 0.5rem; + padding-top: 0; + padding-bottom: 0; +} +.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { + padding-left: 0; +} +.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: #edf0fA; +} +.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { + background: #edf0fA; +} +.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { + background: #edf0fA; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} + +@media screen and (max-width: 769px) { + .p-datepicker table th, .p-datepicker table td { + padding: 0; + } +} +.p-cascadeselect { + background: #ffffff; + border: 2px solid #e1e1e1; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-cascadeselect:not(.p-disabled):hover { + border-color: #cecece; +} +.p-cascadeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-cascadeselect .p-cascadeselect-label { + background: transparent; + border: 0 none; + padding: 0.5rem 0.75rem; +} +.p-cascadeselect .p-cascadeselect-label.p-placeholder { + color: #898989; +} +.p-cascadeselect .p-cascadeselect-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-cascadeselect .p-cascadeselect-trigger { + background: transparent; + color: #898989; + width: 2.857rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-cascadeselect.p-invalid.p-component { + border-color: #f88c79; +} + +.p-cascadeselect-panel { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + 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-cascadeselect-panel .p-cascadeselect-items { + padding: 0.5rem 0.5rem; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item { + margin: 0 0 4px 0; + border: 0 none; + color: #6c6c6c; + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.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-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { + font-size: 0.875rem; +} + +.p-input-filled .p-cascadeselect { + background: #f2f2f2; +} +.p-input-filled .p-cascadeselect:not(.p-disabled):hover { + background-color: #f2f2f2; +} +.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { + background-color: #f2f2f2; +} + +.p-checkbox { + width: 20px; + height: 20px; +} +.p-checkbox .p-checkbox-box { + border: 2px solid #e1e1e1; + background: #ffffff; + width: 20px; + height: 20px; + color: #6c6c6c; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.3s; + color: #ffffff; + font-size: 14px; +} +.p-checkbox .p-checkbox-box.p-highlight { + border-color: #5472d4; + background: #5472d4; +} +.p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + border-color: #3c5ece; + background: #3c5ece; + color: #ffffff; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #cecece; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #3c5ece; + background: #3c5ece; + color: #ffffff; +} +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f88c79; +} + +.p-input-filled .p-checkbox .p-checkbox-box { + background-color: #f2f2f2; +} +.p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + background: #5472d4; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f2f2f2; +} +.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #3c5ece; +} + +.p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; +} +.p-chips .p-chips-multiple-container:not(.p-disabled):hover { + border-color: #cecece; +} +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-chips .p-chips-multiple-container .p-chips-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #ced6f1; + color: #585858; + border-radius: 6px; +} +.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { + margin-left: 0.5rem; +} +.p-chips .p-chips-multiple-container .p-chips-input-token { + padding: 0.25rem 0; +} +.p-chips .p-chips-multiple-container .p-chips-input-token input { + font-family: Poppins, sans-serif; + font-size: 1rem; + color: #6c6c6c; + padding: 0; + margin: 0; +} +.p-chips.p-invalid.p-component > .p-inputtext { + border-color: #f88c79; +} + +.p-colorpicker-preview { + width: 2rem; + height: 2rem; +} + +.p-colorpicker-panel { + background: #585858; + border: 1px solid #585858; +} +.p-colorpicker-panel .p-colorpicker-color-handle, +.p-colorpicker-panel .p-colorpicker-hue-handle { + border-color: #ffffff; +} + +.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 { + background: #ffffff; + border: 2px solid #e1e1e1; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-dropdown:not(.p-disabled):hover { + border-color: #cecece; +} +.p-dropdown:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-dropdown.p-dropdown-clearable .p-dropdown-label { + padding-right: 1.75rem; +} +.p-dropdown .p-dropdown-label { + background: transparent; + border: 0 none; +} +.p-dropdown .p-dropdown-label.p-placeholder { + color: #898989; +} +.p-dropdown .p-dropdown-label:enabled:focus { + outline: 0 none; + box-shadow: none; +} +.p-dropdown .p-dropdown-trigger { + background: transparent; + color: #898989; + width: 2.857rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-dropdown .p-dropdown-clear-icon { + color: #898989; + right: 2.857rem; +} +.p-dropdown.p-invalid.p-component { + border-color: #f88c79; +} + +.p-dropdown-panel { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + 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-panel .p-dropdown-header { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: #6c6c6c; + background: #ffffff; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter { + padding-right: 1.75rem; + margin-right: -1.75rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { + right: 0.75rem; + color: #898989; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { + padding-right: 3.5rem; + margin-right: -3.5rem; +} +.p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { + right: 2.5rem; +} +.p-dropdown-panel .p-dropdown-items { + padding: 0.5rem 0.5rem; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #6c6c6c; + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { + padding: 0.5rem 1rem; + color: #6c6c6c; + background: transparent; +} + +.p-input-filled .p-dropdown { + background: #f2f2f2; +} +.p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: #f2f2f2; +} +.p-input-filled .p-dropdown:not(.p-disabled).p-focus { + background-color: #f2f2f2; +} +.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; +} + +.p-editor-container .p-editor-toolbar { + background: #ffffff; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-editor-container .p-editor-toolbar.ql-snow { + border: 2px solid #ebebeb; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { + stroke: #898989; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-fill { + fill: #898989; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: #898989; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: #ffffff; + border: 0 none; + 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); + border-radius: 6px; + padding: 0.5rem 0.5rem; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: #6c6c6c; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 1rem; +} +.p-editor-container .p-editor-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .p-editor-content.ql-snow { + border: 2px solid #ebebeb; +} +.p-editor-container .p-editor-content .ql-editor { + background: #ffffff; + color: #6c6c6c; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-editor-container .ql-snow.ql-toolbar button:hover, +.p-editor-container .ql-snow.ql-toolbar button:focus { + color: #6c6c6c; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: #6c6c6c; +} +.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill { + fill: #6c6c6c; +} +.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: #5472d4; +} +.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: #5472d4; +} +.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: #5472d4; +} +.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: #5472d4; +} + +.p-inputgroup-addon { + background: #f5f5f5; + color: #898989; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #e1e1e1; + border-bottom: 2px solid #e1e1e1; + padding: 0.5rem 0.75rem; + min-width: 2.857rem; +} +.p-inputgroup-addon:last-child { + border-right: 2px solid #e1e1e1; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { + border-radius: 0; + margin: 0; +} +.p-inputgroup > .p-component + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { + border-left: 0 none; +} +.p-inputgroup > .p-component:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { + z-index: 1; +} +.p-inputgroup > .p-component:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { + z-index: 1; +} + +.p-inputgroup-addon:first-child, +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup .p-float-label:first-child input { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup-addon:last-child, +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-inputgroup .p-float-label:last-child input { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-fluid .p-inputgroup .p-button { + width: auto; +} +.p-fluid .p-inputgroup .p-button.p-button-icon-only { + width: 2.857rem; +} + +.p-inputnumber.p-invalid.p-component > .p-inputtext { + border-color: #f88c79; +} + +.p-inputswitch { + width: 3rem; + height: 1.75rem; +} +.p-inputswitch .p-inputswitch-slider { + background: #cecece; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-inputswitch .p-inputswitch-slider:before { + background: #ffffff; + width: 1.25rem; + height: 1.25rem; + left: 0.25rem; + margin-top: -0.625rem; + border-radius: 6px; + transition-duration: 0.3s; +} +.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.1rem #bbc7ee; +} +.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b9b9b9; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #5472d4; +} +.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; +} +.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #4868d1; +} +.p-inputswitch.p-invalid .p-inputswitch-slider { + border-color: #f88c79; +} + +.p-inputtext { + font-family: Poppins, sans-serif; + font-size: 1rem; + color: #6c6c6c; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 2px solid #e1e1e1; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + appearance: none; + border-radius: 6px; +} +.p-inputtext:enabled:hover { + border-color: #cecece; +} +.p-inputtext:enabled:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-inputtext.p-invalid.p-component { + border-color: #f88c79; +} +.p-inputtext.p-inputtext-sm { + font-size: 0.875rem; + padding: 0.4375rem 0.65625rem; +} +.p-inputtext.p-inputtext-lg { + font-size: 1.25rem; + padding: 0.625rem 0.9375rem; +} + +.p-float-label > label { + left: 0.75rem; + color: #898989; + transition-duration: 0.3s; +} + +.p-float-label > label.p-error { + color: #f88c79; +} + +.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.75rem; + color: #898989; +} + +.p-input-icon-left > .p-inputtext { + padding-left: 2.5rem; +} + +.p-input-icon-left.p-float-label > label { + left: 2.5rem; +} + +.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.75rem; + color: #898989; +} + +.p-input-icon-right > .p-inputtext { + padding-right: 2.5rem; +} + +::-webkit-input-placeholder { + color: #898989; +} + +:-moz-placeholder { + color: #898989; +} + +::-moz-placeholder { + color: #898989; +} + +:-ms-input-placeholder { + color: #898989; +} + +.p-input-filled .p-inputtext { + background-color: #f2f2f2; +} +.p-input-filled .p-inputtext:enabled:hover { + background-color: #f2f2f2; +} +.p-input-filled .p-inputtext:enabled:focus { + background-color: #f2f2f2; +} + +.p-inputtext-sm .p-inputtext { + font-size: 0.875rem; + padding: 0.4375rem 0.65625rem; +} + +.p-inputtext-lg .p-inputtext { + font-size: 1.25rem; + padding: 0.625rem 0.9375rem; +} + +.p-listbox { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #e1e1e1; + border-radius: 6px; +} +.p-listbox .p-listbox-header { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: #6c6c6c; + background: #ffffff; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-listbox .p-listbox-header .p-listbox-filter { + padding-right: 1.75rem; +} +.p-listbox .p-listbox-header .p-listbox-filter-icon { + right: 0.75rem; + color: #898989; +} +.p-listbox .p-listbox-list { + padding: 0.5rem 0.5rem; +} +.p-listbox .p-listbox-list .p-listbox-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #6c6c6c; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-listbox .p-listbox-list .p-listbox-item.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-listbox .p-listbox-list .p-listbox-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-listbox .p-listbox-list .p-listbox-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; +} +.p-listbox .p-listbox-list .p-listbox-empty-message { + padding: 0.5rem 1rem; + color: #6c6c6c; + background: transparent; +} +.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-listbox.p-invalid { + border-color: #f88c79; +} + +.p-mention-panel { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + 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-mention-panel .p-mention-items { + padding: 0.5rem 0.5rem; +} +.p-mention-panel .p-mention-items .p-mention-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #6c6c6c; + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-mention-panel .p-mention-items .p-mention-item:hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-mention-panel .p-mention-items .p-mention-item.p-highlight { + color: #585858; + background: #ced6f1; +} + +.p-multiselect { + background: #ffffff; + border: 2px solid #e1e1e1; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-multiselect:not(.p-disabled):hover { + border-color: #cecece; +} +.p-multiselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; +} +.p-multiselect .p-multiselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-multiselect .p-multiselect-label.p-placeholder { + color: #898989; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #ced6f1; + color: #585858; + border-radius: 6px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} +.p-multiselect .p-multiselect-trigger { + background: transparent; + color: #898989; + width: 2.857rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-multiselect .p-multiselect-clear-icon { + color: #898989; + right: 2.857rem; +} +.p-multiselect.p-invalid.p-component { + border-color: #f88c79; +} + +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { + padding: 0.5rem 0.75rem; +} +.p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; +} + +.p-multiselect-panel { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + 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-multiselect-panel .p-multiselect-header { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: #6c6c6c; + background: #ffffff; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.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.75rem; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { + right: 0.75rem; + color: #898989; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-multiselect-panel .p-multiselect-items { + padding: 0.5rem 0.5rem; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #6c6c6c; + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { + margin-right: 0.5rem; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { + margin: 0; + padding: 0.75rem 1rem; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; +} +.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { + padding: 0.5rem 1rem; + color: #6c6c6c; + background: transparent; +} + +.p-input-filled .p-multiselect { + background: #f2f2f2; +} +.p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: #f2f2f2; +} +.p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: #f2f2f2; +} + +.p-password.p-invalid.p-component > .p-inputtext { + border-color: #f88c79; +} + +.p-password-panel { + padding: 1rem; + background: #ffffff; + color: #6c6c6c; + border: 0 none; + 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); + border-radius: 6px; +} +.p-password-panel .p-password-meter { + margin-bottom: 0.5rem; + background: #ebebeb; +} +.p-password-panel .p-password-meter .p-password-strength.weak { + background: #d45472; +} +.p-password-panel .p-password-meter .p-password-strength.medium { + background: #ff922a; +} +.p-password-panel .p-password-meter .p-password-strength.strong { + background: #8bae2c; +} + +.p-radiobutton { + width: 20px; + height: 20px; +} +.p-radiobutton .p-radiobutton-box { + border: 2px solid #e1e1e1; + background: #ffffff; + width: 20px; + height: 20px; + color: #6c6c6c; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #cecece; +} +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { + width: 12px; + height: 12px; + transition-duration: 0.3s; + background-color: #ffffff; +} +.p-radiobutton .p-radiobutton-box.p-highlight { + border-color: #5472d4; + background: #5472d4; +} +.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + border-color: #3c5ece; + background: #3c5ece; + color: #ffffff; +} +.p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #f88c79; +} +.p-radiobutton:focus { + outline: 0 none; +} + +.p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #f2f2f2; +} +.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f2f2f2; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #5472d4; +} +.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #3c5ece; +} + +.p-rating { + gap: 0.5rem; +} +.p-rating .p-rating-item .p-rating-icon { + color: #6c6c6c; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + font-size: 1.143rem; +} +.p-rating .p-rating-item .p-rating-icon.p-rating-cancel { + color: #dF7E6C; +} +.p-rating .p-rating-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-rating .p-rating-item.p-rating-item-active .p-rating-icon { + color: #5472d4; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: #5472d4; +} +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { + color: #f88c79; +} + +.p-selectbutton .p-button { + background: #ffffff; + border: 2px solid #e1e1e1; + color: #6c6c6c; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-selectbutton .p-button .p-button-icon-left, +.p-selectbutton .p-button .p-button-icon-right { + color: #898989; +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { + background: #edf0fA; + border-color: #e1e1e1; + color: #6c6c6c; +} +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + color: #898989; +} +.p-selectbutton .p-button.p-highlight { + background: #ced6f1; + border-color: #ced6f1; + color: #585858; +} +.p-selectbutton .p-button.p-highlight .p-button-icon-left, +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #585858; +} +.p-selectbutton .p-button.p-highlight:hover { + background: #bdc7ec; + border-color: #bdc7ec; + color: #585858; +} +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #585858; +} +.p-selectbutton.p-invalid > .p-button { + border-color: #f88c79; +} + +.p-slider { + background: #ebebeb; + border: 0 none; + border-radius: 6px; +} +.p-slider.p-slider-horizontal { + height: 0.286rem; +} +.p-slider.p-slider-horizontal .p-slider-handle { + margin-top: -0.5715rem; + margin-left: -0.5715rem; +} +.p-slider.p-slider-vertical { + width: 0.286rem; +} +.p-slider.p-slider-vertical .p-slider-handle { + margin-left: -0.5715rem; + margin-bottom: -0.5715rem; +} +.p-slider .p-slider-handle { + height: 1.143rem; + width: 1.143rem; + background: #ffffff; + border: 2px solid #5472d4; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-slider .p-slider-handle:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-slider .p-slider-range { + background: #5472d4; +} +.p-slider:not(.p-disabled) .p-slider-handle:hover { + background: #5472d4; + border-color: #5472d4; +} + +.p-treeselect { + background: #ffffff; + border: 2px solid #e1e1e1; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-treeselect:not(.p-disabled):hover { + border-color: #cecece; +} +.p-treeselect:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; +} +.p-treeselect .p-treeselect-label { + padding: 0.5rem 0.75rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-treeselect .p-treeselect-label.p-placeholder { + color: #898989; +} +.p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #ebebeb; + color: #6c6c6c; + border-radius: 16px; +} +.p-treeselect .p-treeselect-trigger { + background: transparent; + color: #898989; + width: 2.857rem; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-treeselect.p-invalid.p-component { + border-color: #f88c79; +} + +.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; +} + +.p-treeselect-panel { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + 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-treeselect-panel .p-treeselect-header { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: #6c6c6c; + background: #ffffff; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container { + margin-right: 0.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter { + padding-right: 1.75rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon { + right: 0.75rem; + color: #898989; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter { + padding-right: 3.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon { + right: 2.5rem; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-tree { + border: 0 none; +} +.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { + padding: 0.5rem 1rem; + color: #6c6c6c; + background: transparent; +} + +.p-input-filled .p-treeselect { + background: #f2f2f2; +} +.p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f2f2f2; +} +.p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #f2f2f2; +} + +.p-togglebutton.p-button { + background: #ffffff; + border: 2px solid #e1e1e1; + color: #6c6c6c; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-togglebutton.p-button .p-button-icon-left, +.p-togglebutton.p-button .p-button-icon-right { + color: #898989; +} +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #edf0fA; + border-color: #e1e1e1; + color: #6c6c6c; +} +.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 { + color: #898989; +} +.p-togglebutton.p-button.p-highlight { + background: #ced6f1; + border-color: #ced6f1; + color: #585858; +} +.p-togglebutton.p-button.p-highlight .p-button-icon-left, +.p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #585858; +} +.p-togglebutton.p-button.p-highlight:hover { + background: #bdc7ec; + border-color: #bdc7ec; + color: #585858; +} +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #585858; +} +.p-togglebutton.p-button.p-invalid > .p-button { + border-color: #f88c79; +} + +.p-button { + color: #ffffff; + background: #5472d4; + border: 2px solid #5472d4; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.p-button:enabled:hover, .p-button:not(button):not(a):not(.p-disabled):hover { + background: #4868d1; + color: #ffffff; + border-color: #4868d1; +} +.p-button:enabled:active, .p-button:not(button):not(a):not(.p-disabled):active { + background: #3c5ece; + color: #ffffff; + border-color: #3c5ece; +} +.p-button.p-button-outlined { + background-color: transparent; + color: #5472d4; + border: 2px solid; +} +.p-button.p-button-outlined:enabled:hover, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(84, 114, 212, 0.04); + color: #5472d4; + border: 2px solid; +} +.p-button.p-button-outlined:enabled:active, .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(84, 114, 212, 0.16); + color: #5472d4; + border: 2px solid; +} +.p-button.p-button-outlined.p-button-plain { + color: #898989; + border-color: #898989; +} +.p-button.p-button-outlined.p-button-plain:enabled:hover, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: #edf0fA; + color: #898989; +} +.p-button.p-button-outlined.p-button-plain:enabled:active, .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: #ebebeb; + color: #898989; +} +.p-button.p-button-text { + background-color: transparent; + color: #5472d4; + border-color: transparent; +} +.p-button.p-button-text:enabled:hover, .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(84, 114, 212, 0.04); + color: #5472d4; + border-color: transparent; +} +.p-button.p-button-text:enabled:active, .p-button.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(84, 114, 212, 0.16); + color: #5472d4; + border-color: transparent; +} +.p-button.p-button-text.p-button-plain { + color: #898989; +} +.p-button.p-button-text.p-button-plain:enabled:hover, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover { + background: #edf0fA; + color: #898989; +} +.p-button.p-button-text.p-button-plain:enabled:active, .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active { + background: #ebebeb; + color: #898989; +} +.p-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-button .p-button-label { + transition-duration: 0.3s; +} +.p-button .p-button-icon-left { + margin-right: 0.5rem; +} +.p-button .p-button-icon-right { + margin-left: 0.5rem; +} +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} +.p-button .p-badge { + margin-left: 0.5rem; + min-width: 1rem; + height: 1rem; + line-height: 1rem; + color: #5472d4; + background-color: #ffffff; +} +.p-button.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} +.p-button.p-button-rounded { + border-radius: 2rem; +} +.p-button.p-button-icon-only { + width: 2.857rem; + padding: 0.5rem 0; +} +.p-button.p-button-icon-only .p-button-icon-left, +.p-button.p-button-icon-only .p-button-icon-right { + margin: 0; +} +.p-button.p-button-icon-only.p-button-rounded { + border-radius: 50%; + height: 2.857rem; +} +.p-button.p-button-sm { + font-size: 0.875rem; + padding: 0.4375rem 0.875rem; +} +.p-button.p-button-sm .p-button-icon { + font-size: 0.875rem; +} +.p-button.p-button-lg { + font-size: 1.25rem; + padding: 0.625rem 1.25rem; +} +.p-button.p-button-lg .p-button-icon { + font-size: 1.25rem; +} +.p-button.p-button-loading-label-only.p-button-loading-left .p-button-label { + margin-left: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-right .p-button-label { + margin-right: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-top .p-button-label { + margin-top: 0.5rem; +} +.p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label { + margin-bottom: 0.5rem; +} +.p-button.p-button-loading-label-only .p-button-loading-icon { + margin: 0; +} + +.p-fluid .p-button { + width: 100%; +} +.p-fluid .p-button-icon-only { + width: 2.857rem; +} +.p-fluid .p-buttonset { + display: flex; +} +.p-fluid .p-buttonset .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 { + color: #ffffff; + background: #8191a6; + border: 1px solid #8191a6; +} +.p-button.p-button-secondary:enabled:hover, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary:enabled:hover, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover { + background: #70829a; + color: #ffffff; + border-color: #70829a; +} +.p-button.p-button-secondary:enabled:focus, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-secondary:enabled:focus, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.1rem #cdd3db; +} +.p-button.p-button-secondary:enabled:active, .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary:enabled:active, .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active { + background: #62738a; + color: #ffffff; + border-color: #62738a; +} +.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 { + background-color: transparent; + color: #8191a6; + border: 2px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(129, 145, 166, 0.04); + color: #8191a6; + border: 2px solid; +} +.p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(129, 145, 166, 0.16); + color: #8191a6; + border: 2px 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 { + background-color: transparent; + color: #8191a6; + border-color: transparent; +} +.p-button.p-button-secondary.p-button-text:enabled:hover, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(129, 145, 166, 0.04); + border-color: transparent; + color: #8191a6; +} +.p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(129, 145, 166, 0.16); + border-color: transparent; + color: #8191a6; +} + +.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 { + color: #ffffff; + background: #35a4cc; + border: 1px solid #35a4cc; +} +.p-button.p-button-info:enabled:hover, .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info:enabled:hover, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover { + background: #2f94b9; + color: #ffffff; + border-color: #2f94b9; +} +.p-button.p-button-info:enabled:focus, .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-info:enabled:focus, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.1rem #aedbeb; +} +.p-button.p-button-info:enabled:active, .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info:enabled:active, .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active { + background: #2984a4; + color: #ffffff; + border-color: #2984a4; +} +.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 { + background-color: transparent; + color: #35a4cc; + border: 2px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:hover, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(53, 164, 204, 0.04); + color: #35a4cc; + border: 2px solid; +} +.p-button.p-button-info.p-button-outlined:enabled:active, .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(53, 164, 204, 0.16); + color: #35a4cc; + border: 2px 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 { + background-color: transparent; + color: #35a4cc; + border-color: transparent; +} +.p-button.p-button-info.p-button-text:enabled:hover, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(53, 164, 204, 0.04); + border-color: transparent; + color: #35a4cc; +} +.p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(53, 164, 204, 0.16); + border-color: transparent; + color: #35a4cc; +} + +.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 { + color: #ffffff; + background: #8bae2c; + border: 1px solid #8bae2c; +} +.p-button.p-button-success:enabled:hover, .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success:enabled:hover, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover { + background: #7d9d28; + color: #ffffff; + border-color: #7d9d28; +} +.p-button.p-button-success:enabled:focus, .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-success:enabled:focus, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.1rem #d5e7a2; +} +.p-button.p-button-success:enabled:active, .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success:enabled:active, .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active { + background: #6f8b23; + color: #ffffff; + border-color: #6f8b23; +} +.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 { + background-color: transparent; + color: #8bae2c; + border: 2px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:hover, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(139, 174, 44, 0.04); + color: #8bae2c; + border: 2px solid; +} +.p-button.p-button-success.p-button-outlined:enabled:active, .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(139, 174, 44, 0.16); + color: #8bae2c; + border: 2px 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 { + background-color: transparent; + color: #8bae2c; + border-color: transparent; +} +.p-button.p-button-success.p-button-text:enabled:hover, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(139, 174, 44, 0.04); + border-color: transparent; + color: #8bae2c; +} +.p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(139, 174, 44, 0.16); + border-color: transparent; + color: #8bae2c; +} + +.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 { + color: #ffffff; + background: #ff922a; + border: 1px solid #ff922a; +} +.p-button.p-button-warning:enabled:hover, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning:enabled:hover, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover { + background: #ff830c; + color: #ffffff; + border-color: #ff830c; +} +.p-button.p-button-warning:enabled:focus, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-warning:enabled:focus, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.1rem #ffd3aa; +} +.p-button.p-button-warning:enabled:active, .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning:enabled:active, .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active { + background: #ee7400; + color: #ffffff; + border-color: #ee7400; +} +.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 { + background-color: transparent; + color: #ff922a; + border: 2px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:hover, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 146, 42, 0.04); + color: #ff922a; + border: 2px solid; +} +.p-button.p-button-warning.p-button-outlined:enabled:active, .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 146, 42, 0.16); + color: #ff922a; + border: 2px 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 { + background-color: transparent; + color: #ff922a; + border-color: transparent; +} +.p-button.p-button-warning.p-button-text:enabled:hover, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 146, 42, 0.04); + border-color: transparent; + color: #ff922a; +} +.p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 146, 42, 0.16); + border-color: transparent; + color: #ff922a; +} + +.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 { + color: #ffffff; + background: #7654d4; + border: 1px solid #7654d4; +} +.p-button.p-button-help:enabled:hover, .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help:enabled:hover, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover { + background: #633cce; + color: #ffffff; + border-color: #633cce; +} +.p-button.p-button-help:enabled:focus, .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-help:enabled:focus, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.1rem #c8bbee; +} +.p-button.p-button-help:enabled:active, .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help:enabled:active, .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active { + background: #5530bd; + color: #ffffff; + border-color: #5530bd; +} +.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 { + background-color: transparent; + color: #7654d4; + border: 2px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:hover, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(118, 84, 212, 0.04); + color: #7654d4; + border: 2px solid; +} +.p-button.p-button-help.p-button-outlined:enabled:active, .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(118, 84, 212, 0.16); + color: #7654d4; + border: 2px 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 { + background-color: transparent; + color: #7654d4; + border-color: transparent; +} +.p-button.p-button-help.p-button-text:enabled:hover, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(118, 84, 212, 0.04); + border-color: transparent; + color: #7654d4; +} +.p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(118, 84, 212, 0.16); + border-color: transparent; + color: #7654d4; +} + +.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 { + color: #ffffff; + background: #d45472; + border: 1px solid #d45472; +} +.p-button.p-button-danger:enabled:hover, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger:enabled:hover, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover { + background: #ce3c5e; + color: #ffffff; + border-color: #ce3c5e; +} +.p-button.p-button-danger:enabled:focus, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .p-fileupload-choose.p-button-danger:enabled:focus, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus { + box-shadow: 0 0 0 0.1rem #eebbc7; +} +.p-button.p-button-danger:enabled:active, .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger:enabled:active, .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active { + background: #bd3051; + color: #ffffff; + border-color: #bd3051; +} +.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 { + background-color: transparent; + color: #d45472; + border: 2px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:hover, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover { + background: rgba(212, 84, 114, 0.04); + color: #d45472; + border: 2px solid; +} +.p-button.p-button-danger.p-button-outlined:enabled:active, .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active { + background: rgba(212, 84, 114, 0.16); + color: #d45472; + border: 2px 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 { + background-color: transparent; + color: #d45472; + border-color: transparent; +} +.p-button.p-button-danger.p-button-text:enabled:hover, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover { + background: rgba(212, 84, 114, 0.04); + border-color: transparent; + color: #d45472; +} +.p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active { + background: rgba(212, 84, 114, 0.16); + border-color: transparent; + color: #d45472; +} + +.p-button.p-button-link { + color: #3c5ece; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover { + background: transparent; + color: #3c5ece; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-label, .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus, .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus { + background: transparent; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: transparent; +} +.p-button.p-button-link:enabled:active, .p-button.p-button-link:not(button):not(a):not(.p-disabled):active { + background: transparent; + color: #3c5ece; + border-color: transparent; +} + +.p-splitbutton { + border-radius: 6px; +} +.p-splitbutton.p-button-outlined > .p-button { + background-color: transparent; + color: #5472d4; + border: 2px solid; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(84, 114, 212, 0.04); + color: #5472d4; +} +.p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(84, 114, 212, 0.16); + color: #5472d4; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button { + color: #898989; + border-color: #898989; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: #edf0fA; + color: #898989; +} +.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: #ebebeb; + color: #898989; +} +.p-splitbutton.p-button-text > .p-button { + background-color: transparent; + color: #5472d4; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(84, 114, 212, 0.04); + color: #5472d4; + border-color: transparent; +} +.p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(84, 114, 212, 0.16); + color: #5472d4; + border-color: transparent; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button { + color: #898989; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover { + background: #edf0fA; + color: #898989; +} +.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active { + background: #ebebeb; + color: #898989; +} +.p-splitbutton.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} +.p-splitbutton.p-button-rounded { + border-radius: 2rem; +} +.p-splitbutton.p-button-rounded > .p-button { + border-radius: 2rem; +} +.p-splitbutton.p-button-sm > .p-button { + font-size: 0.875rem; + padding: 0.4375rem 0.875rem; +} +.p-splitbutton.p-button-sm > .p-button .p-button-icon { + font-size: 0.875rem; +} +.p-splitbutton.p-button-lg > .p-button { + font-size: 1.25rem; + padding: 0.625rem 1.25rem; +} +.p-splitbutton.p-button-lg > .p-button .p-button-icon { + font-size: 1.25rem; +} + +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button { + background-color: transparent; + color: #8191a6; + border: 2px solid; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(129, 145, 166, 0.04); + color: #8191a6; +} +.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(129, 145, 166, 0.16); + color: #8191a6; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button { + background-color: transparent; + color: #8191a6; + border-color: transparent; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(129, 145, 166, 0.04); + border-color: transparent; + color: #8191a6; +} +.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(129, 145, 166, 0.16); + border-color: transparent; + color: #8191a6; +} + +.p-splitbutton.p-button-info.p-button-outlined > .p-button { + background-color: transparent; + color: #35a4cc; + border: 2px solid; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(53, 164, 204, 0.04); + color: #35a4cc; +} +.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(53, 164, 204, 0.16); + color: #35a4cc; +} +.p-splitbutton.p-button-info.p-button-text > .p-button { + background-color: transparent; + color: #35a4cc; + border-color: transparent; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(53, 164, 204, 0.04); + border-color: transparent; + color: #35a4cc; +} +.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(53, 164, 204, 0.16); + border-color: transparent; + color: #35a4cc; +} + +.p-splitbutton.p-button-success.p-button-outlined > .p-button { + background-color: transparent; + color: #8bae2c; + border: 2px solid; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(139, 174, 44, 0.04); + color: #8bae2c; +} +.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(139, 174, 44, 0.16); + color: #8bae2c; +} +.p-splitbutton.p-button-success.p-button-text > .p-button { + background-color: transparent; + color: #8bae2c; + border-color: transparent; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(139, 174, 44, 0.04); + border-color: transparent; + color: #8bae2c; +} +.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(139, 174, 44, 0.16); + border-color: transparent; + color: #8bae2c; +} + +.p-splitbutton.p-button-warning.p-button-outlined > .p-button { + background-color: transparent; + color: #ff922a; + border: 2px solid; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 146, 42, 0.04); + color: #ff922a; +} +.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 146, 42, 0.16); + color: #ff922a; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button { + background-color: transparent; + color: #ff922a; + border-color: transparent; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(255, 146, 42, 0.04); + border-color: transparent; + color: #ff922a; +} +.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(255, 146, 42, 0.16); + border-color: transparent; + color: #ff922a; +} + +.p-splitbutton.p-button-help.p-button-outlined > .p-button { + background-color: transparent; + color: #7654d4; + border: 2px solid; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(118, 84, 212, 0.04); + color: #7654d4; +} +.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(118, 84, 212, 0.16); + color: #7654d4; +} +.p-splitbutton.p-button-help.p-button-text > .p-button { + background-color: transparent; + color: #7654d4; + border-color: transparent; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(118, 84, 212, 0.04); + border-color: transparent; + color: #7654d4; +} +.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(118, 84, 212, 0.16); + border-color: transparent; + color: #7654d4; +} + +.p-splitbutton.p-button-danger.p-button-outlined > .p-button { + background-color: transparent; + color: #d45472; + border: 2px solid; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(212, 84, 114, 0.04); + color: #d45472; +} +.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(212, 84, 114, 0.16); + color: #d45472; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button { + background-color: transparent; + color: #d45472; + border-color: transparent; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover { + background: rgba(212, 84, 114, 0.04); + border-color: transparent; + color: #d45472; +} +.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active { + background: rgba(212, 84, 114, 0.16); + border-color: transparent; + color: #d45472; +} + +.p-speeddial-button.p-button.p-button-icon-only { + width: 4rem; + height: 4rem; +} +.p-speeddial-button.p-button.p-button-icon-only .p-button-icon { + font-size: 1.3rem; +} + +.p-speeddial-action { + width: 3rem; + height: 3rem; + background: #6c6c6c; + color: #fff; +} +.p-speeddial-action:hover { + background: #585858; + color: #fff; +} + +.p-speeddial-direction-up .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-up .p-speeddial-item:first-child { + margin-bottom: 0.5rem; +} + +.p-speeddial-direction-down .p-speeddial-item { + margin: 0.25rem; +} +.p-speeddial-direction-down .p-speeddial-item:first-child { + margin-top: 0.5rem; +} + +.p-speeddial-direction-left .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-left .p-speeddial-item:first-child { + margin-right: 0.5rem; +} + +.p-speeddial-direction-right .p-speeddial-item { + margin: 0 0.25rem; +} +.p-speeddial-direction-right .p-speeddial-item:first-child { + margin-left: 0.5rem; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + margin: 0; +} +.p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { + margin: 0; +} + +.p-speeddial-mask { + background-color: rgba(0, 0, 0, 0.4); +} + +.p-carousel .p-carousel-content .p-carousel-prev, +.p-carousel .p-carousel-content .p-carousel-next { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin: 0.5rem; +} +.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-carousel .p-carousel-content .p-carousel-prev:focus, +.p-carousel .p-carousel-content .p-carousel-next:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-carousel .p-carousel-indicators { + padding: 1rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator { + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button { + background-color: #edf0fA; + width: 2rem; + height: 0.5rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 0; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover { + background: #ebebeb; +} +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background: #ced6f1; + color: #585858; +} + +.p-datatable .p-paginator-top { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-datatable .p-paginator-bottom { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-datatable .p-datatable-header { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datatable .p-datatable-footer { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + font-weight: 600; + color: #6c6c6c; + background: #ffffff; + transition: box-shadow 0.3s; +} +.p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + font-weight: 600; + color: #6c6c6c; + background: #ffffff; +} +.p-datatable .p-sortable-column .p-sortable-column-icon { + color: #898989; + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #585858; + background: #ced6f1; + margin-left: 0.5rem; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #898989; +} +.p-datatable .p-sortable-column.p-highlight { + background: #ffffff; + color: #5472d4; +} +.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #5472d4; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover { + background: #edf0fA; + color: #5472d4; +} +.p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon { + color: #5472d4; +} +.p-datatable .p-sortable-column:focus { + box-shadow: inset 0 0 0 0.15rem #bbc7ee; + outline: 0 none; +} +.p-datatable .p-datatable-tbody > tr { + background: #ffffff; + color: #6c6c6c; + transition: box-shadow 0.3s; +} +.p-datatable .p-datatable-tbody > tr > td { + text-align: left; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { + margin-right: 0.5rem; +} +.p-datatable .p-datatable-tbody > tr > td > .p-column-title { + font-weight: 600; +} +.p-datatable .p-datatable-tbody > tr > td.p-highlight { + background: #ced6f1; + color: #585858; +} +.p-datatable .p-datatable-tbody > tr.p-highlight { + background: #ced6f1; + color: #585858; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #ced6f1; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #ced6f1; +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus { + outline: 0.15rem solid #bbc7ee; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus { + outline: 0.15rem solid #bbc7ee; + outline-offset: -0.15rem; +} +.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-datatable .p-column-resizer-helper { + background: #5472d4; +} +.p-datatable .p-datatable-scrollable-header, +.p-datatable .p-datatable-scrollable-footer { + background: #ffffff; +} +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { + background-color: #ffffff; +} +.p-datatable .p-datatable-loading-icon { + font-size: 2rem; +} +.p-datatable.p-datatable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-footer { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-top { + border-width: 0 1px 0 1px; +} +.p-datatable.p-datatable-gridlines .p-paginator-bottom { + border-width: 0 1px 1px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { + border-width: 1px 1px 2px 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { + border-width: 1px; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + background: #fcfcfc; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: #ced6f1; + color: #585858; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { + color: #585858; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { + color: #585858; +} +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { + background: #fcfcfc; +} +.p-datatable.p-datatable-sm .p-datatable-header { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.5rem 0.5rem; +} +.p-datatable.p-datatable-lg .p-datatable-header { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-datatable.p-datatable-lg .p-datatable-footer { + padding: 1.25rem 1.25rem; +} + +.p-datatable-drag-selection-helper { + background: rgba(84, 114, 212, 0.16); +} + +.p-dataview .p-paginator-top { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-dataview .p-paginator-bottom { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-dataview .p-dataview-header { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-dataview .p-dataview-content { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + padding: 0; +} +.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { + border: solid #f5f5f5; + border-width: 0 0 1px 0; +} +.p-dataview .p-dataview-footer { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-dataview .p-dataview-loading-icon { + font-size: 2rem; +} + +.p-datascroller .p-paginator-top { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-datascroller .p-paginator-bottom { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-datascroller .p-datascroller-header { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-datascroller .p-datascroller-content { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + padding: 0; +} +.p-datascroller.p-datascroller-inline .p-datascroller-list > li { + border: solid #f5f5f5; + border-width: 0 0 1px 0; +} +.p-datascroller .p-datascroller-footer { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-column-filter-row .p-column-filter-menu-button, +.p-column-filter-row .p-column-filter-clear-button { + margin-left: 0.5rem; +} + +.p-column-filter-menu-button { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-column-filter-menu-button:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { + background: #ced6f1; + color: #585858; +} +.p-column-filter-menu-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} + +.p-column-filter-clear-button { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-column-filter-clear-button:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-column-filter-clear-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} + +.p-column-filter-overlay { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + 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); + min-width: 12.5rem; +} +.p-column-filter-overlay .p-column-filter-row-items { + padding: 0.5rem 0.5rem; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { + margin: 0 0 4px 0; + padding: 0.5rem 1rem; + border: 0 none; + color: #6c6c6c; + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { + color: #6c6c6c; + background: #edf0fA; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { + border-top: 1px solid #ebebeb; + margin: 4px 0; +} + +.p-column-filter-overlay-menu .p-column-filter-operator { + padding: 0.5rem 1.5rem; + border-bottom: 0 none; + color: #6c6c6c; + background: #ffffff; + margin: 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-column-filter-overlay-menu .p-column-filter-constraint { + padding: 1rem; + border-bottom: 1px solid #ebebeb; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { + margin-bottom: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { + margin-top: 0.5rem; +} +.p-column-filter-overlay-menu .p-column-filter-constraint:last-child { + border-bottom: 0 none; +} +.p-column-filter-overlay-menu .p-column-filter-add-rule { + padding: 0.5rem 1rem; +} +.p-column-filter-overlay-menu .p-column-filter-buttonbar { + padding: 1rem; +} + +.fc { + /* FullCalendar 4 */ + /* FullCalendar 5 */ +} +.fc.fc-unthemed .fc-view-container th { + background: #ffffff; + border: 2px solid #ebebeb; + color: #6c6c6c; +} +.fc.fc-unthemed .fc-view-container td.fc-widget-content { + border: 2px solid #ebebeb; + color: #6c6c6c; +} +.fc.fc-unthemed .fc-view-container td.fc-head-container { + border: 2px solid #ebebeb; +} +.fc.fc-unthemed .fc-view-container .fc-view { + background: #ffffff; +} +.fc.fc-unthemed .fc-view-container .fc-row { + border-right: 2px solid #ebebeb; +} +.fc.fc-unthemed .fc-view-container .fc-event { + background: #4868d1; + border: 2px solid #4868d1; + color: #ffffff; +} +.fc.fc-unthemed .fc-view-container .fc-divider { + background: #ffffff; + border: 2px solid #ebebeb; +} +.fc.fc-unthemed .fc-toolbar .fc-button { + color: #ffffff; + background: #5472d4; + border: 2px solid #5472d4; + font-size: 1rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; + display: flex; + align-items: center; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { + background: #4868d1; + color: #ffffff; + border-color: #4868d1; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { + background: #3c5ece; + color: #ffffff; + border-color: #3c5ece; +} +.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-unthemed .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #ffffff; + border: 2px solid #e1e1e1; + color: #6c6c6c; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: #edf0fA; + border-color: #e1e1e1; + color: #6c6c6c; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #ced6f1; + border-color: #ced6f1; + color: #585858; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #bdc7ec; + border-color: #bdc7ec; + color: #585858; +} +.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + z-index: 1; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { + border-color: #ebebeb; +} +.fc.fc-theme-standard .fc-view-harness th { + background: #ffffff; + border-color: #ebebeb; + color: #6c6c6c; +} +.fc.fc-theme-standard .fc-view-harness td { + color: #6c6c6c; + border-color: #ebebeb; +} +.fc.fc-theme-standard .fc-view-harness .fc-view { + background: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover { + background: none; + border: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { + border: 2px solid #ebebeb; + padding: 1rem; + background: #ffffff; + color: #6c6c6c; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + font-family: "PrimeIcons" !important; + font-size: 1rem; + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { + content: "\e90b"; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { + padding: 1rem; + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + border-top: 0 none; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { + color: #ffffff; + background: #4868d1; + border-color: #4868d1; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { + color: #ffffff; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { + background: #4868d1; + border-color: #4868d1; +} +.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { + background: #edf0fA; + color: #6c6c6c; +} +.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { + background: #ffffff; +} +.fc.fc-theme-standard .fc-toolbar .fc-button { + color: #ffffff; + background: #5472d4; + border: 2px solid #5472d4; + font-size: 1rem; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + border-radius: 6px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { + background: #4868d1; + color: #ffffff; + border-color: #4868d1; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { + background: #3c5ece; + color: #ffffff; + border-color: #3c5ece; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:disabled { + opacity: 0.6; + color: #ffffff; + background: #5472d4; + border: 2px solid #5472d4; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { + content: "\e900"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { + font-family: "PrimeIcons" !important; + text-indent: 0; + font-size: 1rem; +} +.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { + content: "\e901"; +} +.fc.fc-theme-standard .fc-toolbar .fc-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { + background: #ffffff; + border: 2px solid #e1e1e1; + color: #6c6c6c; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { + background: #edf0fA; + border-color: #e1e1e1; + color: #6c6c6c; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { + background: #ced6f1; + border-color: #ced6f1; + color: #585858; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { + background: #bdc7ec; + border-color: #bdc7ec; + color: #585858; +} +.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + z-index: 1; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { + border-radius: 0; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.fc.fc-theme-standard .fc-highlight { + color: #585858; + background: #ced6f1; +} + +.p-orderlist .p-orderlist-controls { + padding: 1rem; +} +.p-orderlist .p-orderlist-controls .p-button { + margin-bottom: 0.5rem; +} +.p-orderlist .p-orderlist-header { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #ebebeb; + padding: 1rem; + font-weight: 600; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-orderlist .p-orderlist-filter-container { + padding: 1rem; + background: #ffffff; + border: 2px solid #ebebeb; + border-bottom: 0 none; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input { + padding-right: 1.75rem; +} +.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon { + right: 0.75rem; + color: #898989; +} +.p-orderlist .p-orderlist-list { + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + padding: 0.5rem 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-orderlist .p-orderlist-list .p-orderlist-item { + padding: 0.5rem 1rem; + margin: 0 0 4px 0; + border: 0 none; + color: #6c6c6c; + background: transparent; + transition: transform 0.3s, box-shadow 0.3s; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-orderlist .p-orderlist-list .p-orderlist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { + color: #585858; + background: #ced6f1; +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { + background: #fcfcfc; +} +.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { + background: #edf0fA; +} + +@media screen and (max-width: 769px) { + .p-orderlist { + flex-direction: column; + } + .p-orderlist .p-orderlist-controls { + padding: 1rem; + flex-direction: row; + } + .p-orderlist .p-orderlist-controls .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-orderlist .p-orderlist-controls .p-button:last-child { + margin-right: 0; + } +} +.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight { + background: #ced6f1; + color: #585858; +} +.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { + color: #6b83d5; +} +.p-organizationchart .p-organizationchart-line-down { + background: #ebebeb; +} +.p-organizationchart .p-organizationchart-line-left { + border-right: 2px solid #ebebeb; + border-color: #ebebeb; +} +.p-organizationchart .p-organizationchart-line-top { + border-top: 2px solid #ebebeb; + border-color: #ebebeb; +} +.p-organizationchart .p-organizationchart-node-content { + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + padding: 1rem; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler { + background: inherit; + color: inherit; + border-radius: 50%; +} +.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} + +.p-paginator { + background: #ffffff; + color: #898989; + border: solid #ebebeb; + border-width: 2px; + padding: 0.5rem 1rem; + border-radius: 6px; +} +.p-paginator .p-paginator-first, +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { + background-color: transparent; + border: 0 none; + color: #898989; + min-width: 2.857rem; + height: 2.857rem; + margin: 0.143rem; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background: #edf0fA; + border-color: transparent; + color: #6c6c6c; +} +.p-paginator .p-paginator-first { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-paginator .p-paginator-last { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} +.p-paginator .p-dropdown { + margin-left: 0.5rem; + height: 2.857rem; +} +.p-paginator .p-dropdown .p-dropdown-label { + padding-right: 0; +} +.p-paginator .p-paginator-page-input { + margin-left: 0.5rem; + margin-right: 0.5rem; +} +.p-paginator .p-paginator-page-input .p-inputtext { + max-width: 2.857rem; +} +.p-paginator .p-paginator-current { + background-color: transparent; + border: 0 none; + color: #898989; + min-width: 2.857rem; + height: 2.857rem; + margin: 0.143rem; + padding: 0 0.5rem; +} +.p-paginator .p-paginator-pages .p-paginator-page { + background-color: transparent; + border: 0 none; + color: #898989; + min-width: 2.857rem; + height: 2.857rem; + margin: 0.143rem; + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: #ced6f1; + border-color: #ced6f1; + color: #585858; +} +.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { + background: #edf0fA; + border-color: transparent; + color: #6c6c6c; +} + +.p-picklist .p-picklist-buttons { + padding: 1rem; +} +.p-picklist .p-picklist-buttons .p-button { + margin-bottom: 0.5rem; +} +.p-picklist .p-picklist-header { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #ebebeb; + padding: 1rem; + font-weight: 600; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-picklist .p-picklist-filter-container { + padding: 1rem; + background: #ffffff; + border: 2px solid #ebebeb; + border-bottom: 0 none; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-input { + padding-right: 1.75rem; +} +.p-picklist .p-picklist-filter-container .p-picklist-filter-icon { + right: 0.75rem; + color: #898989; +} +.p-picklist .p-picklist-list { + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + padding: 0.5rem 0.5rem; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-picklist .p-picklist-list .p-picklist-item { + padding: 0.5rem 1rem; + margin: 0 0 4px 0; + border: 0 none; + color: #6c6c6c; + background: transparent; + transition: transform 0.3s, box-shadow 0.3s; +} +.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-picklist .p-picklist-list .p-picklist-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-picklist .p-picklist-list .p-picklist-item.p-highlight { + color: #585858; + background: #ced6f1; +} + +@media screen and (max-width: 769px) { + .p-picklist { + flex-direction: column; + } + .p-picklist .p-picklist-buttons { + padding: 1rem; + flex-direction: row; + } + .p-picklist .p-picklist-buttons .p-button { + margin-right: 0.5rem; + margin-bottom: 0; + } + .p-picklist .p-picklist-buttons .p-button:last-child { + margin-right: 0; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before { + content: "\e930"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before { + content: "\e92c"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before { + content: "\e933"; + } + .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before { + content: "\e92f"; + } +} +.p-tree { + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + padding: 1rem; + border-radius: 6px; +} +.p-tree .p-tree-container .p-treenode { + padding: 0.143rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content { + border-radius: 6px; + transition: box-shadow 0.3s; + padding: 0.5rem; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler { + margin-right: 0.5rem; + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { + margin-right: 0.5rem; + color: #898989; +} +.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 { + color: #6c6c6c; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { + background: #ced6f1; + color: #585858; +} +.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: #585858; +} +.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: #585858; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { + background: #edf0fA; + color: #6c6c6c; +} +.p-tree .p-tree-filter-container { + margin-bottom: 0.5rem; +} +.p-tree .p-tree-filter-container .p-tree-filter { + width: 100%; + padding-right: 1.75rem; +} +.p-tree .p-tree-filter-container .p-tree-filter-icon { + right: 0.75rem; + color: #898989; +} +.p-tree .p-treenode-children { + padding: 0 0 0 1rem; +} +.p-tree .p-tree-loading-icon { + font-size: 2rem; +} +.p-tree .p-treenode-droppoint { + height: 0.5rem; +} +.p-tree .p-treenode-droppoint.p-treenode-droppoint-active { + background: #889cdd; +} + +.p-treetable .p-paginator-top { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-treetable .p-paginator-bottom { + border-width: 0 0 2px 0; + border-radius: 0; +} +.p-treetable .p-treetable-header { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-treetable .p-treetable-footer { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; + font-weight: 600; +} +.p-treetable .p-treetable-thead > tr > th { + text-align: left; + padding: 1rem 1rem; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + font-weight: 600; + color: #6c6c6c; + background: #ffffff; + transition: box-shadow 0.3s; +} +.p-treetable .p-treetable-tfoot > tr > td { + text-align: left; + padding: 1rem 1rem; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + font-weight: 600; + color: #6c6c6c; + background: #ffffff; +} +.p-treetable .p-sortable-column { + outline-color: #bbc7ee; +} +.p-treetable .p-sortable-column .p-sortable-column-icon { + color: #898989; + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column .p-sortable-column-badge { + border-radius: 50%; + height: 1.143rem; + min-width: 1.143rem; + line-height: 1.143rem; + color: #585858; + background: #ced6f1; + margin-left: 0.5rem; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #898989; +} +.p-treetable .p-sortable-column.p-highlight { + background: #ffffff; + color: #5472d4; +} +.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: #5472d4; +} +.p-treetable .p-treetable-tbody > tr { + background: #ffffff; + color: #6c6c6c; + transition: box-shadow 0.3s; +} +.p-treetable .p-treetable-tbody > tr > td { + text-align: left; + border: 2px solid #f5f5f5; + border-width: 0 0 2px 0; + padding: 1rem 1rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { + margin-right: 0.5rem; +} +.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon { + color: #6c6c6c; +} +.p-treetable .p-treetable-tbody > tr:focus { + outline: 0.15rem solid #bbc7ee; + outline-offset: -0.15rem; +} +.p-treetable .p-treetable-tbody > tr.p-highlight { + background: #ced6f1; + color: #585858; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { + color: #585858; +} +.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { + color: #585858; +} +.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: #edf0fA; + color: #6c6c6c; +} +.p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { + color: #6c6c6c; +} +.p-treetable .p-column-resizer-helper { + background: #5472d4; +} +.p-treetable .p-treetable-scrollable-header, +.p-treetable .p-treetable-scrollable-footer { + background: #ffffff; +} +.p-treetable .p-treetable-loading-icon { + font-size: 2rem; +} +.p-treetable.p-treetable-gridlines .p-datatable-header { + border-width: 1px 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-top { + border-width: 0 1px 0 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-bottom { + border-width: 0 1px 1px 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td { + border-width: 1px; +} +.p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.875rem 0.875rem; +} +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.5rem 0.5rem; +} +.p-treetable.p-treetable-lg .p-treetable-header { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + padding: 1.25rem 1.25rem; +} +.p-treetable.p-treetable-lg .p-treetable-footer { + padding: 1.25rem 1.25rem; +} + +.p-timeline .p-timeline-event-marker { + border: 2px solid #5472d4; + border-radius: 50%; + width: 1rem; + height: 1rem; + background-color: #ffffff; +} +.p-timeline .p-timeline-event-connector { + background-color: #ebebeb; +} +.p-timeline.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; +} +.p-timeline.p-timeline-vertical .p-timeline-event-connector { + width: 2px; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; +} +.p-timeline.p-timeline-horizontal .p-timeline-event-connector { + height: 2px; +} + +.p-accordion .p-accordion-header .p-accordion-header-link { + padding: 1rem; + border: 2px solid #ebebeb; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: box-shadow 0.3s; +} +.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon { + margin-right: 0.5rem; +} +.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { + background: #edf0fA; + border-color: #ebebeb; + color: #6c6c6c; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { + background: #ffffff; + border-color: #ebebeb; + color: #6c6c6c; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-color: #ebebeb; + background: #edf0fA; + color: #6c6c6c; +} +.p-accordion .p-accordion-content { + padding: 1rem; + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-accordion .p-accordion-tab { + margin-bottom: 0; +} +.p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link { + border-radius: 0; +} +.p-accordion .p-accordion-tab .p-accordion-content { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link { + border-top: 0 none; +} +.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link, .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-top: 0 none; +} +.p-accordion .p-accordion-tab:first-child .p-accordion-header .p-accordion-header-link { + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-card { + background: #ffffff; + color: #6c6c6c; + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + border-radius: 6px; +} +.p-card .p-card-body { + padding: 1rem; +} +.p-card .p-card-title { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; +} +.p-card .p-card-subtitle { + font-weight: 400; + margin-bottom: 0.5rem; + color: #898989; +} +.p-card .p-card-content { + padding: 1rem 0; +} +.p-card .p-card-footer { + padding: 1rem 0 0 0; +} + +.p-fieldset { + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + border-radius: 6px; +} +.p-fieldset .p-fieldset-legend { + padding: 1rem; + border: 2px solid #ebebeb; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; + border-radius: 6px; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend { + padding: 0; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a { + padding: 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler { + margin-right: 0.5rem; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { + background: #edf0fA; + border-color: #ebebeb; + color: #6c6c6c; +} +.p-fieldset .p-fieldset-content { + padding: 1rem; +} + +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #ebebeb; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #ebebeb; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + +.p-panel .p-panel-header { + border: 2px solid #ebebeb; + padding: 1rem; + background: #ffffff; + color: #6c6c6c; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-panel .p-panel-header .p-panel-title { + font-weight: 600; +} +.p-panel .p-panel-header .p-panel-header-icon { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-panel .p-panel-header .p-panel-header-icon:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-panel .p-panel-header .p-panel-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-panel.p-panel-toggleable .p-panel-header { + padding: 0.5rem 1rem; +} +.p-panel .p-panel-content { + padding: 1rem; + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + border-top: 0 none; +} +.p-panel .p-panel-footer { + padding: 0.5rem 1rem; + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + border-top: 0 none; +} + +.p-splitter { + border: 2px solid #ebebeb; + background: #ffffff; + border-radius: 6px; + color: #6c6c6c; +} +.p-splitter .p-splitter-gutter { + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + background: #f5f5f5; +} +.p-splitter .p-splitter-gutter .p-splitter-gutter-handle { + background: #ebebeb; +} +.p-splitter .p-splitter-gutter-resizing { + background: #ebebeb; +} + +.p-scrollpanel .p-scrollpanel-bar { + background: #f5f5f5; + border: 0 none; +} + +.p-tabview .p-tabview-nav { + background: #ffffff; + border: 1px solid #ebebeb; + border-width: 0 0 2px 0; +} +.p-tabview .p-tabview-nav li { + margin-right: 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link { + border: solid #ebebeb; + border-width: 0 0 2px 0; + border-color: transparent transparent #ebebeb transparent; + background: #ffffff; + color: #898989; + padding: 1rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: box-shadow 0.3s; + margin: 0 0 -2px 0; +} +.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.1rem #bbc7ee; +} +.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { + background: #ffffff; + border-color: #ced6f1; + color: #898989; +} +.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + background: #ffffff; + border-color: #5472d4; + color: #5472d4; +} +.p-tabview .p-tabview-close { + margin-left: 0.5rem; +} +.p-tabview .p-tabview-nav-btn.p-link { + background: #ffffff; + color: #5472d4; + width: 2.857rem; + 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; +} +.p-tabview .p-tabview-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.1rem #bbc7ee; +} +.p-tabview .p-tabview-panels { + background: #ffffff; + padding: 1rem; + border: 0 none; + color: #6c6c6c; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-toolbar { + background: #ffffff; + border: 2px solid #ebebeb; + padding: 1rem; + border-radius: 6px; + gap: 0.5rem; +} +.p-toolbar .p-toolbar-separator { + margin: 0 0.5rem; +} + +.p-confirm-popup { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-confirm-popup .p-confirm-popup-content { + padding: 1rem; +} +.p-confirm-popup .p-confirm-popup-footer { + text-align: right; + padding: 0 1rem 1rem 1rem; +} +.p-confirm-popup .p-confirm-popup-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-confirm-popup .p-confirm-popup-footer button:last-child { + margin: 0; +} +.p-confirm-popup:after { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-confirm-popup:before { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-confirm-popup.p-confirm-popup-flipped:after { + border-top-color: #ffffff; +} +.p-confirm-popup.p-confirm-popup-flipped:before { + border-top-color: #ffffff; +} +.p-confirm-popup .p-confirm-popup-icon { + font-size: 1.5rem; +} +.p-confirm-popup .p-confirm-popup-message { + margin-left: 1rem; +} + +.p-dialog { + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); + border: 0 none; +} +.p-dialog .p-dialog-header { + border-bottom: 0 none; + background: #ffffff; + color: #6c6c6c; + padding: 1.5rem; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-dialog .p-dialog-header .p-dialog-title { + font-weight: 600; + font-size: 1.25rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin-right: 0.5rem; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-dialog .p-dialog-header .p-dialog-header-icon:last-child { + margin-right: 0; +} +.p-dialog .p-dialog-content { + background: #ffffff; + color: #6c6c6c; + padding: 0 1.5rem 2rem 1.5rem; +} +.p-dialog .p-dialog-content:last-of-type { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-dialog .p-dialog-footer { + border-top: 0 none; + background: #ffffff; + color: #6c6c6c; + padding: 0 1.5rem 1.5rem 1.5rem; + text-align: right; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-dialog .p-dialog-footer button { + margin: 0 0.5rem 0 0; + width: auto; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 2rem; +} +.p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 1rem; +} + +.p-overlaypanel { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + border-radius: 6px; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-overlaypanel .p-overlaypanel-content { + padding: 1rem; +} +.p-overlaypanel .p-overlaypanel-close { + background: #5472d4; + color: #ffffff; + width: 2rem; + height: 2rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 50%; + position: absolute; + top: -1rem; + right: -1rem; +} +.p-overlaypanel .p-overlaypanel-close:enabled:hover { + background: #4868d1; + color: #ffffff; +} +.p-overlaypanel:after { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; +} +.p-overlaypanel:before { + border: solid transparent; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #f2f2f2; +} +.p-overlaypanel.p-overlaypanel-flipped:after { + border-top-color: #ffffff; +} +.p-overlaypanel.p-overlaypanel-flipped:before { + border-top-color: #ffffff; +} + +.p-sidebar { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); +} +.p-sidebar .p-sidebar-header { + padding: 1rem; +} +.p-sidebar .p-sidebar-header .p-sidebar-close, +.p-sidebar .p-sidebar-header .p-sidebar-icon { + width: 2rem; + height: 2rem; + color: #898989; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { + color: #6c6c6c; + border-color: transparent; + background: #edf0fA; +} +.p-sidebar .p-sidebar-header .p-sidebar-close:focus, +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-sidebar .p-sidebar-header + .p-sidebar-content { + padding-top: 0; +} +.p-sidebar .p-sidebar-content { + padding: 1rem; +} + +.p-tooltip .p-tooltip-text { + background: #585858; + color: #ffffff; + padding: 0.5rem 0.75rem; + 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); + border-radius: 6px; +} +.p-tooltip.p-tooltip-right .p-tooltip-arrow { + border-right-color: #585858; +} +.p-tooltip.p-tooltip-left .p-tooltip-arrow { + border-left-color: #585858; +} +.p-tooltip.p-tooltip-top .p-tooltip-arrow { + border-top-color: #585858; +} +.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { + border-bottom-color: #585858; +} + +.p-fileupload .p-fileupload-buttonbar { + background: #ffffff; + padding: 1rem; + border: 2px solid #ebebeb; + color: #6c6c6c; + border-bottom: 0 none; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-fileupload .p-fileupload-buttonbar .p-button { + margin-right: 0.5rem; +} +.p-fileupload .p-fileupload-content { + background: #ffffff; + padding: 2rem 1rem; + border: 2px solid #ebebeb; + color: #6c6c6c; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-fileupload .p-progressbar { + height: 0.25rem; +} +.p-fileupload .p-fileupload-row > div { + padding: 1rem 1rem; +} +.p-fileupload.p-fileupload-advanced .p-message { + margin-top: 0; +} + +.p-breadcrumb { + background: #ffffff; + border: 2px solid #ebebeb; + border-radius: 6px; + padding: 1rem; +} +.p-breadcrumb ul li .p-menuitem-link { + transition: box-shadow 0.3s; + border-radius: 6px; +} +.p-breadcrumb ul li .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { + color: #898989; +} +.p-breadcrumb ul li.p-breadcrumb-chevron { + margin: 0 0.5rem 0 0.5rem; + color: #6c6c6c; +} +.p-breadcrumb ul li:last-child .p-menuitem-text { + color: #6c6c6c; +} +.p-breadcrumb ul li:last-child .p-menuitem-icon { + color: #898989; +} + +.p-contextmenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #6c6c6c; + border: 0 none; + 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); + border-radius: 6px; + width: 12.5rem; +} +.p-contextmenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-contextmenu .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-contextmenu .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-contextmenu .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-contextmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-contextmenu .p-submenu-list { + padding: 0.5rem 0.5rem; + background: #ffffff; + border: 0 none; + 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); + border-radius: 6px; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #edf0fA; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-contextmenu .p-menu-separator { + border-top: 1px solid #ebebeb; + margin: 4px 0; +} +.p-contextmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-dock .p-dock-list { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.5rem; + border-radius: 0.5rem; +} +.p-dock .p-dock-item { + padding: 0.5rem; +} +.p-dock .p-dock-action { + width: 4rem; + height: 4rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; +} +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; +} +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; +} + +@media screen and (max-width: 960px) { + .p-dock.p-dock-top .p-dock-container, .p-dock.p-dock-bottom .p-dock-container { + overflow-x: auto; + width: 100%; + } + .p-dock.p-dock-top .p-dock-container .p-dock-list, .p-dock.p-dock-bottom .p-dock-container .p-dock-list { + margin: 0 auto; + } + .p-dock.p-dock-left .p-dock-container, .p-dock.p-dock-right .p-dock-container { + overflow-y: auto; + height: 100%; + } + .p-dock.p-dock-left .p-dock-container .p-dock-list, .p-dock.p-dock-right .p-dock-container .p-dock-list { + margin: auto 0; + } + .p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-second-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-next, +.p-dock.p-dock-magnification.p-dock-right .p-dock-item-current { + transform: none; + margin: 0; + } +} +.p-megamenu { + padding: 0.5rem; + background: #f5f5f5; + color: #6c6c6c; + border: 2px solid #ebebeb; + border-radius: 6px; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #898989; + margin-left: 0.5rem; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-megamenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-megamenu .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-megamenu .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-megamenu .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-megamenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-megamenu .p-megamenu-panel { + background: #ffffff; + color: #6c6c6c; + border: 0 none; + 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-megamenu .p-megamenu-submenu-header { + margin: 0; + padding: 0.75rem 1rem; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-megamenu .p-megamenu-submenu { + padding: 0.5rem 0.5rem; + width: 12.5rem; +} +.p-megamenu .p-megamenu-submenu .p-menu-separator { + border-top: 1px solid #ebebeb; + margin: 4px 0; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #edf0fA; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-megamenu.p-megamenu-vertical { + width: 12.5rem; + padding: 0.5rem 0.5rem; +} + +.p-menu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #6c6c6c; + border: 2px solid #ebebeb; + border-radius: 6px; + width: 12.5rem; +} +.p-menu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-menu .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-menu .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-menu .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-menu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-menu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-menu.p-menu-overlay { + background: #ffffff; + border: 0 none; + 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-menu .p-submenu-header { + margin: 0; + padding: 0.75rem 1rem; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.p-menu .p-menu-separator { + border-top: 1px solid #ebebeb; + margin: 4px 0; +} + +.p-menubar { + padding: 0.5rem; + background: #f5f5f5; + color: #6c6c6c; + border: 2px solid #ebebeb; + border-radius: 6px; +} +.p-menubar .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-menubar .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-menubar .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-menubar .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-menubar .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #898989; + margin-left: 0.5rem; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon, +.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-menubar .p-submenu-list { + padding: 0.5rem 0.5rem; + background: #ffffff; + border: 0 none; + 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); + width: 12.5rem; +} +.p-menubar .p-submenu-list .p-menu-separator { + border-top: 1px solid #ebebeb; + margin: 4px 0; +} +.p-menubar .p-submenu-list .p-submenu-icon { + font-size: 0.875rem; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #edf0fA; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #898989; +} + +@media screen and (max-width: 960px) { + .p-menubar { + position: relative; + } + .p-menubar .p-menubar-button { + display: flex; + width: 2rem; + height: 2rem; + color: #898989; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .p-menubar .p-menubar-button:hover { + color: #898989; + background: #edf0fA; + } + .p-menubar .p-menubar-button:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + } + .p-menubar .p-menubar-root-list { + position: absolute; + display: none; + padding: 0.5rem 0.5rem; + background: #ffffff; + border: 0 none; + 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); + width: 100%; + } + .p-menubar .p-menubar-root-list .p-menu-separator { + border-top: 1px solid #ebebeb; + margin: 4px 0; + } + .p-menubar .p-menubar-root-list .p-submenu-icon { + font-size: 0.875rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon { + color: #898989; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; + } + .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + transition: transform 0.3s; + } + .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-180deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon { + transition: transform 0.3s; + transform: rotate(90deg); + } + .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon { + transform: rotate(-90deg); + } + .p-menubar .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; + } + .p-menubar .p-menubar-root-list ul li a { + padding-left: 2.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li a { + padding-left: 3.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li a { + padding-left: 5.25rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li a { + padding-left: 6.75rem; + } + .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a { + padding-left: 8.25rem; + } + .p-menubar.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } +} +.p-panelmenu .p-panelmenu-header > a { + padding: 1rem; + border: 2px solid #ebebeb; + color: #6c6c6c; + background: #ffffff; + font-weight: 600; + border-radius: 6px; + transition: box-shadow 0.3s; +} +.p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-header > a:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + background: #edf0fA; + border-color: #ebebeb; + color: #6c6c6c; +} +.p-panelmenu .p-panelmenu-header.p-highlight { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight > a { + background: #ffffff; + border-color: #ebebeb; + color: #6c6c6c; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover { + border-color: #ebebeb; + background: #edf0fA; + color: #6c6c6c; +} +.p-panelmenu .p-panelmenu-content { + padding: 0.5rem 0.5rem; + border: 2px solid #ebebeb; + background: #ffffff; + color: #6c6c6c; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon { + margin-right: 0.5rem; +} +.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) { + padding: 0 0 0 1rem; +} +.p-panelmenu .p-panelmenu-panel { + margin-bottom: 0; +} +.p-panelmenu .p-panelmenu-panel .p-panelmenu-header > a { + border-radius: 0; +} +.p-panelmenu .p-panelmenu-panel .p-panelmenu-content { + border-radius: 0; +} +.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header > a { + border-top: 0 none; +} +.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover > a, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover > a { + border-top: 0 none; +} +.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header > a { + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) > a { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} +.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-slidemenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #6c6c6c; + border: 2px solid #ebebeb; + border-radius: 6px; + width: 12.5rem; +} +.p-slidemenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-slidemenu .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-slidemenu .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-slidemenu .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-slidemenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-slidemenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-slidemenu.p-slidemenu-overlay { + background: #ffffff; + border: 0 none; + 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-slidemenu .p-slidemenu-list { + padding: 0.5rem 0.5rem; + background: #ffffff; + border: 0 none; + 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link { + background: #edf0fA; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text { + color: #6c6c6c; +} +.p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon { + color: #898989; +} +.p-slidemenu .p-slidemenu-separator { + border-top: 1px solid #ebebeb; + margin: 4px 0; +} +.p-slidemenu .p-slidemenu-icon { + font-size: 0.875rem; +} +.p-slidemenu .p-slidemenu-backward { + padding: 0.75rem 1rem; + color: #6c6c6c; +} + +.p-steps .p-steps-item .p-menuitem-link { + background: transparent; + transition: box-shadow 0.3s; + border-radius: 6px; + background: #ffffff; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-number { + color: #6c6c6c; + border: 2px solid #ebebeb; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + z-index: 1; + border-radius: 50%; +} +.p-steps .p-steps-item .p-menuitem-link .p-steps-title { + margin-top: 0.5rem; + color: #898989; +} +.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-steps .p-steps-item.p-highlight .p-steps-number { + background: #ced6f1; + color: #585858; +} +.p-steps .p-steps-item.p-highlight .p-steps-title { + font-weight: 600; + color: #6c6c6c; +} +.p-steps .p-steps-item:before { + content: " "; + border-top: 1px solid #ebebeb; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; +} + +.p-tabmenu .p-tabmenu-nav { + background: #ffffff; + border: 1px solid #ebebeb; + border-width: 0 0 2px 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem { + margin-right: 0; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { + border: solid #ebebeb; + border-width: 0 0 2px 0; + border-color: transparent transparent #ebebeb transparent; + background: #ffffff; + color: #898989; + padding: 1rem; + font-weight: 600; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + transition: box-shadow 0.3s; + margin: 0 0 -2px 0; + height: calc(100% + 2px); +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.1rem #bbc7ee; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { + background: #ffffff; + border-color: #ced6f1; + color: #898989; +} +.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { + background: #ffffff; + border-color: #5472d4; + color: #5472d4; +} + +.p-tieredmenu { + padding: 0.5rem 0.5rem; + background: #ffffff; + color: #6c6c6c; + border: 2px solid #ebebeb; + border-radius: 6px; + width: 12.5rem; +} +.p-tieredmenu .p-menuitem-link { + padding: 0.75rem 1rem; + color: #6c6c6c; + border-radius: 6px; + transition: box-shadow 0.3s; + user-select: none; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-tieredmenu .p-menuitem-link .p-menuitem-icon { + color: #898989; + margin-right: 0.5rem; +} +.p-tieredmenu .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { + background: #edf0fA; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text { + color: #6c6c6c; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon { + color: #898989; +} +.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon { + color: #898989; +} +.p-tieredmenu .p-menuitem-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; +} +.p-tieredmenu.p-tieredmenu-overlay { + background: #ffffff; + border: 0 none; + 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-tieredmenu .p-submenu-list { + padding: 0.5rem 0.5rem; + background: #ffffff; + border: 0 none; + 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-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link { + background: #edf0fA; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text { + color: #6c6c6c; +} +.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon { + color: #898989; +} +.p-tieredmenu .p-menu-separator { + border-top: 1px solid #ebebeb; + margin: 4px 0; +} +.p-tieredmenu .p-submenu-icon { + font-size: 0.875rem; +} + +.p-inline-message { + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: 6px; +} +.p-inline-message.p-inline-message-info { + background: #e1f2f7; + border: 4px solid #83c7e0; + border-width: 2px; + color: #585858; +} +.p-inline-message.p-inline-message-info .p-inline-message-icon { + color: #585858; +} +.p-inline-message.p-inline-message-success { + background: #f2f8e1; + border: 4px solid #c7e084; + border-width: 2px; + color: #585858; +} +.p-inline-message.p-inline-message-success .p-inline-message-icon { + color: #585858; +} +.p-inline-message.p-inline-message-warn { + background: #ffecdb; + border: 4px solid #ffb065; + border-width: 2px; + color: #585858; +} +.p-inline-message.p-inline-message-warn .p-inline-message-icon { + color: #585858; +} +.p-inline-message.p-inline-message-error { + background: #f7e1e6; + border: 4px solid #de8499; + border-width: 2px; + color: #585858; +} +.p-inline-message.p-inline-message-error .p-inline-message-icon { + color: #585858; +} +.p-inline-message .p-inline-message-icon { + font-size: 1rem; + margin-right: 0.5rem; +} +.p-inline-message .p-inline-message-text { + font-size: 1rem; +} +.p-inline-message.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; +} + +.p-message { + margin: 1rem 0; + border-radius: 6px; +} +.p-message .p-message-wrapper { + padding: 1rem 1.5rem; +} +.p-message .p-message-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-message .p-message-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-message .p-message-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-message.p-message-info { + background: #e1f2f7; + border: 4px solid #83c7e0; + border-width: 0 0 0 6px; + color: #585858; +} +.p-message.p-message-info .p-message-icon { + color: #585858; +} +.p-message.p-message-info .p-message-close { + color: #585858; +} +.p-message.p-message-success { + background: #f2f8e1; + border: 4px solid #c7e084; + border-width: 0 0 0 6px; + color: #585858; +} +.p-message.p-message-success .p-message-icon { + color: #585858; +} +.p-message.p-message-success .p-message-close { + color: #585858; +} +.p-message.p-message-warn { + background: #ffecdb; + border: 4px solid #ffb065; + border-width: 0 0 0 6px; + color: #585858; +} +.p-message.p-message-warn .p-message-icon { + color: #585858; +} +.p-message.p-message-warn .p-message-close { + color: #585858; +} +.p-message.p-message-error { + background: #f7e1e6; + border: 4px solid #de8499; + border-width: 0 0 0 6px; + color: #585858; +} +.p-message.p-message-error .p-message-icon { + color: #585858; +} +.p-message.p-message-error .p-message-close { + color: #585858; +} +.p-message .p-message-text { + font-size: 1rem; + font-weight: 400; +} +.p-message .p-message-icon { + font-size: 1.5rem; + margin-right: 0.5rem; +} + +.p-toast { + opacity: 0.9; +} +.p-toast .p-toast-message { + margin: 0 0 1rem 0; + 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); + border-radius: 6px; +} +.p-toast .p-toast-message .p-toast-message-content { + padding: 1rem; + border-width: 0 0 0 6px; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { + margin: 0 0 0 1rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { + font-size: 2rem; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-summary { + font-weight: 600; +} +.p-toast .p-toast-message .p-toast-message-content .p-toast-detail { + margin: 0.5rem 0 0 0; +} +.p-toast .p-toast-message .p-toast-icon-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-toast .p-toast-message .p-toast-icon-close:hover { + background: rgba(255, 255, 255, 0.3); +} +.p-toast .p-toast-message .p-toast-icon-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} +.p-toast .p-toast-message.p-toast-message-info { + background: #e1f2f7; + border: 4px solid #83c7e0; + border-width: 0 0 0 6px; + color: #585858; +} +.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { + color: #585858; +} +.p-toast .p-toast-message.p-toast-message-success { + background: #f2f8e1; + border: 4px solid #c7e084; + border-width: 0 0 0 6px; + color: #585858; +} +.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { + color: #585858; +} +.p-toast .p-toast-message.p-toast-message-warn { + background: #ffecdb; + border: 4px solid #ffb065; + border-width: 0 0 0 6px; + color: #585858; +} +.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { + color: #585858; +} +.p-toast .p-toast-message.p-toast-message-error { + background: #f7e1e6; + border: 4px solid #de8499; + border-width: 0 0 0 6px; + color: #585858; +} +.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { + color: #585858; +} + +.p-galleria .p-galleria-close { + margin: 0.5rem; + background: transparent; + color: #f5f5f5; + width: 4rem; + height: 4rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 50%; +} +.p-galleria .p-galleria-close .p-galleria-close-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-close:hover { + background: rgba(255, 255, 255, 0.1); + color: #f5f5f5; +} +.p-galleria .p-galleria-item-nav { + background: transparent; + color: #f5f5f5; + width: 4rem; + height: 4rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 6px; + margin: 0 0.5rem; +} +.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { + font-size: 2rem; +} +.p-galleria .p-galleria-item-nav:not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.1); + color: #f5f5f5; +} +.p-galleria .p-galleria-caption { + background: rgba(0, 0, 0, 0.5); + color: #f5f5f5; + padding: 1rem; +} +.p-galleria .p-galleria-indicators { + padding: 1rem; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button { + background-color: #edf0fA; + width: 1rem; + height: 1rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 50%; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover { + background: #ebebeb; +} +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #ced6f1; + color: #585858; +} +.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { + margin-right: 0.5rem; +} +.p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator { + margin-bottom: 0.5rem; +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators { + background: rgba(0, 0, 0, 0.5); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button { + background: rgba(255, 255, 255, 0.4); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover { + background: rgba(255, 255, 255, 0.6); +} +.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background: #ced6f1; + color: #585858; +} +.p-galleria .p-galleria-thumbnail-container { + background: rgba(0, 0, 0, 0.9); + padding: 1rem 0.25rem; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { + margin: 0.5rem; + background-color: transparent; + color: #f5f5f5; + width: 2rem; + height: 2rem; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + border-radius: 50%; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { + background: rgba(255, 255, 255, 0.1); + color: #f5f5f5; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content { + transition: box-shadow 0.3s; +} +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} + +.p-galleria-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-mask { + --maskbg: rgba(0, 0, 0, 0.9); +} + +.p-image-preview-indicator { + background-color: transparent; + color: #f8f9fa; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} + +.p-image-preview-container:hover > .p-image-preview-indicator { + background-color: rgba(0, 0, 0, 0.5); +} + +.p-image-toolbar { + padding: 1rem; +} + +.p-image-action.p-link { + color: #f8f9fa; + background-color: transparent; + width: 3rem; + height: 3rem; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin-right: 0.5rem; +} +.p-image-action.p-link:last-child { + margin-right: 0; +} +.p-image-action.p-link:hover { + color: #f8f9fa; + background-color: rgba(255, 255, 255, 0.1); +} +.p-image-action.p-link i { + font-size: 1.5rem; +} + +.p-avatar { + background-color: #ebebeb; + border-radius: 6px; +} +.p-avatar.p-avatar-lg { + width: 3rem; + height: 3rem; + font-size: 1.5rem; +} +.p-avatar.p-avatar-lg .p-avatar-icon { + font-size: 1.5rem; +} +.p-avatar.p-avatar-xl { + width: 4rem; + height: 4rem; + font-size: 2rem; +} +.p-avatar.p-avatar-xl .p-avatar-icon { + font-size: 2rem; +} + +.p-avatar-group .p-avatar { + border: 2px solid #ffffff; +} + +.p-chip { + background-color: #ebebeb; + color: #6c6c6c; + border-radius: 16px; + padding: 0 0.75rem; +} +.p-chip .p-chip-text { + line-height: 1.5; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} +.p-chip .p-chip-icon { + margin-right: 0.5rem; +} +.p-chip img { + width: 2rem; + height: 2rem; + margin-left: -0.75rem; + margin-right: 0.5rem; +} +.p-chip .p-chip-remove-icon { + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + margin-left: 0.5rem; +} +.p-chip .p-chip-remove-icon:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} + +.p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + 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); + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; +} +.p-scrolltop.p-link { + background: rgba(0, 0, 0, 0.7); +} +.p-scrolltop.p-link:hover { + background: rgba(0, 0, 0, 0.8); +} +.p-scrolltop .p-scrolltop-icon { + font-size: 1.5rem; + color: #f5f5f5; +} + +.p-skeleton { + background-color: #ebebeb; + border-radius: 6px; +} +.p-skeleton:after { + background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); +} + +.p-tag { + background: #5472d4; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; +} +.p-tag.p-tag-success { + background-color: #8bae2c; + color: #ffffff; +} +.p-tag.p-tag-info { + background-color: #35a4cc; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #ff922a; + color: #ffffff; +} +.p-tag.p-tag-danger { + background-color: #d45472; + color: #ffffff; +} +.p-tag .p-tag-icon { + margin-right: 0.25rem; + font-size: 0.75rem; +} + +.p-inplace .p-inplace-display { + padding: 0.5rem 0.75rem; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +.p-inplace .p-inplace-display:not(.p-disabled):hover { + background: #edf0fA; + color: #6c6c6c; +} +.p-inplace .p-inplace-display:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; +} + +.p-progressbar { + border: 0 none; + height: 1.5rem; + background: #ebebeb; + border-radius: 6px; +} +.p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #5472d4; +} +.p-progressbar .p-progressbar-label { + color: #ffffff; + line-height: 1.5rem; +} + +.p-terminal { + background: #ffffff; + color: #6c6c6c; + border: 2px solid #ebebeb; + padding: 1rem; +} +.p-terminal .p-terminal-input { + font-size: 1rem; + font-family: Poppins, sans-serif; +} + +.p-badge { + background: #5472d4; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + min-width: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; +} +.p-badge.p-badge-secondary { + background-color: #8191a6; + color: #ffffff; +} +.p-badge.p-badge-success { + background-color: #8bae2c; + color: #ffffff; +} +.p-badge.p-badge-info { + background-color: #35a4cc; + color: #ffffff; +} +.p-badge.p-badge-warning { + background-color: #ff922a; + color: #ffffff; +} +.p-badge.p-badge-danger { + background-color: #d45472; + color: #ffffff; +} +.p-badge.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; +} +.p-badge.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; +} + +.p-tag { + background: #5472d4; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; +} +.p-tag.p-tag-success { + background-color: #8bae2c; + color: #ffffff; +} +.p-tag.p-tag-info { + background-color: #35a4cc; + color: #ffffff; +} +.p-tag.p-tag-warning { + background-color: #ff922a; + color: #ffffff; +} +.p-tag.p-tag-danger { + background-color: #d45472; + color: #ffffff; +} + +/* Customizations to the designer theme should be defined here */ +/* Customizations to the designer theme should be defined here */ +.p-button .p-button-label { + font-weight: 600; +} + +.p-buttonset .p-button-label, +.p-togglebutton .p-button-label { + font-weight: 400; +} + +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #5472d4; +} + +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #5472d4; +} + +.p-panel { + border: 2px solid #ebebeb; + border-radius: 6px; +} +.p-panel .p-panel-header { + border: 0 none; +} +.p-panel .p-panel-content { + border: 0 none; +} + +.p-fieldset .p-fieldset-legend { + border-color: transparent; +} + +.p-accordion .p-accordion-toggle-icon { + order: 10; + margin-left: auto; +} +.p-accordion .p-accordion-toggle-icon.pi-chevron-right::before { + content: "\e90d"; +} +.p-accordion .p-accordion-toggle-icon.pi-chevron-down::before { + content: "\e90f"; +} +.p-accordion .p-accordion-header.p-highlight .p-accordion-header-link { + padding-bottom: calc(1rem + 2px); + border-bottom: 0 none; +} +.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { + border-bottom: 0 none; +} + +.p-inline-message.p-inline-message-info { + border-color: #e1f2f7; +} +.p-inline-message.p-inline-message-success { + border-color: #f2f8e1; +} +.p-inline-message.p-inline-message-warn { + border-color: #ffecdb; +} +.p-inline-message.p-inline-message-error { + border-color: #f7e1e6; +} + +.p-inputtext:enabled:focus { + box-shadow: none; +} + +.p-dropdown:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-multiselect:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-cascadeselect:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-autocomplete.p-autocomplete-multiple:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + box-shadow: none; +} + +.p-orderlist .p-orderlist-list { + border-top: 0 none; +} + +.p-picklist .p-picklist-list { + border-top: 0 none; +} + +.p-panelmenu .p-panelmenu-icon.pi-chevron-right, .p-panelmenu .p-panelmenu-icon.pi-chevron-down { + order: 10; + margin-left: auto; +} +.p-panelmenu .p-panelmenu-icon.pi-chevron-right::before { + content: "\e90d"; +} +.p-panelmenu .p-panelmenu-icon.pi-chevron-down::before { + content: "\e90f"; +} +.p-panelmenu .p-panelmenu-header.p-highlight > a { + padding-bottom: calc(1rem + 2px); + border-bottom: 0 none; +} +.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { + padding-bottom: calc(1rem + 2px); + border-bottom: 0 none; +} + +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 #5472d4; +} +.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 #5472d4; +} diff --git a/public/versions.json b/public/versions.json deleted file mode 100644 index 28dd8f2c0b..0000000000 --- a/public/versions.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "versions": [ - { - "version": "v8", - "url": "https://www.primefaces.org/primereact" - }, - { - "version": "v7", - "url": "https://www.primefaces.org/primereact-v7" - }, - { - "version": "v6", - "url": "https://www.primefaces.org/primereact-v6" - }, - { - "version": "v5", - "url": "https://www.primefaces.org/primereact-v5" - }, - { - "version": "v4", - "url": "https://www.primefaces.org/primereact-v4" - } - ] -} diff --git a/service/PhotoService.js b/service/PhotoService.js index f448bae930..9c16d0faf5 100644 --- a/service/PhotoService.js +++ b/service/PhotoService.js @@ -2,92 +2,92 @@ export const PhotoService = { getData() { return [ { - itemImageSrc: 'images/galleria/galleria1.jpg', - thumbnailImageSrc: 'images/galleria/galleria1s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria1.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, { - itemImageSrc: 'images/galleria/galleria2.jpg', - thumbnailImageSrc: 'images/galleria/galleria2s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria2.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria2s.jpg', alt: 'Description for Image 2', title: 'Title 2' }, { - itemImageSrc: 'images/galleria/galleria3.jpg', - thumbnailImageSrc: 'images/galleria/galleria3s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria3.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria3s.jpg', alt: 'Description for Image 3', title: 'Title 3' }, { - itemImageSrc: 'images/galleria/galleria4.jpg', - thumbnailImageSrc: 'images/galleria/galleria4s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria4.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria4s.jpg', alt: 'Description for Image 4', title: 'Title 4' }, { - itemImageSrc: 'images/galleria/galleria5.jpg', - thumbnailImageSrc: 'images/galleria/galleria5s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria5.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria5s.jpg', alt: 'Description for Image 5', title: 'Title 5' }, { - itemImageSrc: 'images/galleria/galleria6.jpg', - thumbnailImageSrc: 'images/galleria/galleria6s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria6.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria6s.jpg', alt: 'Description for Image 6', title: 'Title 6' }, { - itemImageSrc: 'images/galleria/galleria7.jpg', - thumbnailImageSrc: 'images/galleria/galleria7s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria7.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria7s.jpg', alt: 'Description for Image 7', title: 'Title 7' }, { - itemImageSrc: 'images/galleria/galleria8.jpg', - thumbnailImageSrc: 'images/galleria/galleria8s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria8.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria8s.jpg', alt: 'Description for Image 8', title: 'Title 8' }, { - itemImageSrc: 'images/galleria/galleria9.jpg', - thumbnailImageSrc: 'images/galleria/galleria9s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria9.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria9s.jpg', alt: 'Description for Image 9', title: 'Title 9' }, { - itemImageSrc: 'images/galleria/galleria10.jpg', - thumbnailImageSrc: 'images/galleria/galleria10s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria10.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria10s.jpg', alt: 'Description for Image 10', title: 'Title 10' }, { - itemImageSrc: 'images/galleria/galleria11.jpg', - thumbnailImageSrc: 'images/galleria/galleria11s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria11.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria11s.jpg', alt: 'Description for Image 11', title: 'Title 11' }, { - itemImageSrc: 'images/galleria/galleria12.jpg', - thumbnailImageSrc: 'images/galleria/galleria12s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria12.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria12s.jpg', alt: 'Description for Image 12', title: 'Title 12' }, { - itemImageSrc: 'images/galleria/galleria13.jpg', - thumbnailImageSrc: 'images/galleria/galleria13s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria13.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria13s.jpg', alt: 'Description for Image 13', title: 'Title 13' }, { - itemImageSrc: 'images/galleria/galleria14.jpg', - thumbnailImageSrc: 'images/galleria/galleria14s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria14.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria14s.jpg', alt: 'Description for Image 14', title: 'Title 14' }, { - itemImageSrc: 'images/galleria/galleria15.jpg', - thumbnailImageSrc: 'images/galleria/galleria15s.jpg', + itemImageSrc: 'https://www.primereact.org/images/galleria/galleria15.jpg', + thumbnailImageSrc: 'https://www.primereact.org/images/galleria/galleria15s.jpg', alt: 'Description for Image 15', title: 'Title 15' } diff --git a/service/VersionService.js b/service/VersionService.js deleted file mode 100644 index 5119eda892..0000000000 --- a/service/VersionService.js +++ /dev/null @@ -1,7 +0,0 @@ -export const VersionService = { - getVersions() { - return fetch('https://www.primefaces.org/primereact/versions.json') - .then((res) => res.json()) - .then((d) => d.versions); - } -}; diff --git a/styles/doc/index.css b/styles/doc/index.css index 25da9d5d9e..7374b7eee1 100644 --- a/styles/doc/index.css +++ b/styles/doc/index.css @@ -1,3 +1,4 @@ -.tsd-panel.tsd-comment:has(img){ +.tsd-panel.tsd-comment:has(img), +.tsd-comment img { display: none !important; -} \ No newline at end of file +} diff --git a/styles/layout/_doc.scss b/styles/layout/_doc.scss index 07eaea2faa..34515eaaa9 100644 --- a/styles/layout/_doc.scss +++ b/styles/layout/_doc.scss @@ -12,6 +12,7 @@ .doc-section-label { display: flex; align-items: center; + scroll-margin-top: 6.5rem; > a { font-size: 1.25rem; @@ -35,7 +36,7 @@ .doc-section-description { font-size: 1.125rem; - + i { background-color: var(--primary-100); color: var(--primary-900); @@ -57,7 +58,7 @@ &.main{ margin-bottom: 1rem; } - + } .doc-tablewrapper { @@ -69,35 +70,35 @@ width: 100%; background-color: var(--surface-card); margin-bottom: 1.5rem; - + th { border-bottom: 1px solid var(--surface-border); padding: 1rem; text-align: left; } - + tbody { tr:hover { background: var(--surface-hover); } - + td { padding: 1rem; border-bottom: 1px solid var(--surface-border); - + &:first-child { font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace; font-weight: 700; color: var(--text-color-secondary); } - + &:nth-child(2):not(:last-child) { color: var(--primary-color); font-weight: 600; } } } - + &.browsers { td { &:first-child { @@ -126,14 +127,15 @@ li { &.navbar-item{ border-left-style: solid; - border-left-width: 2px; + border-left-width: 3px; border-color: var(--surface-border); + z-index: 1; button { - display: inline; padding: 0.25rem; - margin-left: 0.5rem; + margin-left: .5rem; + font-size: 1rem; + display: inline; color: var(--text-color); - z-index: 1; &:hover { color: var(--primary-color); } @@ -153,22 +155,18 @@ padding: 0; flex-grow: 1; flex-shrink: 1; - flex-basis: auto; + flex-basis: auto; li{ - &.navbar-child-item{ - padding: 0.25rem; + &.navbar-child-item{ border-left: 5rem; - border-left-width: 2px; + border-left-width: 3px; border-left-style: solid; border-color: var(--surface-border); z-index: 1; button { padding: 0.25rem; - margin-left: 0.5rem; - padding-left: 1rem; - font-size: .875rem; + margin-left: 1.5rem; color: var(--text-color); - z-index: 1; &:hover { color: var(--primary-color); } @@ -183,7 +181,7 @@ } } } - + } .doc-section-code-tooltip .p-tooltip-text { @@ -212,4 +210,4 @@ pre { margin: 0 0 1.5rem 0; } -} \ No newline at end of file +} diff --git a/tsconfig.json b/tsconfig.json index a7169d3185..f7c875894b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,14 +18,12 @@ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules", "dist"], "typedocOptions": { - "name": "PrimeReact - v9.0.0", "entryPoints": ["components/lib"], "entryPointStrategy": "expand", "hideGenerator": true, "excludeExternals": true, "searchInComments": true, "disableSources": true, - "out": "docs/api/9.0.0", "exclude": ["components/lib/**/*.js"], "externalSymbolLinkMappings": { "@types/react": {