(false);
-
- return (
-
-
setVisible(true)} />
-
- setVisible(false)}
- pt={{
- root: { className: 'w-12 sm:w-9 md:w-6' }
- }}
- >
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
setVisible(true)} />
-
- setVisible(false)}
- pt={{
- root: { className: 'w-12 sm:w-9 md:w-6' }
- }}
- >
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaqui officia deserunt mollit anim id est laborum.
-
-
- Center
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremquelaudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunturmagni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit,sed quia non numquam eius modi.
-
- `,
- javascript: `
-import React from 'react';
-import { Divider } from 'primereact/divider';
-
-export default function PTDemo() {
- return (
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Center
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Center
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Center
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
- Menu requires a collection of menuitems as its model . Default location is bottom and other sides are also available when defined with the position property.
-
-
-
- setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" />
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function FilledDemo() {
+ const [selectedCity, setSelectedCity] = useState(null);
+ const cities = [
+ { name: 'New York', code: 'NY' },
+ { name: 'Rome', code: 'RM' },
+ { name: 'London', code: 'LDN' },
+ { name: 'Istanbul', code: 'IST' },
+ { name: 'Paris', code: 'PRS' }
+ ];
+
+ return (
+
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" />
+
+ )
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+ name: string;
+ code: string;
+}
+
+export default function FilledDemo() {
+ const [selectedCity, setSelectedCity] = useState(null);
+ const cities: City[] = [
+ { name: 'New York', code: 'NY' },
+ { name: 'Rome', code: 'RM' },
+ { name: 'London', code: 'LDN' },
+ { name: 'Istanbul', code: 'IST' },
+ { name: 'Paris', code: 'PRS' }
+ ];
+
+ return (
+
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" />
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
+
+ setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" />
+
+
+
setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
Select a City
-
+
`,
javascript: `
import React, { useState } from "react";
import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
export default function FloatLabelDemo() {
const [selectedCity, setSelectedCity] = useState(null);
@@ -36,10 +38,10 @@ export default function FloatLabelDemo() {
return (
-
+
setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
Select a City
-
+
)
}
@@ -47,6 +49,7 @@ export default function FloatLabelDemo() {
typescript: `
import React, { useState } from "react";
import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
interface City {
name: string;
@@ -65,10 +68,10 @@ export default function FloatLabelDemo() {
return (
-
+
setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
Select a City
-
+
)
}
@@ -81,10 +84,10 @@ export default function FloatLabelDemo() {
A floating label appears on top of the input field when focused.
-
+
setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
Select a City
-
+
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('city', e.value);
- }}
-/>
-{getFormErrorMessage('city')}
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function FormikDoc() {
- const toast = useRef(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- const show = (data) => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.name}\` });
- };
-
- const formik = useFormik({
- initialValues: {
- city: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.city) {
- errors.city = 'City is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.city && show(data);
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- field.onChange(e.value)}
- className={classNames({ 'p-invalid': fieldState.error })}
- />
- )}
-/>
-{getFormErrorMessage('city')}
-{errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Dropdown } from 'primereact/dropdown';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function HookFormDoc() {
- const toast = useRef(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- const show = (data) => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: \`\${data.city.name}\` });
- };
-
- const defaultValues = {
- city: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.city && show(data);
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
- setSelectedCity(e.value)} options={cities} optionLabel="name"
- placeholder="Select a City" className="p-invalid w-full md:w-14rem" />
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" />
`,
javascript: `
import React, { useState } from "react";
@@ -34,8 +34,8 @@ export default function InvalidDemo() {
return (
- setSelectedCity(e.value)} options={cities} optionLabel="name"
- placeholder="Select a City" className="p-invalid w-full md:w-14rem" />
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" />
)
}
@@ -61,8 +61,8 @@ export default function InvalidDemo() {
return (
- setSelectedCity(e.value)} options={cities} optionLabel="name"
- placeholder="Select a City" className="p-invalid w-full md:w-14rem" />
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" />
)
}
@@ -73,11 +73,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
- setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="p-invalid w-full md:w-14rem" />
+ setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" />
setSelectedCity(e.value)}
- options={cities}
- optionLabel="name"
- placeholder="Select a City"
- pt={{
- root: { className: 'w-full md:w-14rem' },
- item: ({ context }) => ({
- className: context.selected ? 'bg-primary' : undefined
- })
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { Dropdown } from 'primereact/dropdown';
-
-export default function PTDemo() {
- const [selectedCity, setSelectedCity] = useState(null);
- const cities = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- return (
-
- setSelectedCity(e.value)}
- options={cities}
- optionLabel="name"
- placeholder="Select a City"
- pt={{
- root: { className: 'w-full md:w-14rem' },
- item: ({ context }) => ({
- className: context.selected ? 'bg-primary' : undefined
- })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function PTDemo() {
- const [selectedCity, setSelectedCity] = useState(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- return (
-
- setSelectedCity(e.value)}
- options={cities}
- optionLabel="name"
- placeholder="Select a City"
- pt={{
- root: { className: 'w-full md:w-14rem' },
- item: ({ context }) => ({
- className: context.selected ? 'bg-primary' : undefined
- })
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setSelectedCity(e.value)}
- options={cities}
- optionLabel="name"
- placeholder="Select a City"
- pt={{
- root: { className: 'w-full md:w-14rem' },
- item: ({ context }) => ({
- className: context.selected ? 'bg-primary' : undefined
- })
- }}
- />
-
-
-
- );
- };
-
- const header = renderHeader();
-
- const formik = useFormik({
- initialValues: {
- blog: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.blog || data.blog === '\n') {
- errors.blog = 'Content is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.blog && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('blog', e.textValue);
- }}
- style={{ height: '320px' }}
-/>
-{getFormErrorMessage('blog')}
-
-
- );
- };
-
- const header = renderHeader();
-
- const formik = useFormik({
- initialValues: {
- blog: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.blog || data.blog === \`n\`) {
-
- errors.blog = 'Content is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.blog && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Editor, EditorTextChangeEvent } from 'primereact/editor';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Blog Submitted', detail: 'The blog is uploaded' });
- };
-
- const renderHeader = () => {
- return (
-
-
- );
- };
-
- const header = renderHeader();
-
- const formik = useFormik({
- initialValues: {
- blog: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.blog || data.blog === \`n\`) {
-
- errors.blog = 'Content is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.blog && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- );
- };
-
- const header = renderHeader();
-
- const defaultValues = {
- blog: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.blog && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- field.onChange(e.textValue)} style={{ height: '320px' }} />}
-/
-{getFormErrorMessage('blog')}
-
-
- );
- };
-
- const header = renderHeader();
-
- const defaultValues = {
- blog: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.blog && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Editor, EditorTextChangeEvent } from 'primereact/editor';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Submission Received', detail: 'The blog is uploaded' });
- };
-
- const renderHeader = () => {
- return (
-
-
- );
- };
-
- const header = renderHeader();
-
- const defaultValues = {
- blog: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.blog && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
- setText(e.htmlValue)}
- pt={{
- content: { style: { height: '320px' } },
- toolbar: { className: 'surface-ground' }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { Editor } from "primereact/editor";
-
-export default function PTDemo() {
- const [text, setText] = useState('');
-
- return (
-
- setText(e.htmlValue)}
- pt={{
- content: { style: { height: '320px' } },
- toolbar: { className: 'surface-ground' }
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { Editor, EditorTextChangeEvent } from "primereact/editor";
-
-export default function PTDemo() {
- const [text, setText] = useState('');
-
- return (
-
- setText(e.htmlValue)}
- pt={{
- content: { style: { height: '320px' } },
- toolbar: { className: 'surface-ground' }
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setText(e.htmlValue)}
- pt={{
- content: { style: { height: '320px' } },
- toolbar: { className: 'surface-ground' }
- }}
- />
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, suntin culpa qui officia deserunt mollit anim id est laborum.
-
-
- `,
- javascript: `
-import React from 'react';
-import { Fieldset } from 'primereact/fieldset';
-
-export default function PTDemo() {
- return (
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
Drag and drop files to here to upload.}
-/>
- `,
- javascript: `
-import React from 'react';
-import { FileUpload } from 'primereact/fileupload';
-
-export default function PTDemo() {
-
- return (
-
- Drag and drop files to here to upload.}
- />
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Toast } from 'primereact/toast';
-import { FileUpload } from 'primereact/fileupload';
-
-export default function PTDemo() {
-
- return (
-
- Drag and drop files to here to upload.}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- Drag and drop files to here to upload.}
- />
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useState, useEffect } from 'react';
-import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
-import { PhotoService } from './service/PhotoService';
-
-export default function PTDemo() {
- const [images, setImages] = useState(null);
- const responsiveOptions: GalleriaResponsiveOptions[] = [
- {
- breakpoint: '991px',
- numVisible: 4
- },
- {
- breakpoint: '767px',
- numVisible: 3
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
-
- useEffect(() => {
- PhotoService.getImages().then(data => setImages(data));
- }, []);
-
- const itemTemplate = (item: any) => {
- return
-
- )
-}
- `,
- data: `
-/* PhotoService */
-{
- itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
- thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
- alt: 'Description for Image 1',
- title: 'Title 1'
-},
-...
- `
- };
-
- return (
- <>
-
-
-
-
- InputText is used as a controlled input with value and onChange properties.
-
-
-
- setValue(e.target.value)}
- pt={{
- root: { className: 'border-primary-400' }
- }}
- />
-
-
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Image } from 'primereact/image';
-
-export default function PTDemo() {
- return (
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
-
- View Content
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- `,
- javascript: `
-import React from 'react';
-import { Inplace } from 'primereact/inplace';
-
-export default function PTDemo() {
- return (
-
-
- View Content
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
-
- View Content
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
-
- View Content
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function FilledDemo() {
+ const [value, setValue] = useState();
+
+ return (
+
+ setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+
+ )
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
+
+export default function FilledDemo() {
+ const [value, setValue] = useState();
+
+ return (
+
+ setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
+
+ setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />
+
+
+
setValue(e.target.value)} mask="999-99-9999" />
SSN
-
+
`,
javascript: `
import React, { useState } from "react";
import { InputMask } from "primereact/inputmask";
+import { FloatLabel } from "primereact/floatlabel";
export default function FloatLabelDemo() {
const [value, setValue] = useState();
return (
-
+
setValue(e.target.value)} mask="999-99-9999" />
SSN
-
+
)
}
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
typescript: `
import React, { useState } from "react";
import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
+import { FloatLabel } from "primereact/floatlabel";
export default function FloatLabelDemo() {
const [value, setValue] = useState();
return (
-
+
setValue(e.target.value)} mask="999-99-9999" />
SSN
-
+
)
}
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
return (
<>
- A floating label appears on top of the input field when focused.
+
+ A floating label appears on top of the input field when focused. Visit
-
+
setValue(e.target.value)} mask="999-99-9999" />
SSN
-
+
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('value', e.target.value);
- }}
- mask="99-999999"
- placeholder="99-999999"
- className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-/>
-{getFormErrorMessage('value')}
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputMask } from "primereact/inputmask";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
- };
-
- const formik = useFormik({
- initialValues: {
- value: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.value) {
- errors.value = 'Phone is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show(data);
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
- field.onChange(e.target.value)}
- mask="99-999999"
- placeholder="99-999999"
- />
- {getFormErrorMessage(field.name)}
-
- )}
-/>
-{errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-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 { InputMask } from "primereact/inputmask";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
- };
-
- const defaultValues = {
- value: false
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
-
-
-
)
}
@@ -26,7 +26,7 @@ import { InputMask } from "primereact/inputmask";
export default function InvalidDemo() {
return (
-
)
}
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
-
setValue(e.target.value)}
- mask="99-999999"
- placeholder="99-999999"
- pt={{
- input: {
- root: {
- className: 'border-teal-400'
- }
- }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { InputMask } from "primereact/inputmask";
-
-export default function PTDemo() {
- const [value, setValue] = useState('');
-
- return (
-
- setValue(e.target.value)}
- mask="99-999999"
- placeholder="99-999999"
- pt={{
- input: {
- root: {
- className: 'border-teal-400'
- }
- }
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
-
-export default function PTDemo() {
- const [value, setValue] = useState('');
-
- return (
-
- setValue(e.target.value)}
- mask="99-999999"
- placeholder="99-999999"
- pt={{
- input: {
- root: {
- className: 'border-teal-400'
- }
- }
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setValue(e.target.value)}
- mask="99-999999"
- placeholder="99-999999"
- pt={{
- root: {
- className: 'border-teal-400'
- }
- }}
- />
-
- {errors[name].message} ;
- };
-
- const code = {
- basic: `
- (
- <>
- Product Id*
- {errors[name].message}
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { InputMask } from "primereact/inputmask";
-
-export default function InvalidDemo() {
- const [formData, setFormData] = useState({});
- const defaultValues = {productId: ''};
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
-
- const onSubmit = (data: any) => {
- setFormData(data);
- };
-
- const getFormErrorMessage = (name: string) => {
- return errors[name] && {errors[name].message}
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
- setValue(e.value)} mode="decimal" minFractionDigits={2} />
+`,
+ javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function FilledDemo() {
+ const [value, setValue] = useState(151351);
+
+ return (
+
+ setValue(e.value)} mode="decimal" minFractionDigits={2} />
+
+ )
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function FilledDemo() {
+ const [value, setValue] = useState(151351);
+
+ return (
+
+ setValue(e.value)} mode="decimal" minFractionDigits={2} />
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
+
+ setValue(e.value)} minFractionDigits={2} />
+
+
+
setValue(e.value)} />
Number
-
+
`,
javascript: `
import React, { useState } from "react";
import { InputNumber } from 'primereact/inputnumber';
+import { FloatLabel } from 'primereact/floatlabel';
export default function FloatLabelDemo() {
const [value, setValue] = useState(151351);
return (
-
+
setValue(e.value)} />
Number
-
+
)
}
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
typescript: `
import React, { useState } from "react";
import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+import { FloatLabel } from 'primereact/floatlabel';
export default function FloatLabelDemo() {
const [value, setValue] = useState(151351);
return (
-
+
setValue(e.value)} />
Number
-
+
)
}
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
return (
<>
- A floating label appears on top of the input field when focused.
+
+ A floating label appears on top of the input field when focused. Visit
-
+
setValue(e.value)} />
Number
-
+
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('year', e.value);
- }}
- useGrouping={false}
- inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })}
- pt={{
- input: {
- root: { autoComplete: 'off' }
- }
- }}
-/>
-{getFormErrorMessage('year')}
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputNumber } from 'primereact/inputnumber';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.year });
- };
-
- const formik = useFormik({
- initialValues: {
- year: null
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.year) {
- errors.year = 'Year is required.';
- }
-
- if (data.year < 1960) {
- errors.year = \`Enter a valid year.\`;
- }
-
- if (data.year > 2050) {
- errors.year = \`Enter a valid year.\`;
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show(data);
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (value >= 1960 && value <= 2050) || 'Enter a valid year.'
- }}
- render={({ field, fieldState }) => (
- <>
- Enter a year between 1960-2050.
- field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
- {getFormErrorMessage(field.name)}
-
- )}
-/>
-{errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-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 { InputNumber } from "primereact/inputnumber";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
- const defaultValues = { year: null };
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('year') });
- };
-
- const onSubmit = (data) => {
- data.year && show();
- form.reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
- setValue(e.value)} mode="decimal" minFractionDigits={2} />
+ setValue(e.value)} mode="decimal" minFractionDigits={2} />
`,
javascript: `
import React, { useState } from "react";
@@ -19,7 +19,7 @@ export default function InvalidDemo() {
return (
- setValue(e.value)} mode="decimal" minFractionDigits={2} />
+ setValue(e.value)} mode="decimal" minFractionDigits={2} />
)
}
@@ -33,7 +33,7 @@ export default function InvalidDemo() {
return (
- setValue(e.value)} mode="decimal" minFractionDigits={2} />
+ setValue(e.value)} mode="decimal" minFractionDigits={2} />
)
}
@@ -44,11 +44,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
- setValue(e.value)} minFractionDigits={2} />
+ setValue(e.value)} minFractionDigits={2} />
setValue(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"
- pt={{
- incrementButton: { className: 'bg-teal-500 border-teal-500' },
- decrementButton: { className: 'bg-orange-500 border-orange-500' }
- }}
-/>
-`,
- javascript: `
-import React, { useState } from "react";
-import { InputNumber } from 'primereact/inputnumber';
-
-export default function PTDemo() {
- const [value, setValue] = useState(20);
-
- return (
-
- setValue(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"
- pt={{
- incrementButton: { className: 'bg-teal-500 border-teal-500' },
- decrementButton: { className: 'bg-orange-500 border-orange-500' }
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
-
-export default function PTDemo() {
- const [value, setValue] = useState(20);
-
- return (
-
- setValue(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"
- pt={{
- incrementButton: { className: 'bg-teal-500 border-teal-500' },
- decrementButton: { className: 'bg-orange-500 border-orange-500' }
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setValue(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"
- pt={{
- incrementButton: { className: 'bg-teal-500 border-teal-500' },
- decrementButton: { className: 'bg-orange-500 border-orange-500' }
- }}
- />
-
- {formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('value', e.value);
- }}
- className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-/>
-{getFormErrorMessage('value')}
-{formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { InputSwitch } from "primereact/inputswitch";
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
- };
-
- const formik = useFormik({
- initialValues: {
- value: false
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.value) {
- errors.value = 'Accept is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show(data);
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
- field.onChange(e.value)} />
- {getFormErrorMessage(field.name)}
-
- )}
-/>
- `,
- javascript: `
-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 { InputSwitch } from "primereact/inputswitch";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
- };
-
- const defaultValues = {
- checked: false
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.checked && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-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 { InputSwitch } from "primereact/inputswitch";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
- };
-
- const defaultValues = {
- checked: false
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.checked && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
-
- setChecked(e.value)}
- pt={{
- slider: ({ props }) => ({
- className: props.checked ? 'bg-teal-400' : 'bg-red-400'
- })
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { InputSwitch } from "primereact/inputswitch";
-
-export default function PTDemo() {
- const [checked, setChecked] = useState(false);
-
- return (
-
- setChecked(e.value)}
- pt={{
- slider: ({ props }) => ({
- className: props.checked ? 'bg-teal-400' : 'bg-red-400'
- })
- }}
- />
-
- );
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { InputSwitch, InputSwitchChangeEvent } from "primereact/inputswitch";
-
-export default function PTDemo() {
- const [checked, setChecked] = useState(false);
-
- return (
-
- setChecked(e.value)}
- pt={{
- slider: ({ props }) => ({
- className: props.checked ? 'bg-teal-400' : 'bg-red-400'
- })
- }}
- />
-
- );
-}
- `
- };
-
- return (
- <>
-
- setChecked(e.value)}
- pt={{
- slider: ({ props }) => ({
- className: props.checked ? 'bg-teal-400' : 'bg-red-400'
- })
- }}
- />
-
- setValue(e.target.value)}
- pt={{
- root: { className: 'border-primary-400' }
- }}
-/>
+ setValue(e.target.value)} />
`,
javascript: `
import React, { useState } from "react";
import { InputText } from "primereact/inputtext";
-export default function PTDemo() {
+export default function FilledDemo() {
const [value, setValue] = useState('');
return (
- setValue(e.target.value)}
- pt={{
- root: { className: 'border-primary-400' }
- }}
- />
+ setValue(e.target.value)} />
)
}
@@ -40,18 +28,12 @@ export default function PTDemo() {
import React, { useState } from "react";
import { InputText } from "primereact/inputtext";
-export default function PTDemo() {
+export default function FilledDemo() {
const [value, setValue] = useState('');
return (
- setValue(e.target.value)}
- pt={{
- root: { className: 'border-primary-400' }
- }}
- />
+ ) => setValue(e.target.value)} />
)
}
@@ -62,17 +44,11 @@ export default function PTDemo() {
<>
- InputText is used as a controlled input with value and onChange properties.
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
- setValue(e.target.value)}
- pt={{
- root: { className: 'border-primary-400' }
- }}
- />
+ setValue(e.target.value)} />
+
setValue(e.target.value)} />
Username
-
+
`,
javascript: `
import React, { useState } from "react";
import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
export default function FloatLabelDemo() {
const [value, setValue] = useState('');
return (
-
+
setValue(e.target.value)} />
Username
-
+
)
}
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
typescript: `
import React, { useState } from "react";
import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
export default function FloatLabelDemo() {
const [value, setValue] = useState('');
return (
-
+
) => setValue(e.target.value)} />
Username
-
+
)
}
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
return (
<>
- A floating label appears on top of the input field when focused.
+
+ A floating label appears on top of the input field when focused. Visit
-
+
setValue(e.target.value)} />
Username
-
+
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('value', e.target.value);
- }}
- className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
-/>
- `,
- javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputText } from "primereact/inputtext";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
- };
-
- const formik = useFormik({
- initialValues: {
- value: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.value) {
- errors.value = 'Name - Surname is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show(data);
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputText } from "primereact/inputtext";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
- };
-
- const formik = useFormik({
- initialValues: {
- value: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.value) {
- errors.value = 'Name - Surname is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show(data);
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
-
- field.onChange(e.target.value)} />
- Name - Surname
-
- {getFormErrorMessage(field.name)}
-
- )}
-/>
-`,
- javascript: `
-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 { InputText } from "primereact/inputtext";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
- };
-
- const defaultValues = {
- value: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-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 { InputText } from "primereact/inputtext";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
- };
-
- const defaultValues = {
- value: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
-
-
-
)
}
@@ -26,7 +26,7 @@ import { InputText } from "primereact/inputtext";
export default function InvalidDemo() {
return (
-
)
}
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
-
setValue(e.target.value)} rows={5} cols={30} />
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function FilledDemo() {
+ const [value, setValue] = useState('');
+
+ return (
+
+ setValue(e.target.value)} rows={5} cols={30} />
+
+ )
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function FilledDemo() {
+ const [value, setValue] = useState('');
+
+ return (
+
+ ) => setValue(e.target.value)} rows={5} cols={30} />
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
+
+ setValue(e.target.value)} rows={5} cols={30} />
+
+
+
setValue(e.target.value)} rows={5} cols={30} />
Username
-
+
`,
javascript: `
import React, { useState } from "react";
import { InputTextarea } from "primereact/inputtextarea";
+import { FloatLabel } from "primereact/floatlabel";
export default function FloatLabelDemo() {
const [value, setValue] = useState('');
return (
-
+
setValue(e.target.value)} rows={5} cols={30} />
Description
-
+
)
}
@@ -33,16 +36,17 @@ export default function FloatLabelDemo() {
typescript: `
import React, { useState } from "react";
import { InputTextarea } from "primereact/inputtextarea";
+import { FloatLabel } from "primereact/floatlabel";
export default function FloatLabelDemo() {
const [value, setValue] = useState('');
return (
-
+
setValue(e.target.value)} rows={5} cols={30} />
Description
-
+
)
}
@@ -52,13 +56,15 @@ export default function FloatLabelDemo() {
return (
<>
- A floating label appears on top of the input field when focused.
+
+ A floating label appears on top of the input field when focused. Visit
-
+
setValue(e.target.value)} rows={5} cols={30} />
Description
-
+
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
-Toast ref={toast} />
- {
- formik.setFieldValue('description', e.target.value);
- }}
-/>
-{getFormErrorMessage('description')}
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { InputTextarea } from 'primereact/inputtextarea';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.description });
- };
-
- const formik = useFormik({
- initialValues: {
- description: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.description) {
- errors.description = 'Description is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
- Description
- {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- 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 { InputTextarea } from "primereact/inputtextarea";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('description') });
- };
-
- const defaultValues = { description: '' };
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
-
- const onSubmit = (data) => {
- data.description && show();
-
- form.reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
-
-
)
}
@@ -26,7 +26,7 @@ import { InputTextarea } from "primereact/inputtextarea";
export default function InvalidDemo() {
return (
-
)
}
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
-
setValue(e.target.value)}
- pt={{
- root: {
- rows: 5,
- cols: 30
- }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { InputTextarea } from "primereact/inputtextarea";
-
-export default function PTDemo() {
- const [value, setValue] = useState('');
-
- return (
-
- setValue(e.target.value)}
- pt={{
- root: {
- rows: 5,
- cols: 30
- }
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { InputTextarea } from "primereact/inputtextarea";
-
-export default function PTDemo() {
- const [value, setValue] = useState('');
-
- return (
-
- ) => setValue(e.target.value)}
- pt={{
- root: {
- rows: 5,
- cols: 30
- }
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setValue(e.target.value)}
- pt={{
- root: {
- rows: 5,
- cols: 30
- }
- }}
- />
-
- {formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- { formik.setFieldValue('item', e.value) }} />
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Knob } from 'primereact/knob';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
- };
-
- const formik = useFormik({
- initialValues: {
- item: '0'
- },
- validate: (data) => {
- let errors = {};
-
- if (data.item === '0') {
- errors.item = 'The value must be greater than zero.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- field.onChange(e.value)} />}
-/>
-{errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { Knob } from 'primereact/knob';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
- };
-
- const defaultValues = {
- value: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
- {/* TO DO: Add demo content. */}
-
-
-
- setValue(e.value)}
- pt={{
- value: { style: { stroke: 'var(--cyan-500)' } }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { Knob } from 'primereact/knob';
-
-export default function PTDemo() {
- const [value, setValue] = useState(0);
-
- return (
-
- setValue(e.value)}
- pt={{
- value: { style: { stroke: 'var(--cyan-500)' } }
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { Knob, KnobChangeEvent } from 'primereact/knob';
-
-export default function PTDemo() {
- const [value, setValue] = useState(0);
-
- return (
-
- setValue(e.value)}
- pt={{
- value: { style: { stroke: 'var(--cyan-500)' } }
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setValue(e.value)}
- pt={{
- value: { style: { stroke: 'var(--cyan-500)' } }
- }}
- />
-
- {formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('item', e.value);
- }}
- style={{ width: '15rem' }}
-/>
- `,
- javascript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ListBox } from 'primereact/listbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function FormikDoc() {
- const toast = useRef(null);
- const cities = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.name });
- };
-
- const formik = useFormik({
- initialValues: {
- item: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item) {
- errors.item = 'City is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.item && show(data);
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function FormikDoc() {
- const toast = useRef(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.name });
- };
-
- const formik = useFormik({
- initialValues: {
- item: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item) {
- errors.item = 'City is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.item && show(data);
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- field.onChange(e.value)} style={{ width: '15rem' }} />}
-/>
- `,
- javascript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { ListBox } from 'primereact/listbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
- const toast = useRef(null);
- const cities = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value.name') });
- };
-
- const defaultValues = {
- value: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { ListBox } from 'primereact/listbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function HookFormDoc() {
- const toast = useRef(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value.name') });
- };
-
- const defaultValues = {
- value: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
- {/* TO DO: Add demo content. */}
-
-
-
-
-
- setSelectedCity(e.value)} options={cities} optionLabel="name"
- className="w-full md:w-14rem p-invalid" />
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ className="w-full md:w-14rem" />
`,
javascript: `
import React, { useState } from "react";
@@ -34,8 +34,8 @@ export default function InvalidDemo() {
return (
- setSelectedCity(e.value)} options={cities} optionLabel="name"
- className="w-full md:w-14rem p-invalid" />
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ className="w-full md:w-14rem" />
)
}
@@ -61,8 +61,8 @@ export default function InvalidDemo() {
return (
- setSelectedCity(e.value)}
- options={cities} optionLabel="name" className="w-full md:w-14rem p-invalid" />
+ setSelectedCity(e.value)}
+ options={cities} optionLabel="name" className="w-full md:w-14rem" />
)
}
@@ -73,11 +73,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
- setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem p-invalid" />
+ setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
setSelectedCity(e.value)}
- options={cities}
- optionLabel="name"
- pt={{
- root: { className: 'w-full md:w-14rem' },
- item: ({ context }) => ({
- className: context.selected ? 'bg-primary' : undefined
- })
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { ListBox } from 'primereact/listbox';
-
-export default function PTDemo() {
- const [selectedCity, setSelectedCity] = useState(null);
- const cities = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- return (
-
- setSelectedCity(e.value)}
- options={cities}
- optionLabel="name"
- pt={{
- root: { className: 'w-full md:w-14rem' },
- item: ({ context }) => ({
- className: context.selected ? 'bg-primary' : undefined
- })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function PTDemo() {
- const [selectedCity, setSelectedCity] = useState(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- return (
-
- setSelectedCity(e.value)}
- options={cities}
- optionLabel="name"
- pt={{
- root: { className: 'w-full md:w-14rem' },
- item: ({ context }) => ({
- className: context.selected ? 'bg-primary' : undefined
- })
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setSelectedCity(e.value)}
- options={cities}
- optionLabel="name"
- pt={{
- root: { className: 'w-full md:w-14rem' },
- item: ({ context }) => ({
- className: context.selected ? 'bg-primary' : undefined
- })
- }}
- />
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
-/>
-`,
- javascript: `
-import React from 'react';
-import { MegaMenu } from 'primereact/megamenu';
-
-export default function PTDemo() {
- const items = [
- {
- label: 'Videos', icon: 'pi pi-fw pi-video',
- items: [
- [
- {
- label: 'Video 1',
- items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
- },
- {
- label: 'Video 2',
- items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
- }
- ],
- [
- {
- label: 'Video 3',
- items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
- },
- {
- label: 'Video 4',
- items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
- }
- ]
- ]
- },
- {
- label: 'Users', icon: 'pi pi-fw pi-users',
- items: [
- [
- {
- label: 'User 1',
- items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
- },
- {
- label: 'User 2',
- items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
- },
- ],
- [
- {
- label: 'User 3',
- items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
- },
- {
- label: 'User 4',
- items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
- }
- ],
- [
- {
- label: 'User 5',
- items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
- },
- {
- label: 'User 6',
- items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
- }
- ]
- ]
- },
- {
- label: 'Events', icon: 'pi pi-fw pi-calendar',
- items: [
- [
- {
- label: 'Event 1',
- items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
- },
- {
- label: 'Event 2',
- items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
- }
- ],
- [
- {
- label: 'Event 3',
- items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
- },
- {
- label: 'Event 4',
- items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
- }
- ]
- ]
- },
- {
- label: 'Settings', icon: 'pi pi-fw pi-cog',
- items: [
- [
- {
- label: 'Setting 1',
- items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
- },
- {
- label: 'Setting 2',
- items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
- },
- {
- label: 'Setting 3',
- items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
- }
- ],
- [
- {
- label: 'Technology 4',
- items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
- }
- ]
- ]
- }
- ];
-
- return (
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { MegaMenu } from 'primereact/megamenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
- const items: MenuItem[] = [
- {
- label: 'Videos', icon: 'pi pi-fw pi-video',
- items: [
- [
- {
- label: 'Video 1',
- items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
- },
- {
- label: 'Video 2',
- items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
- }
- ],
- [
- {
- label: 'Video 3',
- items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
- },
- {
- label: 'Video 4',
- items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
- }
- ]
- ]
- },
- {
- label: 'Users', icon: 'pi pi-fw pi-users',
- items: [
- [
- {
- label: 'User 1',
- items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
- },
- {
- label: 'User 2',
- items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
- },
- ],
- [
- {
- label: 'User 3',
- items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
- },
- {
- label: 'User 4',
- items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
- }
- ],
- [
- {
- label: 'User 5',
- items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
- },
- {
- label: 'User 6',
- items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
- }
- ]
- ]
- },
- {
- label: 'Events', icon: 'pi pi-fw pi-calendar',
- items: [
- [
- {
- label: 'Event 1',
- items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
- },
- {
- label: 'Event 2',
- items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
- }
- ],
- [
- {
- label: 'Event 3',
- items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
- },
- {
- label: 'Event 4',
- items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
- }
- ]
- ]
- },
- {
- label: 'Settings', icon: 'pi pi-fw pi-cog',
- items: [
- [
- {
- label: 'Setting 1',
- items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
- },
- {
- label: 'Setting 2',
- items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
- },
- {
- label: 'Setting 3',
- items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
- }
- ],
- [
- {
- label: 'Technology 4',
- items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
- }
- ]
- ]
- }
- ];
-
- return (
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- />
-
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('item', e.target.value);
- }}
-/>
-{getFormErrorMessage('item')}
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
{formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useRef, useState, useEffect } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { CustomerService } from './service/CustomerService';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-import { Mention } from "primereact/mention";
-
-export default function FormikDoc() {
- const toast = useRef(null);
- const [customers, setCustomers] = useState([]);
- const [suggestions, setSuggestions] = useState([]);
-
- useEffect(() => {
- CustomerService.getCustomersSmall().then((data) => {
- data.forEach((d) => (d['nickname'] = \`$\{d.name.replace(/\s+/g, '').toLowerCase()}_\${d.id}\`));
- setCustomers(data);
- });
- }, []);
-
- const onSearch = (event) => {
- //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
- setTimeout(() => {
- const query = event.query;
- let suggestions;
-
- if (!query.trim().length) {
- suggestions = [...customers];
- } else {
- suggestions = customers.filter((customer) => {
- return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
- });
- }
-
- setSuggestions(suggestions);
- }, 250);
- };
-
- const itemTemplate = (suggestion) => {
- const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
- return (
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
{formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
- {/* TO DO: Add demo content. */}
-
-
-
- {errors[name].message} : ;
- };
-
- useEffect(() => {
- CustomerService.getCustomersSmall().then((data) => {
- data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
- setCustomers(data);
- });
- }, []);
-
- const onSearch = (event) => {
- //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
- setTimeout(() => {
- const query = event.query;
- let suggestions;
-
- if (!query.trim().length) {
- suggestions = [...customers];
- } else {
- suggestions = customers.filter((customer) => {
- return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
- });
- }
-
- setSuggestions(suggestions);
- }, 250);
- };
-
- const itemTemplate = (suggestion) => {
- const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
- return (
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
(
- {errors[name].message} : ;
- };
-
- useEffect(() => {
- CustomerService.getCustomersSmall().then((data) => {
- data.forEach((d) => (d['nickname'] = \`$\{d.name.replace(/\s+/g, '').toLowerCase()}_\${d.id}\`));
- setCustomers(data);
- });
- }, []);
-
- const onSearch = (event) => {
- //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
- setTimeout(() => {
- const query = event.query;
- let suggestions;
-
- if (!query.trim().length) {
- suggestions = [...customers];
- } else {
- suggestions = customers.filter((customer) => {
- return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
- });
- }
-
- setSuggestions(suggestions);
- }, 250);
- };
-
- const itemTemplate = (suggestion) => {
- const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
- return (
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
(null);
- const [customers, setCustomers] = useState([]);
- const [suggestions, setSuggestions] = useState([]);
-
- 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} : ;
- };
-
- useEffect(() => {
- CustomerService.getCustomersSmall().then((data) => {
- data.forEach((d) => (d['nickname'] = \`$\{d.name.replace(/\s+/g, '').toLowerCase()}_\${d.id}\`));
- setCustomers(data);
- });
- }, []);
-
- const onSearch = (event) => {
- //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
- setTimeout(() => {
- const query = event.query;
- let suggestions;
-
- if (!query.trim().length) {
- suggestions = [...customers];
- } else {
- suggestions = customers.filter((customer) => {
- return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
- });
- }
-
- setSuggestions(suggestions);
- }, 250);
- };
-
- const itemTemplate = (suggestion) => {
- const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
- return (
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
setValue(e.target.value)}
- suggestions={suggestions}
- onSearch={onSearch}
- field="nickname"
- placeholder="Enter @ to mention people"
- rows={5}
- cols={40}
- itemTemplate={itemTemplate}
- autoResize
- pt={{
- items: { className: 'bg-orange-400' },
- item: { className: 'font-bold' }
- }}
-/>
- `,
- javascript: `
-import React, { useState, useEffect } from "react";
-import { Mention } from 'primereact/mention';
-import { CustomerService } from './service/CustomerService';
-
-export default function BasicDemo() {
- const [value, setValue] = useState('');
- const [customers, setCustomers] = useState([]);
- const [suggestions, setSuggestions] = useState([]);
-
- useEffect(() => {
- CustomerService.getCustomersSmall().then(data => {
- data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
- setCustomers(data);
- });
- }, [])
-
- const onSearch = (event) => {
- //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
- setTimeout(() => {
- const query = event.query;
- let suggestions;
-
- if (!query.trim().length) {
- suggestions = [...customers];
- }
- else {
- suggestions = customers.filter((customer) => {
- return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
- });
- }
-
- setSuggestions(suggestions);
- }, 250);
- }
-
- const itemTemplate = (suggestion) => {
- const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
- return (
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
- setValue(e.target.value)}
- suggestions={suggestions}
- onSearch={onSearch}
- field="nickname"
- placeholder="Enter @ to mention people"
- rows={5}
- cols={40}
- itemTemplate={itemTemplate}
- autoResize
- pt={{
- items: { className: 'bg-orange-400' },
- item: { className: 'font-bold' }
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState, useEffect } from "react";
-import { Mention, MentionSearchEvent } from 'primereact/mention';
-import { CustomerService } from './service/CustomerService';
-
-export default function BasicDemo() {
- const [value, setValue] = useState('');
- const [customers, setCustomers] = useState([]);
- const [suggestions, setSuggestions] = useState([]);
-
- useEffect(() => {
- CustomerService.getCustomersSmall().then(data => {
- data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
- setCustomers(data);
- });
- }, [])
-
- const onSearch = (event: MentionSearchEvent) => {
- //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
- setTimeout(() => {
- const query = event.query;
- let suggestions;
-
- if (!query.trim().length) {
- suggestions = [...customers];
- }
- else {
- suggestions = customers.filter((customer) => {
- return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
- });
- }
-
- setSuggestions(suggestions);
- }, 250);
- }
-
- const itemTemplate = (suggestion: any) => {
- const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
-
- return (
-
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
-
- ) => setValue(e.target.value)}
- suggestions={suggestions}
- onSearch={onSearch}
- field="nickname"
- placeholder="Enter @ to mention people"
- rows={5}
- cols={40}
- itemTemplate={itemTemplate}
- autoResize
- pt={{
- items: { className: 'bg-orange-400' },
- item: { className: 'font-bold' }
- }}
- />
-
- )
-}
- `,
- data: `
-/* CustomerService */
-{
- id: 1000,
- name: 'James Butt',
- country: {
- name: 'Algeria',
- code: 'dz'
- },
- company: 'Benton, John B Jr',
- date: '2015-09-13',
- status: 'unqualified',
- verified: true,
- activity: 17,
- representative: {
- name: 'Ioni Bowcher',
- image: 'ionibowcher.png'
- },
- balance: 70663
-},
-...
- `
- };
-
- return (
- <>
-
- setValue(e.target.value)}
- suggestions={suggestions}
- onSearch={onSearch}
- field="nickname"
- placeholder="Enter @ to mention people"
- rows={5}
- cols={40}
- itemTemplate={itemTemplate}
- autoResize
- pt={{
- items: { className: 'bg-orange-400' },
- item: { className: 'font-bold' }
- }}
- />
-
-
-
-
-
({
- className: context.active ? 'bg-primary-200 border-round-sm' : undefined
- })
- }}
-/>
-`,
- javascript: `
-import React from 'react';
-import { Menubar } from 'primereact/menubar';
-
-export default function PTDemo() {
- const items = [
- {
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus',
-
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus',
-
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
- }
- ];
-
- return (
-
- ({
- className: context.active ? 'bg-primary-200 border-round-sm' : undefined
- })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Menubar } from 'primereact/menubar';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
- const items: MenuItem[] = [
- {
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus',
-
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus',
-
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
- }
- ];
-
- return (
-
- ({
- className: context.active ? 'bg-primary-200 border-round-sm' : undefined
- })
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- ({
- className: context.active ? 'bg-primary-200 border-round-sm' : undefined
- })
- }}
- />
-
-
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Message } from 'primereact/message';
-
-export default function PTDemo() {
- return (
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useEffect, useRef } from 'react';
-import { useMountEffect } from 'primereact/hooks';
-import { Messages } from 'primereact/messages';
-
-export default function PTDemo() {
- const msgs = useRef(null);
-
- useMountEffect(() => {
- msgs.current && msgs.current.show([
- { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }
- ]);
- });
-
- return (
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- ({
- className: context.active ? 'bg-primary-200 border-round-sm' : undefined
- })
- }}
-/>
-`,
- javascript: `
-import React from 'react';
-import { Menubar } from 'primereact/menubar';
-
-export default function PTDemo() {
- const items = [
- {
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus',
-
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus',
-
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
- }
- ];
-
- return (
-
- ({
- className: context.active ? 'bg-primary-200 border-round-sm' : undefined
- })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Menubar } from 'primereact/menubar';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
- const items: MenuItem[] = [
- {
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus',
-
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus',
-
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
- }
- ];
-
- return (
-
- ({
- className: context.active ? 'bg-primary-200 border-round-sm' : undefined
- })
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- ({
- className: context.active ? 'bg-primary-200 border-round-sm' : undefined
- })
- }}
- />
-
- setSelectedCities(e.value)} options={cities} optionLabel="name"
+ placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function FilledDemo() {
+ const [selectedCities, setSelectedCities] = useState(null);
+ const cities = [
+ { name: 'New York', code: 'NY' },
+ { name: 'Rome', code: 'RM' },
+ { name: 'London', code: 'LDN' },
+ { name: 'Istanbul', code: 'IST' },
+ { name: 'Paris', code: 'PRS' }
+ ];
+
+ return (
+
+ setSelectedCities(e.value)} options={cities} optionLabel="name"
+ placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+
+ );
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface City {
+ name: string;
+ code: string;
+}
+
+export default function FilledDemo() {
+ const [selectedCities, setSelectedCities] = useState(null);
+ const cities: City[] = [
+ { name: 'New York', code: 'NY' },
+ { name: 'Rome', code: 'RM' },
+ { name: 'London', code: 'LDN' },
+ { name: 'Istanbul', code: 'IST' },
+ { name: 'Paris', code: 'PRS' }
+ ];
+
+ return (
+
+ setSelectedCities(e.value)} options={cities} optionLabel="name"
+ placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+
+ );
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
+
+ setSelectedCities(e.value)} showClear={true} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+
+
+
setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
- Select Cities
-
+ MultiSelect
+
`,
javascript: `
import React, { useState } from "react";
import { MultiSelect } from 'primereact/multiselect';
+import { FloatLabel } from 'primereact/floatlabel';
export default function FloatLabelDemo() {
const [selectedCities, setSelectedCities] = useState(null);
@@ -36,10 +39,10 @@ export default function FloatLabelDemo() {
return (
-
+
setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
- Select Cities
-
+ MultiSelect
+
);
}
@@ -47,6 +50,7 @@ export default function FloatLabelDemo() {
typescript: `
import React, { useState } from "react";
import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { FloatLabel } from 'primereact/floatlabel';
interface City {
name: string;
@@ -65,10 +69,10 @@ export default function FloatLabelDemo() {
return (
-
+
setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
- Select Cities
-
+ MultiSelect
+
);
}
@@ -78,13 +82,15 @@ export default function FloatLabelDemo() {
return (
<>
- A floating label appears on top of the input field when focused.
+
+ A floating label appears on top of the input field when focused. Visit
-
+
setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
- Select Cities
-
+ MultiSelect
+
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- { formik.setFieldValue('item', e.value) }} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} />
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function FormikDoc() {
- const toast = useRef(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- const show = () => {
- const itemArray = formik.values.item.map((item, i) => item.name + (i < formik.values.item.length - 1 ? ', ' : ''));
-
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: itemArray });
- };
-
- const formik = useFormik({
- initialValues: {
- item: null
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item) {
- errors.item = 'City is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show();
-
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- field.onChange(e.value)} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} />}
-/>
-{errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useForm, Controller } from 'react-hook-form';
-import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function HookFormDoc() {
- const toast = useRef(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- const show = () => {
- const values = getValues('value');
- const detail = values.map((value, i) => value.name + (i < values.length - 1 ? ', ' : ''));
-
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail });
- };
-
- const defaultValues = {
- value: null
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
- {/* TO DO: Add demo content. */}
-
-
-
-
-
- setSelectedCities(e.value)} options={cities} optionLabel="name"
- placeholder="Select Cities" maxSelectedLabels={3} className="p-invalid w-full md:w-20rem" />
+ setSelectedCities(e.value)} options={cities} optionLabel="name"
+ placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
`,
javascript: `
import React, { useState } from "react";
@@ -34,8 +34,8 @@ export default function InvalidDemo() {
return (
- setSelectedCities(e.value)} options={cities} optionLabel="name"
- placeholder="Select Cities" maxSelectedLabels={3} className="p-invalid w-full md:w-20rem" />
+ setSelectedCities(e.value)} options={cities} optionLabel="name"
+ placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
);
}
@@ -61,8 +61,8 @@ export default function InvalidDemo() {
return (
- setSelectedCities(e.value)} options={cities} optionLabel="name"
- placeholder="Select Cities" maxSelectedLabels={3} className="p-invalid w-full md:w-20rem" />
+ setSelectedCities(e.value)} options={cities} optionLabel="name"
+ placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
);
}
@@ -73,11 +73,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
- setSelectedCities(e.value)} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="p-invalid w-full md:w-20rem" />
+ setSelectedCities(e.value)} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
setSelectedCities(e.value)}
- showClear={true}
- options={cities}
- display="chip"
- optionLabel="name"
- placeholder="Select Cities"
- maxSelectedLabels={3}
- inputId="multiselect"
- pt={{
- root: { className: 'w-full md:w-20rem' },
- item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
- token: ({ context }) => {
- switch (context.value.code) {
- case 'NY':
- return 'bg-red-300';
- case 'RM':
- return 'bg-green-300';
- }
- return 'bg-gray-100';
- }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { MultiSelect } from 'primereact/multiselect';
-
-export default function PTDemo() {
- const [selectedCities, setSelectedCities] = useState(null);
- const cities = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- return (
-
- setSelectedCities(e.value)}
- showClear={true}
- options={cities}
- display="chip"
- optionLabel="name"
- placeholder="Select Cities"
- maxSelectedLabels={3}
- inputId="multiselect"
- pt={{
- root: { className: 'w-full md:w-20rem' },
- item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
- token: ({ context }) => {
- switch (context.value.code) {
- case 'NY':
- return 'bg-red-300';
- case 'RM':
- return 'bg-green-300';
- }
- return 'bg-gray-100';
- }
- }}
- />
-
- );
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
-
-interface City {
- name: string;
- code: string;
-}
-
-export default function PTDemo() {
- const [selectedCities, setSelectedCities] = useState(null);
- const cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- return (
-
- setSelectedCities(e.value)}
- showClear={true}
- options={cities}
- display="chip"
- optionLabel="name"
- placeholder="Select Cities"
- maxSelectedLabels={3}
- inputId="multiselect"
- pt={{
- root: { className: 'w-full md:w-20rem' },
- item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
- token: ({ context }) => {
- switch (context.value.code) {
- case 'NY':
- return 'bg-red-300';
- case 'RM':
- return 'bg-green-300';
- }
- return 'bg-gray-100';
- }
- }}
- />
-
- );
-}
- `
- };
-
- return (
- <>
-
- setSelectedCities(e.value)}
- showClear={true}
- options={cities}
- display="chip"
- optionLabel="name"
- placeholder="Select Cities"
- maxSelectedLabels={3}
- inputId="multiselect"
- pt={{
- root: { className: 'w-full md:w-20rem' },
- item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }),
- token: ({ context }) => {
- switch (context.value.code) {
- case 'NY':
- return 'bg-red-300';
- case 'RM':
- return 'bg-green-300';
- }
-
- return 'bg-gray-100';
- }
- }}
- />
-
- {formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
-Level
- { formik.setFieldValue('item', e.value) }} options={options} optionValue="value" className={classNames({ 'p-invalid': formik.errors.item })} />
-{getFormErrorMessage('item')}
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-interface Item {
- value: string;
- icon: string;
-}
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
- };
-
- const options: Item[] = [
- { value: 'public', icon: 'pi pi-globe' },
- { value: 'protected', icon: 'pi pi-lock-open' },
- { value: 'private', icon: 'pi pi-lock' }
- ];
-
- const formik = useFormik({
- initialValues: {
- item: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item) {
- errors.item = 'Level is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
- Level*
- {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `,
- 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 { MultiStateCheckbox } from "primereact/multistatecheckbox";
-
-interface Item {
- value: string;
- icon: string;
-}
-
-export default function HookFormDoc() {
- const toast = useRef(null);
- const defaultValues = {value: ''};
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
- };
-
- const options: Item[] = [
- { value: 'public', icon: 'pi pi-globe' },
- { value: 'protected', icon: 'pi pi-lock-open' },
- { value: 'private', icon: 'pi pi-lock' }
- ];
-
- const onSubmit = (data: any) => {
- data.value && show();
- form.reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
- setValue(e.value)}
- options={options}
- optionValue="value"
- pt={{
- checkbox: {
- className: value ? 'bg-orange-400 border-orange-400' : undefined
- }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
-
-export default function PTDemo() {
- const [value, setValue] = useState('public');
- const options = [
- { value: 'public', icon: 'pi pi-globe' },
- { value: 'protected', icon: 'pi pi-lock-open' },
- { value: 'private', icon: 'pi pi-lock' }
- ];
-
- return (
-
- setValue(e.value)}
- options={options}
- optionValue="value"
- pt={{
- checkbox: {
- className: value ? 'bg-orange-400 border-orange-400' : undefined
- }
- }}
- />
- {value || 'no value'}
-
- );
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { MultiStateCheckbox, MultiStateCheckboxChangeEvent } from 'primereact/multistatecheckbox';
-
-interface Item {
- value: string;
- icon: string;
-}
-
-export default function PTDemo() {
- const [value, setValue] = useState('public');
- const options: Item[] = [
- { value: 'public', icon: 'pi pi-globe' },
- { value: 'protected', icon: 'pi pi-lock-open' },
- { value: 'private', icon: 'pi pi-lock' }
- ];
-
- return (
-
- setValue(e.value)}
- options={options}
- optionValue="value"
- pt={{
- checkbox: {
- className: value ? 'bg-orange-400 border-orange-400' : undefined
- }
- }}
- />
- {value || 'no value'}
-
- );
-}
- `
- };
-
- return (
- <>
-
- setValue(e.value)}
- options={options}
- optionValue="value"
- pt={{
- checkbox: {
- className: value ? 'bg-orange-400 border-orange-400' : undefined
- }
- }}
- />
- {value || 'no value'}
-
-
-
-
-
{item.name}
-
- {item.category}
-
-
-
${item.price}
-
setProducts(e.value)}
- itemTemplate={itemTemplate}
- header="Products"
- pt={{
- list: { style: { height: 'auto' } },
- moveUpButton: {
- root: { className: 'bg-teal-400 border-teal-400' }
- },
- item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
- }}
->
- `,
- javascript: `
-import React, { useState, useEffect } from 'react';
-import { OrderList } from 'primereact/orderlist';
-import { ProductService } from './service/ProductService';
-
-export default function PTDemo() {
- const [products, setProducts] = useState([]);
-
- useEffect(() => {
- ProductService.getProductsSmall().then((data) => setProducts(data));
- }, []);
-
- const itemTemplate = (item) => {
- return (
-
-
-
-
{item.name}
-
- {item.category}
-
-
-
\${item.price}
-
- setProducts(e.value)}
- itemTemplate={itemTemplate}
- header="Products"
- pt={{
- list: { style: { height: 'auto' } },
- moveUpButton: {
- root: { className: 'bg-teal-400 border-teal-400' }
- },
- item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
- }}
- >
-
- )
-}
- `,
- typescript: `
-import React, { useState, useEffect } from 'react';
-import { OrderList } from 'primereact/orderlist';
-import { ProductService } from './service/ProductService';
-
-interface Product {
- id: string;
- code: string;
- name: string;
- description: string;
- image: string;
- price: number;
- category: string;
- quantity: number;
- inventoryStatus: 'string',
- rating: number;
-}
-
-export default function PTDemo() {
- const [products, setProducts] = useState([]);
-
- useEffect(() => {
- ProductService.getProductsSmall().then((data) => setProducts(data));
- }, []);
-
- const itemTemplate = (item: Product) => {
- return (
-
-
-
-
{item.name}
-
- {item.category}
-
-
-
\${item.price}
-
- setProducts(e.value)}
- itemTemplate={itemTemplate}
- header="Products"
- pt={{
- list: { style: { height: 'auto' } },
- moveUpButton: {
- root: { className: 'bg-teal-400 border-teal-400' }
- },
- item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
- }}
- >
-
- )
-}
- `,
- data: `
-/* ProductService */
-{
- id: '1000',
- code: 'f230fh0g3',
- name: 'Bamboo Watch',
- description: 'Product Description',
- image: 'bamboo-watch.jpg',
- price: 65,
- category: 'Accessories',
- quantity: 24,
- inventoryStatus: 'INSTOCK',
- rating: 5
-},
-...
- `
- };
-
- return (
- <>
-
- setProducts(e.value)}
- itemTemplate={itemTemplate}
- header="Products"
- pt={{
- list: { style: { height: 'auto' } },
- moveUpButton: {
- root: { className: 'bg-teal-400 border-teal-400' }
- },
- item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined })
- }}
- />
-
- setSelection(e.data)}
- pt={{
- node: ({ context }) => ({
- className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm'
- })
- }}
-/>
- `,
- javascript: `
-import React, { useState } from 'react';
-import { OrganizationChart } from 'primereact/organizationchart';
-
-export default function PTDemo() {
- const [selection, setSelection] = useState([]);
- const [data] = useState([
- {
- label: 'Argentina',
- expanded: true,
- children: [
- {
- label: 'Argentina',
- expanded: true,
- children: [
- {
- label: 'Argentina'
- },
- {
- label: 'Croatia'
- }
- ]
- },
- {
- label: 'France',
- expanded: true,
- children: [
- {
- label: 'France'
- },
- {
- label: 'Morocco'
- }
- ]
- }
- ]
- }
- ]);
-
- return (
-
- setSelection(e.data)}
- pt={{
- node: ({ context }) => ({
- className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm'
- })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from 'react';
-import { OrganizationChart } from 'primereact/organizationchart';
-import { TreeNode } from 'primereact/treenode';
-
-export default function PTDemo() {
- const [selection, setSelection] = useState([]);
- const [data] = useState([
- {
- label: 'Argentina',
- expanded: true,
- children: [
- {
- label: 'Argentina',
- expanded: true,
- children: [
- {
- label: 'Argentina'
- },
- {
- label: 'Croatia'
- }
- ]
- },
- {
- label: 'France',
- expanded: true,
- children: [
- {
- label: 'France'
- },
- {
- label: 'Morocco'
- }
- ]
- }
- ]
- }
- ]);
-
- return (
-
- setSelection(e.data)}
- pt={{
- node: ({ context }) => ({
- className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm'
- })
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setSelection(e.data)}
- pt={{
- node: ({ context }) => ({
- className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm'
- })
- }}
- />
-
-
-
- `,
- javascript: `
-import React, { useRef } from 'react';
-import { OverlayPanel } from 'primereact/overlaypanel';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
- const op = useRef(null);
-
- return (
-
-
op.current.toggle(e)} />
-
-
-
-
-
op.current.toggle(e)} />
-
-
-
-
-
op.current.toggle(e)} />
-
-
-
- ({
- className: context.active ? 'bg-primary' : undefined
- })
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { Paginator } from 'primereact/paginator';
-
-export default function PTDemo() {
- const [first, setFirst] = useState(0);
- const [rows, setRows] = useState(10);
-
- const onPageChange = (event) => {
- setFirst(event.first);
- setRows(event.rows);
- };
-
- return (
-
-
({
- className: context.active ? 'bg-primary' : undefined
- })
- }}
- />
- (0);
- const [rows, setRows] = useState(10);
-
- const onPageChange = (event: PaginatorPageChangeEvent) => {
- setFirst(event.first);
- setRows(event.rows);
- };
-
- return (
-
-
({
- className: context.active ? 'bg-primary' : undefined
- })
- }}
- />
-
-
({
- className: context.active ? 'bg-primary' : undefined
- })
- }}
- />
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- `,
- javascript: `
-import React from 'react';
-import { Panel } from 'primereact/panel';
-
-export default function PTDemo() {
- return (
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
({ className: context.active ? 'bg-primary-200' : undefined }),
- action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
- }}
-/>
-`,
- javascript: `
-import React from 'react';
-import { PanelMenu } from 'primereact/panelmenu';
-
-export default function PTDemo() {
- const items = [
- {
- label:'File',
- icon:'pi pi-fw pi-file',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-plus',
- items:[
- {
- label:'Bookmark',
- icon:'pi pi-fw pi-bookmark'
- },
- {
- label:'Video',
- icon:'pi pi-fw pi-video'
- }
- ]
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-trash'
- },
- {
- label:'Export',
- icon:'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Left',
- icon:'pi pi-fw pi-align-left'
- },
- {
- label:'Right',
- icon:'pi pi-fw pi-align-right'
- },
- {
- label:'Center',
- icon:'pi pi-fw pi-align-center'
- },
- {
- label:'Justify',
- icon:'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label:'Users',
- icon:'pi pi-fw pi-user',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-user-plus'
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-user-minus'
- },
- {
- label:'Search',
- icon:'pi pi-fw pi-users',
- items:[
- {
- label:'Filter',
- icon:'pi pi-fw pi-filter',
- items:[
- {
- label:'Print',
- icon:'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon:'pi pi-fw pi-bars',
- label:'List'
- }
- ]
- }
- ]
- },
- {
- label:'Events',
- icon:'pi pi-fw pi-calendar',
- items:[
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Save',
- icon:'pi pi-fw pi-calendar-plus'
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label:'Archive',
- icon:'pi pi-fw pi-calendar-times',
- items:[
- {
- label:'Remove',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- }
- ];
-
- return (
-
-
({ className: context.active ? 'bg-primary-200' : undefined }),
- action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
- }}
- />
-
-
({ className: context.active ? 'bg-primary-200' : undefined }),
- action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
- }}
- />
-
-
({ className: context.active ? 'bg-primary-200' : undefined }),
- action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined })
- }}
- />
- setValue(e.target.value)}
- pt={{
- info: { className: 'font-bold' }
- }}
-/>
+ setValue(e.target.value)} feedback={false} tabIndex={1} />
`,
javascript: `
import React, { useState } from "react";
import { Password } from 'primereact/password';
-export default function PTDemo() {
+export default function FilledDemo() {
const [value, setValue] = useState('');
return (
-
setValue(e.target.value)}
- pt={{
- info: { className: 'font-bold' }
- }}
- />
+ setValue(e.target.value)} feedback={false} tabIndex={1} />
('');
return (
-
) => setValue(e.target.value)}
- pt={{
- info: { className: 'font-bold' }
- }}
- />
+ ) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
-
setValue(e.target.value)}
- pt={{
- info: { className: 'font-bold' }
- }}
- />
+ setValue(e.target.value)} feedback={false} tabIndex={1} />
+
setValue(e.target.value)} />
Password
-
+
`,
javascript: `
import React, { useState } from "react";
import { Password } from 'primereact/password';
+import { FloatLabel } from 'primereact/floatlabel';
export default function FloatLabelDemo() {
const [value, setValue] = useState('');
return (
-
+
setValue(e.target.value)} />
Password
-
+
('');
return (
-
+
) => setValue(e.target.value)} />
Password
-
+
- A floating label appears on top of the input field when focused.
+
+ A floating label appears on top of the input field when focused. Visit
-
+
setValue(e.target.value)} />
Password
-
+
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('value', e.target.value);
- }}
-/>
-{getFormErrorMessage('value')}
-{formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Password } from 'primereact/password';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Toast } from 'primereact/toast';
-
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.value });
- };
-
- const formik = useFormik({
- initialValues: {
- value: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.value) {
- errors.value = 'Password is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
-
- Password
-
- {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `,
- 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 (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
-
-
-
{item.name}
-
- {item.category}
-
-
-
${item.price}
-
({ className: context.selected ? 'bg-blue-100' : undefined })
- }}
-/>
- `,
- javascript: `
-import React, { useState, useEffect } from 'react';
-import { PickList } from 'primereact/picklist';
-import { ProductService } from './service/ProductService';
-
-export default function PTDemo() {
- const [source, setSource] = useState([]);
- const [target, setTarget] = useState([]);
-
- useEffect(() => {
- ProductService.getProductsSmall().then((data) => setSource(data));
- }, []);
-
- const onChange = (event) => {
- setSource(event.source);
- setTarget(event.target);
- };
-
- const itemTemplate = (item) => {
- return (
-
-
-
-
{item.name}
-
- {item.category}
-
-
-
\${item.price}
-
-
({ className: context.selected ? 'bg-blue-100' : undefined })
- }}
- />
- ([]);
- const [target, setTarget] = useState([]);
-
- useEffect(() => {
- ProductService.getProductsSmall().then((data) => setSource(data));
- }, []);
-
- const onChange = (event) => {
- setSource(event.source);
- setTarget(event.target);
- };
-
- const itemTemplate = (item: Product) => {
- return (
-
-
-
-
{item.name}
-
- {item.category}
-
-
-
\${item.price}
-
-
({ className: context.selected ? 'bg-blue-100' : undefined })
- }}
- />
-
-
({ className: context.selected ? 'bg-blue-100' : undefined })
- }}
- />
-
+
+ )
+}
+ `,
+ typescript: `
+import React from 'react';
+import { RadioButton } from "primereact/radiobutton";
+
+export default function FilledDemo() {
+ return (
+
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
+
+
+ {formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
-
- {
- formik.setFieldValue('item', e.value);
- }}
- />
-
- {btn.value}
-
-
- );
-})}
-
-{getFormErrorMessage('item')}
-{formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const radioBtns = [
- {
- id: 'cheese',
- name: 'cheese',
- value: 'Cheese',
- inputId: 'f1'
- },
- {
- id: 'mushroom',
- name: 'mushroom',
- value: 'Mushroom',
- inputId: 'f2'
- },
- {
- id: 'pepper',
- name: 'pepper',
- value: 'Pepper',
- inputId: 'f3'
- },
- {
- id: 'onion',
- name: 'onion',
- value: 'Onion',
- inputId: 'f4'
- }
- ];
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
- };
-
- const formik = useFormik({
- initialValues: {
- item: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item) {
- errors.item = 'Value is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.item && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
- Please choose your ingredient.
-
-
-
- Cheese
-
-
-
- Mushroom
-
-
-
- Pepper
-
-
-
- Onion
-
-
-
{errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value') });
- };
-
- const defaultValues = {
- value: ''
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
-
)
}
@@ -26,7 +26,7 @@ import { RadioButton } from "primereact/radiobutton";
export default function InvalidDemo() {
return (
-
)
}
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
-
setSelectedCategory(e.value)}
- checked={selectedCategory.key === category.key}
- pt={{
- input: {
- className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined
- }
- }}
-/>
- `,
- javascript: `
-import React from 'react';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function PTDemo() {
- const categories = [
- { name: 'Accounting', key: 'A' },
- { name: 'Marketing', key: 'M' },
- { name: 'Production', key: 'P' },
- { name: 'Research', key: 'R' }
- ];
- const [selectedCategory, setSelectedCategory] = useState(categories[1]);
-
-
- return (
-
-
- {categories.map((category) => {
- return (
-
- setSelectedCategory(e.value)}
- checked={selectedCategory.key === category.key}
- pt={{
- input: {
- className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined
- }
- }}
- />
-
- {category.name}
-
-
- );
- })}
-
-
(categories[1]);
-
-
- return (
-
-
- {categories.map((category) => {
- return (
-
- setSelectedCategory(e.value)}
- checked={selectedCategory.key === category.key}
- pt={{
- input: {
- className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined
- }
- }}
- />
-
- {category.name}
-
-
- );
- })}
-
-
-
- {categories.map((category) => {
- return (
-
- setSelectedCategory(e.value)}
- checked={selectedCategory.key === category.key}
- pt={{
- input: {
- className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined
- }
- }}
- />
-
- {category.name}
-
-
- );
- })}
-
-
{errors[name].message} ;
- };
-
- const code = {
- basic: `
- (
- <>
-
-
-
-
- Cheese
-
-
-
-
- Mushroom
-
-
-
-
- Pepper
-
-
-
-
- Onion
-
-
-
-
{errors[name].message}
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-import React, { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { RadioButton } from "primereact/radiobutton";
-
-export default function InvalidDemo() {
- const [formData, setFormData] = useState({});
- const defaultValues = {ingredient: ''};
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
-
- const onSubmit = (data: any) => {
- setFormData(data);
- };
-
- const getFormErrorMessage = (name: string) => {
- return errors[name] && {errors[name].message}
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
- setValue(e.value)}
- pt={{
- onIcon: { className: 'text-orange-400' }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { Rating } from "primereact/rating";
-
-export default function PTDemo() {
- const [value, setValue] = useState(null);
-
- return (
-
- setValue(e.value)}
- pt={{
- onIcon: { className: 'text-orange-400' }
- }}
- />
-
- );
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { Rating, RatingChangeEvent } from "primereact/rating";
-
-export default function PTDemo() {
- const [value, setValue] = useState(null);
-
- return (
-
- setValue(e.value)}
- pt={{
- onIcon: { className: 'text-orange-400' }
- }}
- />
-
- );
-}
- `
- };
-
- return (
- <>
-
- setValue(e.value)}
- pt={{
- onIcon: { className: 'text-orange-400' }
- }}
- />
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
- qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
- `,
- javascript: `
-import React from 'react';
-import { ScrollPanel } from 'primereact/scrollpanel';
-
-export default function PTDemo() {
- return (
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
- qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
- qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
- qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
- adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
- augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
- nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
- viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
- adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
- augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
- nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
- viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
- adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
- augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
- nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
- viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-
-
-
-
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
-
- Engine State
-
- {
- formik.setFieldValue('item', e.value);
- }}
- className={classNames('flex justify-content-center', { 'p-invalid': formik.errors.item })}
-/>
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { SelectButton } from 'primereact/selectbutton';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
- const toast = useRef(null);
- const options = ['Off', 'On'];
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item });
- };
-
- const formik = useFormik({
- initialValues: {
- item: null
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item) {
- errors.item = 'Engine State is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
-
- Engine State
-
- {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { SelectButton } from "primereact/selectbutton";
-import { Toast } from 'primereact/toast';
-
-export default function HookFormDoc() {
- const options = ['Off', 'On'];
- const defaultValues = { value: '' };
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value') });
- };
-
- const onSubmit = (data) => {
- data.value && show();
-
- form.reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
- setValue(e.value)} options={options} className="p-invalid" />
+ setValue(e.value)} options={options} />
`,
javascript: `
import React, { useState } from "react";
@@ -21,7 +21,7 @@ export default function InvalidDemo() {
return (
- setValue(e.value)} options={options} className="p-invalid" />
+ setValue(e.value)} options={options} />
);
}
@@ -36,7 +36,7 @@ export default function InvalidDemo() {
return (
- setValue(e.value)} options={options} className="p-invalid" />
+ setValue(e.value)} options={options} />
);
}
@@ -47,11 +47,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
- setValue(e.value)} options={options} className="p-invalid" />
+ setValue(e.value)} options={options} />
setValue(e.value)}
- options={options}
- pt={{
- button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { SelectButton } from 'primereact/selectbutton';
-
-export default function PTDemo() {
- const options = ['Off', 'On'];
- const [value, setValue] = useState(options[0]);
-
- return (
-
- setValue(e.value)}
- options={options}
- pt={{
- button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
- }}
- />
-
- );
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
-
-export default function PTDemo() {
- const options: string[] = ['Off', 'On'];
- const [value, setValue] = useState(options[0]);
-
- return (
-
- setValue(e.value)}
- options={options}
- pt={{
- button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
- }}
- />
-
- );
-}
- `
- };
-
- return (
- <>
-
- setValue(e.value)}
- options={options}
- pt={{
- button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
- }}
- />
-
- setVisible(false)}
->
- Sidebar
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
- `,
- javascript: `
-import React, { useState } from 'react';
-import { Sidebar } from 'primereact/sidebar';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
- const [visible, setVisible] = useState(false);
-
- return (
-
-
setVisible(false)}
- >
- Sidebar
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
setVisible(true)} />
-
-
setVisible(false)}
- >
- Sidebar
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
setVisible(true)} />
-
-
setVisible(false)}
- >
- Sidebar
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
setVisible(true)} />
-
-
- );
-}
- `,
- typescript: `
-import React from 'react';
-import { Skeleton } from 'primereact/skeleton';
-
-export default function PTDemo() {
- return (
-
-
- );
-}
- `
- };
-
- return (
- <>
-
-
- setFilter(e.value)} options={filterOptions} className="mb-3" />
+ {
+ const newFilterValues = [...filterValues];
+ newFilterValues[filter] = e.value;
+ setFilterValues(newFilterValues);
+ }}
+ className="w-14rem"
+ min={0}
+ max={200}
+/>
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+import { SelectButton } from "primereact/selectbutton";
+
+export default function FilterDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+
+
+
setFilter(e.value)} options={filterOptions} className="mb-3" />
+ {
+ const newFilterValues = [...filterValues];
+ newFilterValues[filter] = e.value;
+ setFilterValues(newFilterValues);
+ }}
+ className="w-14rem"
+ min={0}
+ max={200}
+ />
+
+
(null);
+
+ return (
+
+
+
+
setFilter(e.value)} options={filterOptions} className="mb-3" />
+ {
+ const newFilterValues = [...filterValues];
+ newFilterValues[filter] = e.value;
+ setFilterValues(newFilterValues);
+ }}
+ className="w-14rem"
+ min={0}
+ max={200}
+ />
+
+
+
+ Slider is used as a controlled input with value and onChange properties.
+
+
+
+
+
+
setFilter(e.value)} options={filterOptions} className="mb-3" />
+ {
+ const newFilterValues = [...filterValues];
+ newFilterValues[filter] = e.value;
+ setFilterValues(newFilterValues);
+ }}
+ className="w-14rem"
+ min={0}
+ max={200}
+ />
+
+
setValue(e.value)}
- pt={{
- root: { className: 'w-14rem' },
- handle: { className: 'bg-orange-400 border-900' },
- range: { className: 'bg-orange-400' }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { Slider } from "primereact/slider";
-
-export default function PTDemo() {
- const [value, setValue] = useState(null);
-
- return (
-
- setValue(e.value)}
- pt={{
- root: { className: 'w-14rem' },
- handle: { className: 'bg-orange-400 border-900' },
- range: { className: 'bg-orange-400' }
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { Slider, SliderChangeEvent } from "primereact/slider";
-
-export default function PTDemo() {
- const [value, setValue] = useState(null);
-
- return (
-
- setValue(e.value)}
- pt={{
- root: { className: 'w-14rem' },
- handle: { className: 'bg-orange-400 border-900' },
- range: { className: 'bg-orange-400' }
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- setValue(e.value)}
- pt={{
- root: { className: 'w-14rem' },
- handle: { className: 'bg-orange-400 border-900' },
- range: { className: 'bg-orange-400' }
- }}
- />
-
- ({
- className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible })
- })
- }}
- model={items}
- radius={80}
- direction='down'
-/>
- `,
- javascript: `
-import React, { useRef } from 'react';
-import { SpeedDial } from 'primereact/speeddial';
-
-export default function PTDemo() {
- const items = [
- {
- label: 'Add',
- icon: 'pi pi-pencil'
- },
- {
- label: 'Update',
- icon: 'pi pi-refresh'
- },
- {
- label: 'Delete',
- icon: 'pi pi-trash'
- },
- {
- label: 'React Website',
- icon: 'pi pi-external-link'
- }
- ];
-
- return (
-
-
- ({
- className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible })
- })
- }}
- model={items}
- radius={80}
- direction='down'
-
- />
-
-
-
- ({
- className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible })
- })
- }}
- model={items}
- radius={80}
- direction='down'
-
- />
-
-
-
- ({
- className: classNames('mt-2', { 'border-1 border-primary surface-border border-round surface-ground': state.visible })
- })
- }}
- model={items}
- radius={80}
- direction="down"
- />
-
-
+
+ )
+}
+ `,
+ typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function IconsDemo() {
+ //const router = useRouter();
+ const toast = useRef(null);
+ const items: MenuItem[] = [
+ {
+ label: 'Update',
+ icon: 'pi pi-refresh',
+ command: () => {
+ toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+ }
+ },
+ {
+ label: 'Delete',
+ icon: 'pi pi-times',
+ command: () => {
+ toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+ }
+ },
+ {
+ label: 'React Website',
+ icon: 'pi pi-external-link',
+ command: () => {
+ window.location.href = 'https://reactjs.org/';
+ }
+ },
+ {
+ label: 'Upload',
+ icon: 'pi pi-upload',
+ command: () => {
+ //router.push('/fileupload');
+ }
+ }
+ ];
+
+ const save = () => {
+ toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+ };
+
+ return (
+
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
+
+
+
+
+
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { SplitButton } from 'primereact/splitbutton';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
- const items: MenuItem[] = [
- {
- label: 'Update',
- icon: 'pi pi-refresh'
- },
- {
- label: 'Delete',
- icon: 'pi pi-times'
- },
- {
- label: 'React Website',
- icon: 'pi pi-external-link'
- },
- {
- label: 'Upload',
- icon: 'pi pi-upload'
- }
- ];
-
- return (
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
-
- Panel 1
- Panel 2
-
- `,
- javascript: `
-import React from 'react';
-import { Splitter, SplitterPanel } from 'primereact/tabview';
-
-export default function PTDemo() {
-
- return (
-
-
- Panel 1
- Panel 2
-
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Splitter, SplitterPanel } from 'primereact/tabview';
-
-export default function PTDemo() {
-
- return (
-
-
- Panel 1
- Panel 2
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Panel 1
- Panel 2
-
-
-
+
+ )
+}
+ `,
+ typescript: `
+import React from 'react';
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function LinearDemo() {
+ const items: MenuItem[] = [
+ {
+ label: 'Personal Info'
+ },
+ {
+ label: 'Reservation'
+ },
+ {
+ label: 'Review'
+ }
+ ];
+
+ return (
+
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Steps is linear by default to enforce completion of a previus step to proceed, set readOnly as false for non-linear mode.
+
+
+
+
+
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Steps } from 'primereact/steps';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
- const items: MenuItem[] = [
- {
- label: 'Personal'
- },
- {
- label: 'Seat'
- },
- {
- label: 'Payment'
- },
- {
- label: 'Confirmation'
- }
- ];
-
- return (
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
-
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { TabMenu } from 'primereact/tabmenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
- const items: MenuItem[] = [
- {
- label: 'Personal'
- },
- {
- label: 'Seat'
- },
- {
- label: 'Payment'
- },
- {
- label: 'Confirmation'
- }
- ];
-
- return (
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
-
- {tabs.map((tab, i) => {
- return (
- ({
- className: panelClassName(parent, i)
- })
- }}
- key={i} header={tab.title}>
- {tab.content}
-
- )
- })}
-
- `,
- javascript: `
-import React from 'react';
-import { TabView, TabPanel } from 'primereact/tabview';
-
-export default function PTDemo() {
- const tabs = [
- { title: 'Header 1', content: 'Tab 1 Content' },
- { title: 'Header 2', content: 'Tab 2 Content' },
- { title: 'Header 3', content: 'Tab 3 Content' }
- ];
-
- const panelClassName = (parent, index) => {
- if (parent.state.activeIndex === index)
- return 'bg-primary'
- }
-
- return (
-
-
- {tabs.map((tab, i) => {
- return (
- ({
- className: panelClassName(parent, i)
- })
- }}
- key={i} header={tab.title}>
- {tab.content}
-
- )
- })}
-
-
-
- {tabs.map((tab, i) => {
- return (
- ({
- className: panelClassName(parent, i)
- })
- }}
- key={i} header={tab.title}>
- {tab.content}
-
- )
- })}
-
-
-
- {tabs.map((tab, i) => {
- return (
- ({
- className: panelClassName(parent, i)
- })
- }}
- key={i}
- header={tab.title}
- >
- {tab.content}
-
- );
- })}
-
-
-
- );
-}
- `,
- typescript: `
-import React from 'react';
-import { Tag } from 'primereact/tag';
-
-export default function PTDemo() {
- return (
-
-
- );
-}
- `
- };
-
- return (
- <>
-
-
-
-
- Enter "date " to display the current date, "greet {'{0}'} " for a message, "random " to get a random number and "clear " to clear all commands.
-
-
-
-
- Enter "date " to display the current date, "greet {'{0}'} " for a message, "random " to get a random number and "clear " to clear all commands.
-
-
-
-
- Enter "date " to display the current date, "greet {'{0}'} " for a message, "random " to get a random number and "clear " to clear all commands.
-
-
-
({ className: context.active ? 'bg-primary-200' : undefined })
- }}
-/>
- `,
- javascript: `
-import React from 'react';
-import { TieredMenu } from 'primereact/tieredmenu';
-
-export default function PTDemo() {
- const items = [
- {
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- separator: true
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
- }
- ];
-
- return (
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { TieredMenu } from 'primereact/tieredmenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
- const items: MenuItem[] = [
- {
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- separator: true
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
- }
- ];
-
- return (
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- />
-
- item.status}
- pt={{
- marker: { className: 'border-orange-400' }
- }}
-/>
- `,
- javascript: `
-import React from 'react';
-import { Timeline } from 'primereact/timeline';
-
-export default function PTDemo() {
- const events = [
- { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
- { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
- { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
- { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
- ];
-
- return (
-
- item.status}
- pt={{
- marker: { className: 'border-orange-400' }
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Timeline } from 'primereact/timeline';
-
-interface TimelineEvent {
- status?: string;
- date?: string;
- icon?: string;
- color?: string;
- image?: string;
-}
-
-export default function PTDemo() {
- const events: TimelineEvent[] = [
- { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
- { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
- { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
- { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
- ];
-
- return (
-
- item.status}
- pt={{
- marker: { className: 'border-orange-400' }
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- item.status}
- pt={{
- marker: { className: 'border-orange-400' }
- }}
- />
-
- ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` })
- }}
- />
-
- ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from 'react';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-
-export default function PTDemo() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'info', summary: 'Info', detail: 'Message Content' });
- };
-
- return (
-
- ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` })
- }}
- />
-
- )
-}
- `
- };
-
- return (
- <>
-
- ({ className: `bg-yellow-${((index > 5 && 5) || index || 1) * 100}` })
- }}
- />
-
- setChecked(e.value)} />
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function DisabledDemo() {
+ const [checked, setChecked] = useState(false);
+
+ return (
+
+ setChecked(e.value)} className="w-8rem" />
+
+ );
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function DisabledDemo() {
+ const [checked, setChecked] = useState(false);
+
+ return (
+
+ setChecked(e.value)} className="w-8rem" />
+
+ );
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ When disabled is present, the element cannot be edited and focused.
+
+
+
+ setChecked(e.value)} className="w-8rem" />
+
+ {formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('item', e.value);
- }}
- className={classNames('w-6rem', { 'p-invalid': formik.errors.item })}
-/>
-{getFormErrorMessage('item')}
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from "react";
-import { useFormik } from 'formik';
-import { ToggleButton } from 'primereact/togglebutton';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.toString() });
- };
-
- const formik = useFormik({
- initialValues: {
- item: false
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item) {
- errors.item = 'Checked is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.item && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
-
-
- )}
-/>
- `,
- 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 { ToggleButton } from "primereact/togglebutton";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
- const defaultValues = { value: false };
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value').toString() });
- };
-
- const onSubmit = (data) => {
- data.value && show();
- form.reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `,
- 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 { ToggleButton } from "primereact/togglebutton";
-
-export default function HookFormDoc() {
- const toast = useRef(null);
- const defaultValues = { value: false };
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('value').toString() });
- };
-
- const onSubmit = (data) => {
- data.value && show();
- form.reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
- setChecked(e.value)} />
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function InvalidDemo() {
+ const [checked, setChecked] = useState(false);
+
+ return (
+
+ setChecked(e.value)} className="w-8rem" />
+
+ );
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function InvalidDemo() {
+ const [checked, setChecked] = useState(false);
+
+ return (
+
+ setChecked(e.value)} className="w-8rem" />
+
+ );
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+
+
+
+ setChecked(e.value)} className="w-8rem" />
+
+ setChecked(e.value)}
- pt={{
- root: {
- className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
- }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { ToggleButton } from 'primereact/togglebutton';
-
-export default function PTDemo() {
- const [checked, setChecked] = useState(false);
-
- return (
-
- setChecked(e.value)}
- pt={{
- root: {
- className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
- }
- }}
- />
-
- );
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
-
-export default function PTDemo() {
- const [checked, setChecked] = useState(false);
-
- return (
-
- setChecked(e.value)}
- pt={{
- root: {
- className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
- }
- }}
- />
-
- );
-}
- `
- };
-
- return (
- <>
-
- setChecked(e.value)}
- pt={{
- root: {
- className: `w-8rem ${checked ? 'bg-teal-400 border-white' : ''}`
- }
- }}
- />
-
-
-
- );
-
- const endContent = (
-
-
- );
-
- const code = {
- basic: `
-
-
- );
-
- const endContent = (
-
-
- );
-
- return (
-
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { Toolbar } from 'primereact/toolbar';
-import { Button } from 'primereact/button';
-
-export default function PTDemo() {
- const startContent = (
-
-
- );
-
- const endContent = (
-
-
- );
-
- return (
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
-
-
- );
-}
- `,
- typescript: `
-import React from 'react';
-import { InputText } from 'primereact/inputtext';
-
-export default function PTDemo() {
-
- return (
-
-
- );
-}
- `
- };
-
- return (
- <>
-
-
- ({
- className: context.expanded ? 'bg-blue-100' : 'undefined'
- })
- }}
-/>
- `,
- javascript: `
-import React, { useState, useEffect } from 'react';
-import { Tree } from 'primereact/tree';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
- const [nodes, setNodes] = useState([]);
-
- useEffect(() => {
- NodeService.getTreeNodes().then((data) => setNodes(data));
- }, []);
-
- return (
-
- ({
- className: context.expanded ? 'bg-blue-100' : 'undefined'
- })
- }}
- />
-
- )
-}
- `,
- typescript: `
-import React, { useState, useEffect } from 'react';
-import { Tree } from 'primereact/tree';
-import { TreeNode } from 'primereact/treenode';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
- const [nodes, setNodes] = useState([]);
-
- useEffect(() => {
- NodeService.getTreeNodes().then((data) => setNodes(data));
- }, []);
-
- return (
-
- ({
- className: context.expanded ? 'bg-blue-100' : 'undefined'
- })
- }}
- />
-
- )
-}
- `,
- data: `
-{
- key: '0',
- label: 'Documents',
- data: 'Documents Folder',
- icon: 'pi pi-fw pi-inbox',
- children: [
- {
- key: '0-0',
- label: 'Work',
- data: 'Work Folder',
- icon: 'pi pi-fw pi-cog',
- children: [
- { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
- { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
- ]
- },
- {
- key: '0-1',
- label: 'Home',
- data: 'Home Folder',
- icon: 'pi pi-fw pi-home',
- children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
- }
- ]
-},
-...
-`
- };
-
- return (
- <>
-
- ({
- className: context.expanded ? 'bg-blue-100' : 'undefined'
- })
- }}
- />
-
- setSelectedNodeKey(e.value)}
- options={nodes}
- placeholder="Select Item"
- pt={{
- root: { className: 'w-full md:w-30rem' },
- tree: {
- content: ({ context }) => ({
- className: context.expanded ? 'bg-blue-100' : 'undefined'
- })
- }
- }}
->
+ setSelectedNodeKey(e.value)} options={nodes}
+ className="md:w-20rem w-full" placeholder="Select Item">
`,
javascript: `
import React, { useState, useEffect } from "react";
import { TreeSelect } from 'primereact/treeselect';
import { NodeService } from './service/NodeService';
-export default function PTDemo() {
+export default function FilledDemo() {
const [nodes, setNodes] = useState(null);
const [selectedNodeKey, setSelectedNodeKey] = useState(null);
@@ -44,20 +32,8 @@ export default function PTDemo() {
return (
- setSelectedNodeKey(e.value)}
- options={nodes}
- placeholder="Select Item"
- pt={{
- root: { className: 'w-full md:w-30rem' },
- tree: {
- content: ({ context }) => ({
- className: context.expanded ? 'bg-blue-100' : 'undefined'
- })
- }
- }}
- >
+ setSelectedNodeKey(e.value)} options={nodes}
+ className="md:w-20rem w-full" placeholder="Select Item">
);
}
@@ -68,7 +44,7 @@ import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
import { TreeNode } from 'primereact/treenode';
import { NodeService } from './service/NodeService';
-export default function PTDemo() {
+export default function FilledDemo() {
const [nodes, setNodes] = useState(null);
const [selectedNodeKey, setSelectedNodeKey] = useState(null);
@@ -78,20 +54,8 @@ export default function PTDemo() {
return (
- setSelectedNodeKey(e.value)}
- options={nodes}
- placeholder="Select Item"
- pt={{
- root: { className: 'w-full md:w-30rem' },
- tree: {
- content: ({ context }) => ({
- className: context.expanded ? 'bg-blue-100' : 'undefined'
- })
- }
- }}
- >
+ setSelectedNodeKey(e.value)}
+ className="md:w-20rem w-full" placeholder="Select Item">
);
}
@@ -129,22 +93,13 @@ export default function PTDemo() {
return (
<>
-
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
- setSelectedNodeKey(e.value)}
- options={nodes}
- placeholder="Select Item"
- pt={{
- root: { className: 'w-full md:w-30rem' },
- tree: {
- content: ({ context }) => ({
- className: context.expanded ? 'bg-blue-100' : 'undefined'
- })
- }
- }}
- />
+ setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" />
+
setSelectedNodeKey(e.value)} options={nodes}
className="w-full">
TreeSelect
-
+
`,
javascript: `
import React, { useState, useEffect } from "react";
import { TreeSelect } from 'primereact/treeselect';
+import { FloatLabel } from 'primereact/floatlabel';
import { NodeService } from './service/NodeService';
export default function FloatLabelDemo() {
@@ -35,11 +38,11 @@ export default function FloatLabelDemo() {
return (
-
+
setSelectedNodeKey(e.value)} options={nodes}
className="w-full">
TreeSelect
-
+
);
}
@@ -47,6 +50,7 @@ export default function FloatLabelDemo() {
typescript: `
import React, { useState, useEffect } from "react";
import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { FloatLabel } from 'primereact/floatlabel';
import { TreeNode } from 'primereact/treenode';
import { NodeService } from './service/NodeService';
@@ -60,11 +64,11 @@ export default function FloatLabelDemo() {
return (
-
+
setSelectedNodeKey(e.value)}
className="w-full">
TreeSelect
-
+
);
}
@@ -103,13 +107,15 @@ export default function FloatLabelDemo() {
return (
<>
- A floating label appears on top of the input field when focused.
+
+ A floating label appears on top of the input field when focused. Visit
-
+
setSelectedNodeKey(e.value)} options={nodes} className="w-full" />
TreeSelect
-
+
{formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('item', e.value);
- }}
-/>
-{getFormErrorMessage('item')}
-{formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useState, useEffect, useRef } from "react";
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { TreeSelect, TreeSelectChangeEvent } from "primereact/treeselect";
-import { TreeNode } from 'primereact/treenode';
-import { Toast } from 'primereact/toast';
-import { NodeService } from './service/NodeService';
-
-export default function FormikDoc() {
- const toast = useRef(null);
- const [node, setNodes] = useState([]);
-
- useEffect(() => {
- NodeService.getTreeNodes().then((data) => setNodes(data));
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.'});
- };
-
- const formik = useFormik({
- initialValues: {
- item: ''
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item) {
- errors.item = 'Value is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.item && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
- {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useEffect, useState, useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { TreeSelect } from "primereact/treeselect";
-import { TreeNode } from 'primereact/treenode';
-import { Toast } from 'primereact/toast';
-import { NodeService } from './service/NodeService';
-
-export default function HookFormDoc() {
- const [node, setNodes] = useState([]);
- const defaultValues = { value: null };
- const form = useForm({ defaultValues });
- const errors = form.formState.errors;
- const toast = useRef(null);
-
- useEffect(() => {
- NodeService.getTreeNodes().then((data) => setNodes(data));
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: 'The form is successfully submitted.' });
- };
-
- const onSubmit = (data) => {
- data.value && show();
-
- form.reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- data: `
-/* NodeService */
-{
- key: '0',
- label: 'Documents',
- data: 'Documents Folder',
- icon: 'pi pi-fw pi-inbox',
- children: [
- {
- key: '0-0',
- label: 'Work',
- data: 'Work Folder',
- icon: 'pi pi-fw pi-cog',
- children: [
- { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
- { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
- ]
- },
- {
- key: '0-1',
- label: 'Home',
- data: 'Home Folder',
- icon: 'pi pi-fw pi-home',
- children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
- }
- ]
-},
-...
-`
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
- setSelectedNodeKey(e.value)} options={nodes}
- className="md:w-20rem w-full p-invalid" placeholder="Select Item">
+ setSelectedNodeKey(e.value)} options={nodes}
+ className="md:w-20rem w-full" placeholder="Select Item">
`,
javascript: `
import React, { useState, useEffect } from "react";
@@ -32,8 +32,8 @@ export default function InvalidDemo() {
return (
- setSelectedNodeKey(e.value)} options={nodes}
- className="md:w-20rem w-full p-invalid" placeholder="Select Item">
+ setSelectedNodeKey(e.value)} options={nodes}
+ className="md:w-20rem w-full" placeholder="Select Item">
);
}
@@ -54,8 +54,8 @@ export default function InvalidDemo() {
return (
- setSelectedNodeKey(e.value)}
- className="md:w-20rem w-full p-invalid" placeholder="Select Item">
+ setSelectedNodeKey(e.value)}
+ className="md:w-20rem w-full" placeholder="Select Item">
);
}
@@ -95,11 +95,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
- setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full p-invalid" placeholder="Select Item" />
+ setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" />
-
- `,
- javascript: `
-import React, { useState, useEffect } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from 'primereact/column';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
- const [nodes, setNodes] = useState([]);
-
- useEffect(() => {
- NodeService.getTreeTableNodes().then((data) => setNodes(data));
- }, []);
-
- return (
-
-
-
-
- );
-}
- `,
- typescript: `
-import React, { useState, useEffect } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from 'primereact/column';
-import { TreeNode } from 'primereact/treenode';
-import { NodeService } from './service/NodeService';
-
-export default function PTDemo() {
- const [nodes, setNodes] = useState([]);
-
- useEffect(() => {
- NodeService.getTreeTableNodes().then((data) => setNodes(data));
- }, []);
-
- return (
-
-
-
-
- );
-}
- `,
- data: `
-{
- key: '0',
- label: 'Documents',
- data: 'Documents Folder',
- icon: 'pi pi-fw pi-inbox',
- children: [
- {
- key: '0-0',
- label: 'Work',
- data: 'Work Folder',
- icon: 'pi pi-fw pi-cog',
- children: [
- { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
- { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
- ]
- },
- {
- key: '0-1',
- label: 'Home',
- data: 'Home Folder',
- icon: 'pi pi-fw pi-home',
- children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
- }
- ]
-},
-...
-`
- };
-
- return (
- <>
-
-
-
-
- setValue(e.value)} />
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+
+export default function FilledDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+ setValue(e.value)} />
+
+ );
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+
+export default function FilledDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+ setValue(e.value)} />
+
+ );
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
+
+ setValue(e.value)} />
+
+ {formik.errors[name]} : ;
- };
-
- const code = {
- basic: `
- {
- formik.setFieldValue('item', e.value);
- }}
- className={classNames({ 'p-invalid': formik.errors.item })}
-/>
-* I've read and accept the terms & conditions.
-{getFormErrorMessage('item')}
-{formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `,
- typescript: `
-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 { TriStateCheckbox } from "primereact/tristatecheckbox";
-
-export default function FormikDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item.toString() });
- };
-
- const formik = useFormik({
- initialValues: {
- item: null
- },
- validate: (data) => {
- let errors = {};
-
- if (!data.item || data.item === 'null') {
- errors.item = 'Value is required.';
- }
-
- return errors;
- },
- onSubmit: (data) => {
- data.item && show();
- formik.resetForm();
- }
- });
-
- const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
- const getFormErrorMessage = (name) => {
- return isFormFieldInvalid(name) ? {formik.errors[name]} : ;
- };
-
- return (
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- Formik is a popular library for handling forms in React.
-
-
-
- {errors[name].message} : ;
- };
-
- const code = {
- basic: `
- (
- <>
- * I've read and accept the terms & conditions.
- {getFormErrorMessage(field.name)}
-
- )}
-/>
-{errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `,
- typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { TriStateCheckbox } from "primereact/tristatecheckbox";
-import { classNames } from 'primereact/utils';
-
-export default function HookFormDoc() {
- const toast = useRef(null);
-
- const show = () => {
- toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: getValues('value').toString() });
- };
-
- const defaultValues = {
- value: null
- };
-
- const {
- control,
- formState: { errors },
- handleSubmit,
- getValues,
- reset
- } = useForm({ defaultValues });
-
- const onSubmit = (data) => {
- data.value && show();
-
- reset();
- };
-
- const getFormErrorMessage = (name) => {
- return errors[name] ? {errors[name].message} : ;
- };
-
- return (
-
-
-
- )
-}
- `
- };
-
- return (
- <>
-
-
- React Hook Form is another popular React library to handle forms.
-
-
-
-
-
- setValue(e.value)} className="p-invalid" />
+ setValue(e.value)} />
`,
javascript: `
import React, { useState } from "react";
@@ -19,7 +19,7 @@ export default function InvalidDemo() {
return (
- setValue(e.value)} className="p-invalid" />
+ setValue(e.value)} />
{String(value)}
);
@@ -34,7 +34,7 @@ export default function InvalidDemo() {
return (
- setValue(e.value)} className="p-invalid" />
+ setValue(e.value)} />
{String(value)}
);
@@ -46,11 +46,11 @@ export default function InvalidDemo() {
<>
- Invalid state style is added using the p-invalid class to indicate a failed validation.
+ Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
- setValue(e.value)} className="p-invalid" />
+ setValue(e.value)} />
{String(value)}
setValue(e.value)}
- pt={{
- checkbox: {
- className: value ? 'bg-teal-500 border-white' : undefined
- }
- }}
-/>
- `,
- javascript: `
-import React, { useState } from "react";
-import { TriStateCheckbox } from 'primereact/tristatecheckbox';
-
-export default function PTDemo() {
- const [value, setValue] = useState(null);
-
- return (
-
- setValue(e.value)}
- pt={{
- checkbox: {
- className: value ? 'bg-teal-500 border-white' : undefined
- }
- }}
- />
- {String(value)}
-
- );
-}
- `,
- typescript: `
-import React, { useState } from "react";
-import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
-
-export default function PTDemo() {
- const [value, setValue] = useState(null);
-
- return (
-
- setValue(e.value)}
- pt={{
- checkbox: {
- className: value ? 'bg-teal-500 border-white' : undefined
- }
- }}
- />
- {String(value)}
-
- );
-}
- `
- };
-
- return (
- <>
-
-
- TriStateCheckbox is used as a controlled input with value and onChange properties.
-
-
-
- setValue(e.value)}
- pt={{
- checkbox: {
- className: value ? 'bg-teal-500 border-white' : undefined
- }
- }}
- />
- {String(value)}
-
-
- {item}
-
- );
- };
-
- const code = {
- basic: `
-
- {item}
-
- );
- };
-
- return (
-
-
- );
-}
- `,
- typescript: `
-import React, { useState } from 'react';
-import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import { classNames } from 'primereact/utils';
-
-export default function PTDemo() {
- const [items] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-
- const itemTemplate = (item: string, options: VirtualScrollerTemplateOptions) => {
- const className = classNames('flex align-items-center p-2', {
- 'surface-hover': options.odd
- });
-
- return (
-
- {item}
-
- );
- };
-
- return (
-
-
- );
-}
- `
- };
-
- return (
- <>
-
-
-
+ classNames('p-inputtext p-component', {
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+ }),
dropdownButton: 'p-datepicker-trigger',
buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-button-text',
@@ -262,6 +266,7 @@ export const CalendarBase = ComponentBase.extend({
inputMode: 'none',
inputRef: null,
inputStyle: null,
+ variant: null,
invalid: false,
keepInvalid: false,
locale: null,
diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
index 7084a2811b..278b7fd79d 100644
--- a/components/lib/calendar/calendar.d.ts
+++ b/components/lib/calendar/calendar.d.ts
@@ -575,6 +575,11 @@ interface CalendarBaseProps {
* @defaultValue false
*/
disabled?: boolean | undefined;
+ /**
+ * Specifies the input variant of the component.
+ * @defaultValue outlined
+ */
+ variant?: 'outlined' | 'filled' | undefined;
/**
* Array with dates to disable.
*/
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index 33d70e3ea7..8f6c81f75d 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -471,7 +471,7 @@ export const CascadeSelect = React.memo(
{
id: props.id,
ref: elementRef,
- className: cx('root', { focusedState, overlayVisibleState }),
+ className: cx('root', { focusedState, overlayVisibleState, context }),
style: props.style,
onClick: (e) => onClick(e)
},
diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
index 4ca885aeb2..c5e1ad9c10 100644
--- a/components/lib/cascadeselect/CascadeSelectBase.js
+++ b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -1,14 +1,14 @@
-import PrimeReact from '../api/Api';
import { ComponentBase } from '../componentbase/ComponentBase';
import { classNames } from '../utils/Utils';
const classes = {
- root: ({ props, focusedState, overlayVisibleState }) =>
+ root: ({ props, focusedState, overlayVisibleState, context }) =>
classNames(
'p-cascadeselect p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-invalid': props.invalid,
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-focus': focusedState,
'p-inputwrapper-filled': props.value,
'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -20,11 +20,7 @@ const classes = {
'p-placeholder': label === props.placeholder,
'p-cascadeselect-label-empty': !props.value && label === 'p-emptylabel'
}),
- list: ({ context }) =>
- classNames('p-cascadeselect-panel p-cascadeselect-items', {
- 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
- 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
- }),
+ list: 'p-cascadeselect-panel p-cascadeselect-items',
sublistWrapper: 'p-cascadeselect-sublist-wrapper',
sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
item: ({ option, isGroup, isSelected }) =>
@@ -146,6 +142,7 @@ export const CascadeSelectBase = ComponentBase.extend({
inputId: null,
inputRef: null,
invalid: false,
+ variant: null,
itemTemplate: null,
name: null,
onBeforeHide: null,
diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
index 87187f16e5..7dc3f9d7b0 100644
--- a/components/lib/cascadeselect/cascadeselect.d.ts
+++ b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -237,6 +237,11 @@ export interface CascadeSelectProps extends Omit
+ root: ({ props, checked, context }) =>
classNames('p-checkbox p-component', {
'p-highlight': checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
- 'p-variant-filled': props.variant === 'filled'
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
})
};
@@ -27,6 +27,7 @@ export const CheckboxBase = ComponentBase.extend({
inputId: null,
inputRef: null,
invalid: false,
+ variant: null,
name: null,
onChange: null,
onContextMenu: null,
diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts
index 7e03bfd851..8f6ae37b39 100644
--- a/components/lib/checkbox/checkbox.d.ts
+++ b/components/lib/checkbox/checkbox.d.ts
@@ -145,6 +145,11 @@ export interface CheckboxProps extends Omit onWrapperClick(e),
onKeyDown: (e) => onContainerKeyDown(e),
tabIndex: -1,
diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js
index 948ec98ade..a1783ed506 100644
--- a/components/lib/chips/ChipsBase.js
+++ b/components/lib/chips/ChipsBase.js
@@ -82,7 +82,10 @@ const classes = {
'p-focus': focusedIndex === index
}),
inputToken: 'p-chips-input-token',
- container: ({ isFilled }) => classNames('p-inputtext p-chips-multiple-container', { 'p-variant-filled': isFilled }),
+ container: ({ props, context }) =>
+ classNames('p-inputtext p-chips-multiple-container', {
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+ }),
root: ({ isFilled, focusedState, disabled, invalid }) =>
classNames('p-chips p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
@@ -106,6 +109,7 @@ export const ChipsBase = ComponentBase.extend({
inputId: null,
inputRef: null,
invalid: false,
+ variant: null,
itemTemplate: null,
keyfilter: null,
max: null,
diff --git a/components/lib/chips/chips.d.ts b/components/lib/chips/chips.d.ts
index ec70abb8ea..2fecafbef5 100755
--- a/components/lib/chips/chips.d.ts
+++ b/components/lib/chips/chips.d.ts
@@ -183,6 +183,11 @@ export interface ChipsProps extends Omit onClick(e),
onMouseDown: props.onMouseDown,
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 27369dc56d..257e1f976a 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -3,11 +3,12 @@ import { ComponentBase } from '../componentbase/ComponentBase';
import { ObjectUtils, classNames } from '../utils/Utils';
const classes = {
- root: ({ props, focusedState, overlayVisibleState }) =>
+ root: ({ props, focusedState, overlayVisibleState, context }) =>
classNames('p-dropdown p-component p-inputwrapper', {
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-focus': focusedState,
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-dropdown-clearable': props.showClear && !props.disabled,
'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -32,7 +33,10 @@ const classes = {
filterIcon: 'p-dropdown-filter-icon',
filterClearIcon: 'p-dropdown-filter-clear-icon',
filterContainer: ({ clearIcon }) => classNames('p-dropdown-filter-container', { 'p-dropdown-clearable-filter': !!clearIcon }),
- filterInput: 'p-dropdown-filter p-inputtext p-component',
+ filterInput: ({ props, context }) =>
+ classNames('p-dropdown-filter p-inputtext p-component', {
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+ }),
list: ({ virtualScrollerOptions }) => (virtualScrollerOptions ? 'p-dropdown-items' : 'p-dropdown-items'),
panel: ({ context }) =>
classNames('p-dropdown-panel p-component', {
@@ -184,6 +188,7 @@ export const DropdownBase = ComponentBase.extend({
inputId: null,
inputRef: null,
invalid: false,
+ variant: null,
itemTemplate: null,
loading: false,
loadingIcon: null,
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index 178e85397c..fbf9b416a2 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -230,7 +230,7 @@ export const DropdownPanel = React.memo(
ref: filterInputRef,
type: 'text',
autoComplete: 'off',
- className: cx('filterInput'),
+ className: cx('filterInput', { context }),
placeholder: props.filterPlaceholder,
onKeyDown: props.onFilterInputKeyDown,
onChange: (e) => onFilterInputChange(e),
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index 9283c03ff3..2381f21566 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -272,6 +272,11 @@ export interface DropdownProps extends Omit {
let range;
let begin;
@@ -622,7 +624,7 @@ export const InputMask = React.memo(
}, [isValueUpdated]);
const otherProps = InputMaskBase.getOtherProps(props);
- const className = classNames('p-inputmask', props.className);
+ const className = classNames(props.className, cx('root', { context }));
return (
+ classNames('p-inputmask', {
+ 'p-filled': props.filled,
+ 'p-invalid': props.invalid,
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+ })
+};
export const InputMaskBase = ComponentBase.extend({
defaultProps: {
@@ -10,6 +20,8 @@ export const InputMaskBase = ComponentBase.extend({
id: null,
mask: null,
maxLength: null,
+ invalid: false,
+ variant: null,
name: null,
onBlur: null,
onChange: null,
@@ -28,5 +40,8 @@ export const InputMaskBase = ComponentBase.extend({
unmask: false,
value: null,
children: undefined
+ },
+ css: {
+ classes
}
});
diff --git a/components/lib/inputmask/inputmask.d.ts b/components/lib/inputmask/inputmask.d.ts
index 047461d6de..ae9133b100 100644
--- a/components/lib/inputmask/inputmask.d.ts
+++ b/components/lib/inputmask/inputmask.d.ts
@@ -9,9 +9,9 @@
*/
import * as React from 'react';
import { InputText, InputTextPassThroughOptions, InputTextProps } from '../inputtext';
+import { PassThroughOptions } from '../passthrough';
import { TooltipOptions } from '../tooltip/tooltipoptions';
import { FormEvent } from '../ts-helpers';
-import { PassThroughOptions } from '../passthrough';
/**
* Custom complete event
@@ -66,6 +66,16 @@ export interface InputMaskProps extends Omit
* @defaultValue false
*/
disabled?: boolean | undefined;
+ /**
+ * When present, it specifies that the component should have invalid state style.
+ * @defaultValue false
+ */
+ invalid?: boolean | undefined;
+ /**
+ * Specifies the input variant of the component.
+ * @defaultValue outlined
+ */
+ variant?: 'outlined' | 'filled' | undefined;
/**
* When present, it specifies that an input field is read-only.
* @defaultValue false
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index 60f595358a..53546e2872 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -1099,7 +1099,7 @@ export const InputNumber = React.memo(
}, [props.disabled]);
const createInputElement = () => {
- const className = classNames('p-inputnumber-input', props.inputClassName);
+ const className = classNames(props.inputClassName, cx('input', { context }));
const valueToRender = formattedValue(props.value);
return (
diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js
index b452ee20b5..27a2e4b3f5 100644
--- a/components/lib/inputnumber/InputNumberBase.js
+++ b/components/lib/inputnumber/InputNumberBase.js
@@ -11,6 +11,10 @@ const classes = {
'p-inputnumber-buttons-vertical': vertical,
'p-invalid': props.invalid
}),
+ input: ({ props, context }) =>
+ classNames('p-inputnumber-input', {
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+ }),
buttonGroup: 'p-inputnumber-button-group',
incrementButton: ({ props }) =>
classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
@@ -153,6 +157,7 @@ export const InputNumberBase = ComponentBase.extend({
inputRef: null,
inputStyle: null,
invalid: false,
+ variant: null,
locale: undefined,
localeMatcher: undefined,
max: null,
diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts
index 4d6bff60a4..0038e81c64 100644
--- a/components/lib/inputnumber/inputnumber.d.ts
+++ b/components/lib/inputnumber/inputnumber.d.ts
@@ -237,6 +237,11 @@ export interface InputNumberProps extends Omit
+ root: ({ props, isFilled, context }) =>
classNames(
'p-inputtext p-component',
{
'p-disabled': props.disabled,
'p-filled': isFilled,
- 'p-invalid': props.invalid
+ 'p-invalid': props.invalid,
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
},
+
props.className
)
};
@@ -21,6 +23,7 @@ export const InputTextBase = ComponentBase.extend({
children: undefined,
className: null,
invalid: false,
+ variant: null,
keyfilter: null,
onBeforeInput: null,
onInput: null,
diff --git a/components/lib/inputtext/inputtext.d.ts b/components/lib/inputtext/inputtext.d.ts
index 31cfe8468e..87df9595e3 100644
--- a/components/lib/inputtext/inputtext.d.ts
+++ b/components/lib/inputtext/inputtext.d.ts
@@ -80,6 +80,11 @@ export interface InputTextProps extends Omit
+ root: ({ props, context, isFilled }) =>
classNames(
'p-inputtextarea p-inputtext p-component',
{
'p-disabled': props.disabled,
'p-filled': isFilled,
'p-inputtextarea-resizable': props.autoResize,
- 'p-invalid': props.invalid
+ 'p-invalid': props.invalid,
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
},
props.className
)
@@ -34,6 +35,7 @@ export const InputTextareaBase = ComponentBase.extend({
__parentMetadata: null,
autoResize: false,
invalid: false,
+ variant: null,
keyfilter: null,
onBlur: null,
onFocus: null,
diff --git a/components/lib/inputtextarea/inputtextarea.d.ts b/components/lib/inputtextarea/inputtextarea.d.ts
index d18413a854..3809d2b403 100644
--- a/components/lib/inputtextarea/inputtextarea.d.ts
+++ b/components/lib/inputtextarea/inputtextarea.d.ts
@@ -72,6 +72,11 @@ export interface InputTextareaProps extends Omit
+ root: ({ props, context, focusedState, overlayVisibleState }) =>
classNames('p-multiselect p-component p-inputwrapper', {
'p-multiselect-chip': props.display === 'chip',
'p-disabled': props.disabled,
'p-invalid': props.invalid,
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-multiselect-clearable': props.showClear && !props.disabled,
'p-focus': focusedState,
'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
@@ -233,6 +234,7 @@ export const MultiSelectBase = ComponentBase.extend({
inputId: null,
inputRef: null,
invalid: false,
+ variant: null,
itemCheckboxIcon: null,
itemClassName: null,
itemTemplate: null,
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index f8df62b51c..0f3426c099 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -625,6 +625,11 @@ export interface MultiSelectProps extends Omit
+ root: ({ props, context }) =>
classNames('p-radiobutton p-component', {
'p-highlight': props.checked,
'p-disabled': props.disabled,
- 'p-invalid': props.invalid
+ 'p-invalid': props.invalid,
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
}),
box: 'p-radiobutton-box',
input: 'p-radiobutton-input',
@@ -24,6 +25,7 @@ export const RadioButtonBase = ComponentBase.extend({
inputId: null,
inputRef: null,
invalid: false,
+ variant: null,
name: null,
onChange: null,
onClick: null,
diff --git a/components/lib/radiobutton/radiobutton.d.ts b/components/lib/radiobutton/radiobutton.d.ts
index b2324eccb7..dae336d280 100644
--- a/components/lib/radiobutton/radiobutton.d.ts
+++ b/components/lib/radiobutton/radiobutton.d.ts
@@ -107,6 +107,11 @@ export interface RadioButtonProps extends Omit
+ root: ({ props, focusedState, context, overlayVisibleState, isValueEmpty }) =>
classNames(
'p-treeselect p-component p-inputwrapper',
{
@@ -12,6 +12,7 @@ const classes = {
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-focus': focusedState,
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-inputwrapper-filled': !isValueEmpty,
'p-inputwrapper-focus': focusedState || overlayVisibleState
},
@@ -163,6 +164,7 @@ export const TreeSelectBase = ComponentBase.extend({
inputId: null,
inputRef: null,
invalid: false,
+ variant: null,
metaKeySelection: false,
name: null,
nodeTemplate: null,
diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts
index 9d0c4384a7..b3fb79afbe 100644
--- a/components/lib/treeselect/treeselect.d.ts
+++ b/components/lib/treeselect/treeselect.d.ts
@@ -505,6 +505,11 @@ export interface TreeSelectProps extends Omit
+ root: ({ props, context }) =>
classNames('p-tristatecheckbox p-checkbox p-component', {
'p-highlight': props.value !== null,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
- 'p-variant-filled': props.variant === 'filled'
+ 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
}),
checkIcon: 'p-checkbox-icon p-c',
box: 'p-checkbox-box',
@@ -23,6 +23,7 @@ export const TriStateCheckboxBase = ComponentBase.extend({
disabled: false,
id: null,
invalid: false,
+ variant: null,
onChange: null,
readOnly: false,
style: null,
diff --git a/components/lib/tristatecheckbox/tristatecheckbox.d.ts b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
index 8734451ecf..a4d861f2ad 100644
--- a/components/lib/tristatecheckbox/tristatecheckbox.d.ts
+++ b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
@@ -98,6 +98,11 @@ export interface TriStateCheckboxProps extends Omit {
id: 'pt.accordiontab.options',
label: 'AccordionTab PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js
index 008bdb6404..bc9250a599 100644
--- a/pages/autocomplete/index.js
+++ b/pages/autocomplete/index.js
@@ -2,16 +2,14 @@ import { AccessibilityDoc } from '@/components/doc/autocomplete/accessibilitydoc
import { BasicDoc } from '@/components/doc/autocomplete/basicdoc';
import { DisabledDoc } from '@/components/doc/autocomplete/disableddoc';
import { DropdownDoc } from '@/components/doc/autocomplete/dropdowndoc';
+import { FilledDoc } from '@/components/doc/autocomplete/filleddoc';
import { FloatLabelDoc } from '@/components/doc/autocomplete/floatlabeldoc';
import { ForceSelectionDoc } from '@/components/doc/autocomplete/forceselectiondoc';
-import { FormikDoc } from '@/components/doc/autocomplete/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/autocomplete/form/hookformdoc';
import { GroupDoc } from '@/components/doc/autocomplete/groupdoc';
import { ImportDoc } from '@/components/doc/autocomplete/importdoc';
import { InvalidDoc } from '@/components/doc/autocomplete/invaliddoc';
import { MultipleDoc } from '@/components/doc/autocomplete/multipledoc';
import { ObjectsDoc } from '@/components/doc/autocomplete/objectsdoc';
-import { PTDoc } from '@/components/doc/autocomplete/pt/ptdoc';
import { Wireframe } from '@/components/doc/autocomplete/pt/wireframe';
import { TemplateDoc } from '@/components/doc/autocomplete/templatedoc';
import { StyledDoc } from '@/components/doc/autocomplete/theming/styleddoc';
@@ -72,6 +70,11 @@ const AutoCompleteDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -82,23 +85,6 @@ const AutoCompleteDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
{
id: 'accessibility',
label: 'Accessibility',
@@ -115,11 +101,6 @@ const AutoCompleteDemo = () => {
id: 'pt.autocomplete.options',
label: 'AutoComplete PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/avatar/index.js b/pages/avatar/index.js
index 4edf8c992c..edef08f29e 100644
--- a/pages/avatar/index.js
+++ b/pages/avatar/index.js
@@ -4,7 +4,6 @@ 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 { PTDoc } from '@/components/doc/avatar/pt/ptdoc';
import { Wireframe } from '@/components/doc/avatar/pt/wireframe';
import { StyledDoc } from '@/components/doc/avatar/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/avatar/theming/tailwinddoc';
@@ -60,11 +59,6 @@ const AvatarDemo = () => {
id: 'pt.avatargroup.options',
label: 'AvatarGroup PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/badge/index.js b/pages/badge/index.js
index f48b11bab5..7cb5158ea1 100644
--- a/pages/badge/index.js
+++ b/pages/badge/index.js
@@ -3,7 +3,6 @@ import { BasicDoc } from '@/components/doc/badge/basicdoc';
import { ButtonDoc } from '@/components/doc/badge/buttondoc';
import { ImportDoc } from '@/components/doc/badge/importdoc';
import { PositionDoc } from '@/components/doc/badge/positiondoc';
-import { PTDoc } from '@/components/doc/badge/pt/ptdoc';
import { Wireframe } from '@/components/doc/badge/pt/wireframe';
import { SeverityDoc } from '@/components/doc/badge/severitydoc';
import { SizeDoc } from '@/components/doc/badge/sizedoc';
@@ -62,11 +61,6 @@ const BadgeDemo = () => {
id: 'pt.badge.options',
label: 'Badge PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/blockui/index.js b/pages/blockui/index.js
index 8b94049911..c24cd1e93a 100644
--- a/pages/blockui/index.js
+++ b/pages/blockui/index.js
@@ -2,7 +2,6 @@ import { AccessibilityDoc } from '@/components/doc/blockui/accessibilitydoc';
import { BasicDoc } from '@/components/doc/blockui/basicdoc';
import { DocumentDoc } from '@/components/doc/blockui/documentdoc';
import { ImportDoc } from '@/components/doc/blockui/importdoc';
-import { PTDoc } from '@/components/doc/blockui/pt/ptdoc';
import { Wireframe } from '@/components/doc/blockui/pt/wireframe';
import { TemplateDoc } from '@/components/doc/blockui/templatedoc';
import { StyledDoc } from '@/components/doc/blockui/theming/styleddoc';
@@ -50,11 +49,6 @@ const BlockUIDemo = () => {
id: 'pt.blockui.options',
label: 'BlockUI PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/breadcrumb/index.js b/pages/breadcrumb/index.js
index ef67f4d484..5178eb1f60 100644
--- a/pages/breadcrumb/index.js
+++ b/pages/breadcrumb/index.js
@@ -1,14 +1,13 @@
import { AccessibilityDoc } from '@/components/doc/breadcrumb/accessibilitydoc';
import { BasicDoc } from '@/components/doc/breadcrumb/basicdoc';
import { ImportDoc } from '@/components/doc/breadcrumb/importdoc';
-import { PTDoc } from '@/components/doc/breadcrumb/pt/ptdoc';
import { Wireframe } from '@/components/doc/breadcrumb/pt/wireframe';
+import { RouterDoc } from '@/components/doc/breadcrumb/routerdoc';
import { TemplateDoc } from '@/components/doc/breadcrumb/templatedoc';
import { StyledDoc } from '@/components/doc/breadcrumb/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/breadcrumb/theming/tailwinddoc';
import DocApiTable from '@/components/doc/common/docapitable';
import { DocComponent } from '@/components/doc/common/doccomponent';
-import { RouterDoc } from '@/components/doc/breadcrumb/routerdoc';
const BreadCrumbDemo = () => {
const docs = [
@@ -49,11 +48,6 @@ const BreadCrumbDemo = () => {
id: 'pt.breadcrumb.options',
label: 'BreadCrumb PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/button/index.js b/pages/button/index.js
index b6922ff363..13d49486eb 100644
--- a/pages/button/index.js
+++ b/pages/button/index.js
@@ -9,7 +9,6 @@ import { ImportDoc } from '@/components/doc/button/importdoc';
import { LinkDoc } from '@/components/doc/button/linkdoc';
import { LoadingDoc } from '@/components/doc/button/loadingdoc';
import { OutlinedDoc } from '@/components/doc/button/outlineddoc';
-import { PTDoc } from '@/components/doc/button/pt/ptdoc';
import { Wireframe } from '@/components/doc/button/pt/wireframe';
import { RaisedDoc } from '@/components/doc/button/raiseddoc';
import { RaisedTextDoc } from '@/components/doc/button/raisedtextdoc';
@@ -128,11 +127,6 @@ const ButtonDemo = () => {
id: 'pt.button.options',
label: 'Button PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/calendar/index.js b/pages/calendar/index.js
index 7848d2dca4..37274a3a4b 100644
--- a/pages/calendar/index.js
+++ b/pages/calendar/index.js
@@ -3,9 +3,8 @@ import { BasicDoc } from '@/components/doc/calendar/basicdoc';
import { ButtonBarDoc } from '@/components/doc/calendar/buttonbardoc';
import { DateTemplateDoc } from '@/components/doc/calendar/datetemplatedoc';
import { DisabledDoc } from '@/components/doc/calendar/disableddoc';
+import { FilledDoc } from '@/components/doc/calendar/filleddoc';
import { FloatLabelDoc } from '@/components/doc/calendar/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/calendar/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/calendar/form/hookfromdoc';
import { FormatDoc } from '@/components/doc/calendar/formatdoc';
import { IconDoc } from '@/components/doc/calendar/icondoc';
import { ImportDoc } from '@/components/doc/calendar/importdoc';
@@ -16,7 +15,6 @@ import { MinMaxDoc } from '@/components/doc/calendar/minmaxdoc';
import { MonthPickerDoc } from '@/components/doc/calendar/monthpickerdoc';
import { MultipleDoc } from '@/components/doc/calendar/multipledoc';
import { MultipleMonthsDoc } from '@/components/doc/calendar/multiplemonthsdoc';
-import { PTDoc } from '@/components/doc/calendar/pt/ptdoc';
import { Wireframe } from '@/components/doc/calendar/pt/wireframe';
import { RangeDoc } from '@/components/doc/calendar/rangedoc';
import { StyledDoc } from '@/components/doc/calendar/theming/styleddoc';
@@ -109,6 +107,11 @@ const CalendarDemo = () => {
label: 'Inline',
component: InlineDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'floatlabel',
label: 'Float Label',
@@ -124,24 +127,6 @@ const CalendarDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -158,11 +143,6 @@ const CalendarDemo = () => {
id: 'pt.calendar.options',
label: 'Calendar PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/card/index.js b/pages/card/index.js
index 25ed58e27a..2c8a042a0e 100644
--- a/pages/card/index.js
+++ b/pages/card/index.js
@@ -2,7 +2,6 @@ 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 { PTDoc } from '@/components/doc/card/pt/ptdoc';
import { Wireframe } from '@/components/doc/card/pt/wireframe';
import { StyledDoc } from '@/components/doc/card/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/card/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const CardDemo = () => {
id: 'pt.card.options',
label: 'Card PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/carousel/index.js b/pages/carousel/index.js
index 712c154858..0d182d23d2 100644
--- a/pages/carousel/index.js
+++ b/pages/carousel/index.js
@@ -3,7 +3,6 @@ import { BasicDoc } from '@/components/doc/carousel/basicdoc';
import { CircularDoc } from '@/components/doc/carousel/circulardoc';
import { ImportDoc } from '@/components/doc/carousel/importdoc';
import { NumScrollDoc } from '@/components/doc/carousel/numscrolldoc';
-import { PTDoc } from '@/components/doc/carousel/pt/ptdoc';
import { Wireframe } from '@/components/doc/carousel/pt/wireframe';
import { ResponsiveDoc } from '@/components/doc/carousel/responsivedoc';
import { StyledDoc } from '@/components/doc/carousel/theming/styleddoc';
@@ -61,11 +60,6 @@ const CarouselDemo = () => {
id: 'pt.carousel.options',
label: 'Carousel PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/cascadeselect/index.js b/pages/cascadeselect/index.js
index 4243e98eb4..c2a4a3aa1e 100644
--- a/pages/cascadeselect/index.js
+++ b/pages/cascadeselect/index.js
@@ -1,13 +1,11 @@
import { AccessibilityDoc } from '@/components/doc/cascadeselect/accessibilitydoc';
import { BasicDoc } from '@/components/doc/cascadeselect/basicdoc';
import { DisabledDoc } from '@/components/doc/cascadeselect/disableddoc';
+import { FilledDoc } from '@/components/doc/cascadeselect/filleddoc';
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 { LoadingDoc } from '@/components/doc/cascadeselect/loadingdoc';
-import { PTDoc } from '@/components/doc/cascadeselect/pt/ptdoc';
import { Wireframe } from '@/components/doc/cascadeselect/pt/wireframe';
import { TemplateDoc } from '@/components/doc/cascadeselect/templatedoc';
import { StyledDoc } from '@/components/doc/cascadeselect/theming/styleddoc';
@@ -42,6 +40,11 @@ const CascadeSelectDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -52,24 +55,6 @@ const CascadeSelectDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -86,11 +71,6 @@ const CascadeSelectDemo = () => {
id: 'pt.cascadeselect.options',
label: 'CascadeSelect PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/chart/index.js b/pages/chart/index.js
index 065d5b3e2c..47df34d927 100644
--- a/pages/chart/index.js
+++ b/pages/chart/index.js
@@ -10,7 +10,6 @@ import { LineStylesDoc } from '@/components/doc/chart/linestylesdoc';
import { MultiAxisDoc } from '@/components/doc/chart/multiaxisdoc';
import { PieChartDoc } from '@/components/doc/chart/piechartdoc';
import { PolarAreaDoc } from '@/components/doc/chart/polarareadoc';
-import { PTDoc } from '@/components/doc/chart/pt/ptdoc';
import { Wireframe } from '@/components/doc/chart/pt/wireframe';
import { RadarDoc } from '@/components/doc/chart/radardoc';
import { StackedBarDoc } from '@/components/doc/chart/stackedbardoc';
@@ -108,11 +107,6 @@ const ChartDemo = () => {
id: 'pt.chart.options',
label: 'Chart PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/checkbox/index.js b/pages/checkbox/index.js
index a7378282eb..ef4aedec8e 100644
--- a/pages/checkbox/index.js
+++ b/pages/checkbox/index.js
@@ -2,12 +2,10 @@ import { AccessibilityDoc } from '@/components/doc/checkbox/accessibilitydoc';
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 { FilledDoc } from '@/components/doc/checkbox/filleddoc';
import { GroupDoc } from '@/components/doc/checkbox/groupdoc';
import { ImportDoc } from '@/components/doc/checkbox/importdoc';
import { InvalidDoc } from '@/components/doc/checkbox/invaliddoc';
-import { PTDoc } from '@/components/doc/checkbox/pt/ptdoc';
import { Wireframe } from '@/components/doc/checkbox/pt/wireframe';
import { StyledDoc } from '@/components/doc/checkbox/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/checkbox/theming/tailwinddoc';
@@ -41,29 +39,16 @@ const CheckboxDemo = () => {
label: 'Invalid',
component: InvalidDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -81,11 +66,6 @@ const CheckboxDemo = () => {
id: 'pt.checkbox.options',
label: 'Checkbox PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/chip/index.js b/pages/chip/index.js
index 3cc140893c..dcc07014e6 100644
--- a/pages/chip/index.js
+++ b/pages/chip/index.js
@@ -3,7 +3,6 @@ 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 { PTDoc } from '@/components/doc/chip/pt/ptdoc';
import { Wireframe } from '@/components/doc/chip/pt/wireframe';
import { TemplateDoc } from '@/components/doc/chip/templatedoc';
import { StyledDoc } from '@/components/doc/chip/theming/styleddoc';
@@ -56,11 +55,6 @@ const ChipDemo = () => {
id: 'pt.chip.options',
label: 'Chip PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/chips/index.js b/pages/chips/index.js
index c8b722571b..f8fd2799b0 100644
--- a/pages/chips/index.js
+++ b/pages/chips/index.js
@@ -1,13 +1,11 @@
import { AccessibilityDoc } from '@/components/doc/chips/accessibilitydoc';
import { BasicDoc } from '@/components/doc/chips/basicdoc';
import { DisabledDoc } from '@/components/doc/chips/disableddoc';
+import { FilledDoc } from '@/components/doc/chips/filleddoc';
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 { PTDoc } from '@/components/doc/chips/pt/ptdoc';
import { Wireframe } from '@/components/doc/chips/pt/wireframe';
import { SeparatorDoc } from '@/components/doc/chips/separatordoc';
import { TemplateDoc } from '@/components/doc/chips/templatedoc';
@@ -48,6 +46,11 @@ const ChipsDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -58,24 +61,6 @@ const ChipsDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -92,11 +77,6 @@ const ChipsDemo = () => {
id: 'pt.chips.options',
label: 'Chips PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/colorpicker/index.js b/pages/colorpicker/index.js
index 400bf9d978..c00df6f651 100644
--- a/pages/colorpicker/index.js
+++ b/pages/colorpicker/index.js
@@ -1,12 +1,9 @@
import { AccessibilityDoc } from '@/components/doc/colorpicker/accessibilitydoc';
import { BasicDoc } from '@/components/doc/colorpicker/basicdoc';
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 { PTDoc } from '@/components/doc/colorpicker/pt/ptdoc';
import { Wireframe } from '@/components/doc/colorpicker/pt/wireframe';
import { StyledDoc } from '@/components/doc/colorpicker/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/colorpicker/theming/tailwinddoc';
@@ -40,24 +37,6 @@ const ColorPickerDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -74,11 +53,6 @@ const ColorPickerDemo = () => {
id: 'pt.colorpicker.options',
label: 'ColorPicker PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/confirmdialog/index.js b/pages/confirmdialog/index.js
index cce3c9c8d6..400d8a63be 100644
--- a/pages/confirmdialog/index.js
+++ b/pages/confirmdialog/index.js
@@ -6,7 +6,6 @@ import { DeclarativeDoc } from '@/components/doc/confirmdialog/declarativedoc';
import { HeadlessDoc } from '@/components/doc/confirmdialog/headlessdoc';
import { ImportDoc } from '@/components/doc/confirmdialog/importdoc';
import { PositionDoc } from '@/components/doc/confirmdialog/positiondoc';
-import { PTDoc } from '@/components/doc/confirmdialog/pt/ptdoc';
import { Wireframe } from '@/components/doc/confirmdialog/pt/wireframe';
import { ResponsiveDoc } from '@/components/doc/confirmdialog/responsivedoc';
import { TemplateDoc } from '@/components/doc/confirmdialog/templatedoc';
@@ -68,11 +67,6 @@ const ConfirmDialogDemo = () => {
id: 'pt.confirmdialog.options',
label: 'ConfirmDialog PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/confirmpopup/index.js b/pages/confirmpopup/index.js
index 70d93740d5..33fb476998 100644
--- a/pages/confirmpopup/index.js
+++ b/pages/confirmpopup/index.js
@@ -3,14 +3,13 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/confirmpopup/accessibilitydoc';
import { BasicDoc } from '@/components/doc/confirmpopup/basicdoc';
import { DeclarativeDoc } from '@/components/doc/confirmpopup/declarativedoc';
+import { HeadlessDoc } from '@/components/doc/confirmpopup/headlessdoc';
import { ImportDoc } from '@/components/doc/confirmpopup/importdoc';
-import { PTDoc } from '@/components/doc/confirmpopup/pt/ptdoc';
import { Wireframe } from '@/components/doc/confirmpopup/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/confirmpopup/templatedoc';
import { StyledDoc } from '@/components/doc/confirmpopup/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/confirmpopup/theming/tailwinddoc';
import { ConfirmPopup } from '@/components/lib/confirmpopup/ConfirmPopup';
-import { TemplateDoc } from '@/components/doc/confirmpopup/templatedoc';
-import { HeadlessDoc } from '@/components/doc/confirmpopup/headlessdoc';
const ConfirmPopupDemo = () => {
const docs = [
@@ -56,11 +55,6 @@ const ConfirmPopupDemo = () => {
id: 'pt.confirmpopup.options',
label: 'ConfirmPopup PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/contextmenu/index.js b/pages/contextmenu/index.js
index 0438bde266..bd697e10d8 100644
--- a/pages/contextmenu/index.js
+++ b/pages/contextmenu/index.js
@@ -2,16 +2,15 @@ import DocApiTable from '@/components/doc/common/docapitable';
import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/contextmenu/accessibilitydoc';
import { BasicDoc } from '@/components/doc/contextmenu/basicdoc';
+import { CommandDoc } from '@/components/doc/contextmenu/commanddoc';
+import { DataTableDoc } from '@/components/doc/contextmenu/datatabledoc';
import { DocumentDoc } from '@/components/doc/contextmenu/documentdoc';
import { ImportDoc } from '@/components/doc/contextmenu/importdoc';
-import { PTDoc } from '@/components/doc/contextmenu/pt/ptdoc';
import { Wireframe } from '@/components/doc/contextmenu/pt/wireframe';
-import { StyledDoc } from '@/components/doc/contextmenu/theming/styleddoc';
+import { RouterDoc } from '@/components/doc/contextmenu/routerdoc';
import { TemplateDoc } from '@/components/doc/contextmenu/templatedoc';
+import { StyledDoc } from '@/components/doc/contextmenu/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/contextmenu/theming/tailwinddoc';
-import { CommandDoc } from '@/components/doc/contextmenu/commanddoc';
-import { DataTableDoc } from '@/components/doc/contextmenu/datatabledoc';
-import { RouterDoc } from '@/components/doc/contextmenu/routerdoc';
const ContextMenuDemo = () => {
const docs = [
@@ -66,11 +65,6 @@ const ContextMenuDemo = () => {
id: 'pt.contextmenu.options',
label: 'ContextMenu PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/datascroller/index.js b/pages/datascroller/index.js
index baa0d43e97..6b27828969 100644
--- a/pages/datascroller/index.js
+++ b/pages/datascroller/index.js
@@ -5,7 +5,6 @@ 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 { PTDoc } from '@/components/doc/datascroller/pt/ptdoc';
import { StyledDoc } from '@/components/doc/datascroller/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/datascroller/theming/tailwinddoc';
import { Wireframe } from '@/components/doc/timeline/pt/wireframe';
@@ -49,11 +48,6 @@ const DataScrollerDemo = () => {
id: 'pt.datascroller.options',
label: 'DataScroller PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/datatable/index.js b/pages/datatable/index.js
index 08b74f26ae..2baf0303e5 100644
--- a/pages/datatable/index.js
+++ b/pages/datatable/index.js
@@ -24,7 +24,6 @@ import { ImportDoc } from '@/components/doc/datatable/importdoc';
import { LazyLoadDoc } from '@/components/doc/datatable/lazyloaddoc';
import { PaginatorBasicDoc } from '@/components/doc/datatable/paginator/basicdoc';
import { PaginatorTemplateDoc } from '@/components/doc/datatable/paginator/templatedoc';
-import { PTDoc } from '@/components/doc/datatable/pt/ptdoc';
import { Wireframe } from '@/components/doc/datatable/pt/wireframe';
import { ReorderDoc } from '@/components/doc/datatable/reorderdoc';
import { RowExpansionDoc } from '@/components/doc/datatable/rowexpansiondoc';
@@ -412,11 +411,6 @@ const DataTableDemo = () => {
id: 'pt.row.options',
label: 'Row PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/dataview/index.js b/pages/dataview/index.js
index 5b78814dbb..3b8015aeac 100644
--- a/pages/dataview/index.js
+++ b/pages/dataview/index.js
@@ -6,7 +6,6 @@ import { ImportDoc } from '@/components/doc/dataview/importdoc';
import { LayoutDoc } from '@/components/doc/dataview/layoutdoc';
import { LoadingDoc } from '@/components/doc/dataview/loadingdoc';
import { PaginationDoc } from '@/components/doc/dataview/paginationdoc';
-import { PTDoc } from '@/components/doc/dataview/pt/ptdoc';
import { Wireframe } from '@/components/doc/dataview/pt/wireframe';
import { SortingDoc } from '@/components/doc/dataview/sortingdoc';
import { StyledDoc } from '@/components/doc/dataview/theming/styleddoc';
@@ -66,11 +65,6 @@ const DataViewDemo = () => {
id: 'pt.dataviewlayoutoptions.options',
label: 'DataViewLayoutOptions PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/dialog/index.js b/pages/dialog/index.js
index 0cc2986079..3a094d42f3 100644
--- a/pages/dialog/index.js
+++ b/pages/dialog/index.js
@@ -3,18 +3,17 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/dialog/accessibilitydoc';
import { BasicDoc } from '@/components/doc/dialog/basicdoc';
import { FooterDoc } from '@/components/doc/dialog/footerdoc';
+import { HeadlessDoc } from '@/components/doc/dialog/headlessdoc';
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 { PTDoc } from '@/components/doc/dialog/pt/ptdoc';
import { Wireframe } from '@/components/doc/dialog/pt/wireframe';
import { ResponsiveDoc } from '@/components/doc/dialog/responsivedoc';
+import { TemplateDoc } from '@/components/doc/dialog/templatedoc';
import { StyledDoc } from '@/components/doc/dialog/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/dialog/theming/tailwinddoc';
import { WithoutModalDoc } from '@/components/doc/dialog/withoutmodaldoc';
-import { TemplateDoc } from '@/components/doc/dialog/templatedoc';
-import { HeadlessDoc } from '@/components/doc/dialog/headlessdoc';
const DialogDemo = () => {
const docs = [
@@ -85,11 +84,6 @@ const DialogDemo = () => {
id: 'pt.dialog.options',
label: 'Dialog PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/divider/index.js b/pages/divider/index.js
index 808b0cdb0c..455f98ddc5 100644
--- a/pages/divider/index.js
+++ b/pages/divider/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/divider/basicdoc';
import { ContentDoc } from '@/components/doc/divider/contentdoc';
import { ImportDoc } from '@/components/doc/divider/importdoc';
import { LoginDoc } from '@/components/doc/divider/logindoc';
-import { PTDoc } from '@/components/doc/divider/pt/ptdoc';
import { Wireframe } from '@/components/doc/divider/pt/wireframe';
import { TailwindDoc } from '@/components/doc/divider/theming/tailwinddoc';
import { TypeDoc } from '@/components/doc/divider/typedoc';
@@ -62,11 +61,6 @@ const DividerDemo = () => {
id: 'pt.divider.options',
label: 'Divider PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/dock/index.js b/pages/dock/index.js
index 23f7f27509..b94c2e5d27 100644
--- a/pages/dock/index.js
+++ b/pages/dock/index.js
@@ -4,7 +4,6 @@ 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 { PTDoc } from '@/components/doc/dock/pt/ptdoc';
import { Wireframe } from '@/components/doc/dock/pt/wireframe';
import { StyledDoc } from '@/components/doc/dock/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/dock/theming/tailwinddoc';
@@ -43,11 +42,6 @@ const DockDemo = () => {
id: 'pt.dock.options',
label: 'Dock PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/dropdown/index.js b/pages/dropdown/index.js
index 5511956c08..c310ac725e 100644
--- a/pages/dropdown/index.js
+++ b/pages/dropdown/index.js
@@ -6,16 +6,14 @@ import { CheckmarkDoc } from '@/components/doc/dropdown/checkmarkdoc';
import { ClearIconDoc } from '@/components/doc/dropdown/clearicondoc';
import { DisabledDoc } from '@/components/doc/dropdown/disableddoc';
import { EditableDoc } from '@/components/doc/dropdown/editabledoc';
+import { FilledDoc } from '@/components/doc/dropdown/filleddoc';
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 { GroupDoc } from '@/components/doc/dropdown/groupdoc';
import { ImportDoc } from '@/components/doc/dropdown/importdoc';
import { InvalidDoc } from '@/components/doc/dropdown/invaliddoc';
import { LazyVirtualScrollDoc } from '@/components/doc/dropdown/lazyvirtualscrolldoc';
import { LoadingDoc } from '@/components/doc/dropdown/loadingdoc';
-import { PTDoc } from '@/components/doc/dropdown/pt/ptdoc';
import { Wireframe } from '@/components/doc/dropdown/pt/wireframe';
import { TemplateDoc } from '@/components/doc/dropdown/templatedoc';
import { StyledDoc } from '@/components/doc/dropdown/theming/styleddoc';
@@ -84,6 +82,11 @@ const DropdownDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -94,24 +97,6 @@ const DropdownDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -128,11 +113,6 @@ const DropdownDemo = () => {
id: 'pt.dropdown.options',
label: 'Dropdown PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/editor/index.js b/pages/editor/index.js
index 5f6f93bff0..47b8559524 100644
--- a/pages/editor/index.js
+++ b/pages/editor/index.js
@@ -2,10 +2,7 @@ import DocApiTable from '@/components/doc/common/docapitable';
import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/editor/accessibilitydoc';
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 { PTDoc } from '@/components/doc/editor/pt/ptdoc';
import { Wireframe } from '@/components/doc/editor/pt/wireframe';
import { QuillDoc } from '@/components/doc/editor/quilldoc';
import { ReadOnlyDoc } from '@/components/doc/editor/readonlydoc';
@@ -40,24 +37,6 @@ const EditorDemo = () => {
label: 'Template',
component: TemplateDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -74,11 +53,6 @@ const EditorDemo = () => {
id: 'pt.editor.options',
label: 'Editor PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/fieldset/index.js b/pages/fieldset/index.js
index b06bd7a740..c27260f6d3 100644
--- a/pages/fieldset/index.js
+++ b/pages/fieldset/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/fieldset/accessibilitydoc';
import { BasicDoc } from '@/components/doc/fieldset/basicdoc';
import { ImportDoc } from '@/components/doc/fieldset/importdoc';
-import { PTDoc } from '@/components/doc/fieldset/pt/ptdoc';
import { Wireframe } from '@/components/doc/fieldset/pt/wireframe';
import { TemplateDoc } from '@/components/doc/fieldset/templatedoc';
import { StyledDoc } from '@/components/doc/fieldset/theming/styleddoc';
@@ -50,11 +49,6 @@ const FieldsetDemo = () => {
id: 'pt.fieldset.options',
label: 'Fieldset PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/fileupload/index.js b/pages/fileupload/index.js
index b8d4efce43..887827f6a9 100644
--- a/pages/fileupload/index.js
+++ b/pages/fileupload/index.js
@@ -6,7 +6,6 @@ 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 { PTDoc } from '@/components/doc/fileupload/pt/ptdoc';
import { Wireframe } from '@/components/doc/fileupload/pt/wireframe';
import { TemplateDoc } from '@/components/doc/fileupload/templatedoc';
import { StyledDoc } from '@/components/doc/fileupload/theming/styleddoc';
@@ -61,11 +60,6 @@ const FileUploadDemo = () => {
id: 'pt.fileupload.options',
label: 'FileUpload PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/galleria/index.js b/pages/galleria/index.js
index 8dd08ebaf0..bb5cebdd00 100644
--- a/pages/galleria/index.js
+++ b/pages/galleria/index.js
@@ -18,7 +18,6 @@ import { HoverDoc } from '@/components/doc/galleria/navigator/hoverdoc';
import { IndicatorsDoc } from '@/components/doc/galleria/navigator/indicatorsdoc';
import { ItemThumbnailsDoc } from '@/components/doc/galleria/navigator/itemthumbnailsdoc';
import { ItemWithoutThumbnailsDoc } from '@/components/doc/galleria/navigator/itemwithouthumbnailsdoc';
-import { PTDoc } from '@/components/doc/galleria/pt/ptdoc';
import { Wireframe } from '@/components/doc/galleria/pt/wireframe';
import { ResponsiveDoc } from '@/components/doc/galleria/responsivedoc';
import { StyledDoc } from '@/components/doc/galleria/theming/styleddoc';
@@ -160,11 +159,6 @@ const GalleriaDemo = () => {
id: 'pt.galleria.options',
label: 'Galleria PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/image/index.js b/pages/image/index.js
index e5c44764db..3d2e6ecbb4 100644
--- a/pages/image/index.js
+++ b/pages/image/index.js
@@ -4,7 +4,6 @@ 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 { PTDoc } from '@/components/doc/image/pt/ptdoc';
import { Wireframe } from '@/components/doc/image/pt/wireframe';
import { TemplateDoc } from '@/components/doc/image/templatedoc';
import { StyledDoc } from '@/components/doc/image/theming/styleddoc';
@@ -55,11 +54,6 @@ const ImageDemo = () => {
id: 'pt.image.options',
label: 'Image PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/inplace/index.js b/pages/inplace/index.js
index 207214c2e7..0ab9901d95 100644
--- a/pages/inplace/index.js
+++ b/pages/inplace/index.js
@@ -6,7 +6,6 @@ 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 { PTDoc } from '@/components/doc/inplace/pt/ptdoc';
import { Wireframe } from '@/components/doc/inplace/pt/wireframe';
import { StyledDoc } from '@/components/doc/inplace/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/inplace/theming/tailwinddoc';
@@ -56,11 +55,6 @@ const ChipDemo = () => {
id: 'pt.Inplace.options',
label: 'Inplace PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/inputmask/index.js b/pages/inputmask/index.js
index 241ab09a5e..3725e0c08e 100644
--- a/pages/inputmask/index.js
+++ b/pages/inputmask/index.js
@@ -3,14 +3,12 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/inputmask/accessibilitydoc';
import { BasicDoc } from '@/components/doc/inputmask/basicdoc';
import { DisabledDoc } from '@/components/doc/inputmask/disableddoc';
+import { FilledDoc } from '@/components/doc/inputmask/filleddoc';
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 { PTDoc } from '@/components/doc/inputmask/pt/ptdoc';
import { Wireframe } from '@/components/doc/inputmask/pt/wireframe';
import { SlotCharDoc } from '@/components/doc/inputmask/slotchardoc';
import { StyledDoc } from '@/components/doc/inputmask/theming/styleddoc';
@@ -49,6 +47,11 @@ const InputMaskDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -59,24 +62,6 @@ const InputMaskDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -93,11 +78,6 @@ const InputMaskDemo = () => {
id: 'pt.inputmask.options',
label: 'InputMask PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/inputnumber/index.js b/pages/inputnumber/index.js
index 0a7bf952c4..1a65566b03 100644
--- a/pages/inputnumber/index.js
+++ b/pages/inputnumber/index.js
@@ -4,15 +4,13 @@ import { AccessibilityDoc } from '@/components/doc/inputnumber/accessibilitydoc'
import { ButtonsDoc } from '@/components/doc/inputnumber/buttonsdoc';
import { CurrencyDoc } from '@/components/doc/inputnumber/currencydoc';
import { DisabledDoc } from '@/components/doc/inputnumber/disableddoc';
+import { FilledDoc } from '@/components/doc/inputnumber/filleddoc';
import { FloatLabelDoc } from '@/components/doc/inputnumber/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/inputnumber/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/inputnumber/form/hookformdoc';
import { ImportDoc } from '@/components/doc/inputnumber/importdoc';
import { InvalidDoc } from '@/components/doc/inputnumber/invaliddoc';
import { LocaleDoc } from '@/components/doc/inputnumber/localedoc';
import { NumeralsDoc } from '@/components/doc/inputnumber/numberalsdoc';
import { PrefixSuffixDoc } from '@/components/doc/inputnumber/prefixsuffixdoc';
-import { PTDoc } from '@/components/doc/inputnumber/pt/ptdoc';
import { Wireframe } from '@/components/doc/inputnumber/pt/wireframe';
import { StyledDoc } from '@/components/doc/inputnumber/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/inputnumber/theming/tailwinddoc';
@@ -60,6 +58,11 @@ const InputNumberDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -70,24 +73,6 @@ const InputNumberDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -104,11 +89,6 @@ const InputNumberDemo = () => {
id: 'pt.inputnumber.options',
label: 'InputNumber PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/inputswitch/index.js b/pages/inputswitch/index.js
index b389326232..30704ec00f 100644
--- a/pages/inputswitch/index.js
+++ b/pages/inputswitch/index.js
@@ -3,12 +3,9 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/inputswitch/accessibilitydoc';
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 { PTDoc } from '@/components/doc/inputswitch/pt/ptdoc';
import { Wireframe } from '@/components/doc/inputswitch/pt/wireframe';
import { StyledDoc } from '@/components/doc/inputswitch/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/inputswitch/theming/tailwinddoc';
@@ -40,24 +37,6 @@ const InputSwitchDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -74,11 +53,6 @@ const InputSwitchDemo = () => {
id: 'pt.inputswitch.options',
label: 'InputSwitch PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js
index 3db6315769..1f2aa9e58e 100644
--- a/pages/inputtext/index.js
+++ b/pages/inputtext/index.js
@@ -3,14 +3,12 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/inputtext/accessibilitydoc';
import { BasicDoc } from '@/components/doc/inputtext/basicdoc';
import { DisabledDoc } from '@/components/doc/inputtext/disableddoc';
+import { FilledDoc } from '@/components/doc/inputtext/filleddoc';
import { FloatLabelDoc } from '@/components/doc/inputtext/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/inputtext/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/inputtext/form/hookformdoc';
import { HelpTextDoc } from '@/components/doc/inputtext/helptextdoc';
import { ImportDoc } from '@/components/doc/inputtext/importdoc';
import { InvalidDoc } from '@/components/doc/inputtext/invaliddoc';
import { KeyFilterDoc } from '@/components/doc/inputtext/keyfilterdoc';
-import { PTDoc } from '@/components/doc/inputtext/pt/ptdoc';
import { Wireframe } from '@/components/doc/inputtext/pt/wireframe';
import { SizesDoc } from '@/components/doc/inputtext/sizesdoc';
import { StyledDoc } from '@/components/doc/inputtext/theming/styleddoc';
@@ -48,6 +46,11 @@ const InputTextDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -58,24 +61,6 @@ const InputTextDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -92,11 +77,6 @@ const InputTextDemo = () => {
id: 'pt.inputtext.options',
label: 'InputText PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/inputtextarea/index.js b/pages/inputtextarea/index.js
index ac9efc2834..cbeaa4b085 100644
--- a/pages/inputtextarea/index.js
+++ b/pages/inputtextarea/index.js
@@ -4,13 +4,11 @@ import { AccessibilityDoc } from '@/components/doc/inputtextarea/accessibilitydo
import { AutoResizeDoc } from '@/components/doc/inputtextarea/autoresizedoc';
import { BasicDoc } from '@/components/doc/inputtextarea/basicdoc';
import { DisabledDoc } from '@/components/doc/inputtextarea/disableddoc';
+import { FilledDoc } from '@/components/doc/inputtextarea/filleddoc';
import { FloatLabelDoc } from '@/components/doc/inputtextarea/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/inputtextarea/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/inputtextarea/form/hookformdoc';
import { ImportDoc } from '@/components/doc/inputtextarea/importdoc';
import { InvalidDoc } from '@/components/doc/inputtextarea/invaliddoc';
import { KeyFilterDoc } from '@/components/doc/inputtextarea/keyfilterdoc';
-import { PTDoc } from '@/components/doc/inputtextarea/pt/ptdoc';
import { Wireframe } from '@/components/doc/inputtextarea/pt/wireframe';
import { StyledDoc } from '@/components/doc/inputtextarea/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/inputtextarea/theming/tailwinddoc';
@@ -42,6 +40,11 @@ const InputTextareaDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -52,24 +55,6 @@ const InputTextareaDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -86,11 +71,6 @@ const InputTextareaDemo = () => {
id: 'pt.inputtextarea.options',
label: 'InputTextarea PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/knob/index.js b/pages/knob/index.js
index f4f9ce03d9..75fd4f3a08 100644
--- a/pages/knob/index.js
+++ b/pages/knob/index.js
@@ -4,11 +4,8 @@ import { AccessibilityDoc } from '@/components/doc/knob/accessibilitydoc';
import { BasicDoc } from '@/components/doc/knob/basicdoc';
import { ColorDoc } from '@/components/doc/knob/colordoc';
import { DisabledDoc } from '@/components/doc/knob/disableddoc';
-import { FormikDoc } from '@/components/doc/knob/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/knob/form/hookformdoc';
import { ImportDoc } from '@/components/doc/knob/importdoc';
import { MinMaxDoc } from '@/components/doc/knob/minmaxdoc';
-import { PTDoc } from '@/components/doc/knob/pt/ptdoc';
import { Wireframe } from '@/components/doc/knob/pt/wireframe';
import { ReactiveDoc } from '@/components/doc/knob/reactivedoc';
import { ReadOnlyDoc } from '@/components/doc/knob/readonlydoc';
@@ -76,24 +73,6 @@ const KnobDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -110,11 +89,6 @@ const KnobDemo = () => {
id: 'pt.knob.options',
label: 'Knob PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/listbox/index.js b/pages/listbox/index.js
index ca1e183ce4..041bc60fb4 100644
--- a/pages/listbox/index.js
+++ b/pages/listbox/index.js
@@ -4,13 +4,10 @@ import { AccessibilityDoc } from '@/components/doc/listbox/accessibilitydoc';
import { BasicDoc } from '@/components/doc/listbox/basicdoc';
import { DisabledDoc } from '@/components/doc/listbox/disableddoc';
import { FilterDoc } from '@/components/doc/listbox/filterdoc';
-import { FormikDoc } from '@/components/doc/listbox/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/listbox/form/hookformdoc';
import { GroupDoc } from '@/components/doc/listbox/groupdoc';
import { ImportDoc } from '@/components/doc/listbox/importdoc';
import { InvalidDoc } from '@/components/doc/listbox/invaliddoc';
import { MultipleDoc } from '@/components/doc/listbox/multipledoc';
-import { PTDoc } from '@/components/doc/listbox/pt/ptdoc';
import { Wireframe } from '@/components/doc/listbox/pt/wireframe';
import { TemplateDoc } from '@/components/doc/listbox/templatedoc';
import { StyledDoc } from '@/components/doc/listbox/theming/styleddoc';
@@ -64,24 +61,6 @@ const ListBoxDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -98,11 +77,6 @@ const ListBoxDemo = () => {
id: 'pt.listbox.options',
label: 'Listbox PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/megamenu/index.js b/pages/megamenu/index.js
index b7a0c105fb..7e12fa3f04 100644
--- a/pages/megamenu/index.js
+++ b/pages/megamenu/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/megamenu/accessibilitydoc';
import { BasicDoc } from '@/components/doc/megamenu/basicdoc';
import { CommandDoc } from '@/components/doc/megamenu/commanddoc';
import { ImportDoc } from '@/components/doc/megamenu/importdoc';
-import { PTDoc } from '@/components/doc/megamenu/pt/ptdoc';
import { Wireframe } from '@/components/doc/megamenu/pt/wireframe';
import { RouterDoc } from '@/components/doc/megamenu/routerdoc';
import { TemplateDoc } from '@/components/doc/megamenu/templatedoc';
@@ -60,11 +59,6 @@ const MegaMenuDemo = () => {
id: 'pt.megamenu.options',
label: 'MegaMenu PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/mention/index.js b/pages/mention/index.js
index b5ebd00e9f..3a0b375b6c 100644
--- a/pages/mention/index.js
+++ b/pages/mention/index.js
@@ -5,11 +5,8 @@ import { AutoResizeDoc } from '@/components/doc/mention/autoresizedoc';
import { BasicDoc } from '@/components/doc/mention/basicdoc';
import { DisabledDoc } from '@/components/doc/mention/disableddoc';
import { FloatLabelDoc } from '@/components/doc/mention/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/mention/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/mention/form/hookformdoc';
import { ImportDoc } from '@/components/doc/mention/importdoc';
import { InvalidDoc } from '@/components/doc/mention/invaliddoc';
-import { PTDoc } from '@/components/doc/mention/pt/ptdoc';
import { Wireframe } from '@/components/doc/mention/pt/wireframe';
import { StyledDoc } from '@/components/doc/mention/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/mention/theming/tailwinddoc';
@@ -52,24 +49,6 @@ const MentionDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -86,11 +65,6 @@ const MentionDemo = () => {
id: 'pt.mention.options',
label: 'Mention PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/menu/index.js b/pages/menu/index.js
index 132e0bcaf6..4ba7cafcbd 100644
--- a/pages/menu/index.js
+++ b/pages/menu/index.js
@@ -6,7 +6,6 @@ import { CommandDoc } from '@/components/doc/menu/commanddoc';
import { GroupDoc } from '@/components/doc/menu/groupdoc';
import { ImportDoc } from '@/components/doc/menu/importdoc';
import { PopupDoc } from '@/components/doc/menu/popupdoc';
-import { PTDoc } from '@/components/doc/menu/pt/ptdoc';
import { Wireframe } from '@/components/doc/menu/pt/wireframe';
import { RouterDoc } from '@/components/doc/menu/routerdoc';
import { TemplateDoc } from '@/components/doc/menu/templatedoc';
@@ -66,11 +65,6 @@ const MenuDemo = () => {
id: 'pt.menu.options',
label: 'Menu PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/menubar/index.js b/pages/menubar/index.js
index 2962a6e9e5..50323997cd 100644
--- a/pages/menubar/index.js
+++ b/pages/menubar/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/menubar/accessibilitydoc';
import { BasicDoc } from '@/components/doc/menubar/basicdoc';
import { CommandDoc } from '@/components/doc/menubar/commanddoc';
import { ImportDoc } from '@/components/doc/menubar/importdoc';
-import { PTDoc } from '@/components/doc/menubar/pt/ptdoc';
import { Wireframe } from '@/components/doc/menubar/pt/wireframe';
import { RouterDoc } from '@/components/doc/menubar/routerdoc';
import { TemplateDoc } from '@/components/doc/menubar/templatedoc';
@@ -54,11 +53,6 @@ const MenubarDemo = () => {
id: 'pt.menubar.options',
label: 'Menubar PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/message/index.js b/pages/message/index.js
index 0da117aff1..d69b034d92 100644
--- a/pages/message/index.js
+++ b/pages/message/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/message/accessibilitydoc';
import { BasicDoc } from '@/components/doc/message/basicdoc';
import { ImportDoc } from '@/components/doc/message/importdoc';
-import { PTDoc } from '@/components/doc/message/pt/ptdoc';
import { Wireframe } from '@/components/doc/message/pt/wireframe';
import { SeverityDoc } from '@/components/doc/message/severitydoc';
import { TemplateDoc } from '@/components/doc/message/templatedoc';
@@ -55,11 +54,6 @@ const MessageDemo = () => {
id: 'pt.message.options',
label: 'Message PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/messages/index.js b/pages/messages/index.js
index f44f36c209..5c1f0df665 100644
--- a/pages/messages/index.js
+++ b/pages/messages/index.js
@@ -3,13 +3,12 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/messages/accessibilitydoc';
import { BasicDoc } from '@/components/doc/messages/basicdoc';
import { ClosableDoc } from '@/components/doc/messages/closeabledoc';
+import { CustomIcon } from '@/components/doc/messages/customicon';
import { DynamicDoc } from '@/components/doc/messages/dynamicdoc';
import { ImportDoc } from '@/components/doc/messages/importdoc';
-import { PTDoc } from '@/components/doc/messages/pt/ptdoc';
import { Wireframe } from '@/components/doc/messages/pt/wireframe';
import { SeverityDoc } from '@/components/doc/messages/severitydoc';
import { StickyDoc } from '@/components/doc/messages/stickydoc';
-import { CustomIcon } from '@/components/doc/messages/customicon';
import { TemplateDoc } from '@/components/doc/messages/templatedoc';
import { StyledDoc } from '@/components/doc/messages/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/messages/theming/tailwinddoc';
@@ -72,11 +71,6 @@ const MessagesDemo = () => {
id: 'pt.messages.options',
label: 'Messages PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/multiselect/index.js b/pages/multiselect/index.js
index 3fa67f8004..e69c160e43 100644
--- a/pages/multiselect/index.js
+++ b/pages/multiselect/index.js
@@ -4,15 +4,13 @@ import { AccessibilityDoc } from '@/components/doc/multiselect/accessibilitydoc'
import { BasicDoc } from '@/components/doc/multiselect/basicdoc';
import { ChipsDoc } from '@/components/doc/multiselect/chipsdoc';
import { DisabledDoc } from '@/components/doc/multiselect/disableddoc';
+import { FilledDoc } from '@/components/doc/multiselect/filleddoc';
import { FilterDoc } from '@/components/doc/multiselect/filterdoc';
import { FloatLabelDoc } from '@/components/doc/multiselect/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/multiselect/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/multiselect/form/hookformdoc';
import { GroupDoc } from '@/components/doc/multiselect/groupdoc';
import { ImportDoc } from '@/components/doc/multiselect/importdoc';
import { InvalidDoc } from '@/components/doc/multiselect/invaliddoc';
import { LoadingDoc } from '@/components/doc/multiselect/loadingdoc';
-import { PTDoc } from '@/components/doc/multiselect/pt/ptdoc';
import { Wireframe } from '@/components/doc/multiselect/pt/wireframe';
import { TemplateDoc } from '@/components/doc/multiselect/templatedoc';
import { StyledDoc } from '@/components/doc/multiselect/theming/styleddoc';
@@ -66,6 +64,11 @@ const MultiSelectDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -76,24 +79,6 @@ const MultiSelectDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -110,11 +95,6 @@ const MultiSelectDemo = () => {
id: 'pt.multiselect.options',
label: 'MultiSelect PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/multistatecheckbox/index.js b/pages/multistatecheckbox/index.js
index 0b5cd13c1e..26c9e29b15 100644
--- a/pages/multistatecheckbox/index.js
+++ b/pages/multistatecheckbox/index.js
@@ -3,11 +3,8 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/multistatecheckbox/accessibilitydoc';
import { BasicDoc } from '@/components/doc/multistatecheckbox/basicdoc';
import { DisabledDoc } from '@/components/doc/multistatecheckbox/disableddoc';
-import { FormikDoc } from '@/components/doc/multistatecheckbox/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/multistatecheckbox/form/hookformdoc';
import { ImportDoc } from '@/components/doc/multistatecheckbox/importdoc';
import { InvalidDoc } from '@/components/doc/multistatecheckbox/invaliddoc';
-import { PTDoc } from '@/components/doc/multistatecheckbox/pt/ptdoc';
import { Wireframe } from '@/components/doc/multistatecheckbox/pt/wireframe';
import { StyledDoc } from '@/components/doc/multistatecheckbox/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/multistatecheckbox/theming/tailwinddoc';
@@ -34,24 +31,6 @@ const MultiStateCheckboxDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -68,11 +47,6 @@ const MultiStateCheckboxDemo = () => {
id: 'pt.multistatecheckbox.options',
label: 'MultiStateCheckbox PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/orderlist/index.js b/pages/orderlist/index.js
index 5932cb7369..434f38b04c 100644
--- a/pages/orderlist/index.js
+++ b/pages/orderlist/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/orderlist/basicdoc';
import { DragDropDoc } from '@/components/doc/orderlist/dragdropdoc';
import { FilterDoc } from '@/components/doc/orderlist/filterdoc';
import { ImportDoc } from '@/components/doc/orderlist/importdoc';
-import { PTDoc } from '@/components/doc/orderlist/pt/ptdoc';
import { Wireframe } from '@/components/doc/orderlist/pt/wireframe';
import { StyledDoc } from '@/components/doc/orderlist/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/orderlist/theming/tailwinddoc';
@@ -49,11 +48,6 @@ const OrderListDemo = () => {
id: 'pt.orderlist.options',
label: 'OrderList PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
const themingDocs = [
diff --git a/pages/organizationchart/index.js b/pages/organizationchart/index.js
index bad4f4f06e..9d41de7bc6 100644
--- a/pages/organizationchart/index.js
+++ b/pages/organizationchart/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/organizationchart/accessibili
import { BasicDoc } from '@/components/doc/organizationchart/basicdoc';
import { ColoredDoc } from '@/components/doc/organizationchart/coloreddoc';
import { ImportDoc } from '@/components/doc/organizationchart/importdoc';
-import { PTDoc } from '@/components/doc/organizationchart/pt/ptdoc';
import { Wireframe } from '@/components/doc/organizationchart/pt/wireframe';
import { SelectionDoc } from '@/components/doc/organizationchart/selectiondoc';
import { TemplateDoc } from '@/components/doc/organizationchart/templatedoc';
@@ -55,11 +54,6 @@ const OrganizationChartDemo = () => {
id: 'pt.organizationchart.options',
label: 'OrganizationChart PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/overlaypanel/index.js b/pages/overlaypanel/index.js
index 38b45c0103..21fddd7259 100644
--- a/pages/overlaypanel/index.js
+++ b/pages/overlaypanel/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/overlaypanel/accessibilitydoc
import { BasicDoc } from '@/components/doc/overlaypanel/basicdoc';
import { DataTableDoc } from '@/components/doc/overlaypanel/datatabledoc';
import { ImportDoc } from '@/components/doc/overlaypanel/importdoc';
-import { PTDoc } from '@/components/doc/overlaypanel/pt/ptdoc';
import { Wireframe } from '@/components/doc/overlaypanel/pt/wireframe';
import { StyledDoc } from '@/components/doc/overlaypanel/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/overlaypanel/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const OverlayPanelDemo = () => {
id: 'pt.overlaypanel.options',
label: 'OverlayPanel PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/paginator/index.js b/pages/paginator/index.js
index 8cfbaa3141..4218653db7 100644
--- a/pages/paginator/index.js
+++ b/pages/paginator/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/paginator/basicdoc';
import { ImagesDoc } from '@/components/doc/paginator/imagesdoc';
import { ImportDoc } from '@/components/doc/paginator/importdoc';
import { LayoutDoc } from '@/components/doc/paginator/layoutdoc';
-import { PTDoc } from '@/components/doc/paginator/pt/ptdoc';
import { Wireframe } from '@/components/doc/paginator/pt/wireframe';
import { TemplateDoc } from '@/components/doc/paginator/templatedoc';
import { StyledDoc } from '@/components/doc/paginator/theming/styleddoc';
@@ -55,11 +54,6 @@ const PaginatorDemo = () => {
id: 'pt.paginator.options',
label: 'Paginator PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/panel/index.js b/pages/panel/index.js
index 141ae2883a..8685e06a64 100644
--- a/pages/panel/index.js
+++ b/pages/panel/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/panel/accessibilitydoc';
import { BasicDoc } from '@/components/doc/panel/basicdoc';
import { ImportDoc } from '@/components/doc/panel/importdoc';
-import { PTDoc } from '@/components/doc/panel/pt/ptdoc';
import { Wireframe } from '@/components/doc/panel/pt/wireframe';
import { TemplateDoc } from '@/components/doc/panel/templatedoc';
import { StyledDoc } from '@/components/doc/panel/theming/styleddoc';
@@ -50,11 +49,6 @@ const PanelDemo = () => {
id: 'pt.panel.options',
label: 'Panel PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/panelmenu/index.js b/pages/panelmenu/index.js
index 1b2a09a9d3..a7b169c0ba 100644
--- a/pages/panelmenu/index.js
+++ b/pages/panelmenu/index.js
@@ -6,7 +6,6 @@ import { CommandDoc } from '@/components/doc/panelmenu/commanddoc';
import { ControlledDoc } from '@/components/doc/panelmenu/controlleddoc';
import { ImportDoc } from '@/components/doc/panelmenu/importdoc';
import { MultipleDoc } from '@/components/doc/panelmenu/multipledoc';
-import { PTDoc } from '@/components/doc/panelmenu/pt/ptdoc';
import { Wireframe } from '@/components/doc/panelmenu/pt/wireframe';
import { RouterDoc } from '@/components/doc/panelmenu/routerdoc';
import { TemplateDoc } from '@/components/doc/panelmenu/templatedoc';
@@ -66,11 +65,6 @@ const PanelMenuDemo = () => {
id: 'pt.panelmenu.options',
label: 'PanelMenu PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/password/index.js b/pages/password/index.js
index 7762c533d3..eba85cb655 100644
--- a/pages/password/index.js
+++ b/pages/password/index.js
@@ -3,14 +3,12 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/password/accessibilitydoc';
import { BasicDoc } from '@/components/doc/password/basicdoc';
import { DisabledDoc } from '@/components/doc/password/disableddoc';
+import { FilledDoc } from '@/components/doc/password/filleddoc';
import { FloatLabelDoc } from '@/components/doc/password/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/password/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/password/form/hookformdoc';
import { ImportDoc } from '@/components/doc/password/importdoc';
import { InvalidDoc } from '@/components/doc/password/invaliddoc';
import { LocaleDoc } from '@/components/doc/password/localedoc';
import { MeterDoc } from '@/components/doc/password/meterdoc';
-import { PTDoc } from '@/components/doc/password/pt/ptdoc';
import { Wireframe } from '@/components/doc/password/pt/wireframe';
import { TemplateDoc } from '@/components/doc/password/templatedoc';
import { StyledDoc } from '@/components/doc/password/theming/styleddoc';
@@ -54,6 +52,11 @@ const PasswordDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -64,24 +67,6 @@ const PasswordDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -98,11 +83,6 @@ const PasswordDemo = () => {
id: 'pt.password.options',
label: 'Password PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/picklist/index.js b/pages/picklist/index.js
index 2364e299ba..4aacc22421 100644
--- a/pages/picklist/index.js
+++ b/pages/picklist/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/picklist/accessibilitydoc';
import { BasicDoc } from '@/components/doc/picklist/basicdoc';
import { FilterDoc } from '@/components/doc/picklist/filterdoc';
import { ImportDoc } from '@/components/doc/picklist/importdoc';
-import { PTDoc } from '@/components/doc/picklist/pt/ptdoc';
import { Wireframe } from '@/components/doc/picklist/pt/wireframe';
import { StyledDoc } from '@/components/doc/picklist/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/picklist/theming/tailwinddoc';
@@ -43,11 +42,6 @@ const PickListDemo = () => {
id: 'pt.picklist.options',
label: 'PickList PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/progressbar/index.js b/pages/progressbar/index.js
index 64c6856343..120623105a 100644
--- a/pages/progressbar/index.js
+++ b/pages/progressbar/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/progressbar/basicdoc';
import { DynamicDoc } from '@/components/doc/progressbar/dynamicdoc';
import { ImportDoc } from '@/components/doc/progressbar/importdoc';
import { IndeterminateDoc } from '@/components/doc/progressbar/indeterminatedoc';
-import { PTDoc } from '@/components/doc/progressbar/pt/ptdoc';
import { Wireframe } from '@/components/doc/progressbar/pt/wireframe';
import { TemplateDoc } from '@/components/doc/progressbar/templatedoc';
import { StyledDoc } from '@/components/doc/progressbar/theming/styleddoc';
@@ -56,11 +55,6 @@ const ProgressBarDemo = () => {
id: 'pt.progressbar.options',
label: 'ProgressBar PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/progressspinner/index.js b/pages/progressspinner/index.js
index 5c05b655c4..e9e4edcf35 100644
--- a/pages/progressspinner/index.js
+++ b/pages/progressspinner/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/progressspinner/accessibility
import { BasicDoc } from '@/components/doc/progressspinner/basicdoc';
import { CustomDoc } from '@/components/doc/progressspinner/customdoc';
import { ImportDoc } from '@/components/doc/progressspinner/importdoc';
-import { PTDoc } from '@/components/doc/progressspinner/pt/ptdoc';
import { Wireframe } from '@/components/doc/progressspinner/pt/wireframe';
import { StyledDoc } from '@/components/doc/progressspinner/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/progressspinner/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const SkeletonDemo = () => {
id: 'pt.progressspinner.options',
label: 'ProgressSpinner PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/radiobutton/index.js b/pages/radiobutton/index.js
index 854703c289..83a8ff6f48 100644
--- a/pages/radiobutton/index.js
+++ b/pages/radiobutton/index.js
@@ -3,12 +3,10 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/radiobutton/accessibilitydoc';
import { DisabledDoc } from '@/components/doc/radiobutton/disableddoc';
import { DynamicDoc } from '@/components/doc/radiobutton/dynamicdoc';
-import { FormikDoc } from '@/components/doc/radiobutton/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/radiobutton/form/hookformdoc';
+import { FilledDoc } from '@/components/doc/radiobutton/filleddoc';
import { GroupDoc } from '@/components/doc/radiobutton/groupdoc';
import { ImportDoc } from '@/components/doc/radiobutton/importdoc';
import { InvalidDoc } from '@/components/doc/radiobutton/invaliddoc';
-import { PTDoc } from '@/components/doc/radiobutton/pt/ptdoc';
import { Wireframe } from '@/components/doc/radiobutton/pt/wireframe';
import { StyledDoc } from '@/components/doc/radiobutton/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/radiobutton/theming/tailwinddoc';
@@ -30,6 +28,11 @@ const RadioButtonDemo = () => {
label: 'Dynamic',
component: DynamicDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -40,24 +43,6 @@ const RadioButtonDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -74,11 +59,6 @@ const RadioButtonDemo = () => {
id: 'pt.radiobutton.options',
label: 'RadioButton PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/rating/index.js b/pages/rating/index.js
index f379a7fb1c..83ff46ad1d 100644
--- a/pages/rating/index.js
+++ b/pages/rating/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/rating/basicdoc';
import { DisabledDoc } from '@/components/doc/rating/disableddoc';
import { ImportDoc } from '@/components/doc/rating/importdoc';
import { NumberOfStarsDoc } from '@/components/doc/rating/numberofstarsdoc';
-import { PTDoc } from '@/components/doc/rating/pt/ptdoc';
import { Wireframe } from '@/components/doc/rating/pt/wireframe';
import { ReadOnlyDoc } from '@/components/doc/rating/readonlydoc';
import { TemplateDoc } from '@/components/doc/rating/templatedoc';
@@ -67,11 +66,6 @@ const RatingDemo = () => {
id: 'pt.rating.options',
label: 'Rating PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/scrollpanel/index.js b/pages/scrollpanel/index.js
index afc639d4ef..16832be1b5 100644
--- a/pages/scrollpanel/index.js
+++ b/pages/scrollpanel/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/scrollpanel/accessibilitydoc'
import { BasicDoc } from '@/components/doc/scrollpanel/basicdoc';
import { CustomDemo } from '@/components/doc/scrollpanel/customdoc';
import { ImportDoc } from '@/components/doc/scrollpanel/importdoc';
-import { PTDoc } from '@/components/doc/scrollpanel/pt/ptdoc';
import { Wireframe } from '@/components/doc/scrollpanel/pt/wireframe';
import { StyledDoc } from '@/components/doc/scrollpanel/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/scrollpanel/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const ScrollPanelDemo = () => {
id: 'pt.scrollpanel.options',
label: 'ScrollPanel PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/scrolltop/index.js b/pages/scrolltop/index.js
index 0087b31259..ad54bc601b 100644
--- a/pages/scrolltop/index.js
+++ b/pages/scrolltop/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/scrolltop/accessibilitydoc';
import { BasicDoc } from '@/components/doc/scrolltop/basicdoc';
import { ElementDoc } from '@/components/doc/scrolltop/elementdoc';
import { ImportDoc } from '@/components/doc/scrolltop/importdoc';
-import { PTDoc } from '@/components/doc/scrolltop/pt/ptdoc';
import { Wireframe } from '@/components/doc/scrolltop/pt/wireframe';
import { StyledDoc } from '@/components/doc/scrolltop/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/scrolltop/theming/tailwinddoc';
@@ -44,11 +43,6 @@ const ScrollTopDemo = () => {
id: 'pt.scrolltop.options',
label: 'ScrollTop PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/selectbutton/index.js b/pages/selectbutton/index.js
index a075c59fa9..0f941ca469 100644
--- a/pages/selectbutton/index.js
+++ b/pages/selectbutton/index.js
@@ -3,12 +3,9 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/selectbutton/accessibilitydoc';
import { BasicDoc } from '@/components/doc/selectbutton/basicdoc';
import { DisabledDoc } from '@/components/doc/selectbutton/disableddoc';
-import { FormikDoc } from '@/components/doc/selectbutton/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/selectbutton/form/hookformdoc';
import { ImportDoc } from '@/components/doc/selectbutton/importdoc';
import { InvalidDoc } from '@/components/doc/selectbutton/invaliddoc';
import { MultipleDoc } from '@/components/doc/selectbutton/multipledoc';
-import { PTDoc } from '@/components/doc/selectbutton/pt/ptdoc';
import { Wireframe } from '@/components/doc/selectbutton/pt/wireframe';
import { TemplateDoc } from '@/components/doc/selectbutton/templatedoc';
import { StyledDoc } from '@/components/doc/selectbutton/theming/styleddoc';
@@ -46,23 +43,6 @@ const SelectButtonDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
{
id: 'accessibility',
label: 'Accessibility',
@@ -79,11 +59,6 @@ const SelectButtonDemo = () => {
id: 'pt.selectbutton.options',
label: 'SelectButton PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/sidebar/index.js b/pages/sidebar/index.js
index 32ad349cd1..d733079f60 100644
--- a/pages/sidebar/index.js
+++ b/pages/sidebar/index.js
@@ -3,15 +3,14 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/sidebar/accessibilitydoc';
import { BasicDoc } from '@/components/doc/sidebar/basicdoc';
import { FullScreenDoc } from '@/components/doc/sidebar/fullscreendoc';
+import { HeadlessDoc } from '@/components/doc/sidebar/headlessdoc';
import { ImportDoc } from '@/components/doc/sidebar/importdoc';
import { PositionDoc } from '@/components/doc/sidebar/positiondoc';
-import { PTDoc } from '@/components/doc/sidebar/pt/ptdoc';
import { Wireframe } from '@/components/doc/sidebar/pt/wireframe';
import { SizeDoc } from '@/components/doc/sidebar/sizedoc';
import { TemplateDoc } from '@/components/doc/sidebar/templatedoc';
import { StyledDoc } from '@/components/doc/sidebar/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/sidebar/theming/tailwinddoc';
-import { HeadlessDoc } from '@/components/doc/sidebar/headlessdoc';
const SidebarDemo = () => {
const docs = [
@@ -67,11 +66,6 @@ const SidebarDemo = () => {
id: 'pt.sidebar.options',
label: 'Sidebar PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/skeleton/index.js b/pages/skeleton/index.js
index 46bd378163..4a77eedb53 100644
--- a/pages/skeleton/index.js
+++ b/pages/skeleton/index.js
@@ -5,7 +5,6 @@ import { CardDoc } from '@/components/doc/skeleton/carddoc';
import { DataTableDoc } from '@/components/doc/skeleton/datatabledoc';
import { ImportDoc } from '@/components/doc/skeleton/importdoc';
import { ListDoc } from '@/components/doc/skeleton/listdoc';
-import { PTDoc } from '@/components/doc/skeleton/pt/ptdoc';
import { Wireframe } from '@/components/doc/skeleton/pt/wireframe';
import { ShapesDoc } from '@/components/doc/skeleton/shapesdoc';
import { StyledDoc } from '@/components/doc/skeleton/theming/styleddoc';
@@ -56,11 +55,6 @@ const SkeletonDemo = () => {
id: 'pt.skeleton.options',
label: 'Skeleton PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/slider/index.js b/pages/slider/index.js
index 7aa0400fab..c25be71691 100644
--- a/pages/slider/index.js
+++ b/pages/slider/index.js
@@ -2,9 +2,9 @@ import DocApiTable from '@/components/doc/common/docapitable';
import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/slider/accessibilitydoc';
import { BasicDoc } from '@/components/doc/slider/basicdoc';
+import { FilterDoc } from '@/components/doc/slider/filterdoc';
import { ImportDoc } from '@/components/doc/slider/importdoc';
import { InputDoc } from '@/components/doc/slider/inputdoc';
-import { PTDoc } from '@/components/doc/slider/pt/ptdoc';
import { Wireframe } from '@/components/doc/slider/pt/wireframe';
import { RangeDoc } from '@/components/doc/slider/rangedoc';
import { StepDoc } from '@/components/doc/slider/stepdoc';
@@ -39,12 +39,16 @@ const SliderDemo = () => {
label: 'Range',
component: RangeDoc
},
+ {
+ id: 'filter',
+ label: 'Filter',
+ component: FilterDoc
+ },
{
id: 'vertical',
label: 'Vertical',
component: VerticalDoc
},
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -61,11 +65,6 @@ const SliderDemo = () => {
id: 'pt.slider.options',
label: 'Slider PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/speeddial/index.js b/pages/speeddial/index.js
index 0c8f41a695..082e599bed 100644
--- a/pages/speeddial/index.js
+++ b/pages/speeddial/index.js
@@ -6,7 +6,6 @@ import { CustomDoc } from '@/components/doc/speeddial/customdoc';
import { ImportDoc } from '@/components/doc/speeddial/importdoc';
import { LinearDoc } from '@/components/doc/speeddial/lineardoc';
import { MaskDoc } from '@/components/doc/speeddial/maskdoc';
-import { PTDoc } from '@/components/doc/speeddial/pt/ptdoc';
import { Wireframe } from '@/components/doc/speeddial/pt/wireframe';
import { QuarterCircleDoc } from '@/components/doc/speeddial/quartercircledoc';
import { SemiCircleDoc } from '@/components/doc/speeddial/semicircledoc';
@@ -74,11 +73,6 @@ const SpeedDialDemo = () => {
id: 'pt.speeddial.options',
label: 'SpeedDial PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/splitbutton/index.js b/pages/splitbutton/index.js
index da342d8ad7..0c849d254f 100644
--- a/pages/splitbutton/index.js
+++ b/pages/splitbutton/index.js
@@ -3,20 +3,20 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/splitbutton/accessibilitydoc';
import { BasicDoc } from '@/components/doc/splitbutton/basicdoc';
import { DisabledDoc } from '@/components/doc/splitbutton/disableddoc';
+import { IconsDoc } from '@/components/doc/splitbutton/iconsdoc';
import { ImportDoc } from '@/components/doc/splitbutton/importdoc';
import { LoadingDoc } from '@/components/doc/splitbutton/loadingdoc';
import { OutlinedDoc } from '@/components/doc/splitbutton/outlineddoc';
-import { PTDoc } from '@/components/doc/splitbutton/pt/ptdoc';
import { Wireframe } from '@/components/doc/splitbutton/pt/wireframe';
import { RaisedDoc } from '@/components/doc/splitbutton/raiseddoc';
import { RaisedTextDoc } from '@/components/doc/splitbutton/raisedtextdoc';
import { RoundedDoc } from '@/components/doc/splitbutton/roundeddoc';
import { SeverityDoc } from '@/components/doc/splitbutton/severitydoc';
import { SizesDoc } from '@/components/doc/splitbutton/sizesdoc';
+import { TemplateDoc } from '@/components/doc/splitbutton/templatedoc';
import { TextDoc } from '@/components/doc/splitbutton/textdoc';
import { StyledDoc } from '@/components/doc/splitbutton/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/splitbutton/theming/tailwinddoc';
-import { TemplateDoc } from '@/components/doc/splitbutton/templatedoc';
const SplitButtonDemo = () => {
const docs = [
@@ -30,6 +30,16 @@ const SplitButtonDemo = () => {
label: 'Basic',
component: BasicDoc
},
+ {
+ id: 'icons',
+ label: 'Icons',
+ component: IconsDoc
+ },
+ {
+ id: 'severity',
+ label: 'Severity',
+ component: SeverityDoc
+ },
{
id: 'loading',
label: 'Loading',
@@ -40,11 +50,6 @@ const SplitButtonDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'severity',
- label: 'Severity',
- component: SeverityDoc
- },
{
id: 'raised',
label: 'Raised',
@@ -97,11 +102,6 @@ const SplitButtonDemo = () => {
id: 'pt.splitbutton.options',
label: 'SplitButton PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/splitter/index.js b/pages/splitter/index.js
index eddfc72fd5..56cc8c925c 100644
--- a/pages/splitter/index.js
+++ b/pages/splitter/index.js
@@ -4,7 +4,6 @@ import { AccessibilityDoc } from '@/components/doc/splitter/accessibilitydoc';
import { HorizontalDoc } from '@/components/doc/splitter/horizontaldoc';
import { ImportDoc } from '@/components/doc/splitter/importdoc';
import { NestedDoc } from '@/components/doc/splitter/nesteddoc';
-import { PTDoc } from '@/components/doc/splitter/pt/ptdoc';
import { Wireframe } from '@/components/doc/splitter/pt/wireframe';
import { SizeDoc } from '@/components/doc/splitter/sizedoc';
import { StyledDoc } from '@/components/doc/splitter/theming/styleddoc';
@@ -61,11 +60,6 @@ const SplitterDemo = () => {
id: 'pt.splitterpanel.options',
label: 'SplitterPanel PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/steps/index.js b/pages/steps/index.js
index ac7ed83aa1..d90fe58c00 100644
--- a/pages/steps/index.js
+++ b/pages/steps/index.js
@@ -5,7 +5,7 @@ import { BasicDoc } from '@/components/doc/steps/basicdoc';
import { ControlledDoc } from '@/components/doc/steps/controlleddoc';
import { ImportDoc } from '@/components/doc/steps/importdoc';
import { InteractiveDoc } from '@/components/doc/steps/interactivedoc';
-import { PTDoc } from '@/components/doc/steps/pt/ptdoc';
+import { LinearDoc } from '@/components/doc/steps/lineardoc';
import { Wireframe } from '@/components/doc/steps/pt/wireframe';
import { TemplateDoc } from '@/components/doc/steps/templatedoc';
import { StyledDoc } from '@/components/doc/steps/theming/styleddoc';
@@ -28,6 +28,11 @@ const StepsDemo = () => {
label: 'Controlled',
component: ControlledDoc
},
+ {
+ id: 'linear',
+ label: 'Linear',
+ component: LinearDoc
+ },
{
id: 'interactive',
label: 'Interactive',
@@ -55,11 +60,6 @@ const StepsDemo = () => {
id: 'pt.steps.options',
label: 'Steps PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/tabmenu/index.js b/pages/tabmenu/index.js
index c22f5b17c0..fedcd9258f 100644
--- a/pages/tabmenu/index.js
+++ b/pages/tabmenu/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/tabmenu/basicdoc';
import { CommandDoc } from '@/components/doc/tabmenu/commanddoc';
import { ControlledDoc } from '@/components/doc/tabmenu/controlleddoc';
import { ImportDoc } from '@/components/doc/tabmenu/importdoc';
-import { PTDoc } from '@/components/doc/tabmenu/pt/ptdoc';
import { Wireframe } from '@/components/doc/tabmenu/pt/wireframe';
import { RouterDoc } from '@/components/doc/tabmenu/routerdoc';
import { TemplateDoc } from '@/components/doc/tabmenu/templatedoc';
@@ -61,11 +60,6 @@ const TabMenuDemo = () => {
id: 'pt.tabmenu.options',
label: 'TabMenu PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/tabview/index.js b/pages/tabview/index.js
index 6b6fc70fe7..c4b0e808ae 100644
--- a/pages/tabview/index.js
+++ b/pages/tabview/index.js
@@ -7,7 +7,6 @@ import { ControlledDoc } from '@/components/doc/tabview/controlleddoc';
import { DisabledDoc } from '@/components/doc/tabview/disableddoc';
import { HeaderIconDoc } from '@/components/doc/tabview/headericondoc';
import { ImportDoc } from '@/components/doc/tabview/importdoc';
-import { PTDoc } from '@/components/doc/tabview/pt/ptdoc';
import { Wireframe } from '@/components/doc/tabview/pt/wireframe';
import { ScrollableDoc } from '@/components/doc/tabview/scrollabledoc';
import { TemplateDoc } from '@/components/doc/tabview/templatedoc';
@@ -79,11 +78,6 @@ const TabViewDemo = () => {
id: 'pt.tabpanel.options',
label: 'TabPanel PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/tag/index.js b/pages/tag/index.js
index fd61d253ec..80365487b1 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/tag/basicdoc';
import { IconDoc } from '@/components/doc/tag/icondoc';
import { ImportDoc } from '@/components/doc/tag/importdoc';
import { PillDoc } from '@/components/doc/tag/pilldoc';
-import { PTDoc } from '@/components/doc/tag/pt/ptdoc';
import { Wireframe } from '@/components/doc/tag/pt/wireframe';
import { SeverityDoc } from '@/components/doc/tag/severitydoc';
import { TemplateDoc } from '@/components/doc/tag/templatedoc';
@@ -62,11 +61,6 @@ const TerminalDemo = () => {
id: 'pt.tag.options',
label: 'Tag PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/terminal/index.js b/pages/terminal/index.js
index 8e90a43eea..29eb0e685c 100644
--- a/pages/terminal/index.js
+++ b/pages/terminal/index.js
@@ -3,7 +3,6 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/terminal/accessibilitydoc';
import { BasicDoc } from '@/components/doc/terminal/basicdoc';
import { ImportDoc } from '@/components/doc/terminal/importdoc';
-import { PTDoc } from '@/components/doc/terminal/pt/ptdoc';
import { Wireframe } from '@/components/doc/terminal/pt/wireframe';
import { StyledDoc } from '@/components/doc/terminal/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/terminal/theming/tailwinddoc';
@@ -38,11 +37,6 @@ const TerminalDemo = () => {
id: 'pt.terminal.options',
label: 'Terminal PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/tieredmenu/index.js b/pages/tieredmenu/index.js
index 81fa55a0a2..5246716b9a 100644
--- a/pages/tieredmenu/index.js
+++ b/pages/tieredmenu/index.js
@@ -5,7 +5,6 @@ import { BasicDoc } from '@/components/doc/tieredmenu/basicdoc';
import { CommandDoc } from '@/components/doc/tieredmenu/commanddoc';
import { ImportDoc } from '@/components/doc/tieredmenu/importdoc';
import { PopupDoc } from '@/components/doc/tieredmenu/popupdoc';
-import { PTDoc } from '@/components/doc/tieredmenu/pt/ptdoc';
import { Wireframe } from '@/components/doc/tieredmenu/pt/wireframe';
import { RouterDoc } from '@/components/doc/tieredmenu/routerdoc';
import { TemplateDoc } from '@/components/doc/tieredmenu/templatedoc';
@@ -60,11 +59,6 @@ const TieredMenuDemo = () => {
id: 'pt.tieredmenu.options',
label: 'TieredMenu PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/timeline/index.js b/pages/timeline/index.js
index 497150b24b..99a21c6ab8 100644
--- a/pages/timeline/index.js
+++ b/pages/timeline/index.js
@@ -6,7 +6,6 @@ import { BasicDoc } from '@/components/doc/timeline/basicdoc';
import { HorizontalDoc } from '@/components/doc/timeline/horizontaldoc';
import { ImportDoc } from '@/components/doc/timeline/importdoc';
import { OppositeDoc } from '@/components/doc/timeline/oppositedoc';
-import { PTDoc } from '@/components/doc/timeline/pt/ptdoc';
import { Wireframe } from '@/components/doc/timeline/pt/wireframe';
import { TemplateDoc } from '@/components/doc/timeline/templatedoc';
import { StyledDoc } from '@/components/doc/timeline/theming/styleddoc';
@@ -61,11 +60,6 @@ const TimelineDemo = () => {
id: 'pt.timeline.options',
label: 'Timeline PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/toast/index.js b/pages/toast/index.js
index 4c26035924..27f26a509b 100644
--- a/pages/toast/index.js
+++ b/pages/toast/index.js
@@ -6,7 +6,6 @@ import { HeadlessDoc } from '@/components/doc/toast/headlessdoc';
import { ImportDoc } from '@/components/doc/toast/importdoc';
import { MultipleDoc } from '@/components/doc/toast/multipledoc';
import { PositionDoc } from '@/components/doc/toast/positiondoc';
-import { PTDoc } from '@/components/doc/toast/pt/ptdoc';
import { Wireframe } from '@/components/doc/toast/pt/wireframe';
import { SeverityDoc } from '@/components/doc/toast/severitydoc';
import { StickyDoc } from '@/components/doc/toast/stickydoc';
@@ -72,11 +71,6 @@ const ToastDemo = () => {
id: 'pt.toast.options',
label: 'Toast PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/togglebutton/index.js b/pages/togglebutton/index.js
index b0b088f0ef..92b0e17cef 100644
--- a/pages/togglebutton/index.js
+++ b/pages/togglebutton/index.js
@@ -3,10 +3,9 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/togglebutton/accessibilitydoc';
import { BasicDoc } from '@/components/doc/togglebutton/basicdoc';
import { CustomizedDoc } from '@/components/doc/togglebutton/customizeddoc';
-import { FormikDoc } from '@/components/doc/togglebutton/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/togglebutton/form/hookformdoc';
+import { DisabledDoc } from '@/components/doc/togglebutton/disableddoc';
import { ImportDoc } from '@/components/doc/togglebutton/importdoc';
-import { PTDoc } from '@/components/doc/togglebutton/pt/ptdoc';
+import { InvalidDoc } from '@/components/doc/togglebutton/invaliddoc';
import { Wireframe } from '@/components/doc/togglebutton/pt/wireframe';
import { StyledDoc } from '@/components/doc/togglebutton/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/togglebutton/theming/tailwinddoc';
@@ -29,23 +28,15 @@ const ToggleButtonDemo = () => {
component: CustomizedDoc
},
{
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
+ id: 'invalid',
+ label: 'Invalid',
+ component: InvalidDoc
+ },
+ {
+ id: 'disabled',
+ label: 'Disabled',
+ component: DisabledDoc
},
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -62,11 +53,6 @@ const ToggleButtonDemo = () => {
id: 'pt.togglebutton.options',
label: 'ToggleButton PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/toolbar/index.js b/pages/toolbar/index.js
index 555ba88f5a..684583a379 100644
--- a/pages/toolbar/index.js
+++ b/pages/toolbar/index.js
@@ -2,11 +2,10 @@ import DocApiTable from '@/components/doc/common/docapitable';
import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/toolbar/accessibilitydoc';
import { BasicDoc } from '@/components/doc/toolbar/basicdoc';
+import { CustomDoc } from '@/components/doc/toolbar/customdoc';
import { ImportDoc } from '@/components/doc/toolbar/importdoc';
-import { PTDoc } from '@/components/doc/toolbar/pt/ptdoc';
import { Wireframe } from '@/components/doc/toolbar/pt/wireframe';
import { StyledDoc } from '@/components/doc/toolbar/theming/styleddoc';
-import { CustomDoc } from '@/components/doc/toolbar/customdoc';
import { TailwindDoc } from '@/components/doc/toolbar/theming/tailwinddoc';
const ToolbarDemo = () => {
@@ -43,11 +42,6 @@ const ToolbarDemo = () => {
id: 'pt.toolbar.options',
label: 'Toolbar PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/tooltip/index.js b/pages/tooltip/index.js
index 288883ce37..d7d1b806f7 100644
--- a/pages/tooltip/index.js
+++ b/pages/tooltip/index.js
@@ -8,7 +8,6 @@ import { EventDoc } from '@/components/doc/tooltip/eventdoc';
import { ImportDoc } from '@/components/doc/tooltip/importdoc';
import { MouseTrackDoc } from '@/components/doc/tooltip/mousetrackdoc';
import { PositionDoc } from '@/components/doc/tooltip/positiondoc';
-import { PTDoc } from '@/components/doc/tooltip/pt/ptdoc';
import { Wireframe } from '@/components/doc/tooltip/pt/wireframe';
import { ReactiveDoc } from '@/components/doc/tooltip/reactivedoc';
import { TargetDoc } from '@/components/doc/tooltip/targetdoc';
@@ -85,11 +84,6 @@ const TooltipDemo = () => {
id: 'pt.tooltip.options',
label: 'Tooltip PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/tree/index.js b/pages/tree/index.js
index b25b07f84e..330b9105d2 100644
--- a/pages/tree/index.js
+++ b/pages/tree/index.js
@@ -9,7 +9,6 @@ import { EventsDoc } from '@/components/doc/tree/eventsdoc';
import { FilterDoc } from '@/components/doc/tree/filterdoc';
import { ImportDoc } from '@/components/doc/tree/importdoc';
import { LazyDoc } from '@/components/doc/tree/lazydoc';
-import { PTDoc } from '@/components/doc/tree/pt/ptdoc';
import { Wireframe } from '@/components/doc/tree/pt/wireframe';
import { CheckboxSelectionDoc } from '@/components/doc/tree/selection/checkboxselectiondoc';
import { MultipleSelectionDoc } from '@/components/doc/tree/selection/multipleselectiondoc';
@@ -104,11 +103,6 @@ const TreeDemo = () => {
id: 'pt.tree.options',
label: 'Tree PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/treeselect/index.js b/pages/treeselect/index.js
index d658d82f0f..bff38fd61f 100644
--- a/pages/treeselect/index.js
+++ b/pages/treeselect/index.js
@@ -6,14 +6,12 @@ import { CheckboxDoc } from '@/components/doc/treeselect/checkboxdoc';
import { ClearIconDoc } from '@/components/doc/treeselect/clearicondoc';
import { ControlledDoc } from '@/components/doc/treeselect/controlleddoc';
import { DisabledDoc } from '@/components/doc/treeselect/disableddoc';
+import { FilledDoc } from '@/components/doc/treeselect/filleddoc';
import { FilterDoc } from '@/components/doc/treeselect/filterdoc';
import { FloatLabelDoc } from '@/components/doc/treeselect/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/treeselect/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/treeselect/form/hookformdoc';
import { ImportDoc } from '@/components/doc/treeselect/importdoc';
import { InvalidDoc } from '@/components/doc/treeselect/invaliddoc';
import { MultipleDoc } from '@/components/doc/treeselect/multipledoc';
-import { PTDoc } from '@/components/doc/treeselect/pt/ptdoc';
import { Wireframe } from '@/components/doc/treeselect/pt/wireframe';
import { StyledDoc } from '@/components/doc/treeselect/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/treeselect/theming/tailwinddoc';
@@ -60,6 +58,11 @@ const TreeSelectDemo = () => {
label: 'Float Label',
component: FloatLabelDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -70,24 +73,6 @@ const TreeSelectDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -104,11 +89,6 @@ const TreeSelectDemo = () => {
id: 'pt.treeselect.options',
label: 'TreeSelect PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/treetable/index.js b/pages/treetable/index.js
index 0ac91feaf3..2eb25707ef 100644
--- a/pages/treetable/index.js
+++ b/pages/treetable/index.js
@@ -14,7 +14,6 @@ import { ImportDoc } from '@/components/doc/treetable/importdoc';
import { LazyLoadDoc } from '@/components/doc/treetable/lazyloaddoc';
import { PaginatorBasicDoc } from '@/components/doc/treetable/paginator/basicdoc';
import { PaginatorTemplateDoc } from '@/components/doc/treetable/paginator/templatedoc';
-import { PTDoc } from '@/components/doc/treetable/pt/ptdoc';
import { Wireframe } from '@/components/doc/treetable/pt/wireframe';
import { ReorderDoc } from '@/components/doc/treetable/reorderdoc';
import { ExpandModeDoc } from '@/components/doc/treetable/resize/expandmodedoc';
@@ -216,11 +215,6 @@ const TreeTableDemo = () => {
id: 'pt.column.options',
label: 'Column PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/tristatecheckbox/index.js b/pages/tristatecheckbox/index.js
index c129e25637..cb3de8d065 100644
--- a/pages/tristatecheckbox/index.js
+++ b/pages/tristatecheckbox/index.js
@@ -3,11 +3,9 @@ import { DocComponent } from '@/components/doc/common/doccomponent';
import { AccessibilityDoc } from '@/components/doc/tristatecheckbox/accessibilitydoc';
import { BasicDoc } from '@/components/doc/tristatecheckbox/basicdoc';
import { DisabledDoc } from '@/components/doc/tristatecheckbox/disableddoc';
-import { FormikDoc } from '@/components/doc/tristatecheckbox/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/tristatecheckbox/form/hookformdoc';
+import { FilledDoc } from '@/components/doc/tristatecheckbox/filleddoc';
import { ImportDoc } from '@/components/doc/tristatecheckbox/importdoc';
import { InvalidDoc } from '@/components/doc/tristatecheckbox/invaliddoc';
-import { PTDoc } from '@/components/doc/tristatecheckbox/pt/ptdoc';
import { Wireframe } from '@/components/doc/tristatecheckbox/pt/wireframe';
import { StyledDoc } from '@/components/doc/tristatecheckbox/theming/styleddoc';
import { TailwindDoc } from '@/components/doc/tristatecheckbox/theming/tailwinddoc';
@@ -24,6 +22,11 @@ const TriStateCheckboxDemo = () => {
label: 'Basic',
component: BasicDoc
},
+ {
+ id: 'filled',
+ label: 'Filled',
+ component: FilledDoc
+ },
{
id: 'invalid',
label: 'Invalid',
@@ -34,24 +37,6 @@ const TriStateCheckboxDemo = () => {
label: 'Disabled',
component: DisabledDoc
},
- {
- id: 'form',
- label: 'Form',
- description: 'Compatibility with popular React form libraries.',
- children: [
- {
- id: 'formik',
- label: 'Formik',
- component: FormikDoc
- },
- {
- id: 'hookform',
- label: 'Hook Form',
- component: HookFormDoc
- }
- ]
- },
-
{
id: 'accessibility',
label: 'Accessibility',
@@ -68,11 +53,6 @@ const TriStateCheckboxDemo = () => {
id: 'pt.tristatecheckbox.options',
label: 'TriStateCheckbox PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/pages/virtualscroller/index.js b/pages/virtualscroller/index.js
index 4a4ecc4e39..2b078c6835 100644
--- a/pages/virtualscroller/index.js
+++ b/pages/virtualscroller/index.js
@@ -8,7 +8,6 @@ import { HorizontalDoc } from '@/components/doc/virtualscroller/horizontaldoc';
import { ImportDoc } from '@/components/doc/virtualscroller/importdoc';
import { LazyDoc } from '@/components/doc/virtualscroller/lazydoc';
import { LoadingDoc } from '@/components/doc/virtualscroller/loadingdoc';
-import { PTDoc } from '@/components/doc/virtualscroller/pt/ptdoc';
import { Wireframe } from '@/components/doc/virtualscroller/pt/wireframe';
import { StyledDoc } from '@/components/doc/virtualscroller/theming/styleddoc';
@@ -66,11 +65,6 @@ const VirtualScrollerDemo = () => {
id: 'pt.virtualscroller.options',
label: 'VirtualScroller PT Options',
component: DocApiTable
- },
- {
- id: 'pt.demo',
- label: 'Example',
- component: PTDoc
}
];
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d27b1e785c..b9886cdb22 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #64b5f6;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 1px #93cbf9;
border-color: #64b5f6;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #383838;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #383838;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #383838;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #93cbf9;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(100, 181, 246, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(100, 181, 246, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #383838;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #383838;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #383838;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #64b5f6;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #ef9a9a;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #383838;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #383838;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #383838;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #ef9a9a;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-left > .p-inputtext {
- 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: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #383838;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #383838;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #383838;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 53038d0c89..64cff960cd 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #81c784;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 1px #a7d8a9;
border-color: #81c784;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #383838;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #383838;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #383838;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(129, 199, 132, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(129, 199, 132, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #383838;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #383838;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #383838;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #81c784;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #ef9a9a;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #383838;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #383838;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #383838;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #ef9a9a;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-left > .p-inputtext {
- 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: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #383838;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #383838;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #383838;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index a2d4387a6a..6a8e7ce549 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #ffd54f;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 1px #ffe284;
border-color: #ffd54f;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #383838;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #383838;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #383838;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #ffe284;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 213, 79, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(255, 213, 79, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #383838;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #383838;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #383838;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #ffd54f;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #ef9a9a;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #383838;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #383838;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #383838;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #ef9a9a;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-left > .p-inputtext {
- 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: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #383838;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #383838;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #383838;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index eacbd16cfe..a68b8162bf 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #3f4b5b;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #3f4b5b;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 1px #e3f3fe;
border-color: #8dd0ff;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #3f4b5b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #3f4b5b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #3f4b5b;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.15s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1.5rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #151515;
background: #8dd0ff;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #64bfff;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1.5rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #3f4b5b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #3f4b5b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #3f4b5b;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1317,6 +1318,7 @@
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
appearance: none;
border-radius: 4px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #3f4b5b;
@@ -1330,6 +1332,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f19ea6;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #3f4b5b;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #3f4b5b;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #3f4b5b;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.65625rem;
@@ -1343,30 +1354,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.15s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #f19ea6;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2074,6 +2064,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #3f4b5b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #3f4b5b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #3f4b5b;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.75rem;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 5a0604409c..66d1b837d0 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #ced4da;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #ced4da;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
border-color: #007bff;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #efefef;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #efefef;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #efefef;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.15s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1.5rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #007bff;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #0067d6;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #212529;
background: #e9ecef;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1.5rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #efefef;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #efefef;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #efefef;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1317,6 +1318,7 @@
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
appearance: none;
border-radius: 4px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #ced4da;
@@ -1330,6 +1332,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #dc3545;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #efefef;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #efefef;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #efefef;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.65625rem;
@@ -1343,30 +1354,9 @@
color: #6c757d;
transition-duration: 0.15s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #dc3545;
}
- .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: #495057;
- }
- .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: #495057;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2074,6 +2064,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #efefef;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #efefef;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #efefef;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.75rem;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 183eb1491d..a0d4b82923 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #605e5c;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 2px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #323130;
@@ -649,6 +650,15 @@
box-shadow: inset 0 0 0 1px #605e5c;
border-color: #0078d4;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #faf9f8;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #faf9f8;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #faf9f8;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.75rem 0.5rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #605e5c;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #323130;
background: #edebe9;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #e1dfdd;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #323130;
background: #f3f2f1;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 0.5rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #faf9f8;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #faf9f8;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #faf9f8;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 2px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #323130;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #a4252c;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #faf9f8;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #faf9f8;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #faf9f8;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: #605e5c;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #a4252c;
}
- .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: #605e5c;
- }
- .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: #605e5c;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #faf9f8;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #faf9f8;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #faf9f8;
+ }
.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;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index 3a96c27dad..5ab3a789a6 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #424b57;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #fbbf24;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
border-color: #fbbf24;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2);
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(251, 191, 36, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(251, 191, 36, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1.25rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #424b57;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #fbbf24;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #fca5a5;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #fca5a5;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #424b57;
+ }
.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;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 9fc3607064..5cf2622cb4 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #424b57;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #60a5fa;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
border-color: #60a5fa;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2);
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(96, 165, 250, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(96, 165, 250, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1.25rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #424b57;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #60a5fa;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #fca5a5;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #fca5a5;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #424b57;
+ }
.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;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index a57900349b..6387296b93 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #424b57;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #22d3ee;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
border-color: #22d3ee;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2);
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(34, 211, 238, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(34, 211, 238, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1.25rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #424b57;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #22d3ee;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #fca5a5;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #fca5a5;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #424b57;
+ }
.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;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 882d6424b2..7d44112db0 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #424b57;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #34d399;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
border-color: #34d399;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2);
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(52, 211, 153, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(52, 211, 153, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1.25rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #424b57;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #34d399;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #fca5a5;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #fca5a5;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #424b57;
+ }
.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;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 13cc223f94..d438317655 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #424b57;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #818cf8;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
border-color: #818cf8;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2);
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(129, 140, 248, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(129, 140, 248, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1.25rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #424b57;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #818cf8;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #fca5a5;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #fca5a5;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #424b57;
+ }
.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;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 42f435e013..7438ea5fb1 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #424b57;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #f472b6;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
border-color: #f472b6;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2);
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(244, 114, 182, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(244, 114, 182, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1.25rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #424b57;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #f472b6;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #fca5a5;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #fca5a5;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #424b57;
+ }
.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;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index c7d71ddfee..4271eb4ab4 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #424b57;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #2dd4bf;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
border-color: #2dd4bf;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2);
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(45, 212, 191, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(45, 212, 191, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1.25rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #424b57;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #424b57;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #2dd4bf;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #fca5a5;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #424b57;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #424b57;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #fca5a5;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #424b57;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #424b57;
+ }
.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;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 44d8bebbc3..c1e0ae7f21 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #d1d5db;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #f59e0b;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem #fef08a;
border-color: #f59e0b;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #fef08a;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #b45309;
background: #fffbeb;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(245, 158, 11, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #4b5563;
background: #f3f4f6;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #f59e0b;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e24c4c;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: #6b7280;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e24c4c;
}
- .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: #6b7280;
- }
- .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: #6b7280;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 71ab9ef24e..28f61f3a55 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #d1d5db;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #3b82f6;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem #bfdbfe;
border-color: #3b82f6;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #bfdbfe;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #1d4ed8;
background: #eff6ff;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(59, 130, 246, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #4b5563;
background: #f3f4f6;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #3b82f6;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e24c4c;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: #6b7280;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e24c4c;
}
- .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: #6b7280;
- }
- .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: #6b7280;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 552e27017b..6b27c9bf6b 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #d1d5db;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #06b6d4;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem #a5f3fc;
border-color: #06b6d4;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #a5f3fc;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #0e7490;
background: #ecfeff;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(6, 182, 212, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #4b5563;
background: #f3f4f6;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #06b6d4;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e24c4c;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: #6b7280;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e24c4c;
}
- .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: #6b7280;
- }
- .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: #6b7280;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index e929fbb116..3dba9f535c 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #d1d5db;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #10b981;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #a7f3d0;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #047857;
background: #f0fdfa;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(16, 185, 129, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #4b5563;
background: #f3f4f6;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #10b981;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e24c4c;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: #6b7280;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e24c4c;
}
- .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: #6b7280;
- }
- .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: #6b7280;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index be84648378..e0588d72fc 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #d1d5db;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #6366f1;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem #c7d2fe;
border-color: #6366f1;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #c7d2fe;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #4338ca;
background: #eef2ff;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(99, 102, 241, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #4b5563;
background: #f3f4f6;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #6366f1;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e24c4c;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: #6b7280;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e24c4c;
}
- .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: #6b7280;
- }
- .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: #6b7280;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index ceec59fa62..8d2c4ddc4d 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #d1d5db;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #ec4899;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem #fbcfe8;
border-color: #ec4899;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #fbcfe8;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #be185d;
background: #fdf2f8;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(236, 72, 153, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #4b5563;
background: #f3f4f6;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #ec4899;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e24c4c;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: #6b7280;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e24c4c;
}
- .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: #6b7280;
- }
- .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: #6b7280;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 93f92db6c4..54d296f474 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -656,6 +656,7 @@
border: 1px solid #d1d5db;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #14b8a6;
@@ -666,6 +667,15 @@
box-shadow: 0 0 0 0.2rem #99f6e4;
border-color: #14b8a6;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -706,38 +716,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #99f6e4;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #0f766e;
background: #0f766e;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(20, 184, 166, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #4b5563;
background: #f3f4f6;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f3f4f6;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1331,6 +1332,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #14b8a6;
@@ -1344,6 +1346,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e24c4c;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f3f4f6;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1357,30 +1368,9 @@
color: #6b7280;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e24c4c;
}
- .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: #6b7280;
- }
- .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: #6b7280;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2082,6 +2072,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f3f4f6;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 50de091e7c..97efc4189f 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #ffe082;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.1rem white;
border-color: #ffe082;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #4b4b4b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #4b4b4b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #4b4b4b;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.429rem 0.857rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem white;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #212529;
background: #ffe082;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(255, 224, 130, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #dedede;
background: #4c4c4c;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.429rem 0.857rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #4b4b4b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #4b4b4b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #4b4b4b;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1317,6 +1318,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #ffe082;
@@ -1330,6 +1332,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e57373;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #4b4b4b;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #4b4b4b;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #4b4b4b;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
color: #9b9b9b;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e57373;
}
- .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.429rem;
- color: #888888;
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 1.858rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 1.858rem;
- }
- .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.429rem;
- color: #888888;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 1.858rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.858rem;
}
@@ -2074,6 +2064,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.429rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #4b4b4b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #4b4b4b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #4b4b4b;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 8640928be4..9cfb769aae 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #81d4fa;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.1rem white;
border-color: #81d4fa;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #4b4b4b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #4b4b4b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #4b4b4b;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.429rem 0.857rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem white;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #212529;
background: #81d4fa;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(129, 212, 250, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #dedede;
background: #4c4c4c;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.429rem 0.857rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #4b4b4b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #4b4b4b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #4b4b4b;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1317,6 +1318,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #81d4fa;
@@ -1330,6 +1332,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e57373;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #4b4b4b;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #4b4b4b;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #4b4b4b;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
color: #9b9b9b;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e57373;
}
- .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.429rem;
- color: #888888;
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 1.858rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 1.858rem;
- }
- .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.429rem;
- color: #888888;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 1.858rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.858rem;
}
@@ -2074,6 +2064,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.429rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #4b4b4b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #4b4b4b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #4b4b4b;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 80509a8d03..20e8198f9f 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #c5e1a5;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.1rem white;
border-color: #c5e1a5;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #4b4b4b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #4b4b4b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #4b4b4b;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.429rem 0.857rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem white;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #212529;
background: #c5e1a5;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(197, 225, 165, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #dedede;
background: #4c4c4c;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.429rem 0.857rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #4b4b4b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #4b4b4b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #4b4b4b;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1317,6 +1318,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #c5e1a5;
@@ -1330,6 +1332,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e57373;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #4b4b4b;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #4b4b4b;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #4b4b4b;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
color: #9b9b9b;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e57373;
}
- .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.429rem;
- color: #888888;
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 1.858rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 1.858rem;
- }
- .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.429rem;
- color: #888888;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 1.858rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.858rem;
}
@@ -2074,6 +2064,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.429rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #4b4b4b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #4b4b4b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #4b4b4b;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 119822249c..21e08fbfd9 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #f48fb1;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.1rem white;
border-color: #f48fb1;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #4b4b4b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #4b4b4b;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #4b4b4b;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.429rem 0.857rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem white;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #212529;
background: #f48fb1;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(244, 143, 177, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #dedede;
background: #4c4c4c;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.429rem 0.857rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #4b4b4b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #4b4b4b;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #4b4b4b;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1317,6 +1318,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #f48fb1;
@@ -1330,6 +1332,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e57373;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #4b4b4b;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #4b4b4b;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #4b4b4b;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
color: #9b9b9b;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e57373;
}
- .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.429rem;
- color: #888888;
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 1.858rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 1.858rem;
- }
- .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.429rem;
- color: #888888;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 1.858rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.858rem;
}
@@ -2074,6 +2064,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.429rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #4b4b4b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #4b4b4b;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #4b4b4b;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 5aa09c8992..cfb995cf4a 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -241,7 +241,7 @@
}
.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: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
padding: 1rem 1rem;
@@ -419,7 +419,7 @@
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
color: #9FA8DA;
@@ -445,7 +445,7 @@
padding: 0.5rem;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
border-radius: 4px;
}
.p-datepicker:not(.p-datepicker-inline) {
@@ -462,7 +462,7 @@
background: #1e1e1e;
font-weight: 500;
margin: 0;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
@@ -546,13 +546,13 @@
}
.p-datepicker .p-datepicker-buttonbar {
padding: 1rem 0;
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
}
.p-datepicker .p-datepicker-buttonbar .p-button {
width: auto;
}
.p-datepicker .p-timepicker {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
padding: 0.5rem;
}
.p-datepicker .p-timepicker button {
@@ -611,7 +611,7 @@
background: rgba(159, 168, 218, 0.16);
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
- border-left: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-left: 1px solid hsla(0deg, 0%, 100%, 0.12);
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-top: 0;
@@ -656,9 +656,10 @@
}
.p-cascadeselect {
background: #1e1e1e;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
@@ -669,6 +670,15 @@
box-shadow: none;
border-color: #9FA8DA;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: hsla(0deg, 0%, 100%, 0.06);
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: hsla(0deg, 0%, 100%, 0.08);
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: hsla(0deg, 0%, 100%, 0.1);
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -709,38 +719,29 @@
transition: none;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 1rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: none;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #9FA8DA;
background: rgba(159, 168, 218, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(159, 168, 218, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 1rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: hsla(0, 0%, 100%, 0.06);
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: hsla(0, 0%, 100%, 0.1);
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -771,11 +772,11 @@
height: 18px;
}
.p-checkbox .p-checkbox-input {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
border-radius: 4px;
}
.p-checkbox .p-checkbox-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
background: #1e1e1e;
width: 18px;
height: 18px;
@@ -794,7 +795,7 @@
height: 14px;
}
.p-checkbox .p-checkbox-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
background: #1e1e1e;
width: 18px;
height: 18px;
@@ -834,25 +835,25 @@
border-color: #f44435;
}
.p-checkbox.p-variant-filled .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
background: #9FA8DA;
}
.p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
background: #9FA8DA;
}
.p-input-filled .p-checkbox .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
background: #9FA8DA;
}
.p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
background: #9FA8DA;
@@ -872,13 +873,13 @@
align-items: center;
}
.p-tristatecheckbox.p-variant-filled .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
background: #9FA8DA;
}
.p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
background: #9FA8DA;
@@ -938,12 +939,12 @@
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-chips .p-chips-multiple-container .p-chips-token.p-focus {
- background: hsla(0, 0%, 100%, 0.24);
+ background: hsla(0deg, 0%, 100%, 0.24);
color: rgba(255, 255, 255, 0.87);
}
.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -1058,7 +1059,7 @@
}
.p-dropdown {
background: #1e1e1e;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
outline-color: transparent;
@@ -1073,13 +1074,13 @@
border-color: #9FA8DA;
}
.p-dropdown.p-variant-filled {
- background: hsla(0, 0%, 100%, 0.06);
+ background: hsla(0deg, 0%, 100%, 0.06);
}
.p-dropdown.p-variant-filled:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
}
.p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
background-color: transparent;
@@ -1121,7 +1122,7 @@
}
.p-dropdown-panel .p-dropdown-header {
padding: 1rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #2b2b2b;
margin: 0;
@@ -1163,7 +1164,7 @@
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
position: relative;
@@ -1185,14 +1186,14 @@
.p-inputgroup-addon {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.6);
- border-top: 1px solid hsla(0, 0%, 100%, 0.3);
- border-left: 1px solid hsla(0, 0%, 100%, 0.3);
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.3);
+ border-left: 1px solid hsla(0deg, 0%, 100%, 0.3);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3);
padding: 1rem 1rem;
min-width: 2.357rem;
}
.p-inputgroup-addon:last-child {
- border-right: 1px solid hsla(0, 0%, 100%, 0.3);
+ border-right: 1px solid hsla(0deg, 0%, 100%, 0.3);
}
.p-inputgroup > .p-component,
.p-inputgroup > .p-inputwrapper > .p-inputtext,
@@ -1288,7 +1289,7 @@
border-radius: 0.5rem;
}
.p-inputswitch .p-inputswitch-slider {
- background: hsla(0, 0%, 100%, 0.3);
+ background: hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 0.5rem;
outline-color: transparent;
@@ -1310,7 +1311,7 @@
transform: translateX(1.5rem);
}
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
- background: hsla(0, 0%, 100%, 0.3);
+ background: hsla(0deg, 0%, 100%, 0.3);
}
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
background: rgba(159, 168, 218, 0.5);
@@ -1330,10 +1331,11 @@
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
padding: 1rem 1rem;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
appearance: none;
border-radius: 4px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: rgba(255, 255, 255, 0.6);
@@ -1347,6 +1349,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f44435;
}
+ .p-inputtext.p-variant-filled {
+ background-color: hsla(0deg, 0%, 100%, 0.06);
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: hsla(0deg, 0%, 100%, 0.08);
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: hsla(0deg, 0%, 100%, 0.1);
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.875rem 0.875rem;
@@ -1360,30 +1371,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #f44435;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 1rem;
- color: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 3rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 3rem;
- }
- .p-input-icon-right > i:last-of-type,
- .p-input-icon-right > svg:last-of-type,
- .p-input-icon-right > .p-input-suffix {
- right: 1rem;
- color: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 3rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 3rem;
}
@@ -1406,13 +1396,13 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-input-filled .p-inputtext:enabled:hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-input-filled .p-inputtext:enabled:focus {
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
}
.p-inputtext-sm .p-inputtext {
font-size: 0.875rem;
@@ -1472,14 +1462,14 @@
.p-listbox {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
border-radius: 4px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
outline-color: transparent;
}
.p-listbox .p-listbox-header {
padding: 1rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
margin: 0;
@@ -1532,15 +1522,15 @@
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-listbox.p-focus {
outline: 0 none;
@@ -1572,7 +1562,7 @@
}
.p-mention-panel .p-mention-items .p-mention-item:hover {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-mention-panel .p-mention-items .p-mention-item.p-highlight {
color: #9FA8DA;
@@ -1668,7 +1658,7 @@
}
.p-multiselect {
background: #1e1e1e;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
outline-color: transparent;
@@ -1683,13 +1673,13 @@
border-color: #9FA8DA;
}
.p-multiselect.p-variant-filled {
- background: hsla(0, 0%, 100%, 0.06);
+ background: hsla(0deg, 0%, 100%, 0.06);
}
.p-multiselect.p-variant-filled:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
}
.p-multiselect .p-multiselect-label {
padding: 1rem 1rem;
@@ -1701,7 +1691,7 @@
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
@@ -1730,7 +1720,7 @@
}
.p-multiselect-panel .p-multiselect-header {
padding: 1rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #2b2b2b;
margin: 0;
@@ -1794,7 +1784,7 @@
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
margin-right: 0.5rem;
@@ -1876,11 +1866,11 @@
opacity: 0;
z-index: 1;
outline: 0 none;
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
border-radius: 50%;
}
.p-radiobutton .p-radiobutton-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
background: #1e1e1e;
width: 20px;
height: 20px;
@@ -1919,25 +1909,25 @@
border-color: #f44435;
}
.p-radiobutton.p-variant-filled .p-radiobutton-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
background: #121212;
}
.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
background: #121212;
}
.p-input-filled .p-radiobutton .p-radiobutton-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
background: #121212;
}
.p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
background: #121212;
@@ -2029,7 +2019,7 @@
border-color: #f44435;
}
.p-slider {
- background: hsla(0, 0%, 100%, 0.3);
+ background: hsla(0deg, 0%, 100%, 0.3);
border: 0 none;
border-radius: 4px;
}
@@ -2069,7 +2059,7 @@
}
.p-treeselect {
background: #1e1e1e;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
@@ -2085,6 +2075,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 2rem;
}
+ .p-treeselect.p-variant-filled {
+ background: hsla(0deg, 0%, 100%, 0.06);
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: hsla(0deg, 0%, 100%, 0.08);
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: hsla(0deg, 0%, 100%, 0.1);
+ }
.p-treeselect .p-treeselect-label {
padding: 1rem 1rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -2095,7 +2094,7 @@
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
@@ -2125,7 +2124,7 @@
}
.p-treeselect-panel .p-treeselect-header {
padding: 1rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #2b2b2b;
margin: 0;
@@ -2176,13 +2175,13 @@
background: transparent;
}
.p-input-filled .p-treeselect {
- background: hsla(0, 0%, 100%, 0.06);
+ background: hsla(0deg, 0%, 100%, 0.06);
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
}
.p-togglebutton {
position: relative;
@@ -3575,7 +3574,7 @@
}
.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: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
outline: 0 none;
@@ -3583,12 +3582,12 @@
box-shadow: none;
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-column-filter-overlay-menu .p-column-filter-operator {
padding: 1rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #2b2b2b;
margin: 0;
@@ -3597,7 +3596,7 @@
}
.p-column-filter-overlay-menu .p-column-filter-constraint {
padding: 1rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
}
.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
margin-bottom: 0.5rem;
@@ -3661,12 +3660,12 @@
transition: transform 0.2s, none;
}
.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
color: #9FA8DA;
@@ -3679,10 +3678,10 @@
background: rgba(255, 255, 255, 0.02);
}
.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-organizationchart .p-organizationchart-node-content.p-highlight {
@@ -3846,12 +3845,12 @@
transition: transform 0.2s, none;
}
.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-picklist .p-picklist-list .p-picklist-item.p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
color: #9FA8DA;
@@ -3980,11 +3979,11 @@
color: #9FA8DA;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-tree .p-tree-filter-container {
@@ -4523,7 +4522,7 @@
padding: 0 1.25rem;
}
.p-divider.p-divider-horizontal:before {
- border-top: 1px hsla(0, 0%, 100%, 0.12);
+ border-top: 1px hsla(0deg, 0%, 100%, 0.12);
}
.p-divider.p-divider-horizontal .p-divider-content {
padding: 0 0.5rem;
@@ -4533,7 +4532,7 @@
padding: 1.25rem 0;
}
.p-divider.p-divider-vertical:before {
- border-left: 1px hsla(0, 0%, 100%, 0.12);
+ border-left: 1px hsla(0deg, 0%, 100%, 0.12);
}
.p-divider.p-divider-vertical .p-divider-content {
padding: 0.5rem 0;
@@ -4595,10 +4594,10 @@
}
.p-splitter .p-splitter-gutter {
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
outline: 0 none;
@@ -4606,7 +4605,7 @@
box-shadow: none;
}
.p-splitter .p-splitter-gutter-resizing {
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-stepper .p-stepper-nav {
display: flex;
@@ -5124,7 +5123,7 @@
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5145,7 +5144,7 @@
color: rgba(255, 255, 255, 0.6);
}
.p-contextmenu .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-contextmenu .p-submenu-icon {
@@ -5287,7 +5286,7 @@
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5327,7 +5326,7 @@
width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-megamenu.p-megamenu-vertical {
@@ -5388,7 +5387,7 @@
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-mobile-active .p-megamenu-root-list .p-menu-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
@@ -5438,7 +5437,7 @@
}
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5525,7 +5524,7 @@
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5560,7 +5559,7 @@
border-top-left-radius: 0;
}
.p-menu .p-menu-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-menubar {
@@ -5640,7 +5639,7 @@
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5668,7 +5667,7 @@
width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-menubar .p-submenu-list .p-submenu-icon {
@@ -5697,7 +5696,7 @@
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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
@@ -5763,7 +5762,7 @@
width: 100%;
}
.p-menubar .p-menubar-root-list .p-menu-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -5813,7 +5812,7 @@
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5974,7 +5973,7 @@
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5998,7 +5997,7 @@
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -6075,7 +6074,7 @@
}
.p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -6116,7 +6115,7 @@
color: rgba(255, 255, 255, 0.6);
}
.p-slidemenu .p-slidemenu-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-slidemenu .p-slidemenu-icon {
@@ -6166,7 +6165,7 @@
}
.p-steps .p-steps-item:before {
content: " ";
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
width: 100%;
top: 50%;
left: 0;
@@ -6272,7 +6271,7 @@
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -6293,7 +6292,7 @@
color: rgba(255, 255, 255, 0.6);
}
.p-tieredmenu .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-tieredmenu .p-submenu-icon {
@@ -6684,7 +6683,7 @@
height: 1.5rem;
}
.p-avatar {
- background-color: hsla(0, 0%, 100%, 0.12);
+ background-color: hsla(0deg, 0%, 100%, 0.12);
border-radius: 4px;
}
.p-avatar.p-avatar-lg {
@@ -6710,7 +6709,7 @@
border: 2px solid #1e1e1e;
}
.p-chip {
- background-color: hsla(0, 0%, 100%, 0.12);
+ background-color: hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
padding: 0 1rem;
@@ -7012,8 +7011,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7023,13 +7022,13 @@
background: transparent;
}
.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7258,7 +7257,7 @@
background-color: rgba(255, 255, 255, 0.16);
}
.p-calendar-w-btn {
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
background: #1e1e1e;
border-radius: 4px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -7308,7 +7307,7 @@
order: 3;
}
.p-datepicker table th {
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.38);
font-weight: 400;
font-size: 0.875rem;
@@ -7335,8 +7334,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7346,13 +7345,13 @@
background: transparent;
}
.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7413,8 +7412,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7424,13 +7423,13 @@
background: transparent;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7472,7 +7471,7 @@
border-radius: 2px;
}
.p-checkbox .p-checkbox-box {
- border-color: hsla(0, 0%, 100%, 0.7);
+ border-color: hsla(0deg, 0%, 100%, 0.7);
border-radius: 2px;
position: relative;
}
@@ -7491,7 +7490,7 @@
box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
- border-color: hsla(0, 0%, 100%, 0.7);
+ border-color: hsla(0deg, 0%, 100%, 0.7);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -7500,7 +7499,7 @@
box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
- border-color: hsla(0, 0%, 100%, 0.7);
+ border-color: hsla(0deg, 0%, 100%, 0.7);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -7546,8 +7545,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7557,13 +7556,13 @@
background: transparent;
}
.p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7633,8 +7632,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7644,13 +7643,13 @@
background: transparent;
}
.p-input-filled .p-dropdown:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7696,20 +7695,20 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-inputtext:enabled:hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
}
.p-input-filled .p-inputtext:enabled:focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7729,8 +7728,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7875,8 +7874,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7886,13 +7885,13 @@
background: transparent;
}
.p-input-filled .p-multiselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -8043,7 +8042,7 @@
box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -8052,7 +8051,7 @@
box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -8309,8 +8308,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -8320,13 +8319,13 @@
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 22f3ff1824..c25c3a1418 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -659,6 +659,7 @@
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: rgba(0, 0, 0, 0.87);
@@ -669,6 +670,15 @@
box-shadow: none;
border-color: #3F51B5;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f5f5f5;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #ececec;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #dcdcdc;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -709,38 +719,29 @@
transition: none;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 1rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: none;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #3F51B5;
background: rgba(63, 81, 181, 0.12);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(63, 81, 181, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(0, 0, 0, 0.87);
background: rgba(0, 0, 0, 0.04);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 1rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f5f5f5;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #ececec;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #dcdcdc;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1334,6 +1335,7 @@
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
appearance: none;
border-radius: 4px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: rgba(0, 0, 0, 0.87);
@@ -1347,6 +1349,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #b00020;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f5f5f5;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #ececec;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #dcdcdc;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.875rem 0.875rem;
@@ -1360,30 +1371,9 @@
color: rgba(0, 0, 0, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #b00020;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 1rem;
- color: rgba(0, 0, 0, 0.6);
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 3rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 3rem;
- }
- .p-input-icon-right > i:last-of-type,
- .p-input-icon-right > svg:last-of-type,
- .p-input-icon-right > .p-input-suffix {
- right: 1rem;
- color: rgba(0, 0, 0, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 3rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 3rem;
}
@@ -2085,6 +2075,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 2rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f5f5f5;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #ececec;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #dcdcdc;
+ }
.p-treeselect .p-treeselect-label {
padding: 1rem 1rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 1151d57f1d..4fcad7abf7 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -241,7 +241,7 @@
}
.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: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
padding: 0.75rem 0.75rem;
@@ -419,7 +419,7 @@
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
color: #9FA8DA;
@@ -445,7 +445,7 @@
padding: 0.5rem;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
border-radius: 4px;
}
.p-datepicker:not(.p-datepicker-inline) {
@@ -462,7 +462,7 @@
background: #1e1e1e;
font-weight: 500;
margin: 0;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
@@ -546,13 +546,13 @@
}
.p-datepicker .p-datepicker-buttonbar {
padding: 0.75rem 0;
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
}
.p-datepicker .p-datepicker-buttonbar .p-button {
width: auto;
}
.p-datepicker .p-timepicker {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
padding: 0.5rem;
}
.p-datepicker .p-timepicker button {
@@ -611,7 +611,7 @@
background: rgba(159, 168, 218, 0.16);
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
- border-left: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-left: 1px solid hsla(0deg, 0%, 100%, 0.12);
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-top: 0;
@@ -656,9 +656,10 @@
}
.p-cascadeselect {
background: #1e1e1e;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
@@ -669,6 +670,15 @@
box-shadow: none;
border-color: #9FA8DA;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: hsla(0deg, 0%, 100%, 0.06);
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: hsla(0deg, 0%, 100%, 0.08);
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: hsla(0deg, 0%, 100%, 0.1);
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -709,38 +719,29 @@
transition: none;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.75rem 0.75rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: none;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #9FA8DA;
background: rgba(159, 168, 218, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(159, 168, 218, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 0.75rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: hsla(0, 0%, 100%, 0.06);
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: hsla(0, 0%, 100%, 0.1);
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -771,11 +772,11 @@
height: 18px;
}
.p-checkbox .p-checkbox-input {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
border-radius: 4px;
}
.p-checkbox .p-checkbox-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
background: #1e1e1e;
width: 18px;
height: 18px;
@@ -794,7 +795,7 @@
height: 14px;
}
.p-checkbox .p-checkbox-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
background: #1e1e1e;
width: 18px;
height: 18px;
@@ -834,25 +835,25 @@
border-color: #f44435;
}
.p-checkbox.p-variant-filled .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
background: #9FA8DA;
}
.p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
background: #9FA8DA;
}
.p-input-filled .p-checkbox .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
background: #9FA8DA;
}
.p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
background: #9FA8DA;
@@ -872,13 +873,13 @@
align-items: center;
}
.p-tristatecheckbox.p-variant-filled .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
background: #9FA8DA;
}
.p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
background: #9FA8DA;
@@ -938,12 +939,12 @@
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-chips .p-chips-multiple-container .p-chips-token.p-focus {
- background: hsla(0, 0%, 100%, 0.24);
+ background: hsla(0deg, 0%, 100%, 0.24);
color: rgba(255, 255, 255, 0.87);
}
.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -1058,7 +1059,7 @@
}
.p-dropdown {
background: #1e1e1e;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
outline-color: transparent;
@@ -1073,13 +1074,13 @@
border-color: #9FA8DA;
}
.p-dropdown.p-variant-filled {
- background: hsla(0, 0%, 100%, 0.06);
+ background: hsla(0deg, 0%, 100%, 0.06);
}
.p-dropdown.p-variant-filled:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
}
.p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
background-color: transparent;
@@ -1121,7 +1122,7 @@
}
.p-dropdown-panel .p-dropdown-header {
padding: 0.75rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #2b2b2b;
margin: 0;
@@ -1163,7 +1164,7 @@
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
position: relative;
@@ -1185,14 +1186,14 @@
.p-inputgroup-addon {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.6);
- border-top: 1px solid hsla(0, 0%, 100%, 0.3);
- border-left: 1px solid hsla(0, 0%, 100%, 0.3);
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.3);
+ border-left: 1px solid hsla(0deg, 0%, 100%, 0.3);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3);
padding: 0.75rem 0.75rem;
min-width: 2.357rem;
}
.p-inputgroup-addon:last-child {
- border-right: 1px solid hsla(0, 0%, 100%, 0.3);
+ border-right: 1px solid hsla(0deg, 0%, 100%, 0.3);
}
.p-inputgroup > .p-component,
.p-inputgroup > .p-inputwrapper > .p-inputtext,
@@ -1288,7 +1289,7 @@
border-radius: 0.5rem;
}
.p-inputswitch .p-inputswitch-slider {
- background: hsla(0, 0%, 100%, 0.3);
+ background: hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 0.5rem;
outline-color: transparent;
@@ -1310,7 +1311,7 @@
transform: translateX(1.5rem);
}
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
- background: hsla(0, 0%, 100%, 0.3);
+ background: hsla(0deg, 0%, 100%, 0.3);
}
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
background: rgba(159, 168, 218, 0.5);
@@ -1330,10 +1331,11 @@
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
padding: 0.75rem 0.75rem;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
appearance: none;
border-radius: 4px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: rgba(255, 255, 255, 0.6);
@@ -1347,6 +1349,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f44435;
}
+ .p-inputtext.p-variant-filled {
+ background-color: hsla(0deg, 0%, 100%, 0.06);
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: hsla(0deg, 0%, 100%, 0.08);
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: hsla(0deg, 0%, 100%, 0.1);
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1360,30 +1371,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #f44435;
}
- .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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -1406,13 +1396,13 @@
color: rgba(255, 255, 255, 0.6);
}
.p-input-filled .p-inputtext {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-input-filled .p-inputtext:enabled:hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-input-filled .p-inputtext:enabled:focus {
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
}
.p-inputtext-sm .p-inputtext {
font-size: 0.875rem;
@@ -1472,14 +1462,14 @@
.p-listbox {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
border-radius: 4px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
outline-color: transparent;
}
.p-listbox .p-listbox-header {
padding: 0.75rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
margin: 0;
@@ -1532,15 +1522,15 @@
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-listbox.p-focus {
outline: 0 none;
@@ -1572,7 +1562,7 @@
}
.p-mention-panel .p-mention-items .p-mention-item:hover {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-mention-panel .p-mention-items .p-mention-item.p-highlight {
color: #9FA8DA;
@@ -1668,7 +1658,7 @@
}
.p-multiselect {
background: #1e1e1e;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
outline-color: transparent;
@@ -1683,13 +1673,13 @@
border-color: #9FA8DA;
}
.p-multiselect.p-variant-filled {
- background: hsla(0, 0%, 100%, 0.06);
+ background: hsla(0deg, 0%, 100%, 0.06);
}
.p-multiselect.p-variant-filled:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
}
.p-multiselect .p-multiselect-label {
padding: 0.75rem 0.75rem;
@@ -1701,7 +1691,7 @@
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
@@ -1730,7 +1720,7 @@
}
.p-multiselect-panel .p-multiselect-header {
padding: 0.75rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #2b2b2b;
margin: 0;
@@ -1794,7 +1784,7 @@
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
margin-right: 0.5rem;
@@ -1876,11 +1866,11 @@
opacity: 0;
z-index: 1;
outline: 0 none;
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
border-radius: 50%;
}
.p-radiobutton .p-radiobutton-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
background: #1e1e1e;
width: 20px;
height: 20px;
@@ -1919,25 +1909,25 @@
border-color: #f44435;
}
.p-radiobutton.p-variant-filled .p-radiobutton-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
background: #121212;
}
.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
background: #121212;
}
.p-input-filled .p-radiobutton .p-radiobutton-box {
- background-color: hsla(0, 0%, 100%, 0.06);
+ background-color: hsla(0deg, 0%, 100%, 0.06);
}
.p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
background: #121212;
}
.p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
background: #121212;
@@ -2029,7 +2019,7 @@
border-color: #f44435;
}
.p-slider {
- background: hsla(0, 0%, 100%, 0.3);
+ background: hsla(0deg, 0%, 100%, 0.3);
border: 0 none;
border-radius: 4px;
}
@@ -2069,7 +2059,7 @@
}
.p-treeselect {
background: #1e1e1e;
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
@@ -2085,6 +2075,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: hsla(0deg, 0%, 100%, 0.06);
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: hsla(0deg, 0%, 100%, 0.08);
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: hsla(0deg, 0%, 100%, 0.1);
+ }
.p-treeselect .p-treeselect-label {
padding: 0.75rem 0.75rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -2095,7 +2094,7 @@
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
@@ -2125,7 +2124,7 @@
}
.p-treeselect-panel .p-treeselect-header {
padding: 0.75rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #2b2b2b;
margin: 0;
@@ -2176,13 +2175,13 @@
background: transparent;
}
.p-input-filled .p-treeselect {
- background: hsla(0, 0%, 100%, 0.06);
+ background: hsla(0deg, 0%, 100%, 0.06);
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
}
.p-togglebutton {
position: relative;
@@ -3575,7 +3574,7 @@
}
.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: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
outline: 0 none;
@@ -3583,12 +3582,12 @@
box-shadow: none;
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-column-filter-overlay-menu .p-column-filter-operator {
padding: 0.75rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
background: #2b2b2b;
margin: 0;
@@ -3597,7 +3596,7 @@
}
.p-column-filter-overlay-menu .p-column-filter-constraint {
padding: 0.75rem;
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
}
.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
margin-bottom: 0.5rem;
@@ -3661,12 +3660,12 @@
transition: transform 0.2s, none;
}
.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
color: #9FA8DA;
@@ -3679,10 +3678,10 @@
background: rgba(255, 255, 255, 0.02);
}
.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-organizationchart .p-organizationchart-node-content.p-highlight {
@@ -3846,12 +3845,12 @@
transition: transform 0.2s, none;
}
.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-picklist .p-picklist-list .p-picklist-item.p-focus {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
color: #9FA8DA;
@@ -3980,11 +3979,11 @@
color: #9FA8DA;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
color: rgba(255, 255, 255, 0.87);
}
.p-tree .p-tree-filter-container {
@@ -4523,7 +4522,7 @@
padding: 0 1.25rem;
}
.p-divider.p-divider-horizontal:before {
- border-top: 1px hsla(0, 0%, 100%, 0.12);
+ border-top: 1px hsla(0deg, 0%, 100%, 0.12);
}
.p-divider.p-divider-horizontal .p-divider-content {
padding: 0 0.5rem;
@@ -4533,7 +4532,7 @@
padding: 1.25rem 0;
}
.p-divider.p-divider-vertical:before {
- border-left: 1px hsla(0, 0%, 100%, 0.12);
+ border-left: 1px hsla(0deg, 0%, 100%, 0.12);
}
.p-divider.p-divider-vertical .p-divider-content {
padding: 0.5rem 0;
@@ -4595,10 +4594,10 @@
}
.p-splitter .p-splitter-gutter {
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
- background: hsla(0, 0%, 100%, 0.04);
+ background: hsla(0deg, 0%, 100%, 0.04);
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
outline: 0 none;
@@ -4606,7 +4605,7 @@
box-shadow: none;
}
.p-splitter .p-splitter-gutter-resizing {
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-stepper .p-stepper-nav {
display: flex;
@@ -5124,7 +5123,7 @@
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5145,7 +5144,7 @@
color: rgba(255, 255, 255, 0.6);
}
.p-contextmenu .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-contextmenu .p-submenu-icon {
@@ -5287,7 +5286,7 @@
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5327,7 +5326,7 @@
width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-megamenu.p-megamenu-vertical {
@@ -5388,7 +5387,7 @@
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-mobile-active .p-megamenu-root-list .p-menu-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
@@ -5438,7 +5437,7 @@
}
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5525,7 +5524,7 @@
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5560,7 +5559,7 @@
border-top-left-radius: 0;
}
.p-menu .p-menu-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-menubar {
@@ -5640,7 +5639,7 @@
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5668,7 +5667,7 @@
width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-menubar .p-submenu-list .p-submenu-icon {
@@ -5697,7 +5696,7 @@
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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
@@ -5763,7 +5762,7 @@
width: 100%;
}
.p-menubar .p-menubar-root-list .p-menu-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -5813,7 +5812,7 @@
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5974,7 +5973,7 @@
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5998,7 +5997,7 @@
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -6075,7 +6074,7 @@
}
.p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -6116,7 +6115,7 @@
color: rgba(255, 255, 255, 0.6);
}
.p-slidemenu .p-slidemenu-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-slidemenu .p-slidemenu-icon {
@@ -6166,7 +6165,7 @@
}
.p-steps .p-steps-item:before {
content: " ";
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
width: 100%;
top: 50%;
left: 0;
@@ -6272,7 +6271,7 @@
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: hsla(0, 0%, 100%, 0.12);
+ background: hsla(0deg, 0%, 100%, 0.12);
}
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -6293,7 +6292,7 @@
color: rgba(255, 255, 255, 0.6);
}
.p-tieredmenu .p-menuitem-separator {
- border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-top: 1px solid hsla(0deg, 0%, 100%, 0.12);
margin: 0.5rem 0;
}
.p-tieredmenu .p-submenu-icon {
@@ -6684,7 +6683,7 @@
height: 1.5rem;
}
.p-avatar {
- background-color: hsla(0, 0%, 100%, 0.12);
+ background-color: hsla(0deg, 0%, 100%, 0.12);
border-radius: 4px;
}
.p-avatar.p-avatar-lg {
@@ -6710,7 +6709,7 @@
border: 2px solid #1e1e1e;
}
.p-chip {
- background-color: hsla(0, 0%, 100%, 0.12);
+ background-color: hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
padding: 0 0.75rem;
@@ -7012,8 +7011,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7023,13 +7022,13 @@
background: transparent;
}
.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7258,7 +7257,7 @@
background-color: rgba(255, 255, 255, 0.16);
}
.p-calendar-w-btn {
- border: 1px solid hsla(0, 0%, 100%, 0.3);
+ border: 1px solid hsla(0deg, 0%, 100%, 0.3);
background: #1e1e1e;
border-radius: 4px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -7308,7 +7307,7 @@
order: 3;
}
.p-datepicker table th {
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+ border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12);
color: rgba(255, 255, 255, 0.38);
font-weight: 400;
font-size: 0.875rem;
@@ -7335,8 +7334,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7346,13 +7345,13 @@
background: transparent;
}
.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7413,8 +7412,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7424,13 +7423,13 @@
background: transparent;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7472,7 +7471,7 @@
border-radius: 2px;
}
.p-checkbox .p-checkbox-box {
- border-color: hsla(0, 0%, 100%, 0.7);
+ border-color: hsla(0deg, 0%, 100%, 0.7);
border-radius: 2px;
position: relative;
}
@@ -7491,7 +7490,7 @@
box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
- border-color: hsla(0, 0%, 100%, 0.7);
+ border-color: hsla(0deg, 0%, 100%, 0.7);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -7500,7 +7499,7 @@
box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
- border-color: hsla(0, 0%, 100%, 0.7);
+ border-color: hsla(0deg, 0%, 100%, 0.7);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -7546,8 +7545,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7557,13 +7556,13 @@
background: transparent;
}
.p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7633,8 +7632,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7644,13 +7643,13 @@
background: transparent;
}
.p-input-filled .p-dropdown:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7696,20 +7695,20 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-inputtext:enabled:hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
}
.p-input-filled .p-inputtext:enabled:focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -7729,8 +7728,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7875,8 +7874,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -7886,13 +7885,13 @@
background: transparent;
}
.p-input-filled .p-multiselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
@@ -8043,7 +8042,7 @@
box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
@@ -8052,7 +8051,7 @@
box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
- border: 2px solid hsla(0, 0%, 100%, 0.7);
+ border: 2px solid hsla(0deg, 0%, 100%, 0.7);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
@@ -8309,8 +8308,8 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
- background: hsla(0, 0%, 100%, 0.06) no-repeat;
- background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+ background: hsla(0deg, 0%, 100%, 0.06) no-repeat;
+ background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
@@ -8320,13 +8319,13 @@
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
- background-color: hsla(0, 0%, 100%, 0.08);
+ background-color: hsla(0deg, 0%, 100%, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
- background-color: hsla(0, 0%, 100%, 0.1);
+ background-color: hsla(0deg, 0%, 100%, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 123a2154b9..8b63f7fd85 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -659,6 +659,7 @@
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: rgba(0, 0, 0, 0.87);
@@ -669,6 +670,15 @@
box-shadow: none;
border-color: #3F51B5;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f5f5f5;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #ececec;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #dcdcdc;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -709,38 +719,29 @@
transition: none;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.75rem 0.75rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: none;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #3F51B5;
background: rgba(63, 81, 181, 0.12);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(63, 81, 181, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(0, 0, 0, 0.87);
background: rgba(0, 0, 0, 0.04);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 0.75rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f5f5f5;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #ececec;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #dcdcdc;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1334,6 +1335,7 @@
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
appearance: none;
border-radius: 4px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: rgba(0, 0, 0, 0.87);
@@ -1347,6 +1349,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #b00020;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f5f5f5;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #ececec;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #dcdcdc;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1360,30 +1371,9 @@
color: rgba(0, 0, 0, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #b00020;
}
- .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(0, 0, 0, 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(0, 0, 0, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2085,6 +2075,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f5f5f5;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #ececec;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #dcdcdc;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.75rem 0.75rem;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index fccf607f80..0c18717ea0 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -661,6 +661,7 @@
border: 1px solid #d8dee9;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 4px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #81a1c1;
@@ -671,6 +672,15 @@
box-shadow: 0 0 0 0.2rem #c0d0e0;
border-color: #81a1c1;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #eceff4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #eceff4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -711,38 +721,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #c0d0e0;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #2e3440;
background: #d8dee9;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #bec8da;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #4c566a;
background: transparent;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #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 {
position: relative;
display: inline-flex;
@@ -1336,6 +1337,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 4px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #81a1c1;
@@ -1349,6 +1351,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #bf616a;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #eceff4;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #eceff4;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1362,30 +1373,9 @@
color: #4c566a;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2087,6 +2077,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #eceff4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #eceff4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 382547b844..ac4f054ba2 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #a5acb3;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 1px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #1174c0;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem #90c9f5;
border-color: #1174c0;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f2f4f8;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f2f4f8;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #90c9f5;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #44a1d9;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #1174c0;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #343a3f;
background: #dde1e6;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #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 {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 1px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #1174c0;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #d8222f;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f2f4f8;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f2f4f8;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.21875rem 0.21875rem;
@@ -1340,30 +1351,9 @@
color: #697077;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.5rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.25rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f2f4f8;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f2f4f8;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 5a1369b399..0c93fc143e 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #212121;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f4f4f4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f4f4f4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #f4f4f4;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: background-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.429rem 0.857rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #8dcdff;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #e02365;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #e02365;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #333333;
background: #eaeaea;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.429rem 0.857rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f4f4f4;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f4f4f4;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #f4f4f4;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #212121;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #a80000;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f4f4f4;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f4f4f4;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #f4f4f4;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.375375rem 0.375375rem;
@@ -1340,30 +1351,9 @@
color: #666666;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #a80000;
}
- .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.429rem;
- color: #848484;
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 1.858rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 1.858rem;
- }
- .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.429rem;
- color: #848484;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 1.858rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.858rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.429rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f4f4f4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f4f4f4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #f4f4f4;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 30b6a74e7b..e81e8598ce 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #212121;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f4f4f4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f4f4f4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #f4f4f4;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: background-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.429rem 0.857rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #8dcdff;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #007ad9;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #007ad9;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #333333;
background: #eaeaea;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.429rem 0.857rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f4f4f4;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f4f4f4;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #f4f4f4;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1317,6 +1318,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #212121;
@@ -1330,6 +1332,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #a80000;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f4f4f4;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f4f4f4;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #f4f4f4;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
color: #666666;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #a80000;
}
- .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.429rem;
- color: #848484;
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 1.858rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 1.858rem;
- }
- .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.429rem;
- color: #848484;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 1.858rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.858rem;
}
@@ -2074,6 +2064,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.429rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f4f4f4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f4f4f4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #f4f4f4;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f9f75834c2..1f7f4c1ae6 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #212121;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f4f4f4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f4f4f4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #f4f4f4;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: background-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.429rem 0.857rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #8dcdff;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #007ad9;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #007ad9;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #333333;
background: #eaeaea;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.429rem 0.857rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f4f4f4;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f4f4f4;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #f4f4f4;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1317,6 +1318,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #212121;
@@ -1330,6 +1332,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #a80000;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f4f4f4;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f4f4f4;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #f4f4f4;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.375375rem 0.375375rem;
@@ -1343,30 +1354,9 @@
color: #666666;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #a80000;
}
- .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.429rem;
- color: #848484;
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 1.858rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 1.858rem;
- }
- .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.429rem;
- color: #848484;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 1.858rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.858rem;
}
@@ -2074,6 +2064,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.429rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f4f4f4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f4f4f4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #f4f4f4;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 5bbbc9303e..1d54b22050 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #dadada;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 2px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #a6a6a6;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem #e4e9ec;
border-color: #7b95a3;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f4f4f4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f4f4f4;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #f4f4f4;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.429rem 0.857rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #e4e9ec;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #385048;
background: #afd3c8;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #aed3c7;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #666666;
background: #f4f4f4;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.429rem 0.857rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f4f4f4;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f4f4f4;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #f4f4f4;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 2px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #a6a6a6;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #e7a3a3;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f4f4f4;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f4f4f4;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #f4f4f4;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.375375rem 0.375375rem;
@@ -1340,30 +1351,9 @@
color: #a6a6a6;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #e7a3a3;
}
- .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.429rem;
- color: #a6a6a6;
- }
- .p-input-icon-left > .p-inputtext {
- padding-left: 1.858rem;
- }
- .p-input-icon-left.p-float-label > label {
- left: 1.858rem;
- }
- .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.429rem;
- color: #a6a6a6;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 1.858rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 1.858rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.429rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f4f4f4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f4f4f4;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #f4f4f4;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.429rem 0.429rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 92ed8e13b9..b19ac0e203 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #2196f3;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem #a6d5fa;
border-color: #2196f3;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f8f9fa;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f8f9fa;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #a6d5fa;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #495057;
background: #e3f2fd;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(33, 150, 243, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #495057;
background: #e9ecef;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f8f9fa;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f8f9fa;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #2196f3;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f44336;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f8f9fa;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f8f9fa;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: #6c757d;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #f44336;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: #6c757d;
- }
- .p-input-icon-left > .p-inputtext {
- 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: #6c757d;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f8f9fa;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f8f9fa;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 942ae9fb7a..8f4f936409 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #4caf50;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem #b7e0b8;
border-color: #4caf50;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f8f9fa;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f8f9fa;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #b7e0b8;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #495057;
background: #e8f5e9;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(76, 175, 80, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #495057;
background: #e9ecef;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f8f9fa;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f8f9fa;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #4caf50;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f44336;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f8f9fa;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f8f9fa;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: #6c757d;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #f44336;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: #6c757d;
- }
- .p-input-icon-left > .p-inputtext {
- 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: #6c757d;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f8f9fa;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f8f9fa;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 6aa2c42475..a31fe592f3 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #ffc107;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 0.2rem #ffe69c;
border-color: #ffc107;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f8f9fa;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f8f9fa;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #ffe69c;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #495057;
background: #fff3e0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(255, 193, 7, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #495057;
background: #e9ecef;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #f8f9fa;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #f8f9fa;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #ffc107;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f44336;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f8f9fa;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f8f9fa;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: #6c757d;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #f44336;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: #6c757d;
- }
- .p-input-icon-left > .p-inputtext {
- 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: #6c757d;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f8f9fa;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f8f9fa;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index b9742543d6..8c77f963a3 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -10,7 +10,7 @@
--text-color: rgba(255, 255, 255, 0.87);
--text-color-secondary: rgba(255, 255, 255, 0.6);
--primary-color: #b19df7;
- --primary-color-text: hsl(234, 15%, 13%);
+ --primary-color-text: hsl(234deg, 15%, 13%);
--surface-0: #1d1e27;
--surface-50: #34343d;
--surface-100: #4a4b52;
@@ -658,6 +658,7 @@
border: 1px solid #3e4053;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #b19df7;
@@ -668,6 +669,15 @@
box-shadow: 0 0 0 1px #e0d8fc;
border-color: #b19df7;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #3e4053;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #3e4053;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #3e4053;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -708,38 +718,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #e0d8fc;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #b19df7;
background: rgba(177, 157, 247, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(177, 157, 247, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1.25rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #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 {
position: relative;
display: inline-flex;
@@ -785,7 +786,7 @@
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
transition-duration: 0.2s;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
font-size: 14px;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -804,7 +805,7 @@
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
transition-duration: 0.2s;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
font-size: 14px;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -821,7 +822,7 @@
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
border-color: #9378f4;
background: #9378f4;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
outline: 0 none;
@@ -1333,6 +1334,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #b19df7;
@@ -1346,6 +1348,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #ff9a9a;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #3e4053;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #3e4053;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #3e4053;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1359,30 +1370,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -1892,7 +1882,7 @@
width: 12px;
height: 12px;
transition-duration: 0.2s;
- background-color: hsl(234, 15%, 13%);
+ background-color: hsl(234deg, 15%, 13%);
}
.p-radiobutton.p-highlight .p-radiobutton-box {
border-color: #b19df7;
@@ -1906,7 +1896,7 @@
background: #9378f4;
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
- background-color: hsl(234, 15%, 13%);
+ background-color: hsl(234deg, 15%, 13%);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
outline: 0 none;
@@ -2009,20 +1999,20 @@
.p-selectbutton .p-button.p-highlight {
background: #b19df7;
border-color: #b19df7;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-selectbutton .p-button.p-highlight .p-button-icon-left,
.p-selectbutton .p-button.p-highlight .p-button-icon-right {
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-selectbutton .p-button.p-highlight:hover {
background: #a28af5;
border-color: #a28af5;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-selectbutton.p-invalid > .p-button {
border-color: #ff9a9a;
@@ -2084,6 +2074,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #3e4053;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #3e4053;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #3e4053;
+ }
.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;
@@ -2224,11 +2223,11 @@
.p-togglebutton.p-highlight .p-button {
background: #b19df7;
border-color: #b19df7;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-togglebutton.p-highlight .p-button .p-button-icon-left,
.p-togglebutton.p-highlight .p-button .p-button-icon-right {
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
background: rgba(255, 255, 255, 0.03);
@@ -2242,11 +2241,11 @@
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
background: #a28af5;
border-color: #a28af5;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
outline: 0 none;
@@ -2258,7 +2257,7 @@
border-color: #ff9a9a;
}
.p-button {
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
background: #b19df7;
border: 1px solid #b19df7;
padding: 0.75rem 1.25rem;
@@ -2268,12 +2267,12 @@
}
.p-button:not(:disabled):hover {
background: #a28af5;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
border-color: #a28af5;
}
.p-button:not(:disabled):active {
background: #9378f4;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
border-color: #9378f4;
}
.p-button.p-button-outlined {
@@ -2355,7 +2354,7 @@
height: 1rem;
line-height: 1rem;
color: #b19df7;
- background-color: hsl(234, 15%, 13%);
+ background-color: hsl(234deg, 15%, 13%);
}
.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);
@@ -4357,7 +4356,7 @@
border-radius: 50%;
width: 1rem;
height: 1rem;
- background-color: hsl(234, 15%, 13%);
+ background-color: hsl(234deg, 15%, 13%);
}
.p-timeline .p-timeline-event-connector {
background-color: #3e4053;
@@ -4897,7 +4896,7 @@
}
.p-overlaypanel .p-overlaypanel-close {
background: #b19df7;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
width: 2rem;
height: 2rem;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
@@ -4908,7 +4907,7 @@
}
.p-overlaypanel .p-overlaypanel-close:enabled:hover {
background: #a28af5;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
}
.p-overlaypanel:after {
border: solid transparent;
@@ -6722,7 +6721,7 @@
}
.p-tag {
background: #b19df7;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.4rem;
@@ -6836,7 +6835,7 @@
background: #b19df7;
}
.p-progressbar .p-progressbar-label {
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
line-height: 1.5rem;
}
.p-terminal {
@@ -6852,7 +6851,7 @@
}
.p-badge {
background: #b19df7;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
font-size: 0.75rem;
font-weight: 700;
min-width: 1.5rem;
@@ -6893,7 +6892,7 @@
}
.p-tag {
background: #b19df7;
- color: hsl(234, 15%, 13%);
+ color: hsl(234deg, 15%, 13%);
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.4rem;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index e8d4ee3988..9dbdcbb241 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -658,6 +658,7 @@
border: 1px solid #d3dbe3;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #7254f3;
@@ -668,6 +669,15 @@
box-shadow: 0 0 0 1px #c7bbfa;
border-color: #7254f3;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f6f9fc;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f6f9fc;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -708,38 +718,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #c7bbfa;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #7254f3;
background: #e2dcfc;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #cbc0fa;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #043d75;
background: #f6f9fc;
}
+ .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-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #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 {
position: relative;
display: inline-flex;
@@ -1333,6 +1334,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #7254f3;
@@ -1346,6 +1348,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #ff6767;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f6f9fc;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f6f9fc;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1359,30 +1370,9 @@
color: #708da9;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2084,6 +2074,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f6f9fc;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f6f9fc;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.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;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index f5859be644..143e6c0904 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -667,6 +667,7 @@
border: 1px solid #d4d4d8;
transition: none;
border-radius: 0.375rem;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #d4d4d8;
@@ -677,6 +678,15 @@
box-shadow: 0 0 0 1px #6366f1;
border-color: #4f46e5;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #fafafa;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #fafafa;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -717,38 +727,29 @@
transition: none;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.75rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #6366f1;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #312e81;
background: #eef2ff;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #e0e7ff;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #18181b;
background: #f4f4f5;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.75rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #fafafa;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #fafafa;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #ffffff;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1342,6 +1343,7 @@
transition: none;
appearance: none;
border-radius: 0.375rem;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #d4d4d8;
@@ -1355,6 +1357,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f0a9a7;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #fafafa;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #fafafa;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #ffffff;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.65625rem 0.65625rem;
@@ -1368,29 +1379,8 @@
color: #71717a;
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
- color: #e24c4c;
- }
- .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: #71717a;
- }
- .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: #71717a;
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2.5rem;
+ .p-float-label > .p-invalid + label {
+ color: #f0a9a7;
}
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
@@ -2093,6 +2083,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #fafafa;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #fafafa;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #ffffff;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.75rem 0.75rem;
transition: none;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index b4102aafee..2e9108e8f9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #64b5f6;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 1px #93cbf9;
border-color: #64b5f6;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #304562;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #304562;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #304562;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #93cbf9;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(100, 181, 246, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(100, 181, 246, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #304562;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #304562;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #304562;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #64b5f6;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #ef9a9a;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #304562;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #304562;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #304562;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #ef9a9a;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-left > .p-inputtext {
- 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: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #304562;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #304562;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #304562;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 703e012ca8..d3f374ad6c 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #81c784;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 1px #a7d8a9;
border-color: #81c784;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #304562;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #304562;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #304562;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(129, 199, 132, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(129, 199, 132, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #304562;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #304562;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #304562;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #81c784;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #ef9a9a;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #304562;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #304562;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #304562;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #ef9a9a;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-left > .p-inputtext {
- 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: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #304562;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #304562;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #304562;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 0c801a0ab0..5bb41305ba 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -639,6 +639,7 @@
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #ffd54f;
@@ -649,6 +650,15 @@
box-shadow: 0 0 0 1px #ffe284;
border-color: #ffd54f;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #304562;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #304562;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #304562;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -689,38 +699,29 @@
transition: box-shadow 0.2s;
border-radius: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
- padding: 0.5rem 1rem;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #ffe284;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 213, 79, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(255, 213, 79, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #304562;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #304562;
- }
- .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #304562;
- }
.p-checkbox {
position: relative;
display: inline-flex;
@@ -1314,6 +1315,7 @@
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
appearance: none;
border-radius: 3px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #ffd54f;
@@ -1327,6 +1329,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #ef9a9a;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #304562;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #304562;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #304562;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.4375rem;
@@ -1340,30 +1351,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
color: #ef9a9a;
}
- .p-input-icon-left > i:first-of-type,
- .p-input-icon-left > svg:first-of-type,
- .p-input-icon-left > .p-input-prefix {
- left: 0.5rem;
- color: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-left > .p-inputtext {
- 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: rgba(255, 255, 255, 0.6);
- }
- .p-input-icon-right > .p-inputtext {
- padding-right: 2rem;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2rem;
}
@@ -2065,6 +2055,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.5rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #304562;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #304562;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #304562;
+ }
.p-treeselect .p-treeselect-label {
padding: 0.5rem 0.5rem;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 860f9bdf42..91674dfed7 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -665,6 +665,7 @@
border: 2px solid #263238;
transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #2d3e44;
@@ -675,6 +676,15 @@
box-shadow: 0 0 0 1px #9eade6;
border-color: #9eade6;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #263238;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #263238;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #263238;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -715,38 +725,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #9eade6;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #9eade6;
background: rgba(158, 173, 230, 0.16);
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: rgba(158, 173, 230, 0.24);
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(158, 173, 230, 0.08);
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #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 {
position: relative;
display: inline-flex;
@@ -1340,6 +1341,7 @@
transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #2d3e44;
@@ -1353,6 +1355,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f78c79;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #263238;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #263238;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #263238;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.65625rem;
@@ -1366,30 +1377,9 @@
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.3s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2091,6 +2081,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #263238;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #263238;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #263238;
+ }
.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;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 4931c66a7d..a10589e8b0 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -665,6 +665,7 @@
border: 2px solid #e1e1e1;
transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
border-radius: 6px;
+ outline-color: transparent;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #cecece;
@@ -675,6 +676,15 @@
box-shadow: 0 0 0 0.1rem #bbc7ee;
border-color: #91a4e3;
}
+ .p-cascadeselect.p-variant-filled {
+ background-color: #f2f2f2;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:hover {
+ background-color: #f2f2f2;
+ }
+ .p-cascadeselect.p-variant-filled:enabled:focus {
+ background-color: #f2f2f2;
+ }
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
@@ -715,38 +725,29 @@
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:first-child {
+ margin-top: 0;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
- outline: 0 none;
- outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem #bbc7ee;
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+ margin-bottom: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #585858;
background: #ced6f1;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+ background: #aebbe8;
+ }
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: #6c6c6c;
background: #edf0fa;
}
+ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+ padding: 0.5rem 1rem;
+ }
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
- .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon {
- width: 0.875rem;
- height: 0.875rem;
- }
- .p-input-filled .p-cascadeselect {
- background: #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 {
position: relative;
display: inline-flex;
@@ -1340,6 +1341,7 @@
transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
appearance: none;
border-radius: 6px;
+ outline-color: transparent;
}
.p-inputtext:enabled:hover {
border-color: #cecece;
@@ -1353,6 +1355,15 @@
.p-inputtext.p-invalid.p-component {
border-color: #f88c79;
}
+ .p-inputtext.p-variant-filled {
+ background-color: #f2f2f2;
+ }
+ .p-inputtext.p-variant-filled:enabled:hover {
+ background-color: #f2f2f2;
+ }
+ .p-inputtext.p-variant-filled:enabled:focus {
+ background-color: #f2f2f2;
+ }
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
padding: 0.4375rem 0.65625rem;
@@ -1366,30 +1377,9 @@
color: #898989;
transition-duration: 0.3s;
}
- .p-float-label > label.p-error {
+ .p-float-label > .p-invalid + label {
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;
- }
.p-icon-field-left > .p-inputtext {
padding-left: 2.5rem;
}
@@ -2091,6 +2081,15 @@
.p-treeselect.p-treeselect-clearable .p-treeselect-label {
padding-right: 1.75rem;
}
+ .p-treeselect.p-variant-filled {
+ background: #f2f2f2;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+ background-color: #f2f2f2;
+ }
+ .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+ background-color: #f2f2f2;
+ }
.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;
- 
- 
cm.current.show(e)} />
-`,
- javascript: `
-import React, { useRef } from 'react';
-import { ContextMenu } from 'primereact/contextmenu';
-
-export default function PTDemo() {
- const cm = useRef(null);
- const items = [
- {
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archieve',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- separator: true
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
- }
- ];
-
- return (
- 
cm.current.show(e)} />
- 
- 
- 
- },
- {
- label: 'App Store',
- icon: () => 
- },
- {
- label: 'Photos',
- icon: () => 
- },
- {
- label: 'Trash',
- icon: () => 
- }
- ];
-
- const positions = [
- {
- label: 'Bottom',
- value: 'bottom'
- },
- {
- label: 'Top',
- value: 'top'
- },
- {
- label: 'Left',
- value: 'left'
- },
- {
- label: 'Right',
- value: 'right'
- }
- ];
-
- const code = {
- basic: `
-
-
- {suggestion.name}
- @{suggestion.nickname}
-
- 
- 
- 
-
+