From 9319de929b0f38d54a0bc43a750dfd9a02b61bad Mon Sep 17 00:00:00 2001 From: MBelniak Date: Fri, 12 Apr 2024 15:46:08 +0200 Subject: [PATCH 01/45] Feat: Stateful TreeTable --- components/doc/common/apidoc/index.json | 61 ++++++ components/doc/treetable/statefuldoc.js | 125 +++++++++++ components/lib/datatable/DataTable.js | 25 +-- components/lib/treetable/TreeTable.js | 253 +++++++++++++++++++++- components/lib/treetable/TreeTableBase.js | 6 + components/lib/treetable/treetable.d.ts | 29 +++ components/utils/utils.js | 16 ++ pages/treetable/index.js | 7 +- 8 files changed, 498 insertions(+), 24 deletions(-) create mode 100644 components/doc/treetable/statefuldoc.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 671bfa6758..9e9357e97d 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -54672,6 +54672,22 @@ "default": "", "description": "Order to sort the data by default." }, + { + "name": "stateKey", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Unique identifier of a stateful table to use in state storage." + }, + { + "name": "stateStorage", + "optional": true, + "readonly": false, + "type": "\"custom\" | \"local\" | \"session\"", + "default": "session", + "description": "Defines where a stateful table keeps its state, valid values are \"session\" for sessionStorage, \"local\" for localStorage and \"custom\"." + }, { "name": "stripedRows", "optional": true, @@ -54749,6 +54765,25 @@ "callbacks": { "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.", "values": [ + { + "name": "customRestoreState", + "parameters": [], + "returnType": "undefined | object", + "description": "A function to implement custom restoreState with stateStorage=\"custom\". Need to return state object." + }, + { + "name": "customSaveState", + "parameters": [ + { + "name": "state", + "optional": false, + "type": "object", + "description": "The object to be stored." + } + ], + "returnType": "void", + "description": "A function to implement custom saveState with stateStorage=\"custom\"." + }, { "name": "onCollapse", "parameters": [ @@ -54931,6 +54966,32 @@ "returnType": "void", "description": "Callback to invoke on sort." }, + { + "name": "onStateRestore", + "parameters": [ + { + "name": "state", + "optional": false, + "type": "object", + "description": "Table state." + } + ], + "returnType": "void", + "description": "Callback to invoke table state is restored." + }, + { + "name": "onStateSave", + "parameters": [ + { + "name": "state", + "optional": false, + "type": "object", + "description": "Table state." + } + ], + "returnType": "void", + "description": "Callback to invoke table state is saved." + }, { "name": "onToggle", "parameters": [ diff --git a/components/doc/treetable/statefuldoc.js b/components/doc/treetable/statefuldoc.js new file mode 100644 index 0000000000..58e80c3b38 --- /dev/null +++ b/components/doc/treetable/statefuldoc.js @@ -0,0 +1,125 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { Column } from '@/components/lib/column/Column'; +import { TreeTable } from '@/components/lib/treetable/TreeTable'; +import { useEffect, useState } from 'react'; +import { NodeService } from '../../../service/NodeService'; + +export function StatefulDoc(props) { + const [nodes, setNodes] = useState([]); + + useEffect(() => { + NodeService.getTreeTableNodes().then((data) => setNodes(data)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const code = { + basic: ` + + + + + + `, + 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 StatefulDemo() { + 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 StatefulDemo() { + 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 ( + <> + +

Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.

+

+ Change the state of the table e.g paginate or expand rows, navigate away and then return to this table again to test this feature. The setting is set as session with the stateStorage property so that Table retains + the state until the browser is closed. Other alternative is local referring to localStorage for an extended lifetime. +

+ +
+ + + + + +
+ + + ); +} diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index cee2cf30ff..7ec106f9c4 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -13,6 +13,7 @@ import { DataTableBase } from './DataTableBase'; import { TableBody } from './TableBody'; import { TableFooter } from './TableFooter'; import { TableHeader } from './TableHeader'; +import { getStorage } from '../../utils/utils'; export const DataTable = React.forwardRef((inProps, ref) => { const context = React.useContext(PrimeReactContext); @@ -175,24 +176,8 @@ export const DataTable = React.forwardRef((inProps, ref) => { return columns; }; - const getStorage = () => { - switch (props.stateStorage) { - case 'local': - return window.localStorage; - - case 'session': - return window.sessionStorage; - - case 'custom': - return null; - - default: - throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".'); - } - }; - const saveState = () => { - let state = {}; + const state = {}; if (props.paginator) { state.first = getFirst(); @@ -237,7 +222,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { props.customSaveState(state); } } else { - const storage = getStorage(); + const storage = getStorage(props.stateStorage); if (ObjectUtils.isNotEmpty(state)) { storage.setItem(props.stateKey, JSON.stringify(state)); @@ -250,7 +235,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { }; const clearState = () => { - const storage = getStorage(); + const storage = getStorage(props.stateStorage); if (storage && props.stateKey) { storage.removeItem(props.stateKey); @@ -265,7 +250,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { restoredState = props.customRestoreState(); } } else { - const storage = getStorage(); + const storage = getStorage(props.stateStorage); const stateString = storage.getItem(props.stateKey); const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/; diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js index 3116b163f0..f921e8cb30 100644 --- a/components/lib/treetable/TreeTable.js +++ b/components/lib/treetable/TreeTable.js @@ -1,8 +1,8 @@ import * as React from 'react'; -import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api'; +import PrimeReact, { FilterMatchMode, FilterService, PrimeReactContext } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useEventListener, useUpdateEffect, useMergeProps } from '../hooks/Hooks'; +import { useEventListener, useUpdateEffect, useMergeProps, useMountEffect } from '../hooks/Hooks'; import { ArrowDownIcon } from '../icons/arrowdown'; import { ArrowUpIcon } from '../icons/arrowup'; import { SpinnerIcon } from '../icons/spinner'; @@ -13,6 +13,7 @@ import { TreeTableBody } from './TreeTableBody'; import { TreeTableFooter } from './TreeTableFooter'; import { TreeTableHeader } from './TreeTableHeader'; import { TreeTableScrollableView } from './TreeTableScrollableView'; +import { getStorage } from '../../utils/utils'; export const TreeTable = React.forwardRef((inProps, ref) => { const mergeProps = useMergeProps(); @@ -83,6 +84,185 @@ export const TreeTable = React.forwardRef((inProps, ref) => { } }); + const isCustomStateStorage = () => { + return props.stateStorage === 'custom'; + }; + + const isStateful = () => { + return props.stateKey != null || isCustomStateStorage(); + }; + + const saveState = () => { + let state = {}; + + if (props.paginator) { + state.first = getFirst(); + state.rows = getRows(); + } + + const sortField = getSortField(); + + if (sortField) { + state.sortField = sortField; + state.sortOrder = getSortOrder(); + } + + const multiSortMeta = getMultiSortMeta(); + + if (multiSortMeta) { + state.multiSortMeta = multiSortMeta; + } + + if (hasFilter()) { + state.filters = getFilters(); + } + + if (props.reorderableColumns) { + state.columnOrder = columnOrderState; + } + + state.expandedKeysState = expandedKeysState; + + if (props.selectionKeys && props.onSelectionChange) { + state.selectionKeys = props.selectionKeys; + } + + if (isCustomStateStorage()) { + if (props.customSaveState) { + props.customSaveState(state); + } + } else { + const storage = getStorage(props.stateStorage); + + if (ObjectUtils.isNotEmpty(state)) { + storage.setItem(props.stateKey, JSON.stringify(state)); + } + } + + if (props.onStateSave) { + props.onStateSave(state); + } + }; + + const clearState = () => { + const storage = getStorage(props.stateStorage); + + if (storage && props.stateKey) { + storage.removeItem(props.stateKey); + } + }; + + const restoreState = () => { + let restoredState = {}; + + if (isCustomStateStorage()) { + if (props.customRestoreState) { + restoredState = props.customRestoreState(); + } + } else { + const storage = getStorage(props.stateStorage); + const stateString = storage.getItem(props.stateKey); + const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/; + + const reviver = function (key, value) { + return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value; + }; + + if (stateString) { + restoredState = JSON.parse(stateString, reviver); + } + } + + _restoreState(restoredState); + }; + + const restoreTableState = (restoredState) => { + _restoreState(restoredState); + }; + + const _restoreState = (restoredState = {}) => { + if (ObjectUtils.isNotEmpty(restoredState)) { + if (props.paginator) { + if (props.onPage) { + const getOnPageParams = (first, rows) => { + const totalRecords = getTotalRecords(processedData()); + const pageCount = Math.ceil(totalRecords / rows) || 1; + const page = Math.floor(first / rows); + + return { first, rows, page, pageCount }; + }; + + props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows))); + } else { + setFirstState(restoredState.first); + setRowsState(restoredState.rows); + } + } + + if (restoredState.sortField) { + if (props.onSort) { + props.onSort( + createEvent({ + sortField: restoredState.sortField, + sortOrder: restoredState.sortOrder + }) + ); + } else { + setSortFieldState(restoredState.sortField); + setSortOrderState(restoredState.sortOrder); + } + } + + if (restoredState.multiSortMeta) { + if (props.onSort) { + props.onSort( + createEvent({ + multiSortMeta: restoredState.multiSortMeta + }) + ); + } else { + setMultiSortMetaState(restoredState.multiSortMeta); + } + } + + if (restoredState.filters) { + if (props.onFilter) { + props.onFilter( + createEvent({ + filters: restoredState.filters + }) + ); + } else { + setFiltersState(cloneFilters(restoredState.filters)); + } + } + + if (props.reorderableColumns) { + setColumnOrderState(restoredState.columnOrder); + } + + if (restoredState.expandedKeysState) { + if (props.onToggle) { + props.onRowToggle({ + data: restoredState.expandedKeysState + }); + } else { + setExpandedKeysState(restoredState.expandedKeysState); + } + } + + if (restoredState.selectionKeys && props.onSelectionChange) { + props.onSelectionChange({ + value: restoredState.selectionKeys + }); + } + + if (props.onStateRestore) { + props.onStateRestore(restoredState); + } + } + }; + const onToggle = (event) => { const { originalEvent, value, navigateFocusToChild } = event; @@ -337,6 +517,41 @@ export const TreeTable = React.forwardRef((inProps, ref) => { } }; + const cloneFilters = (filters) => { + filters = filters || props.filters; + let cloned = {}; + + if (filters) { + Object.entries(filters).forEach(([prop, value]) => { + cloned[prop] = value; + }); + } else { + const columns = getColumns(); + + cloned = columns.reduce((filters, col) => { + const field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field'); + const filterFunction = getColumnProp(col, 'filterFunction'); + const dataType = getColumnProp(col, 'dataType'); + const matchMode = + getColumnProp(col, 'filterMatchMode') || + ((context && context.filterMatchModeOptions[dataType]) || PrimeReact.filterMatchModeOptions[dataType] + ? (context && context.filterMatchModeOptions[dataType][0]) || PrimeReact.filterMatchModeOptions[dataType][0] + : FilterMatchMode.STARTS_WITH); + let constraint = { value: null, matchMode }; + + if (filterFunction) { + FilterService.register(`custom_${field}`, (...args) => filterFunction(...args, { column: col })); + } + + filters[field] = constraint; + + return filters; + }, {}); + } + + return cloned; + }; + const hasFilter = () => { return ObjectUtils.isNotEmpty(getFilters()); }; @@ -437,6 +652,10 @@ export const TreeTable = React.forwardRef((inProps, ref) => { delta: delta }); } + + if (isStateful()) { + saveState(); + } } resizerHelperRef.current.style.display = 'none'; @@ -893,6 +1112,18 @@ export const TreeTable = React.forwardRef((inProps, ref) => { return data; }; + useMountEffect(() => { + if (isStateful()) { + restoreState(); + } + }); + + useUpdateEffect(() => { + if (isStateful()) { + saveState(); + } + }); + useUpdateEffect(() => { if (childFocusEvent.current) { const nodeElement = childFocusEvent.current.target; @@ -908,10 +1139,26 @@ export const TreeTable = React.forwardRef((inProps, ref) => { React.useImperativeHandle(ref, () => ({ props, + clearState, filter, - getElement: () => elementRef.current + getElement: () => elementRef.current, + restoreState, + restoreTableState, + saveState })); + const createEvent = (event) => { + return { + first: getFirst(), + rows: getRows(), + sortField: getSortField(), + sortOrder: getSortOrder(), + multiSortMeta: getMultiSortMeta(), + filters: getFilters(), + ...event + }; + }; + const createTableHeader = (columns, columnGroup) => { const sortField = getSortField(); const sortOrder = getSortOrder(); diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js index 29912dc233..d7fe38ed1b 100644 --- a/components/lib/treetable/TreeTableBase.js +++ b/components/lib/treetable/TreeTableBase.js @@ -83,6 +83,8 @@ export const TreeTableBase = ComponentBase.extend({ columnResizeMode: 'fit', contextMenuSelectionKey: null, currentPageReportTemplate: '({currentPage} of {totalPages})', + customRestoreState: null, + customSaveState: null, defaultSortOrder: 1, emptyMessage: null, expandedKeys: null, @@ -120,6 +122,8 @@ export const TreeTableBase = ComponentBase.extend({ onSelect: null, onSelectionChange: null, onSort: null, + onStateRestore: null, + onStateSave: null, onToggle: null, onUnselect: null, onValueChange: null, @@ -152,6 +156,8 @@ export const TreeTableBase = ComponentBase.extend({ sortIcon: null, sortMode: 'single', sortOrder: null, + stateKey: null, + stateStorage: null, stripedRows: false, style: null, tabIndex: 0, diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index b6dc664262..6ad7c23a65 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -842,6 +842,15 @@ export interface TreeTableProps extends Omit }); linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); }; + +export const getStorage = (stateStorageProp) => { + switch (stateStorageProp) { + case 'local': + return window.localStorage; + + case 'session': + return window.sessionStorage; + + case 'custom': + return null; + + default: + throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".'); + } +}; diff --git a/pages/treetable/index.js b/pages/treetable/index.js index 2eb25707ef..a937d23992 100644 --- a/pages/treetable/index.js +++ b/pages/treetable/index.js @@ -30,6 +30,7 @@ import { SingleColumnDoc } from '@/components/doc/treetable/sort/singlecolumndoc import { TemplateDoc } from '@/components/doc/treetable/templatedoc'; import { StyledDoc } from '@/components/doc/treetable/theming/styleddoc'; import { TailwindDoc } from '@/components/doc/treetable/theming/tailwinddoc'; +import { StatefulDoc } from '@/components/doc/treetable/statefuldoc'; const TreeTableDemo = () => { const docs = [ @@ -193,7 +194,11 @@ const TreeTableDemo = () => { label: 'Context Menu', component: ContextMenuDoc }, - + { + id: 'stateful', + label: 'Stateful', + component: StatefulDoc + }, { id: 'accessibility', label: 'Accessibility', From 181f3d09ece5acc4db8ab9745e3fb13d16a0b124 Mon Sep 17 00:00:00 2001 From: root Date: Sat, 4 May 2024 15:20:40 +0530 Subject: [PATCH 02/45] Fix #6522: Minus sign after all selection - InputNumber --- components/lib/inputnumber/InputNumber.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index d5224ddb69..8ff856b9a9 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -650,7 +650,7 @@ export const InputNumber = React.memo( } _currency.current.lastIndex = 0; - + return { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex }; }; @@ -672,7 +672,8 @@ export const InputNumber = React.memo( if (sign.isMinusSign) { const isNewMinusSign = minusCharIndex === -1; - if (isNewMinusSign && (selectionStart === 0 || selectionStart === currencyCharIndex + 1)) { + // #6522 - Selected negative value can't be overwritten with a minus ('-') symbol + if (selectionStart === 0 || selectionStart === currencyCharIndex + 1) { newValueStr = inputValue; if (isNewMinusSign || selectionEnd !== 0) { From b3089bb62f8d9d68fa1501c9e0016f042d807f44 Mon Sep 17 00:00:00 2001 From: Usman Shaikh Date: Sat, 4 May 2024 19:39:14 +0530 Subject: [PATCH 03/45] Formatted --- components/lib/inputnumber/InputNumber.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index 8ff856b9a9..09b2437413 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -650,7 +650,7 @@ export const InputNumber = React.memo( } _currency.current.lastIndex = 0; - + return { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex }; }; From 6a990b320b065339e6729bdfe7aa70d7767edf06 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy <118115736+KirilCycle@users.noreply.github.com> Date: Sun, 5 May 2024 16:43:27 +0300 Subject: [PATCH 04/45] fix: use additional condition to verify group header (#6572) --- components/lib/dropdown/DropdownPanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 2072814fc1..0ac2945cd7 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -93,7 +93,7 @@ export const DropdownPanel = React.memo( style = { ...style, ...option.style }; - if (option.group && props.optionGroupLabel) { + if (option.group && option.optionGroup && props.optionGroupLabel) { const { optionGroupLabel } = props; const groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option); const key = index + '_' + props.getOptionGroupRenderKey(option); From 0bdb6d260e2105c45c8f53b1d6681fc7e1e5110d Mon Sep 17 00:00:00 2001 From: Melloware Date: Mon, 6 May 2024 14:15:18 -0400 Subject: [PATCH 05/45] Add ariaLabel method to Typescript (#6582) --- components/lib/api/api.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index 5bf989b090..986ec24a96 100644 --- a/components/lib/api/api.d.ts +++ b/components/lib/api/api.d.ts @@ -729,6 +729,14 @@ export declare function localeOption(key: string, locale: string): any; */ export declare function localeOptions(locale: string): object; +/** + * Finds an ARIA label in the locale by key and replaces options if provided. + * @param {string} ariaKey - Key of the ARIA label to look up in the locale. + * @param {Object} options - JSON options like { page: 2, user: "John", role: "Admin" }. + * @returns {string} The ARIA label with replaced values. + */ +export declare function ariaLabel(ariaKey: string, options: any): string; + // Locale Options export interface LocaleOptions { /** From 686262f375b41cf6cecc30e475496619427ac2fb Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 6 May 2024 18:15:53 +0000 Subject: [PATCH 06/45] Update API doc --- components/doc/common/apidoc/index.json | 17 +++++++++++++++++ package-lock.json | 4 ++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 5457ecd3ff..def9c53725 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -664,6 +664,23 @@ ], "returnType": "object", "description": "Returns the values of locale options." + }, + "ariaLabel": { + "name": "ariaLabel", + "parameters": [ + { + "name": "ariaKey", + "type": "string", + "description": "Key of the ARIA label to look up in the locale." + }, + { + "name": "options", + "type": "any", + "description": "JSON options like { page: 2, user: \"John\", role: \"Admin\" }." + } + ], + "returnType": "string", + "description": "Finds an ARIA label in the locale by key and replaces options if provided." } } }, diff --git a/package-lock.json b/package-lock.json index d53ebc513c..87a63854e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "primereact", - "version": "10.6.4", + "version": "10.6.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "primereact", - "version": "10.6.4", + "version": "10.6.5", "dependencies": { "@docsearch/react": "3.5.2", "chart.js": "4.4.2", From d4d51475ee64097bf63dc42b77ae5451b161ae5f Mon Sep 17 00:00:00 2001 From: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com> Date: Tue, 7 May 2024 22:42:56 +0300 Subject: [PATCH 07/45] Fix #6584: _locale fix (#6586) * Fix #6584: _locale fix * Revert "Fix #6584: _locale fix" This reverts commit aea83a493d5aadd1c9e16eeb269214a8a460acb4. * Fix #6584: _locale fix --- components/lib/inputnumber/InputNumber.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index d5224ddb69..b5a4385d04 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1133,7 +1133,7 @@ export const InputNumber = React.memo( useUpdateEffect(() => { constructParser(); changeValue(); - }, [props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]); + }, [_locale, props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]); useUpdateEffect(() => { changeValue(); From f35c8c251436f0d74103b291a139c1af231e0618 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy <118115736+KirilCycle@users.noreply.github.com> Date: Tue, 7 May 2024 22:51:40 +0300 Subject: [PATCH 08/45] Fix: Row reorder icon image wont brake drag 'ghost' (#6581) * feat: forbid drag on rowreorder icons & do not apply pt options on custom icon * Update TableBody.js --------- Co-authored-by: Melloware --- components/lib/datatable/BodyCell.js | 7 +++++-- components/lib/datatable/TableBody.js | 5 +++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 9dd17bb34c..aa22b7c2ea 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -628,13 +628,16 @@ export const BodyCell = React.memo((props) => { ); } else if (rowReorder) { const showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true; + + const customIcon = getColumnProp('rowReorderIcon') const rowReorderIconProps = mergeProps( { className: cx('rowReorderIcon') }, - getColumnPTOptions('rowReorderIcon') + customIcon ? null : getColumnPTOptions('rowReorderIcon') ); - const rowReorderIcon = getColumnProp('rowReorderIcon') || ; + + const rowReorderIcon = customIcon || ; content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, { ...rowReorderIconProps }, { props }) : null; } else if (expander) { diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 1225d46ebe..6174d3c089 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -607,9 +607,10 @@ export const TableBody = React.memo( const { originalEvent: event } = e; if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) { - event.currentTarget.draggable = true; + event.currentTarget?.draggable = true; + event.target?.draggable = false; } else { - event.currentTarget.draggable = false; + event.currentTarget?.draggable = false; } if (allowRowDrag(e)) { From 5dc01ee11613a861a2fe9c579db38ed79d632011 Mon Sep 17 00:00:00 2001 From: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com> Date: Tue, 7 May 2024 22:53:28 +0300 Subject: [PATCH 09/45] Fix #6573: add paste key (#6577) * Fix #6573: add paste key * Update InputOtp.js --------- Co-authored-by: Melloware --- components/lib/inputotp/InputOtp.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js index 16af969df4..9e0d8e3804 100644 --- a/components/lib/inputotp/InputOtp.js +++ b/components/lib/inputotp/InputOtp.js @@ -79,6 +79,10 @@ export const InputOtp = React.memo( }; const onInput = (event, index) => { + if (props.disabled || props.readOnly) { + return; + } + if (event.nativeEvent.inputType === 'insertFromPaste') { return; // handled in onPaste } @@ -93,6 +97,10 @@ export const InputOtp = React.memo( }; const onPaste = (event) => { + if (props.disabled || props.readOnly) { + return; + } + let paste = event.clipboardData.getData('text'); if (paste.length) { @@ -117,6 +125,15 @@ export const InputOtp = React.memo( }; const onKeydown = (event) => { + if (props.disabled || props.readOnly) { + return; + } + + // special keys should be ignored, if it is CTRL+V is handled in onPaste + if (event.altKey || event.ctrlKey || event.metaKey) { + return; + } + switch (event.code) { case 'ArrowLeft': { moveToPrevInput(event); From 3010211c497740631b4f2e1d8324e61fe1362fe4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Wed, 8 May 2024 14:32:21 +0300 Subject: [PATCH 10/45] Coding standards --- CODING_STANDARDS.md | 265 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 265 insertions(+) create mode 100644 CODING_STANDARDS.md diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md new file mode 100644 index 0000000000..64c8677441 --- /dev/null +++ b/CODING_STANDARDS.md @@ -0,0 +1,265 @@ +# Coding Standards + +## Declaration Rules + +### Using Explanatory Names for Variables + + // Bad + let x = 10; // What does "x" represent? + + // Good + let numberOfUsers = 10; // Clearly states what the variable represents + + // Bad + let y = true; // What does "y" represent? + + // Good + let isLoggedIn = true; // Clearly states the user's login status + +### Using Verbs for Boolean Variables + + // Bad + let loggedIn = false; + let userAccess = true; + + // Good + let isLoggedIn = false; + let canAccess = true; + let isActive = true; + let hasPermission = false; + +### Declarations on Top + + function exampleFunction() { + let x; // Declare variable at the top + let y; // Declare variable at the top + + // Function body + // Code that uses variables x and y + } + +### One Declaration per Line + + \\Bad + let x,y,z; + + \\Good + let x; + let y; + let z; + +### Initialize Variables + + let hasBorder = false; + let repeatedTimes = 0; + let images = []; + +### Declare Arrays with Const + + \\Bad + let images = ['img1', 'img2', 'img3']; + images = 3; \\Converted images to number + + \\Good + const images = ['img1', 'img2', 'img3']; + +### End Switch Case's with Defaults + + switch (new Date().getDay()) { + case 0: + day = "Sunday"; + break; + case 1: + day = "Monday"; + break; + default: + day = "Unknown"; + } + +### Avoid Number, String, and Boolean as Objects + +Always treat numbers, strings, or booleans as primitive values. Not as objects. +Declaring these types as objects, slows down execution speed, and produces nasty side effects: + + // Example + let x = "John"; + let y = new String("John"); + (x === y) // is false because x is a string and y is an object. + + // Bad + const num = new Number(10); + const str = new String("Hello"); + const bool = new Boolean(true); + + // Good + const num = 10; + const str = "Hello"; + const bool = true; + +## Spacing + +- Indentation with tabs. +- No whitespace at the end of line or on blank lines. +- Lines should usually be no longer than 80 characters, and should not exceed 120 (counting tabs as 4 spaces). +- No filler spaces in empty constructs (e.g., {}, [], fn()). +- There should be a new line at the end of each file. +- All function bodies are indented by one tab, even if the entire file is wrapped in a closure. + +## Ordering + +Ensuring that each function is defined before it is used is a good practice for code readability and maintainability. + + // Define functions before they are used + function validateUserData(userData) { + // Logic to validate user data + } + + function sanitizeUserData(userData) { + validateUserData() + } + + function saveUserData(userData) { + sanitizeUserData() + } + +### Imports order + +1. React import +2. Library imports (Alphabetical order) +3. Absolute imports from the project (Alphabetical order) +4. Relative imports (Alphabetical order) +5. Import \* as +6. Import \.\ + +### Array and Object Declarations + + // Preferred + var obj = { + ready: 9, + when: 4, + 'you are': 15, + }; + + var arr = [ + 9, + 4, + 15, + ]; + + // Acceptable for small objects and arrays + var obj = { ready: 9, when: 4, 'you are': 15 }; + var arr = [ 9, 4, 15 ]; + +## Semicolons + +Use them. Never rely on Automatic Semicolon Insertion (ASI). + +## Equality + +### Use === Comparison + + 0 == ""; // true + 1 == "1"; // true + 1 == true; // true + + 0 === ""; // false + 1 === "1"; // false + 1 === true; // false + +## React + +### Breakdown Components + +Breaking down components refers to decomposing complex systems or functionalities into smaller, more manageable parts or components. This practice helps improve code organization, readability, and maintainability. + + // Bad + function processUserData(userData) { + // Complex logic to process user data + } + + // Good + function validateUserData(userData) { + // Logic to validate user data + } + + function sanitizeUserData(userData) { + // Logic to sanitize user data + } + + function saveUserData(userData) { + // Logic to save user data + } + +### Use Functional Components + +Using functional components instead of class components whenever possible is wise because functional components are easier to read and write. Functional components are generally faster and more efficient than class components because they don't require a constructor or lifecycle methods. + + // Good: + const MyComponent = () => { + return ( +
+ {/* JSX */} +
+ ); + }; + +### Avoid Using Inline Styles + +Avoiding inline styles is a best practice in web development because it promotes separation of concerns, improves maintainability, and makes it easier to manage styles across an application. Instead of applying styles directly in HTML elements, it's recommended to use external stylesheets or CSS-in-JS solutions. + + // Bad: + const MyComponent = () => { + return ( +
+ {/* Content */} +
+ ); + }; + // Good: + import './MyComponent.css'; + + const MyComponent = () => { + return ( +
+ {/* Content */} +
+ ); + }; + +### Passing Objects Instead of Multiple Props + +Especially when there are more than **4 props**, can enhance code readability and maintainability. + + //Bad + const updateTodo = (id, name, completed, date, user) => { + //... + } + + // Good + const todoItem = { + id: 1, + name: "Morning Task", + completed: false, + date: new Date(), + user: "Optimus" + } + + const updateTodo = (todoItem) => { + //... + } + +### Avoid default export + +Using named exports provides better **clarity** when importing components, making the codebase more organized and easier to navigate. + +- Named imports work well with tree shaking. +- Refactoring becomes easier. +- Easier to identify and understand the dependencies of a module. + +## Utils + +### Avoid Using eval() + +The `eval()` function is used to run text as code. In almost all cases, it should not be necessary to use it. + +Because it allows arbitrary code to be run, it also represents a security problem. From 424a459416d8aacdabd3a1d7285e474d15c35b4c Mon Sep 17 00:00:00 2001 From: Pavel Khudiakov Date: Wed, 8 May 2024 08:40:12 -0300 Subject: [PATCH 11/45] fix(KeyFilter): add meta key check (#6588) --- components/lib/keyfilter/KeyFilter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/keyfilter/KeyFilter.js b/components/lib/keyfilter/KeyFilter.js index bd9f7462ef..791846d0bd 100644 --- a/components/lib/keyfilter/KeyFilter.js +++ b/components/lib/keyfilter/KeyFilter.js @@ -34,7 +34,7 @@ export const KeyFilter = { return; } - if (e.ctrlKey || e.altKey) { + if (e.ctrlKey || e.altKey || e.metaKey) { return; } From f29efce6e7dd1663859dccf6fb4a5343e74f586f Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 8 May 2024 11:31:04 -0400 Subject: [PATCH 12/45] Fix #6592: InputOtp respect props.value change (#6595) --- components/lib/datatable/BodyCell.js | 8 ++++---- components/lib/datatable/TableBody.js | 6 +++--- components/lib/inputotp/InputOtp.js | 8 +++++++- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index aa22b7c2ea..1315861d1d 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -628,15 +628,15 @@ export const BodyCell = React.memo((props) => { ); } else if (rowReorder) { const showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true; - - const customIcon = getColumnProp('rowReorderIcon') + + const customIcon = getColumnProp('rowReorderIcon'); const rowReorderIconProps = mergeProps( { className: cx('rowReorderIcon') }, - customIcon ? null : getColumnPTOptions('rowReorderIcon') + customIcon ? null : getColumnPTOptions('rowReorderIcon') ); - + const rowReorderIcon = customIcon || ; content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, { ...rowReorderIconProps }, { props }) : null; diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 6174d3c089..f29a344ff5 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -607,10 +607,10 @@ export const TableBody = React.memo( const { originalEvent: event } = e; if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) { - event.currentTarget?.draggable = true; - event.target?.draggable = false; + event.currentTarget.draggable = true; + event.target.draggable = false; } else { - event.currentTarget?.draggable = false; + event.currentTarget.draggable = false; } if (allowRowDrag(e)) { diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js index 9e0d8e3804..ddce03e275 100644 --- a/components/lib/inputotp/InputOtp.js +++ b/components/lib/inputotp/InputOtp.js @@ -1,7 +1,7 @@ import React, { useContext, useRef, useState } from 'react'; import { PrimeReactContext, ariaLabel } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMergeProps } from '../hooks/Hooks'; +import { useMergeProps, useUpdateEffect } from '../hooks/Hooks'; import { InputText } from '../inputtext/InputText'; import { ObjectUtils } from '../utils/Utils'; import { InputOtpBase } from './BaseInputOtp'; @@ -174,6 +174,12 @@ export const InputOtp = React.memo( } }; + useUpdateEffect(() => { + const value = props.value ? props.value?.toString()?.split?.('') : new Array(props.length); + + setTokens(value); + }, [props.value]); + const createInputElements = (remainingInputs) => { if (remainingInputs <= 0) { return []; From 9f6063b69d04e21c0465c4e8e8f4213e558e0afd Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 8 May 2024 11:33:07 -0400 Subject: [PATCH 13/45] Fix #6594: Fix typo in Scale doc (#6596) --- components/doc/theming/scaledoc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/theming/scaledoc.js b/components/doc/theming/scaledoc.js index 7d30cc577b..11147b9959 100644 --- a/components/doc/theming/scaledoc.js +++ b/components/doc/theming/scaledoc.js @@ -15,7 +15,7 @@ html {

PrimeReact utilizes rem units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your - document. Code below sets the scale of the components based on 16px. If you reqire bigger or smaller components, just change this variable and components will scale accordingly. + document. Code below sets the scale of the components based on 16px. If you require bigger or smaller components, just change this variable and components will scale accordingly.

From 30a0d5403b1fa5d634eec3034e22465aad2e1eb9 Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 8 May 2024 11:34:46 -0400 Subject: [PATCH 14/45] Fix #6594: Fix typo in PrimeFlex doc (#6597) --- components/doc/chart/combodoc.js | 2 +- components/doc/theming/primeflexdoc.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/doc/chart/combodoc.js b/components/doc/chart/combodoc.js index ccd0a92740..8b9d7d7081 100644 --- a/components/doc/chart/combodoc.js +++ b/components/doc/chart/combodoc.js @@ -248,7 +248,7 @@ export default function ComboDemo() { <>

- Different chart types can be combined in the same graph usign the type option of a dataset. + Different chart types can be combined in the same graph using the type option of a dataset.

diff --git a/components/doc/theming/primeflexdoc.js b/components/doc/theming/primeflexdoc.js index 946adce8e7..6df01e91e6 100644 --- a/components/doc/theming/primeflexdoc.js +++ b/components/doc/theming/primeflexdoc.js @@ -18,7 +18,7 @@ export function PrimeFlexDoc(props) {

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeReact can be used with any CSS utility library like bootstrap and - tailwind however PrimeFlex has benefits like integration with PrimeReact themes usign CSS variables so that colors classes e.g. bg-blue-500 receive the color code from the PrimeReact theme being used. PrimeReact follows the + tailwind however PrimeFlex has benefits like integration with PrimeReact themes using CSS variables so that colors classes e.g. bg-blue-500 receive the color code from the PrimeReact theme being used. PrimeReact follows the CSS utility approach of PrimeFlex and currently does not provide an extended style property like sx. Same approach is also utilized in PrimeBlocks for PrimeReact project as well.

From 512c920efeef35e918d628956d869bdf0e6f04fa Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 8 May 2024 11:39:34 -0400 Subject: [PATCH 15/45] Fix #6593: Password fix tab ordering of toggle mask (#6598) --- components/lib/password/Password.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js index fa87272fa1..bdf17b5766 100644 --- a/components/lib/password/Password.js +++ b/components/lib/password/Password.js @@ -466,7 +466,7 @@ export const Password = React.memo( invalid: props.invalid, variant: props.variant, style: props.inputStyle, - tabIndex: props.tabIndex, + tabIndex: props.tabIndex || '0', tooltip: props.tooltip, tooltipOptions: props.tooltipOptions, type: type, @@ -483,8 +483,8 @@ export const Password = React.memo( if (icon) { input = ( - {icon} {input} + {icon} ); } From 90178165ad4c1b7c53305f87c3fb6b3bc4bd1d4d Mon Sep 17 00:00:00 2001 From: Cosme Valera Reales <80126839+CosmeValera@users.noreply.github.com> Date: Thu, 9 May 2024 13:29:00 +0200 Subject: [PATCH 16/45] Fix typo (#6601) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f54f2da431..1d3ada88bd 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ export default function MyComponent() { ## Theming -PrimeReact has two theming has modes; styled or unstyled. +PrimeReact has two theming modes; styled or unstyled. **Styled Mode** From 20e007f45865188edb75cba7b20297f2522a6740 Mon Sep 17 00:00:00 2001 From: Ashraf Alhaj <87209980+ISNewton@users.noreply.github.com> Date: Thu, 9 May 2024 14:20:21 +0200 Subject: [PATCH 17/45] Show headless sidebar in all window sizes (#6605) * Show headless sidebar in all window sizes * Update headlessdoc.js --------- Co-authored-by: Melloware --- components/doc/sidebar/headlessdoc.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js index d4e86effd3..8101676d41 100644 --- a/components/doc/sidebar/headlessdoc.js +++ b/components/doc/sidebar/headlessdoc.js @@ -21,7 +21,7 @@ export function HeadlessDoc(props) { onHide={() => setVisible(false)} content={({ closeIconRef, hide }) => (
-
+
@@ -215,7 +215,7 @@ export default function HeadlessDemo() { onHide={() => setVisible(false)} content={({ closeIconRef, hide }) => (
-
+
@@ -422,7 +422,7 @@ export default function HeadlessDemo() { onHide={() => setVisible(false)} content={({ closeIconRef, hide }) => (
-
+
@@ -622,7 +622,7 @@ export default function HeadlessDemo() { onHide={() => setVisible(false)} content={({ closeIconRef, hide }) => (
-
+
From 4fa55c58273ee4341bf66970cd4c02ae124142e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Thu, 9 May 2024 18:26:42 +0300 Subject: [PATCH 18/45] Refactored the panel id functions with props id --- components/lib/panelmenu/PanelMenu.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index ff2e4eb189..169b515f12 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -79,16 +79,16 @@ export const PanelMenu = React.memo( return ObjectUtils.equals(item, activeItemState); }; - const getPanelId = (index) => { + const generatePanelId = (index) => { return `${idState}_${index}`; }; - const getHeaderId = (index) => { - return `${getPanelId(index)}_header`; + const generateHeaderId = (itemId, index) => { + return `${itemId || generatePanelId(index)}_header`; }; - const getContentId = (index) => { - return `${getPanelId(index)}_content`; + const generateContentId = (itemId, index) => { + return `${itemId || generatePanelId(index)}_content`; }; const onHeaderKeyDown = (event, item) => { @@ -299,8 +299,8 @@ export const PanelMenu = React.memo( const headerActionProps = mergeProps( { href: item.url || '#', - className: cx('headerAction'), - tabIndex: '-1' + tabIndex: '-1', + className: cx('headerAction') }, getPTOptions(item, 'headerAction', index) ); @@ -332,6 +332,7 @@ export const PanelMenu = React.memo( const panelProps = mergeProps( { key: key, + id: item?.id || generatePanelId(index), className: cx('panel', { item }), style: item.style }, @@ -340,12 +341,12 @@ export const PanelMenu = React.memo( const headerProps = mergeProps( { - id: getHeaderId(index), + id: generateHeaderId(item?.id, index), className: cx('header', { active, item }), 'aria-label': item.label, 'aria-expanded': active, 'aria-disabled': item.disabled, - 'aria-controls': getContentId(index), + 'aria-controls': generateContentId(item?.id, index), tabIndex: item.disabled ? null : '0', onClick: (event) => onItemClick(event, item), onKeyDown: (event) => onHeaderKeyDown(event, item), @@ -375,7 +376,7 @@ export const PanelMenu = React.memo( { className: cx('toggleableContent', { active }), role: 'region', - 'aria-labelledby': getHeaderId(index) + 'aria-labelledby': generateHeaderId(item?.id, index) }, getPTOptions(item, 'toggleableContent', index) ); @@ -398,10 +399,10 @@ export const PanelMenu = React.memo(
{content}
-
+
Date: Thu, 9 May 2024 19:44:18 -0400 Subject: [PATCH 19/45] Fix #6564: IconOptions typescript updated for FontAwesome (#6579) --- components/lib/utils/utils.d.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts index 01e5378692..3c40163b32 100644 --- a/components/lib/utils/utils.d.ts +++ b/components/lib/utils/utils.d.ts @@ -177,20 +177,23 @@ export declare namespace ZIndexUtils { /** * Icon options passed to any icon. - * ComponentProps are props from the owning component. - * AdditionalProps are any custom properties of an icon like SortIcon of the Datatable for example. + * @template ComponentProps Props from the owning component. + * @template AdditionalProps Any custom properties of an icon like SortIcon of the Datatable for example. */ export type IconOptions = AdditionalProps & { /** - * Icon specific properties. + * Icon specific properties. Size property allows FontAwesome to work properly. + * @type {(React.HTMLProps & { size?: string }) | (React.SVGProps & { size?: string })} */ - iconProps: React.HTMLProps | React.SVGProps; + iconProps: (React.HTMLProps & { size?: string }) | (React.SVGProps & { size?: string }); /** * The element representing the icon. + * @type {React.ReactNode} */ element: React.ReactNode; /** * Properties of the owning component. + * @type {ComponentProps} */ props?: ComponentProps; [key: string]: any; From b900cbb039a858bbaa39459e58bab463ee9f314e Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Thu, 9 May 2024 23:44:50 +0000 Subject: [PATCH 20/45] Update API doc --- components/doc/common/apidoc/index.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index def9c53725..709719dc3f 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -56589,7 +56589,7 @@ "values": { "IconOptions": { "values": "AdditionalProps & Object", - "description": "Icon options passed to any icon.\nComponentProps are props from the owning component.\nAdditionalProps are any custom properties of an icon like SortIcon of the Datatable for example." + "description": "Icon options passed to any icon." }, "IconType": { "values": "React.ReactNode | Function" From aa9f01c87fbb1d2f792c2b8b4726c1f4e98e3460 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=ADdac?= Date: Sat, 11 May 2024 21:51:00 +0200 Subject: [PATCH 21/45] Added new capabilities and properties to Column and Dialog --- components/doc/common/apidoc/index.json | 16 +++++++ components/lib/column/ColumnBase.js | 1 + components/lib/column/column.d.ts | 6 +++ components/lib/datatable/BodyCell.js | 6 ++- components/lib/dialog/Dialog.js | 3 +- components/lib/dialog/DialogBase.js | 55 +++++++++++++------------ components/lib/dialog/dialog.d.ts | 5 +++ 7 files changed, 63 insertions(+), 29 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index def9c53725..79be406f5c 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -12180,6 +12180,14 @@ "default": "false", "description": "Whether the column is fixed in horizontal scrolling or not." }, + { + "name": "forceHasValidValue", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled and cellEditorValidator is set, force to call cellEditorValidator before cell editor is closed. If cellEditorValidator returns false, editor stays open." + }, { "name": "header", "optional": true, @@ -21984,6 +21992,14 @@ "default": "true", "description": "Whether to show the header or not." }, + { + "name": "stopPropagationOnKeyDown", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Specifies if the onKeyDown event that cause the dialog to close when pressing close button should be stopped." + }, { "name": "style", "optional": true, diff --git a/components/lib/column/ColumnBase.js b/components/lib/column/ColumnBase.js index 3290702847..77e0d7abd0 100644 --- a/components/lib/column/ColumnBase.js +++ b/components/lib/column/ColumnBase.js @@ -42,6 +42,7 @@ export const ColumnBase = ComponentBase.extend({ footer: null, footerClassName: null, footerStyle: null, + forceHasValidValue: false, frozen: false, header: null, headerClassName: null, diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts index a5513a6624..1fe0977c98 100644 --- a/components/lib/column/column.d.ts +++ b/components/lib/column/column.d.ts @@ -963,6 +963,12 @@ export interface ColumnProps { * @defaultValue false */ frozen?: boolean | undefined; + /** + * When enabled and cellEditorValidator is set, force to call cellEditorValidator + * before cell editor is closed. If cellEditorValidator returns false, editor stays open. + * @defaultValue false + */ + forceHasValidValue?: boolean | undefined; /** * Header content of the table. */ diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 1315861d1d..340a9d42fa 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -58,6 +58,10 @@ export const BodyCell = React.memo((props) => { return getColumnProp('editor'); }; + const forceHasValidValue = () => { + return getColumnProp('forceHasValidValue'); +66 }; + const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({ type: 'click', listener: (e) => { @@ -174,7 +178,7 @@ export const BodyCell = React.memo((props) => { let valid = true; - if (!submit && cellEditValidator) { + if ((!submit || forceHasValidValue()) && cellEditValidator) { valid = cellEditValidator(params); } diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index 9e27e43a00..2db46f99cc 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -449,7 +449,8 @@ export const Dialog = React.forwardRef((inProps, ref) => { type: 'button', className: cx('closeButton'), 'aria-label': ariaLabel, - onClick: onClose + onClick: onClose, + onKeyDown: (ev) => props.stopPropagationOnKeyDown && ev.stopPropagation() }, ptm('closeButton') ); diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js index d3a88ac409..2dfeb4f528 100644 --- a/components/lib/dialog/DialogBase.js +++ b/components/lib/dialog/DialogBase.js @@ -45,15 +45,15 @@ const styles = ` background-color: transparent; transition-property: background-color; } - + .p-dialog-visible { display: flex; } - + .p-dialog-mask.p-component-overlay { pointer-events: auto; } - + .p-dialog { display: flex; flex-direction: column; @@ -62,29 +62,29 @@ const styles = ` transform: scale(1); position: relative; } - + .p-dialog-content { overflow-y: auto; flex-grow: 1; } - + .p-dialog-header { display: flex; align-items: center; flex-shrink: 0; } - + .p-dialog-footer { flex-shrink: 0; } - + .p-dialog .p-dialog-header-icons { display: flex; align-items: center; align-self: flex-start; flex-shrink: 0; } - + .p-dialog .p-dialog-header-icon { display: flex; align-items: center; @@ -92,39 +92,39 @@ const styles = ` overflow: hidden; position: relative; } - + .p-dialog .p-dialog-title { flex-grow: 1; } - + /* Fluid */ .p-fluid .p-dialog-footer .p-button { width: auto; } - + /* Animation */ /* Center */ .p-dialog-enter { opacity: 0; transform: scale(0.7); } - + .p-dialog-enter-active { opacity: 1; transform: scale(1); transition: all 150ms cubic-bezier(0, 0, 0.2, 1); } - + .p-dialog-enter-done { transform: none; } - + .p-dialog-exit-active { opacity: 0; transform: scale(0.7); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } - + /* Top, Bottom, Left, Right, Top* and Bottom* */ .p-dialog-top .p-dialog, .p-dialog-bottom .p-dialog, @@ -136,17 +136,17 @@ const styles = ` .p-dialog-bottom-right .p-dialog { margin: 0.75em; } - + .p-dialog-top .p-dialog-enter, .p-dialog-top .p-dialog-exit-active { transform: translate3d(0px, -100%, 0px); } - + .p-dialog-bottom .p-dialog-enter, .p-dialog-bottom .p-dialog-exit-active { transform: translate3d(0px, 100%, 0px); } - + .p-dialog-left .p-dialog-enter, .p-dialog-left .p-dialog-exit-active, .p-dialog-top-left .p-dialog-enter, @@ -155,7 +155,7 @@ const styles = ` .p-dialog-bottom-left .p-dialog-exit-active { transform: translate3d(-100%, 0px, 0px); } - + .p-dialog-right .p-dialog-enter, .p-dialog-right .p-dialog-exit-active, .p-dialog-top-right .p-dialog-enter, @@ -164,7 +164,7 @@ const styles = ` .p-dialog-bottom-right .p-dialog-exit-active { transform: translate3d(100%, 0px, 0px); } - + .p-dialog-top .p-dialog-enter-active, .p-dialog-bottom .p-dialog-enter-active, .p-dialog-left .p-dialog-enter-active, @@ -176,7 +176,7 @@ const styles = ` transform: translate3d(0px, 0px, 0px); transition: all 0.3s ease-out; } - + .p-dialog-top .p-dialog-exit-active, .p-dialog-bottom .p-dialog-exit-active, .p-dialog-left .p-dialog-exit-active, @@ -187,7 +187,7 @@ const styles = ` .p-dialog-bottom-right .p-dialog-exit-active { transition: all 0.3s ease-out; } - + /* Maximize */ .p-dialog-maximized { transition: none; @@ -199,16 +199,16 @@ const styles = ` top: 0px !important; left: 0px !important; } - + .p-dialog-maximized .p-dialog-content { flex-grow: 1; } - + .p-confirm-dialog .p-dialog-content { display: flex; align-items: center; } - + /* Resizable */ .p-dialog .p-resizable-handle { position: absolute; @@ -220,10 +220,10 @@ const styles = ` right: 1px; bottom: 1px; } - + .p-dialog-draggable .p-dialog-header { cursor: move; - } + } } `; @@ -295,6 +295,7 @@ export const DialogBase = ComponentBase.extend({ resizable: true, rtl: false, showHeader: true, + stopPropagationOnKeyDown: false, style: null, transitionOptions: null, visible: false, diff --git a/components/lib/dialog/dialog.d.ts b/components/lib/dialog/dialog.d.ts index f4995d67df..46e2263be9 100644 --- a/components/lib/dialog/dialog.d.ts +++ b/components/lib/dialog/dialog.d.ts @@ -337,6 +337,11 @@ export interface DialogProps { * @defaultValue true */ showHeader?: boolean | undefined; + /** + * Specifies if the onKeyDown event that cause the dialog to close when pressing close button should be stopped. + * @defaultValue false + */ + stopPropagationOnKeyDown?: boolean | undefined; /** * Icon to display in the dialog maximize button when dialog is not maximized. */ From 697d476383e5ea9ef3e730299d6aa83f4d5b4b8e Mon Sep 17 00:00:00 2001 From: Melloware Date: Sun, 12 May 2024 07:59:06 -0400 Subject: [PATCH 22/45] Fix #6610: MeterGroup render items in percentage (#6612) --- components/lib/metergroup/MeterGroup.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js index 430467cf34..fb92fd1615 100644 --- a/components/lib/metergroup/MeterGroup.js +++ b/components/lib/metergroup/MeterGroup.js @@ -126,12 +126,13 @@ export const MeterGroup = (inProps) => { ); const labelIcon = item.icon ? : ; + const itemPercentage = calculatePercentage(item.value); return (
  • {labelIcon} - {item?.label} {item?.value && `(${item?.value}%)`} + {item?.label} {`(${itemPercentage}%)`}
    • ); From c7801379e063c6b8af27f9f2872ebca861611912 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=ADdac?= Date: Mon, 13 May 2024 00:08:42 +0200 Subject: [PATCH 23/45] Removed stopPropagationOnKeyDown from Dialog and set stop propagation onKeydown by default --- components/doc/common/apidoc/index.json | 8 -------- components/lib/dialog/Dialog.js | 2 +- components/lib/dialog/dialog.d.ts | 5 ----- 3 files changed, 1 insertion(+), 14 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 79be406f5c..f783674be4 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -21992,14 +21992,6 @@ "default": "true", "description": "Whether to show the header or not." }, - { - "name": "stopPropagationOnKeyDown", - "optional": true, - "readonly": false, - "type": "boolean", - "default": "false", - "description": "Specifies if the onKeyDown event that cause the dialog to close when pressing close button should be stopped." - }, { "name": "style", "optional": true, diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index 2db46f99cc..f8216b4387 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -450,7 +450,7 @@ export const Dialog = React.forwardRef((inProps, ref) => { className: cx('closeButton'), 'aria-label': ariaLabel, onClick: onClose, - onKeyDown: (ev) => props.stopPropagationOnKeyDown && ev.stopPropagation() + onKeyDown: (ev) => ev.stopPropagation() }, ptm('closeButton') ); diff --git a/components/lib/dialog/dialog.d.ts b/components/lib/dialog/dialog.d.ts index 46e2263be9..f4995d67df 100644 --- a/components/lib/dialog/dialog.d.ts +++ b/components/lib/dialog/dialog.d.ts @@ -337,11 +337,6 @@ export interface DialogProps { * @defaultValue true */ showHeader?: boolean | undefined; - /** - * Specifies if the onKeyDown event that cause the dialog to close when pressing close button should be stopped. - * @defaultValue false - */ - stopPropagationOnKeyDown?: boolean | undefined; /** * Icon to display in the dialog maximize button when dialog is not maximized. */ From 36df2a8a4ca567171bce7b819f031ddd89081c65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Mon, 13 May 2024 14:41:08 +0300 Subject: [PATCH 24/45] Moved Core Styles to SASS Theme --- components/lib/tabview/TabViewBase.js | 80 --------------------------- 1 file changed, 80 deletions(-) diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js index bcfd63832d..bd6ce97861 100644 --- a/components/lib/tabview/TabViewBase.js +++ b/components/lib/tabview/TabViewBase.js @@ -23,85 +23,6 @@ const classes = { } }; -const styles = ` -@layer primereact { - .p-tabview-nav-container { - position: relative; - } - - .p-tabview-scrollable .p-tabview-nav-container { - overflow: hidden; - } - - .p-tabview-nav-content { - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - scrollbar-width: none; - overscroll-behavior: contain auto; - position: relative; - } - - .p-tabview-nav { - display: flex; - margin: 0; - padding: 0; - list-style-type: none; - flex: 1 1 auto; - } - - .p-tabview-nav-link { - cursor: pointer; - user-select: none; - display: flex; - align-items: center; - position: relative; - text-decoration: none; - overflow: hidden; - } - - .p-tabview-ink-bar { - display: none; - z-index: 1; - } - - .p-tabview-nav-link:focus { - z-index: 1; - } - - .p-tabview-close { - z-index: 1; - } - - .p-tabview-title { - line-height: 1; - white-space: nowrap; - } - - .p-tabview-nav-btn { - position: absolute; - top: 0; - z-index: 2; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - .p-tabview-nav-prev { - left: 0; - } - - .p-tabview-nav-next { - right: 0; - } - - .p-tabview-nav-content::-webkit-scrollbar { - display: none; - } -} -`; - const inlineStyles = { tab: { header: ({ headerStyle, _style }) => ({ ...(headerStyle || {}), ...(_style || {}) }), @@ -129,7 +50,6 @@ export const TabViewBase = ComponentBase.extend({ }, css: { classes, - styles, inlineStyles } }); From 6287b851165049be7dae1b1b8bf0169b79412147 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Mon, 13 May 2024 14:41:14 +0300 Subject: [PATCH 25/45] Updated Theming --- public/themes/arya-blue/theme.css | 62 +++ public/themes/arya-green/theme.css | 62 +++ public/themes/arya-orange/theme.css | 62 +++ public/themes/bootstrap4-dark-blue/theme.css | 62 +++ .../themes/bootstrap4-dark-purple/theme.css | 250 +++++++++--- public/themes/bootstrap4-light-blue/theme.css | 62 +++ .../themes/bootstrap4-light-purple/theme.css | 250 +++++++++--- public/themes/fluent-light/theme.css | 62 +++ public/themes/lara-dark-amber/theme.css | 71 +++- public/themes/lara-dark-blue/theme.css | 71 +++- public/themes/lara-dark-cyan/theme.css | 71 +++- public/themes/lara-dark-green/theme.css | 71 +++- public/themes/lara-dark-indigo/theme.css | 71 +++- public/themes/lara-dark-pink/theme.css | 71 +++- public/themes/lara-dark-teal/theme.css | 71 +++- public/themes/lara-light-amber/theme.css | 71 +++- public/themes/lara-light-blue/theme.css | 71 +++- public/themes/lara-light-cyan/theme.css | 71 +++- public/themes/lara-light-green/theme.css | 71 +++- public/themes/lara-light-indigo/theme.css | 71 +++- public/themes/lara-light-pink/theme.css | 71 +++- public/themes/lara-light-teal/theme.css | 71 +++- public/themes/luna-amber/theme.css | 62 +++ public/themes/luna-blue/theme.css | 62 +++ public/themes/luna-green/theme.css | 62 +++ public/themes/luna-pink/theme.css | 62 +++ public/themes/md-dark-deeppurple/theme.css | 268 ++++++++++--- public/themes/md-dark-indigo/theme.css | 364 ++++++++++-------- public/themes/md-light-deeppurple/theme.css | 268 ++++++++++--- public/themes/md-light-indigo/theme.css | 62 +++ public/themes/mdc-dark-deeppurple/theme.css | 268 ++++++++++--- public/themes/mdc-dark-indigo/theme.css | 364 ++++++++++-------- public/themes/mdc-light-deeppurple/theme.css | 268 ++++++++++--- public/themes/mdc-light-indigo/theme.css | 62 +++ public/themes/mira/theme.css | 62 +++ public/themes/nano/theme.css | 62 +++ public/themes/nova-accent/theme.css | 62 +++ public/themes/nova-alt/theme.css | 62 +++ public/themes/nova/theme.css | 62 +++ public/themes/rhea/theme.css | 62 +++ public/themes/saga-blue/theme.css | 62 +++ public/themes/saga-green/theme.css | 62 +++ public/themes/saga-orange/theme.css | 62 +++ public/themes/soho-dark/theme.css | 112 ++++-- public/themes/soho-light/theme.css | 62 +++ public/themes/tailwind-light/theme.css | 62 +++ public/themes/vela-blue/theme.css | 62 +++ public/themes/vela-green/theme.css | 62 +++ public/themes/vela-orange/theme.css | 62 +++ public/themes/viva-dark/theme.css | 62 +++ public/themes/viva-light/theme.css | 62 +++ 51 files changed, 4431 insertions(+), 711 deletions(-) diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index e8f1386a7e..fac11bfa67 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 5976baa7da..1ac25d3639 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 9b9dca8061..20399a9050 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index fd9f29cd20..859d39faa3 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -4717,6 +4717,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #3f4b5b; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index dd90fb688e..e8a9ae7893 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -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 #f0e6f5; border-color: #c298d8; } + .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 #f0e6f5; + .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: #c298d8; } - .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: #b07acd; + } + .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; } @@ -2083,6 +2073,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; @@ -4606,6 +4605,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #3f4b5b; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.15s; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3f4b5b; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 4px; + transition: color 0.15s, box-shadow 0.15s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: color 0.15s, box-shadow 0.15s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #c298d8; + color: #151515; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #c298d8; + } + .p-stepper .p-stepper-panels { + background: #2a323d; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #3f4b5b; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.15s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #2a323d; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #c298d8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; @@ -4615,6 +4717,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #3f4b5b; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 2b812214c0..5942ab4554 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -4717,6 +4717,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #dee2e6; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index 958904640b..f8b3e08823 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -639,6 +639,7 @@ border: 1px solid #ced4da; transition: background-color 0.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(136, 60, 174, 0.5); border-color: #883cae; } + .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(136, 60, 174, 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: #883cae; } - .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: #703290; + } + .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; } @@ -2083,6 +2073,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; @@ -4606,6 +4605,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.15s; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #212529; + border: 1px solid #dee2e6; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 4px; + transition: box-shadow 0.15s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6c757d; + font-weight: 600; + transition: box-shadow 0.15s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #883cae; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #212529; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #883cae; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #212529; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.15s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #212529; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #883cae; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; @@ -4615,6 +4717,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #dee2e6; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index e1b5f800fe..ec2d677319 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -4629,6 +4629,68 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 0 none; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index a18b380af0..be66f0a089 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #fbbf24; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index d47c1cf5f9..1e9f1008a3 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #60a5fa; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 1e4e7c6f82..03948fb60f 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #22d3ee; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 39794e9976..a8d62e5920 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #34d399; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index dd8c4d020e..976da3ce7f 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #818cf8; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 2e748dcdb4..0774850d1f 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #f472b6; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index f7b1f8a305..a97ca2da78 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #2dd4bf; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 84539d6f9d..0587b74131 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #f59e0b; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 83ab2c8574..6129b89864 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #3b82f6; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 5cbada14d3..b054147512 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #06b6d4; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 4ef7804c00..2939cd65fd 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #10b981; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 6103f730b0..ad2a370f76 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #6366f1; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 6df317fea9..ab974c948e 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #ec4899; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index b0ba6ba210..d2e6565a1e 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -4700,6 +4700,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +6998,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #14b8a6; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index baafb141ef..a7520e7515 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -4644,6 +4644,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 0 none; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 104d274cd2..e71fb82bfa 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -4644,6 +4644,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 0 none; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 7c0f306968..46fec49cdc 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -4644,6 +4644,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 0 none; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index cb751f55e8..370f57e02a 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -4644,6 +4644,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 0 none; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index f7723d86e1..7d008fbd5a 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -619,10 +619,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -659,6 +659,7 @@ border: 1px solid hsla(0, 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: #CE93D8; } + .p-cascadeselect.p-variant-filled { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: hsla(0, 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: #CE93D8; background: rgba(206, 147, 216, 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(206, 147, 216, 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); } + .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; @@ -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(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(0, 0%, 100%, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: hsla(0, 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; } @@ -2094,6 +2084,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 2rem; } + .p-treeselect.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 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); @@ -4617,6 +4616,109 @@ .p-splitter .p-splitter-gutter-resizing { background: hsla(0, 0%, 100%, 0.12); } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 1px solid transparent; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.87); + font-weight: 500; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(206, 147, 216, 0.16); + color: #CE93D8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #CE93D8; + } + .p-stepper .p-stepper-panels { + background: transparent; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #bdbdbd; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: transparent; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #CE93D8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4626,6 +4728,68 @@ outline-offset: 0; box-shadow: none; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -8087,6 +8251,24 @@ .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + background-color: #9e9d9e; + color: #ffffff; + font-size: 0.857rem; + min-width: 1.714rem; + height: 1.714rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background-color: #CE93D8; + color: #121212; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { + font-weight: 600; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + margin-inline-start: 1.75rem; + } .p-steps { padding: 1rem 0; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 11da14af14..1dcbd52c90 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-left: 1px solid hsla(0, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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; @@ -671,13 +671,13 @@ border-color: #9FA8DA; } .p-cascadeselect.p-variant-filled { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-cascadeselect.p-variant-filled:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-cascadeselect.p-variant-filled:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-cascadeselect .p-cascadeselect-label { background: transparent; @@ -734,7 +734,7 @@ } .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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 1rem 1rem; @@ -772,11 +772,11 @@ height: 18px; } .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); border-radius: 4px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -795,7 +795,7 @@ height: 14px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -835,25 +835,25 @@ border-color: #f44435; } .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -873,13 +873,13 @@ align-items: center; } .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -939,12 +939,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 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(0deg, 0%, 100%, 0.24); + background: hsla(0, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -1059,7 +1059,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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; @@ -1074,13 +1074,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1122,7 +1122,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1164,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1186,14 +1186,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - 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); + 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); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-right: 1px solid hsla(0, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1289,7 +1289,7 @@ border-radius: 0.5rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 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; @@ -1311,7 +1311,7 @@ transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 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); @@ -1331,7 +1331,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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; @@ -1350,13 +1350,13 @@ border-color: #f44435; } .p-inputtext.p-variant-filled { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-inputtext.p-variant-filled:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-inputtext.p-variant-filled:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; @@ -1396,13 +1396,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1471,14 +1471,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1531,15 +1531,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1571,7 +1571,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1667,7 +1667,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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; @@ -1682,13 +1682,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1700,7 +1700,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1729,7 +1729,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1793,7 +1793,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1875,11 +1875,11 @@ opacity: 0; z-index: 1; outline: 0 none; - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); border-radius: 50%; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1918,25 +1918,25 @@ border-color: #f44435; } .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; @@ -2028,7 +2028,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -2068,7 +2068,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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,13 +2085,13 @@ padding-right: 2rem; } .p-treeselect.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-treeselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-treeselect .p-treeselect-label { padding: 1rem 1rem; @@ -2103,7 +2103,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2133,7 +2133,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2184,13 +2184,13 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-togglebutton { position: relative; @@ -3583,7 +3583,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3591,12 +3591,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3605,7 +3605,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3669,12 +3669,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3687,10 +3687,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3854,12 +3854,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3988,11 +3988,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4531,7 +4531,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0deg, 0%, 100%, 0.12); + border-top: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4541,7 +4541,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0deg, 0%, 100%, 0.12); + border-left: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4603,10 +4603,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4614,7 +4614,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-stepper .p-stepper-nav { display: flex; @@ -4728,6 +4728,68 @@ outline-offset: 0; box-shadow: none; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5132,7 +5194,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5153,7 +5215,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -5295,7 +5357,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5335,7 +5397,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5396,7 +5458,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(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5446,7 +5508,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5533,7 +5595,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5568,7 +5630,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5648,7 +5710,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5676,7 +5738,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5705,7 +5767,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(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5771,7 +5833,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5821,7 +5883,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5982,7 +6044,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -6006,7 +6068,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -6083,7 +6145,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -6124,7 +6186,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -6174,7 +6236,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -6280,7 +6342,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -6301,7 +6363,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6692,7 +6754,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6718,7 +6780,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -7020,8 +7082,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7031,13 +7093,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7266,7 +7328,7 @@ background-color: rgba(255, 255, 255, 0.16); } .p-calendar-w-btn { - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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); @@ -7316,7 +7378,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -7343,8 +7405,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7354,13 +7416,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7421,8 +7483,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7432,13 +7494,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7480,7 +7542,7 @@ border-radius: 2px; } .p-checkbox .p-checkbox-box { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } @@ -7499,7 +7561,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(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 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); @@ -7508,7 +7570,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(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 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); @@ -7554,8 +7616,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7565,13 +7627,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7641,8 +7703,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7652,13 +7714,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7704,20 +7766,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7737,8 +7799,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7883,8 +7945,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7894,13 +7956,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -8051,7 +8113,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(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 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); @@ -8060,7 +8122,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(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 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); @@ -8317,8 +8379,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8328,13 +8390,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index b3bbec11b5..562e4e64e5 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -619,10 +619,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); @@ -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: #673AB7; } + .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: #673AB7; background: rgba(103, 58, 183, 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(103, 58, 183, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); 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; } @@ -2094,6 +2084,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); @@ -4617,6 +4616,109 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(0, 0, 0, 0.87); + border: 1px solid transparent; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(0, 0, 0, 0.87); + font-weight: 500; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(103, 58, 183, 0.12); + color: #673AB7; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(0, 0, 0, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #673AB7; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #bdbdbd; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #673AB7; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4626,6 +4728,68 @@ outline-offset: 0; box-shadow: none; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -8087,6 +8251,24 @@ .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + background-color: #9e9d9e; + color: #ffffff; + font-size: 0.857rem; + min-width: 1.714rem; + height: 1.714rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background-color: #673AB7; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { + font-weight: 600; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + margin-inline-start: 1.75rem; + } .p-steps { padding: 1rem 0; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index a63a95d3d5..82f3d31c23 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -4728,6 +4728,68 @@ outline-offset: 0; box-shadow: none; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index f3f5f02562..2699cf1b7e 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -619,10 +619,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -659,6 +659,7 @@ border: 1px solid hsla(0, 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: #CE93D8; } + .p-cascadeselect.p-variant-filled { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: hsla(0, 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: #CE93D8; background: rgba(206, 147, 216, 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(206, 147, 216, 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); } + .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; @@ -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(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(0, 0%, 100%, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: hsla(0, 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; } @@ -2094,6 +2084,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.75rem; } + .p-treeselect.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 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); @@ -4617,6 +4616,109 @@ .p-splitter .p-splitter-gutter-resizing { background: hsla(0, 0%, 100%, 0.12); } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 1px solid transparent; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.87); + font-weight: 500; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(206, 147, 216, 0.16); + color: #CE93D8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #CE93D8; + } + .p-stepper .p-stepper-panels { + background: transparent; + padding: 0.75rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #bdbdbd; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: transparent; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #CE93D8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4626,6 +4728,68 @@ outline-offset: 0; box-shadow: none; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -8087,6 +8251,24 @@ .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + background-color: #9e9d9e; + color: #ffffff; + font-size: 0.857rem; + min-width: 1.714rem; + height: 1.714rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background-color: #CE93D8; + color: #121212; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { + font-weight: 600; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + margin-inline-start: 1.75rem; + } .p-steps { padding: 1rem 0; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index a1beb60c86..4990ea9bc3 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-left: 1px solid hsla(0, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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; @@ -671,13 +671,13 @@ border-color: #9FA8DA; } .p-cascadeselect.p-variant-filled { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-cascadeselect.p-variant-filled:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-cascadeselect.p-variant-filled:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-cascadeselect .p-cascadeselect-label { background: transparent; @@ -734,7 +734,7 @@ } .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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 0.75rem 0.75rem; @@ -772,11 +772,11 @@ height: 18px; } .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); border-radius: 4px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -795,7 +795,7 @@ height: 14px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -835,25 +835,25 @@ border-color: #f44435; } .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -873,13 +873,13 @@ align-items: center; } .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -939,12 +939,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 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(0deg, 0%, 100%, 0.24); + background: hsla(0, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -1059,7 +1059,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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; @@ -1074,13 +1074,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1122,7 +1122,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1164,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1186,14 +1186,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - 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); + 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); padding: 0.75rem 0.75rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-right: 1px solid hsla(0, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1289,7 +1289,7 @@ border-radius: 0.5rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 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; @@ -1311,7 +1311,7 @@ transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 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); @@ -1331,7 +1331,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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; @@ -1350,13 +1350,13 @@ border-color: #f44435; } .p-inputtext.p-variant-filled { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-inputtext.p-variant-filled:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-inputtext.p-variant-filled:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; @@ -1396,13 +1396,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1471,14 +1471,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1531,15 +1531,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1571,7 +1571,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1667,7 +1667,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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; @@ -1682,13 +1682,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1700,7 +1700,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1729,7 +1729,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1793,7 +1793,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1875,11 +1875,11 @@ opacity: 0; z-index: 1; outline: 0 none; - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); border-radius: 50%; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1918,25 +1918,25 @@ border-color: #f44435; } .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; @@ -2028,7 +2028,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -2068,7 +2068,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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,13 +2085,13 @@ padding-right: 1.75rem; } .p-treeselect.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-treeselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-treeselect .p-treeselect-label { padding: 0.75rem 0.75rem; @@ -2103,7 +2103,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2133,7 +2133,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2184,13 +2184,13 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-togglebutton { position: relative; @@ -3583,7 +3583,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3591,12 +3591,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 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(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3605,7 +3605,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3669,12 +3669,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3687,10 +3687,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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3854,12 +3854,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3988,11 +3988,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 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(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4531,7 +4531,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0deg, 0%, 100%, 0.12); + border-top: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4541,7 +4541,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0deg, 0%, 100%, 0.12); + border-left: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4603,10 +4603,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4614,7 +4614,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-stepper .p-stepper-nav { display: flex; @@ -4728,6 +4728,68 @@ outline-offset: 0; box-shadow: none; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5132,7 +5194,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5153,7 +5215,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -5295,7 +5357,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5335,7 +5397,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5396,7 +5458,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(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5446,7 +5508,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5533,7 +5595,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5568,7 +5630,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5648,7 +5710,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5676,7 +5738,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5705,7 +5767,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(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5771,7 +5833,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5821,7 +5883,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -5982,7 +6044,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -6006,7 +6068,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -6083,7 +6145,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -6124,7 +6186,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -6174,7 +6236,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -6280,7 +6342,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(0deg, 0%, 100%, 0.12); + background: hsla(0, 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); @@ -6301,7 +6363,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6692,7 +6754,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6718,7 +6780,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -7020,8 +7082,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7031,13 +7093,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7266,7 +7328,7 @@ background-color: rgba(255, 255, 255, 0.16); } .p-calendar-w-btn { - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 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); @@ -7316,7 +7378,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -7343,8 +7405,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7354,13 +7416,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7421,8 +7483,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7432,13 +7494,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7480,7 +7542,7 @@ border-radius: 2px; } .p-checkbox .p-checkbox-box { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } @@ -7499,7 +7561,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(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 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); @@ -7508,7 +7570,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(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 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); @@ -7554,8 +7616,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7565,13 +7627,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7641,8 +7703,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7652,13 +7714,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7704,20 +7766,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-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(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7737,8 +7799,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7883,8 +7945,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7894,13 +7956,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -8051,7 +8113,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(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 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); @@ -8060,7 +8122,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(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 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); @@ -8317,8 +8379,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - 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: 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-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8328,13 +8390,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 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(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 6c46aa41f6..973f5719bf 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -619,10 +619,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); @@ -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: #673AB7; } + .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: #673AB7; background: rgba(103, 58, 183, 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(103, 58, 183, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); 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; } @@ -2094,6 +2084,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); @@ -4617,6 +4616,109 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(0, 0, 0, 0.87); + border: 1px solid transparent; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(0, 0, 0, 0.87); + font-weight: 500; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(103, 58, 183, 0.12); + color: #673AB7; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(0, 0, 0, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #673AB7; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.75rem; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #bdbdbd; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #673AB7; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4626,6 +4728,68 @@ outline-offset: 0; box-shadow: none; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -8087,6 +8251,24 @@ .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + background-color: #9e9d9e; + color: #ffffff; + font-size: 0.857rem; + min-width: 1.714rem; + height: 1.714rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background-color: #673AB7; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { + font-weight: 600; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + margin-inline-start: 1.75rem; + } .p-steps { padding: 1rem 0; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 42c00049c3..d851bdb639 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -4728,6 +4728,68 @@ outline-offset: 0; box-shadow: none; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index 9ade6b171c..dfb5a34db3 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -4682,6 +4682,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 2px solid #e5e9f0; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 0a102933ab..862928e335 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 76348dd30c..4ad8388007 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -4635,6 +4635,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 0 none; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index aefcb692e9..e60daec707 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -4644,6 +4644,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 0 none; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 18a1ccb348..0dd4617d29 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -4644,6 +4644,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 0 none; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 1f52f3d164..8181032451 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -4635,6 +4635,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 0 none; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index e074ed953e..3d4c9f5062 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index e448b16e51..6beacb008a 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index a55d5b2e0a..98346ced96 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 3043f87dc3..343b1e63c1 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(234deg, 15%, 13%); + --primary-color-text: hsl(234, 15%, 13%); --surface-0: #1d1e27; --surface-50: #34343d; --surface-100: #4a4b52; @@ -786,7 +786,7 @@ } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); font-size: 14px; } .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { @@ -805,7 +805,7 @@ } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); font-size: 14px; } .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { @@ -822,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(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; @@ -1891,7 +1891,7 @@ width: 12px; height: 12px; transition-duration: 0.2s; - background-color: hsl(234deg, 15%, 13%); + background-color: hsl(234, 15%, 13%); } .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #b19df7; @@ -1905,7 +1905,7 @@ background: #9378f4; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: hsl(234deg, 15%, 13%); + background-color: hsl(234, 15%, 13%); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: 0 none; @@ -2008,20 +2008,20 @@ .p-selectbutton .p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, .p-selectbutton .p-button.p-highlight .p-button-icon-right { - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 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(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-selectbutton.p-invalid > .p-button { border-color: #ff9a9a; @@ -2232,11 +2232,11 @@ .p-togglebutton.p-highlight .p-button { background: #b19df7; border-color: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-togglebutton.p-highlight .p-button .p-button-icon-left, .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { background: rgba(255, 255, 255, 0.03); @@ -2250,11 +2250,11 @@ .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #a28af5; border-color: #a28af5; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 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(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { outline: 0 none; @@ -2266,7 +2266,7 @@ border-color: #ff9a9a; } .p-button { - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); background: #b19df7; border: 1px solid #b19df7; padding: 0.75rem 1.25rem; @@ -2276,12 +2276,12 @@ } .p-button:not(:disabled):hover { background: #a28af5; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); border-color: #a28af5; } .p-button:not(:disabled):active { background: #9378f4; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); border-color: #9378f4; } .p-button.p-button-outlined { @@ -2363,7 +2363,7 @@ height: 1rem; line-height: 1rem; color: #b19df7; - background-color: hsl(234deg, 15%, 13%); + background-color: hsl(234, 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); @@ -4365,7 +4365,7 @@ border-radius: 50%; width: 1rem; height: 1rem; - background-color: hsl(234deg, 15%, 13%); + background-color: hsl(234, 15%, 13%); } .p-timeline .p-timeline-event-connector { background-color: #3e4053; @@ -4702,6 +4702,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #3e4053; @@ -4905,7 +4967,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); width: 2rem; height: 2rem; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4916,7 +4978,7 @@ } .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #a28af5; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-overlaypanel:after { border: solid transparent; @@ -6730,7 +6792,7 @@ } .p-tag { background: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; @@ -6844,7 +6906,7 @@ background: #b19df7; } .p-progressbar .p-progressbar-label { - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); line-height: 1.5rem; } .p-terminal { @@ -6860,7 +6922,7 @@ } .p-badge { background: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -6901,7 +6963,7 @@ } .p-tag { background: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 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 7895cbeeda..c03ecef86d 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -4702,6 +4702,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dfe7ef; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index c43100d430..2349f6bffb 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -4688,6 +4688,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 07c4243d02..8a29843612 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 66c67999a7..cc8679db73 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index e67b6dd8a4..9031897ea2 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -4660,6 +4660,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 49f6a443aa..a0f2b3d145 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -4734,6 +4734,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #263238; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 5befd15f69..452ea3e38a 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -4734,6 +4734,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #ebebeb; From 82fd8dea9c198c1b016c7853d76b2160ef410bb9 Mon Sep 17 00:00:00 2001 From: Melloware Date: Mon, 13 May 2024 11:14:31 -0400 Subject: [PATCH 26/45] Fix #6614: Chart update TypeScript to inherit DIV (#6618) --- components/lib/chart/chart.d.ts | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/components/lib/chart/chart.d.ts b/components/lib/chart/chart.d.ts index 890b11c0d8..c1f9cfcba5 100644 --- a/components/lib/chart/chart.d.ts +++ b/components/lib/chart/chart.d.ts @@ -45,11 +45,7 @@ export interface ChartPassThroughOptions { * Defines valid properties in Chart component. * @group Properties */ -export interface ChartProps { - /** - * Unique identifier of the element. - */ - id?: string | undefined; +export interface ChartProps extends Omit, HTMLDivElement>, 'ref' | 'content' | 'pt'> { /** * Type of the chart. */ @@ -74,14 +70,6 @@ export interface ChartProps { * Height of the chart in non-responsive mode. */ height?: string | undefined; - /** - * Inline style of the element. - */ - style?: React.CSSProperties | undefined; - /** - * Style class of the element. - */ - className?: string | undefined; /** * ARIA label for the chart canvas. Defaults to options.plugins.title.text if available. * @default options.plugins.title.text From aee847256b065d1556998d2df70b608f07945c50 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 13 May 2024 15:17:15 +0000 Subject: [PATCH 27/45] Update API doc --- components/doc/common/apidoc/index.json | 24 ------------------------ 1 file changed, 24 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 709719dc3f..f7f4847f0c 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -10029,14 +10029,6 @@ "default": "", "description": "Used to get the child elements of the component." }, - { - "name": "className", - "optional": true, - "readonly": false, - "type": "string", - "default": "", - "description": "Style class of the element." - }, { "name": "data", "optional": true, @@ -10053,14 +10045,6 @@ "default": "", "description": "Height of the chart in non-responsive mode." }, - { - "name": "id", - "optional": true, - "readonly": false, - "type": "string", - "default": "", - "description": "Unique identifier of the element." - }, { "name": "options", "optional": true, @@ -10093,14 +10077,6 @@ "default": "", "description": "Used to configure passthrough(pt) options of the component." }, - { - "name": "style", - "optional": true, - "readonly": false, - "type": "CSSProperties", - "default": "", - "description": "Inline style of the element." - }, { "name": "type", "optional": true, From cd6921bb23de0aa940607eda80bf8b097d4874ef Mon Sep 17 00:00:00 2001 From: Tubbbe <6552575+Tubbbe@users.noreply.github.com> Date: Mon, 13 May 2024 19:12:56 +0200 Subject: [PATCH 28/45] Fix: Cannot npm link on Windows (#6619) --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 73a00256db..fa6a922912 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,8 @@ "build:lib": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package", "build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:api", "dev:link": "NPM_LINK=true NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package:dev", - "dev:link:windows": "set NPM_LINK=true && set NODE_ENV=production&& set INPUT_DIR=components/lib/&& set OUTPUT_DIR=dist/&& npm run build:package:dev", - "build:package:dev": "npm run build:check && rollup -c --watch && gulp build-resources && npm run build:api", + "dev:link:windows": "set \"NPM_LINK=true\" && set \"NODE_ENV=production\" && set \"INPUT_DIR=components/lib/\" && set \"OUTPUT_DIR=dist/\" && npm run build:package:dev", + "build:package:dev": "npm run build:check && gulp build-resources && npm run build:api && rollup -c --watch", "build:api": "npm run apiwebtypes && npm run apidoc", "build:check": "npm run lint && npm run format:check && npm run type:check && npm run security:check", "security:check": "npm audit --production --audit-level high", From b9f157e63ba4d45b7efa0dc4b957d2764f906e2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=ADdac?= Date: Mon, 13 May 2024 23:32:25 +0200 Subject: [PATCH 29/45] Chnaged forceHasValidValue for cellEditValidateOnClose and removed unused property --- components/doc/common/apidoc/index.json | 16 ++++++++-------- components/lib/column/ColumnBase.js | 2 +- components/lib/column/column.d.ts | 12 ++++++------ components/lib/datatable/BodyCell.js | 6 +++--- components/lib/dialog/DialogBase.js | 1 - 5 files changed, 18 insertions(+), 19 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 8250fd7432..dc9d916124 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -11916,6 +11916,14 @@ "default": "", "description": "Inline style of the body." }, + { + "name": "cellEditValidateOnClose", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled and cellEditorValidator is set, force to call cellEditorValidator before cell editor is closed. If cellEditorValidator returns false, editor stays open." + }, { "name": "cellEditValidatorEvent", "optional": true, @@ -12180,14 +12188,6 @@ "default": "false", "description": "Whether the column is fixed in horizontal scrolling or not." }, - { - "name": "forceHasValidValue", - "optional": true, - "readonly": false, - "type": "boolean", - "default": "false", - "description": "When enabled and cellEditorValidator is set, force to call cellEditorValidator before cell editor is closed. If cellEditorValidator returns false, editor stays open." - }, { "name": "header", "optional": true, diff --git a/components/lib/column/ColumnBase.js b/components/lib/column/ColumnBase.js index 77e0d7abd0..737bf7ac6a 100644 --- a/components/lib/column/ColumnBase.js +++ b/components/lib/column/ColumnBase.js @@ -10,6 +10,7 @@ export const ColumnBase = ComponentBase.extend({ body: null, bodyClassName: null, bodyStyle: null, + cellEditValidateOnClose: false, cellEditValidator: null, cellEditValidatorEvent: 'click', className: null, @@ -42,7 +43,6 @@ export const ColumnBase = ComponentBase.extend({ footer: null, footerClassName: null, footerStyle: null, - forceHasValidValue: false, frozen: false, header: null, headerClassName: null, diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts index 1fe0977c98..a1168511f6 100644 --- a/components/lib/column/column.d.ts +++ b/components/lib/column/column.d.ts @@ -808,6 +808,12 @@ export interface ColumnProps { * Inline style of the body. */ bodyStyle?: React.CSSProperties | undefined; + /** + * When enabled and cellEditorValidator is set, force to call cellEditorValidator + * before cell editor is closed. If cellEditorValidator returns false, editor stays open. + * @defaultValue false + */ + cellEditValidateOnClose?: boolean | undefined; /** * Event to trigger the validation, possible values are "click" and "blur". * @defaultValue click @@ -963,12 +969,6 @@ export interface ColumnProps { * @defaultValue false */ frozen?: boolean | undefined; - /** - * When enabled and cellEditorValidator is set, force to call cellEditorValidator - * before cell editor is closed. If cellEditorValidator returns false, editor stays open. - * @defaultValue false - */ - forceHasValidValue?: boolean | undefined; /** * Header content of the table. */ diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 340a9d42fa..496538aa23 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -58,8 +58,8 @@ export const BodyCell = React.memo((props) => { return getColumnProp('editor'); }; - const forceHasValidValue = () => { - return getColumnProp('forceHasValidValue'); + const cellEditValidateOnClose = () => { + return getColumnProp('cellEditValidateOnClose'); 66 }; const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({ @@ -178,7 +178,7 @@ export const BodyCell = React.memo((props) => { let valid = true; - if ((!submit || forceHasValidValue()) && cellEditValidator) { + if ((!submit || cellEditValidateOnClose()) && cellEditValidator) { valid = cellEditValidator(params); } diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js index 2dfeb4f528..c90dfc9847 100644 --- a/components/lib/dialog/DialogBase.js +++ b/components/lib/dialog/DialogBase.js @@ -295,7 +295,6 @@ export const DialogBase = ComponentBase.extend({ resizable: true, rtl: false, showHeader: true, - stopPropagationOnKeyDown: false, style: null, transitionOptions: null, visible: false, From 524ab3a8d1d087093535dba55bc40fce7a8677c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=ADdac?= Date: Tue, 14 May 2024 11:25:34 +0200 Subject: [PATCH 30/45] Removed a typo in BodyCell.js --- components/lib/datatable/BodyCell.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 496538aa23..f6d95fb5fb 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -60,7 +60,7 @@ export const BodyCell = React.memo((props) => { const cellEditValidateOnClose = () => { return getColumnProp('cellEditValidateOnClose'); -66 }; + }; const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({ type: 'click', From 69aed63421d33b9866fc2b376d57fec8cc6b29cf Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Wed, 15 May 2024 08:01:06 +0000 Subject: [PATCH 31/45] Update API doc --- components/doc/common/apidoc/index.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index f2b71292f2..6ccec6e165 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -11898,7 +11898,7 @@ "readonly": false, "type": "boolean", "default": "false", - "description": "When enabled and cellEditorValidator is set, force to call cellEditorValidator before cell editor is closed. If cellEditorValidator returns false, editor stays open." + "description": "When enabled and cellEditorValidator is set, force to call cellEditorValidator\nbefore cell editor is closed. If cellEditorValidator returns false, editor stays open." }, { "name": "cellEditValidatorEvent", From f50cac45aacae9ab345a24598a486a6dd8064768 Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 15 May 2024 12:49:52 -0400 Subject: [PATCH 32/45] Fix #6629: Dropdown fix checkItcon (#6630) --- components/lib/dropdown/DropdownItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js index f70f2426a8..e630768e9c 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -57,7 +57,7 @@ export const DropdownItem = React.memo((props) => { { className: cx('checkIcon') }, - getPTOptions('checIcon') + getPTOptions('checkIcon') ); return ; From 463ba5c70b80127a535ae31e0f3bf2c00889a524 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy <118115736+KirilCycle@users.noreply.github.com> Date: Fri, 17 May 2024 20:16:35 +0300 Subject: [PATCH 33/45] Fix #6632 InputOtp keyboard navigation (#6638) * fix: do not call preventDef on submit and tab keys * update: default case condition * fix: change condition * make code cleaner --- components/lib/inputotp/InputOtp.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js index ddce03e275..cd32c8eebf 100644 --- a/components/lib/inputotp/InputOtp.js +++ b/components/lib/inputotp/InputOtp.js @@ -163,8 +163,14 @@ export const InputOtp = React.memo( break; } + case 'Tab': + + case 'Enter': { + break; + } + default: { - // Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length + //Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length if ((props?.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (tokens.join('').length >= props.length && event.code !== 'Delete')) { event.preventDefault(); } From ecd37b65b711331cb4f839c9fb85059e875fde9d Mon Sep 17 00:00:00 2001 From: "kl.nevermore" Date: Mon, 20 May 2024 20:06:55 +0800 Subject: [PATCH 34/45] Fix:#6141:DataTable:Column: onCellEditComplete is fired twice (#6641) * Fix:#6141:DataTable:Column: onCellEditComplete is fired twice * remove unused import * feat: use React.useEffect sync editingRowData --- components/lib/datatable/BodyCell.js | 55 +++++++++++++++------------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index f6d95fb5fb..9ab5617d47 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -25,6 +25,7 @@ export const BodyCell = React.memo((props) => { const selfClick = React.useRef(false); const tabindexTimeout = React.useRef(null); const initFocusTimeout = React.useRef(null); + const editingRowDataStateRef = React.useRef(null); const { ptm, ptmo, cx } = props.ptCallbacks; const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); @@ -157,43 +158,41 @@ export const BodyCell = React.memo((props) => { unbindDocumentClickListener(); OverlayService.off('overlay-click', overlayEventListener.current); overlayEventListener.current = null; + editingRowDataStateRef.current = null; selfClick.current = false; }, 1); }; const switchCellToViewMode = (event, submit) => { const callbackParams = getCellCallbackParams(event); + const newRowData = { ...editingRowDataStateRef.current }; + const newValue = resolveFieldData(newRowData); + const params = { ...callbackParams, newRowData, newValue }; + const onCellEditCancel = getColumnProp('onCellEditCancel'); + const cellEditValidator = getColumnProp('cellEditValidator'); + const onCellEditComplete = getColumnProp('onCellEditComplete'); + + if (!submit && onCellEditCancel) { + onCellEditCancel(params); + } - setEditingRowDataState((prev) => { - const newRowData = prev; - const newValue = resolveFieldData(newRowData); - const params = { ...callbackParams, newRowData, newValue }; - const onCellEditCancel = getColumnProp('onCellEditCancel'); - const cellEditValidator = getColumnProp('cellEditValidator'); - const onCellEditComplete = getColumnProp('onCellEditComplete'); - - if (!submit && onCellEditCancel) { - onCellEditCancel(params); - } + let valid = true; - let valid = true; + if ((!submit || cellEditValidateOnClose()) && cellEditValidator) { + valid = cellEditValidator(params); + } - if ((!submit || cellEditValidateOnClose()) && cellEditValidator) { - valid = cellEditValidator(params); + if (valid) { + if (submit && onCellEditComplete) { + onCellEditComplete(params); } - if (valid) { - if (submit && onCellEditComplete) { - setTimeout(() => onCellEditComplete(params)); - } - - closeCell(event); - } else { - event.preventDefault(); - } + closeCell(event); + } else { + event.preventDefault(); + } - return newRowData; - }); + setEditingRowDataState(newRowData); }; const findNextSelectableCell = (cell) => { @@ -523,6 +522,12 @@ export const BodyCell = React.memo((props) => { } }, [props.editingMeta]); + React.useEffect(() => { + if (editingRowDataState) { + editingRowDataStateRef.current = editingRowDataState; + } + }, [editingRowDataState]); + React.useEffect(() => { if (props.editMode === 'cell' || props.editMode === 'row') { const callbackParams = getCellCallbackParams(); From 8d129ef5386f0014fa183b1b9e5886d8d8485def Mon Sep 17 00:00:00 2001 From: Melloware Date: Mon, 20 May 2024 20:20:30 -0400 Subject: [PATCH 35/45] Fix #6639: VirtualScroller improve useUpdate comparison (#6643) --- .../lib/virtualscroller/VirtualScroller.js | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js index 349915172a..64862de642 100644 --- a/components/lib/virtualscroller/VirtualScroller.js +++ b/components/lib/virtualscroller/VirtualScroller.js @@ -568,7 +568,29 @@ export const VirtualScroller = React.memo( }, [numToleratedItemsState]); useUpdateEffect(() => { - if (!prevProps.items || prevProps.items.length !== (props.items || []).length) { + // Check if the previous/current rows array exists + const prevRowsExist = prevProps.items !== undefined && prevProps.items !== null; + const currentRowsExist = props.items !== undefined && props.items !== null; + + // Get the length of the previous/current rows array, or 0 if it doesn't exist + const prevRowsLength = prevRowsExist ? prevProps.items.length : 0; + const currentRowsLength = currentRowsExist ? props.items.length : 0; + + // Check if the length of the rows arrays has changed + let valuesChanged = prevRowsLength !== currentRowsLength; + + // If both is true, we also need to check the lengths of the first element (assuming it's a matrix) + if (both && !valuesChanged) { + // Get the length of the columns or 0 + const prevColumnsLength = prevRowsExist && prevProps.items.length > 0 ? prevProps.items[0].length : 0; + const currentColumnsLength = currentRowsExist && props.items.length > 0 ? props.items[0].length : 0; + + // Check if the length of the columns has changed + valuesChanged = prevColumnsLength !== currentColumnsLength; + } + + // If the previous items array doesn't exist or if any values have changed, call the init function + if (!prevRowsExist || valuesChanged) { init(); } From 143987f71dff40020760d2911768b4b41fc01f1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 21 May 2024 14:37:05 +0300 Subject: [PATCH 36/45] End of Spring Sale --- components/news/newssection.js | 4 ++-- pages/support/index.js | 4 ---- pages/templates/apollo/index.js | 2 -- pages/templates/atlantis/index.js | 2 -- pages/templates/avalon/index.js | 2 -- pages/templates/diamond/index.js | 2 -- pages/templates/freya/index.js | 2 -- pages/templates/ultima/index.js | 2 -- pages/templates/verona/index.js | 2 -- pages/uikit/index.js | 2 -- 10 files changed, 2 insertions(+), 22 deletions(-) diff --git a/components/news/newssection.js b/components/news/newssection.js index d6068c043d..d244a43f6a 100644 --- a/components/news/newssection.js +++ b/components/news/newssection.js @@ -14,12 +14,12 @@ export default function NewsSection() { const item = JSON.parse(itemString); if (!item.hiddenNews || item.hiddenNews !== News.id) { - showNews(News); + // showNews(News); } else { hideNews(); } } else { - showNews(News); + // showNews(News); } }); diff --git a/pages/support/index.js b/pages/support/index.js index 022aeb8b61..f98bae3009 100644 --- a/pages/support/index.js +++ b/pages/support/index.js @@ -65,10 +65,6 @@ const SupportPage = () => { PrimeBlocks - Enterprise License -
  • - - Theme Designer - Extended License -
  • Figma UI Kit - Enterprise License diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js index 7d461170a6..0bfdbadb6a 100644 --- a/pages/templates/apollo/index.js +++ b/pages/templates/apollo/index.js @@ -172,13 +172,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/atlantis/index.js b/pages/templates/atlantis/index.js index b248f3e900..f083a70539 100644 --- a/pages/templates/atlantis/index.js +++ b/pages/templates/atlantis/index.js @@ -147,13 +147,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/avalon/index.js b/pages/templates/avalon/index.js index 1208baf1ce..f98bc66cab 100644 --- a/pages/templates/avalon/index.js +++ b/pages/templates/avalon/index.js @@ -171,13 +171,11 @@ const license = { { title: 'Basic License', price: '$49', - discountPrice: '$29', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$490', - discountPrice: '$290', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js index cda58d6f1e..d5991a33f9 100644 --- a/pages/templates/diamond/index.js +++ b/pages/templates/diamond/index.js @@ -153,13 +153,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/freya/index.js b/pages/templates/freya/index.js index 4514e529b3..8675dfe51f 100644 --- a/pages/templates/freya/index.js +++ b/pages/templates/freya/index.js @@ -147,13 +147,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/ultima/index.js b/pages/templates/ultima/index.js index d2e7b70ea0..f31b496689 100644 --- a/pages/templates/ultima/index.js +++ b/pages/templates/ultima/index.js @@ -147,13 +147,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/verona/index.js b/pages/templates/verona/index.js index 8220bc0f4a..c803314dd8 100644 --- a/pages/templates/verona/index.js +++ b/pages/templates/verona/index.js @@ -176,13 +176,11 @@ const license = { { title: 'Basic License', price: '$49', - discountPrice: '$29', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$490', - discountPrice: '$290', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/uikit/index.js b/pages/uikit/index.js index ed13440a5b..75089abe38 100644 --- a/pages/uikit/index.js +++ b/pages/uikit/index.js @@ -164,7 +164,6 @@ const UIKitPage = (props) => {
    For individual designers
    - $99 $49
    @@ -209,7 +208,6 @@ const UIKitPage = (props) => {
    For small teams
    - $249 $149
    From 24ac964058bfb1a5bf6eacee2475d5270764d28a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 21 May 2024 14:40:32 +0300 Subject: [PATCH 37/45] Revert "End of Spring Sale" This reverts commit 143987f71dff40020760d2911768b4b41fc01f1e. --- components/news/newssection.js | 4 ++-- pages/support/index.js | 4 ++++ pages/templates/apollo/index.js | 2 ++ pages/templates/atlantis/index.js | 2 ++ pages/templates/avalon/index.js | 2 ++ pages/templates/diamond/index.js | 2 ++ pages/templates/freya/index.js | 2 ++ pages/templates/ultima/index.js | 2 ++ pages/templates/verona/index.js | 2 ++ pages/uikit/index.js | 2 ++ 10 files changed, 22 insertions(+), 2 deletions(-) diff --git a/components/news/newssection.js b/components/news/newssection.js index d244a43f6a..d6068c043d 100644 --- a/components/news/newssection.js +++ b/components/news/newssection.js @@ -14,12 +14,12 @@ export default function NewsSection() { const item = JSON.parse(itemString); if (!item.hiddenNews || item.hiddenNews !== News.id) { - // showNews(News); + showNews(News); } else { hideNews(); } } else { - // showNews(News); + showNews(News); } }); diff --git a/pages/support/index.js b/pages/support/index.js index f98bae3009..022aeb8b61 100644 --- a/pages/support/index.js +++ b/pages/support/index.js @@ -65,6 +65,10 @@ const SupportPage = () => { PrimeBlocks - Enterprise License
    • +
  • + + Theme Designer - Extended License +
  • Figma UI Kit - Enterprise License diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js index 0bfdbadb6a..7d461170a6 100644 --- a/pages/templates/apollo/index.js +++ b/pages/templates/apollo/index.js @@ -172,11 +172,13 @@ const license = { { title: 'Basic License', price: '$59', + discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', + discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/atlantis/index.js b/pages/templates/atlantis/index.js index f083a70539..b248f3e900 100644 --- a/pages/templates/atlantis/index.js +++ b/pages/templates/atlantis/index.js @@ -147,11 +147,13 @@ const license = { { title: 'Basic License', price: '$59', + discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', + discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/avalon/index.js b/pages/templates/avalon/index.js index f98bc66cab..1208baf1ce 100644 --- a/pages/templates/avalon/index.js +++ b/pages/templates/avalon/index.js @@ -171,11 +171,13 @@ const license = { { title: 'Basic License', price: '$49', + discountPrice: '$29', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$490', + discountPrice: '$290', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js index d5991a33f9..cda58d6f1e 100644 --- a/pages/templates/diamond/index.js +++ b/pages/templates/diamond/index.js @@ -153,11 +153,13 @@ const license = { { title: 'Basic License', price: '$59', + discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', + discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/freya/index.js b/pages/templates/freya/index.js index 8675dfe51f..4514e529b3 100644 --- a/pages/templates/freya/index.js +++ b/pages/templates/freya/index.js @@ -147,11 +147,13 @@ const license = { { title: 'Basic License', price: '$59', + discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', + discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/ultima/index.js b/pages/templates/ultima/index.js index f31b496689..d2e7b70ea0 100644 --- a/pages/templates/ultima/index.js +++ b/pages/templates/ultima/index.js @@ -147,11 +147,13 @@ const license = { { title: 'Basic License', price: '$59', + discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', + discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/verona/index.js b/pages/templates/verona/index.js index c803314dd8..8220bc0f4a 100644 --- a/pages/templates/verona/index.js +++ b/pages/templates/verona/index.js @@ -176,11 +176,13 @@ const license = { { title: 'Basic License', price: '$49', + discountPrice: '$29', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$490', + discountPrice: '$290', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/uikit/index.js b/pages/uikit/index.js index 75089abe38..ed13440a5b 100644 --- a/pages/uikit/index.js +++ b/pages/uikit/index.js @@ -164,6 +164,7 @@ const UIKitPage = (props) => {
    For individual designers
    + $99 $49
    @@ -208,6 +209,7 @@ const UIKitPage = (props) => {
    For small teams
    + $249 $149
    From 0bb9d6ccce94e5a4579c2ed88f698ba51d01ec37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 21 May 2024 14:44:00 +0300 Subject: [PATCH 38/45] End of Spring Sale --- pages/support/index.js | 4 ---- pages/templates/apollo/index.js | 2 -- pages/templates/atlantis/index.js | 2 -- pages/templates/avalon/index.js | 2 -- pages/templates/diamond/index.js | 2 -- pages/templates/freya/index.js | 2 -- pages/templates/ultima/index.js | 2 -- pages/templates/verona/index.js | 2 -- pages/uikit/index.js | 6 ++---- 9 files changed, 2 insertions(+), 22 deletions(-) diff --git a/pages/support/index.js b/pages/support/index.js index 022aeb8b61..f98bae3009 100644 --- a/pages/support/index.js +++ b/pages/support/index.js @@ -65,10 +65,6 @@ const SupportPage = () => { PrimeBlocks - Enterprise License
    • -
  • - - Theme Designer - Extended License -
  • Figma UI Kit - Enterprise License diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js index 7d461170a6..0bfdbadb6a 100644 --- a/pages/templates/apollo/index.js +++ b/pages/templates/apollo/index.js @@ -172,13 +172,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/atlantis/index.js b/pages/templates/atlantis/index.js index b248f3e900..f083a70539 100644 --- a/pages/templates/atlantis/index.js +++ b/pages/templates/atlantis/index.js @@ -147,13 +147,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/avalon/index.js b/pages/templates/avalon/index.js index 1208baf1ce..f98bc66cab 100644 --- a/pages/templates/avalon/index.js +++ b/pages/templates/avalon/index.js @@ -171,13 +171,11 @@ const license = { { title: 'Basic License', price: '$49', - discountPrice: '$29', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$490', - discountPrice: '$290', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js index cda58d6f1e..d5991a33f9 100644 --- a/pages/templates/diamond/index.js +++ b/pages/templates/diamond/index.js @@ -153,13 +153,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/freya/index.js b/pages/templates/freya/index.js index 4514e529b3..8675dfe51f 100644 --- a/pages/templates/freya/index.js +++ b/pages/templates/freya/index.js @@ -147,13 +147,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/ultima/index.js b/pages/templates/ultima/index.js index d2e7b70ea0..f31b496689 100644 --- a/pages/templates/ultima/index.js +++ b/pages/templates/ultima/index.js @@ -147,13 +147,11 @@ const license = { { title: 'Basic License', price: '$59', - discountPrice: '$39', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$590', - discountPrice: '$390', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/templates/verona/index.js b/pages/templates/verona/index.js index 8220bc0f4a..c803314dd8 100644 --- a/pages/templates/verona/index.js +++ b/pages/templates/verona/index.js @@ -176,13 +176,11 @@ const license = { { title: 'Basic License', price: '$49', - discountPrice: '$29', included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates'] }, { title: 'Extended License', price: '$490', - discountPrice: '$290', included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates'] } ] diff --git a/pages/uikit/index.js b/pages/uikit/index.js index ed13440a5b..a561f5c50e 100644 --- a/pages/uikit/index.js +++ b/pages/uikit/index.js @@ -164,8 +164,7 @@ const UIKitPage = (props) => {
    For individual designers
    - $99 - $49 + $99
      @@ -209,8 +208,7 @@ const UIKitPage = (props) => {
      For small teams
      - $249 - $149 + $249
        From f0cf67692f75f026808b6f62833d3d4e72afae93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 21 May 2024 14:44:41 +0300 Subject: [PATCH 39/45] Disabled News Section --- components/news/newssection.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/news/newssection.js b/components/news/newssection.js index d6068c043d..d244a43f6a 100644 --- a/components/news/newssection.js +++ b/components/news/newssection.js @@ -14,12 +14,12 @@ export default function NewsSection() { const item = JSON.parse(itemString); if (!item.hiddenNews || item.hiddenNews !== News.id) { - showNews(News); + // showNews(News); } else { hideNews(); } } else { - showNews(News); + // showNews(News); } }); From 64970e9348d56afabb64d7412737990ec68a8bcc Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 22 May 2024 01:16:13 +0300 Subject: [PATCH 40/45] Updated news --- data/news.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/data/news.json b/data/news.json index 82cb051fa4..d75534541a 100644 --- a/data/news.json +++ b/data/news.json @@ -1,6 +1,6 @@ { - "id": 47, - "content": "🌸 Spring Sale: Save Up to 50% on Premium Templates and More. ", + "id": 48, + "content": "Sakai | Free Admin Template.", "linkText": "Learn More", - "linkHref": "https://www.primefaces.org/store" + "linkHref": "https://sakai.primereact.org" } From 3a824c01b958d28abee1c33146efdc445198ea99 Mon Sep 17 00:00:00 2001 From: Anders142536 <27980388+Anders142536@users.noreply.github.com> Date: Wed, 22 May 2024 16:22:07 +0200 Subject: [PATCH 41/45] fixed typo (#6654) --- components/doc/customicons/imagedoc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/customicons/imagedoc.js b/components/doc/customicons/imagedoc.js index f636b0776e..c72986bea7 100644 --- a/components/doc/customicons/imagedoc.js +++ b/components/doc/customicons/imagedoc.js @@ -11,7 +11,7 @@ export function ImageDoc(props) { return ( <> -

        Any time of image can be used as an icon.

        +

        Any type of image can be used as an icon.

         From 875c21c6a8da39143375a4d46e1d8d4610a3d4dc Mon Sep 17 00:00:00 2001 From: rayman-de <141345230+rayman-de@users.noreply.github.com> Date: Thu, 23 May 2024 13:38:29 +0200 Subject: [PATCH 42/45] Fix #6657 (#6658) Resolve issue #6657 by adding the missing "props" --- components/lib/datatable/BodyRow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js index 64f22f14e2..c72af3eb10 100644 --- a/components/lib/datatable/BodyRow.js +++ b/components/lib/datatable/BodyRow.js @@ -269,7 +269,7 @@ export const BodyRow = React.memo((props) => { focusedItem && focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1'); } else { rows[0].tabIndex = '0'; - focusedItem !== rows[0] && (rows[rowIndex].tabIndex = '-1'); + focusedItem !== rows[0] && (rows[props.rowIndex].tabIndex = '-1'); } } }; From 6efc7a73fcfa29bf477ef331aecd51a489a40cb1 Mon Sep 17 00:00:00 2001 From: Melloware Date: Thu, 23 May 2024 07:40:35 -0400 Subject: [PATCH 43/45] Fix #6650: Multiselect use unique label key (#6652) --- components/lib/multiselect/MultiSelect.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 1daa91423a..cfcf0f826e 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -894,6 +894,7 @@ export const MultiSelect = React.memo( } }; const label = getLabelByValue(val); + const labelKey = label + '_' + i; const iconProps = mergeProps( { key: i, @@ -913,14 +914,13 @@ export const MultiSelect = React.memo( const tokenLabelProps = mergeProps( { - key: label + i, className: cx('tokenLabel') }, ptm('tokenLabel', context) ); return ( -
        +
        {label} {icon}
        From a86970a36c29b9fb0928803a6fc59d8d16ae408f Mon Sep 17 00:00:00 2001 From: Melloware Date: Thu, 23 May 2024 07:40:45 -0400 Subject: [PATCH 44/45] Fix #6648: Tooltip default position to 'right' if undefined (#6651) --- components/lib/tooltip/Tooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 489ea2709c..d108f6a537 100644 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -12,7 +12,7 @@ export const Tooltip = React.memo( const context = React.useContext(PrimeReactContext); const props = TooltipBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(false); - const [positionState, setPositionState] = React.useState(props.position); + const [positionState, setPositionState] = React.useState(props.position || 'right'); const [classNameState, setClassNameState] = React.useState(''); const metaData = { props, @@ -449,7 +449,7 @@ export const Tooltip = React.memo( bindWindowResizeListener(); bindOverlayScrollListener(); } else { - setPositionState(props.position); + setPositionState(props.position || 'right'); setClassNameState(''); currentTargetRef.current = null; containerSize.current = null; From 7c33e3f15defd502b587455f36e1df4550b65871 Mon Sep 17 00:00:00 2001 From: Melloware Date: Thu, 23 May 2024 07:40:55 -0400 Subject: [PATCH 45/45] Fix #6647: PageLinks use totalPages (#6649) --- components/lib/paginator/PageLinks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js index 0fbe09d72f..31625b5c41 100644 --- a/components/lib/paginator/PageLinks.js +++ b/components/lib/paginator/PageLinks.js @@ -73,7 +73,7 @@ export const PageLinks = React.memo((inProps) => { }, page: pageLink - 1, currentPage: props.page, - totalPages: props.pageCount, + totalPages: props.totalPages, ariaLabel: ariaLabel('pageLabel', { page: pageLink }), ariaCurrent: pageLink - 1 === props.page ? 'true' : undefined, element,