From 09e38447114f921b1dfc9c090467dfed5d5d2de5 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 26 Mar 2024 13:08:13 +0300 Subject: [PATCH 01/10] New Component - Stepper --- components/lib/stepper/Stepper.js | 316 ++++++++++++++++++ components/lib/stepper/StepperBase.js | 116 +++++++ components/lib/stepper/StepperContent.js | 41 +++ components/lib/stepper/StepperHeader.js | 29 ++ components/lib/stepper/StepperSeparator.js | 18 + components/lib/stepper/package.json | 7 + components/lib/stepperpanel/StepperPanel.js | 20 ++ .../lib/stepperpanel/StepperPanelBase.js | 14 + components/lib/stepperpanel/package.json | 7 + public/themes/arya-blue/theme.css | 132 ++++++++ public/themes/arya-green/theme.css | 132 ++++++++ public/themes/arya-orange/theme.css | 132 ++++++++ public/themes/bootstrap4-dark-blue/theme.css | 132 ++++++++ public/themes/bootstrap4-light-blue/theme.css | 132 ++++++++ public/themes/fluent-light/theme.css | 126 +++++++ public/themes/lara-dark-amber/theme.css | 140 ++++++++ public/themes/lara-dark-blue/theme.css | 140 ++++++++ public/themes/lara-dark-cyan/theme.css | 140 ++++++++ public/themes/lara-dark-green/theme.css | 140 ++++++++ public/themes/lara-dark-indigo/theme.css | 140 ++++++++ public/themes/lara-dark-pink/theme.css | 140 ++++++++ public/themes/lara-dark-teal/theme.css | 140 ++++++++ public/themes/lara-light-amber/theme.css | 136 ++++++++ public/themes/lara-light-blue/theme.css | 136 ++++++++ public/themes/lara-light-cyan/theme.css | 136 ++++++++ public/themes/lara-light-green/theme.css | 136 ++++++++ public/themes/lara-light-indigo/theme.css | 136 ++++++++ public/themes/lara-light-pink/theme.css | 136 ++++++++ public/themes/lara-light-teal/theme.css | 136 ++++++++ public/themes/luna-amber/theme.css | 132 ++++++++ public/themes/luna-blue/theme.css | 132 ++++++++ public/themes/luna-green/theme.css | 132 ++++++++ public/themes/luna-pink/theme.css | 132 ++++++++ public/themes/md-dark-indigo/theme.css | 150 +++++++++ public/themes/md-light-indigo/theme.css | 150 +++++++++ public/themes/mdc-dark-indigo/theme.css | 150 +++++++++ public/themes/mdc-light-indigo/theme.css | 150 +++++++++ public/themes/mira/theme.css | 132 ++++++++ public/themes/nano/theme.css | 132 ++++++++ public/themes/nova-accent/theme.css | 132 ++++++++ public/themes/nova-alt/theme.css | 132 ++++++++ public/themes/nova/theme.css | 132 ++++++++ public/themes/rhea/theme.css | 132 ++++++++ public/themes/saga-blue/theme.css | 132 ++++++++ public/themes/saga-green/theme.css | 132 ++++++++ public/themes/saga-orange/theme.css | 132 ++++++++ public/themes/soho-dark/theme.css | 132 ++++++++ public/themes/soho-light/theme.css | 132 ++++++++ public/themes/tailwind-light/theme.css | 132 ++++++++ public/themes/vela-blue/theme.css | 132 ++++++++ public/themes/vela-green/theme.css | 132 ++++++++ public/themes/vela-orange/theme.css | 132 ++++++++ public/themes/viva-dark/theme.css | 132 ++++++++ public/themes/viva-light/theme.css | 132 ++++++++ 54 files changed, 6658 insertions(+) create mode 100644 components/lib/stepper/Stepper.js create mode 100644 components/lib/stepper/StepperBase.js create mode 100644 components/lib/stepper/StepperContent.js create mode 100644 components/lib/stepper/StepperHeader.js create mode 100644 components/lib/stepper/StepperSeparator.js create mode 100644 components/lib/stepper/package.json create mode 100644 components/lib/stepperpanel/StepperPanel.js create mode 100644 components/lib/stepperpanel/StepperPanelBase.js create mode 100644 components/lib/stepperpanel/package.json diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js new file mode 100644 index 0000000000..224cca999c --- /dev/null +++ b/components/lib/stepper/Stepper.js @@ -0,0 +1,316 @@ +import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; +import { useHandleStyle } from '../componentbase/Componentbase'; +import { CSSTransition } from '../csstransition/CSSTransition'; +import { useMergeProps } from '../hooks/Hooks'; +import { UniqueComponentId, classNames } from '../utils/Utils'; +import { StepperBase } from './StepperBase'; +import { StepperContent } from './StepperContent'; +import { StepperHeader } from './StepperHeader'; +import { StepperSeparator } from './StepperSeparator'; + +export const Stepper = React.memo( + React.forwardRef((inProps) => { + const mergeProps = useMergeProps(); + const context = React.useContext(PrimeReactContext); + const props = StepperBase.getProps(inProps, context); + const { ptm, cx, isUnstyled, ptmo } = StepperBase.setMetaData({ + props + }); + const [activeStepState, setActiveStepState] = React.useState(props.activeStep); + const navRef = React.useRef(); + + useHandleStyle(StepperBase.css.styles, isUnstyled, { name: 'stepper' }); + + const getStepProp = (step, name) => { + return step.props ? step.props[name] : undefined; + }; + + const getStepKey = (step, index) => { + return getStepProp(step, 'header') || index; + }; + + const isStep = (child) => { + return child.type.displayName === 'StepperPanel'; + }; + + const isStepActive = (index) => { + return activeStepState === index; + }; + + const isItemDisabled = (index) => { + return props.linear && !isStepActive(index); + }; + + const updateActiveStep = (event, index) => { + setActiveStepState(index); + + //component event propu olarak ekle + props.onChangeStep && props.onChangeStep({ originalEvent: event, index }); + }; + + const getStepHeaderActionId = (index) => { + return `${UniqueComponentId()}_${index}_header_action`; + }; + + const getStepContentId = (index) => { + return `${UniqueComponentId()}_${index}content`; + }; + + const stepperPanels = () => { + return React.Children.toArray(props.children).reduce((stepperpanels, child) => { + if (isStep(child)) { + stepperpanels.push(child); + } else if (child && Array.isArray(child)) { + React.Children.toArray(child.props.children).forEach((nestedChild) => { + if (isStep(nestedChild)) { + stepperpanels.push(nestedChild); + } + }); + } + + return stepperpanels; + }, []); + }; + + const prevCallback = (event, index) => { + if (index !== 0) { + updateActiveStep(event, index - 1); + } + }; + + const nextCallback = (event, index) => { + if (index !== stepperPanels().length - 1) { + updateActiveStep(event, index + 1); + } + }; + + const getStepPT = (step, key, index) => { + const count = stepperPanels().length; + + const stepMetaData = { + props: step.props, + parent: { + props: props + }, + context: { + index, + count, + first: index === 0, + last: index === count - 1, + active: isStepActive(index), + highlighted: index < activeStepState, + disabled: isItemDisabled(index) + } + }; + + return mergeProps(ptm(`stepperpanel.${key}`, { stepperpanel: stepMetaData }), ptm(`stepperpanel.${key}`, stepMetaData), ptmo(getStepProp(step, 'pt'), key, stepMetaData)); + }; + + const onItemClick = (event, index) => { + if (props.linear) { + event.preventDefault(); + + return; + } + + if (index !== activeStepState) { + updateActiveStep(event, index); + } + }; + + const createPanel = () => { + return stepperPanels().map((step, index) => { + const panelProps = mergeProps( + { + className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index })), + 'aria-current': isStepActive(index) ? 'step' : undefined, + role: 'presentation', + 'data-p-highlight': isStepActive(index), + 'data-p-disabled': isItemDisabled(index), + 'data-p-active': isStepActive(index) + }, + ptm('stepperpanel') + ); + + return ( +
  • + + {index !== stepperPanels().length - 1 && ( + + )} +
    • + ); + }); + }; + + const createPanelContent = () => { + return stepperPanels().map((step, index) => { + if (!isStepActive(index)) { + return null; + } + + return ( + + ); + }); + }; + + const createHorizontal = () => { + const items = createPanel(); + const navProps = mergeProps( + { + className: classNames(cx('nav')), + ref: navRef + }, + ptm('nav') + ); + + const panelContainerProps = mergeProps( + { + className: cx('panelContainer') + }, + ptm('panelContainer') + ); + + return ( + <> + +
    {createPanelContent()}
    + + ); + }; + + const createVertical = () => { + return stepperPanels().map((step, index) => { + const navProps = mergeProps( + { + ref: navRef, + className: cx('panel', { props, index, isStepActive }), + 'aria-current': isStepActive(index) ? 'step' : undefined, + ...getStepPT(step, 'root', index), + ...getStepPT(step, 'panel', index), + 'data-p-highlight': isStepActive(index), + 'data-p-disabled': isItemDisabled(index), + 'data-p-active': isStepActive(index) + }, + ptm('nav') + ); + + const headerProps = mergeProps({ + className: cx('stepper.header', { step, isStepActive, isItemDisabled, index }), + ...getStepPT(step, 'header', index) + }); + + const transitionProps = mergeProps({ + ...getStepPT(step, 'transition', index) + }); + + const toggleableContentProps = mergeProps({ + className: cx('stepper.toggleableContent'), + ...getStepPT(step, 'toggleableContent', index) + }); + + return ( +
    +
    + +
    + +
    + {index !== stepperPanels().length - 1 && ( + + )} + +
    +     +
    + ); + }); + }; + + const rootProps = mergeProps( + { + className: classNames(cx('root')), + role: 'tablist' + }, + StepperBase.getOtherProps(props), + ptm('root') + ); + + return ( +
    + {props.start && props.start()} + {props.orientation === 'horizontal' && createHorizontal()} + {props.orientation === 'vertical' && createVertical()} + {props.end && props.end()} +
    + ); + }) +); + +StepperBase.displayName = 'StepperBase'; diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js new file mode 100644 index 0000000000..3148101cc1 --- /dev/null +++ b/components/lib/stepper/StepperBase.js @@ -0,0 +1,116 @@ +import { ComponentBase } from '../componentbase/ComponentBase'; +import { classNames } from '../utils/Utils'; + +const classes = { + root: ({ props }) => + classNames('p-stepper p-component', { + 'p-stepper-horizontal': props.orientation === 'horizontal', + 'p-stepper-vertical': props.orientation === 'vertical', + 'p-readonly': props.linear + }), + nav: 'p-stepper-nav', + stepper: { + header: ({ isStepActive, isItemDisabled, index }) => { + return classNames('p-stepper-header', { + 'p-highlight': isStepActive(index), + 'p-disabled': isItemDisabled(index) + }); + }, + action: 'p-stepper-action', + number: 'p-stepper-number', + title: 'p-stepper-title', + separator: 'p-stepper-separator', + toggleableContent: 'p-stepper-toggleable-content', + content: ({ props }) => + classNames('p-stepper-content', { + 'p-toggleable-content': props.orientation === 'vertical' + }) + }, + panelContainer: 'p-stepper-panels', + panel: ({ props, isStepActive, index }) => + classNames('p-stepper-panel', { + 'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index) + }) +}; + +const styles = ` +@layer primereact { + .p-stepper .p-stepper-nav { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; + } + + .p-stepper-vertical .p-stepper-nav { + flex-direction: column; + } + + .p-stepper-header { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + + &:last-of-type { + flex: initial; + } + } + + .p-stepper-header .p-stepper-action { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + + &:focus-visible { + @include focused(); + } + } + + .p-stepper.p-stepper-readonly .p-stepper-header { + cursor: auto; + } + + .p-stepper-header.p-highlight .p-stepper-action { + cursor: default; + } + + .p-stepper-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-stepper-number { + position: relative; + display: flex; + align-items: center; + justify-content: center; + } + + .p-stepper-separator { + flex: 1 1 0; + } +} +`; + +export const StepperBase = ComponentBase.extend({ + defaultProps: { + __TYPE: 'Stepper', + activeStep: 0, + orientation: 'horizontal', + linear: false + }, + css: { + classes, + styles + } +}); diff --git a/components/lib/stepper/StepperContent.js b/components/lib/stepper/StepperContent.js new file mode 100644 index 0000000000..4e27353998 --- /dev/null +++ b/components/lib/stepper/StepperContent.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; + +export const StepperContent = React.memo( + React.forwardRef((props) => { + const mergeProps = useMergeProps(); + const { cx, ptm } = props; + + const rootProps = mergeProps( + { + id: props.id, + className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }), + role: 'tabpanel', + 'aria-labelledby': props.ariaLabelledby, + ...props.getStepPT(props.stepperpanel, 'root', props.index), + ...props.getStepPT(props.stepperpanel, 'content', props.index), + 'data-p-active': props.active + }, + ptm('stepperpanel') + ); + + const createContent = () => { + const ComponentToRender = props.template; + + return ( + props.onItemClick(event, props.index)} + prevCallback={(event) => props.prevCallback(event, props.index)} + nextCallback={(event) => props.nextCallback(event, props.index)} + /> + ); + }; + + return
    {props.template ? createContent() : props.stepperpanel}
    ; + }) +); + +StepperContent.displayName = 'StepperContent'; diff --git a/components/lib/stepper/StepperHeader.js b/components/lib/stepper/StepperHeader.js new file mode 100644 index 0000000000..c3ff1f7128 --- /dev/null +++ b/components/lib/stepper/StepperHeader.js @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; + +export const StepperHeader = React.memo( + React.forwardRef((props) => { + const mergeProps = useMergeProps(); + const { cx } = props; + + const buttonProps = mergeProps({ + id: props.id, + className: cx('stepper.action'), + role: 'tab', + tabIndex: props.disabled ? -1 : undefined, + 'aria-controls': props.ariaControls, + onClick: (e) => props.clickCallback(e, props.index) + }); + + return props.template ? ( + props.template() + ) : ( + + ); + }) +); + +StepperHeader.displayName = 'StepperHeader'; diff --git a/components/lib/stepper/StepperSeparator.js b/components/lib/stepper/StepperSeparator.js new file mode 100644 index 0000000000..0ebc1e4d01 --- /dev/null +++ b/components/lib/stepper/StepperSeparator.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useMergeProps } from '../hooks/Hooks'; + +export const StepperSeparator = React.memo( + React.forwardRef((props) => { + const mergeProps = useMergeProps(); + + const separatorProps = mergeProps({ + 'aria-hidden': true, + className: props.separatorClass, + ...props.getStepPT(props.stepperpanel, 'separator', props.index) + }); + + return props.template ? props.template() : ; + }) +); + +StepperSeparator.displayName = 'StepperSeparator'; diff --git a/components/lib/stepper/package.json b/components/lib/stepper/package.json new file mode 100644 index 0000000000..89e9b22850 --- /dev/null +++ b/components/lib/stepper/package.json @@ -0,0 +1,7 @@ +{ + "main": "./stepper.cjs.js", + "module": "./stepper.esm.js", + "unpkg": "./stepper.min.js", + "types": "./stepper.d.ts", + "sideEffects": false +} \ No newline at end of file diff --git a/components/lib/stepperpanel/StepperPanel.js b/components/lib/stepperpanel/StepperPanel.js new file mode 100644 index 0000000000..bf0a4905f3 --- /dev/null +++ b/components/lib/stepperpanel/StepperPanel.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; +import { useHandleStyle } from '../componentbase/Componentbase'; +import { StepperPanelBase } from './StepperPanelBase'; + +export const StepperPanel = React.memo( + React.forwardRef((inProps) => { + const context = React.useContext(PrimeReactContext); + const props = StepperPanelBase.getProps(inProps, context); + const { isUnstyled } = StepperPanelBase.setMetaData({ + props + }); + + useHandleStyle(StepperPanelBase.css.styles, isUnstyled, { name: 'StepperPanel' }); + + return <>{props.children}; + }) +); + +StepperPanel.displayName = 'StepperPanel'; diff --git a/components/lib/stepperpanel/StepperPanelBase.js b/components/lib/stepperpanel/StepperPanelBase.js new file mode 100644 index 0000000000..e32e34bd7d --- /dev/null +++ b/components/lib/stepperpanel/StepperPanelBase.js @@ -0,0 +1,14 @@ +import { ComponentBase } from '../componentbase/ComponentBase'; + +const styles = ''; + +export const StepperPanelBase = ComponentBase.extend({ + defaultProps: { + __TYPE: 'StepperPanel', + children: undefined, + header: null + }, + css: { + styles + } +}); diff --git a/components/lib/stepperpanel/package.json b/components/lib/stepperpanel/package.json new file mode 100644 index 0000000000..b821047691 --- /dev/null +++ b/components/lib/stepperpanel/package.json @@ -0,0 +1,7 @@ +{ + "main": "./stepperpanel.cjs.js", + "module": "./stepperpanel.esm.js", + "unpkg": "./stepperpanel.min.js", + "types": "./stepperpanel.d.ts", + "sideEffects": false +} \ No newline at end of file diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index d98ad44d15..db6a1475a9 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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 #93cbf9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(100, 181, 246, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #64b5f6; + } + .p-stepper .p-stepper-panels { + background: #1e1e1e; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #383838; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #64b5f6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index a1f1a7be09..d108de749a 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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 #a7d8a9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(129, 199, 132, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #81c784; + } + .p-stepper .p-stepper-panels { + background: #1e1e1e; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #383838; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #81c784; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 38d828d13b..17a8fa3f89 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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 #ffe284; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(255, 213, 79, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ffd54f; + } + .p-stepper .p-stepper-panels { + background: #1e1e1e; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #383838; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #ffd54f; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index dd5593a0f5..317d46829d 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -1367,6 +1367,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1396,6 +1405,26 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4385,6 +4414,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 #e3f3fe; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #8dd0ff; + 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 #e3f3fe; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #8dd0ff; + } + .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: #8dd0ff; + } + .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; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index e6efd22ece..ffb8f0cca9 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -1367,6 +1367,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #6c757d; } @@ -1396,6 +1405,26 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #495057; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #495057; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4385,6 +4414,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(38, 143, 255, 0.5); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #007bff; + 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(38, 143, 255, 0.5); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #007bff; + } + .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: #007bff; + } + .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; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index afe26358fd..3d0828f7f3 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: #605e5c; } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: #605e5c; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: #605e5c; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4303,6 +4332,103 @@ .p-splitter .p-splitter-gutter-resizing { background: #edebe9; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 2px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #323130; + border: 1px solid #f3f2f1; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #605e5c; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #edebe9; + color: #323130; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #323130; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #323130; + } + .p-stepper .p-stepper-separator { + background-color: #a19f9d; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #323130; + } + .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:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f3f2f1; border: 0 none; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 0298d73c00..e512a45287 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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(251, 191, 36, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(251, 191, 36, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #fbbf24; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + 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: #fbbf24; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6681,4 +6813,12 @@ background: #fbbf24; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #fbbf24; + color: #030712; + } } diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 5c702aadd3..69f3b71a5f 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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(96, 165, 250, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(96, 165, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #60a5fa; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + 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: #60a5fa; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6681,4 +6813,12 @@ background: #60a5fa; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #60a5fa; + color: #030712; + } } diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index fedc6542ed..c34e2a7d2a 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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(34, 211, 238, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(34, 211, 238, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #22d3ee; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + 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: #22d3ee; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6681,4 +6813,12 @@ background: #22d3ee; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #22d3ee; + color: #030712; + } } diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index c95c001e55..2b9344a727 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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(52, 211, 153, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(52, 211, 153, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #34d399; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + 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: #34d399; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6681,4 +6813,12 @@ background: #34d399; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #34d399; + color: #030712; + } } diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 73be1e31ec..0b41989e97 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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(129, 140, 248, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(129, 140, 248, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #818cf8; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + 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: #818cf8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6681,4 +6813,12 @@ background: #818cf8; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #818cf8; + color: #030712; + } } diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index e84779e668..23cbfa1f27 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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(244, 114, 182, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(244, 114, 182, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f472b6; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + 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: #f472b6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6681,4 +6813,12 @@ background: #f472b6; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #f472b6; + color: #030712; + } } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index 6ca9c67fbd..7376a3a2c3 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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(45, 212, 191, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(45, 212, 191, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #2dd4bf; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + 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: #2dd4bf; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6681,4 +6813,12 @@ background: #2dd4bf; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #2dd4bf; + color: #030712; + } } diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index d51e954e9e..e078a2d64b 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #6b7280; } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #fffbeb; + color: #b45309; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f59e0b; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .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: #f59e0b; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6675,4 +6807,8 @@ background: #f59e0b; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f59e0b; + color: #ffffff; + } } diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 9fe3ce2cb3..a8058cb1e8 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #6b7280; } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #eff6ff; + color: #1d4ed8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #3b82f6; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .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: #3b82f6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6675,4 +6807,8 @@ background: #3b82f6; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #3b82f6; + color: #ffffff; + } } diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 591d6a8b90..a1cef928f1 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #6b7280; } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ecfeff; + color: #0e7490; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #06b6d4; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .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: #06b6d4; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6675,4 +6807,8 @@ background: #06b6d4; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #06b6d4; + color: #ffffff; + } } diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 518893ee33..941a11a31a 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #6b7280; } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f0fdfa; + color: #047857; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #10b981; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .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: #10b981; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6675,4 +6807,8 @@ background: #10b981; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #10b981; + color: #ffffff; + } } diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index d20a5ac5bd..29c0c66490 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #6b7280; } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #eef2ff; + color: #4338ca; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #6366f1; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .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: #6366f1; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6675,4 +6807,8 @@ background: #6366f1; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #6366f1; + color: #ffffff; + } } diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index ca3494bf48..d24f8b64e2 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #6b7280; } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #fdf2f8; + color: #be185d; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ec4899; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .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: #ec4899; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6675,4 +6807,8 @@ background: #ec4899; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ec4899; + color: #ffffff; + } } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 25a5788c0e..d87f4ac6c2 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -1381,6 +1381,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #6b7280; } @@ -1410,6 +1419,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4368,6 +4397,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #0f766e; + color: #0f766e; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #14b8a6; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .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: #14b8a6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6675,4 +6807,8 @@ background: #14b8a6; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #14b8a6; + color: #ffffff; + } } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 850accb5ad..ab3d9f6165 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -1367,6 +1367,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.858rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.858rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.858rem; + } ::-webkit-input-placeholder { color: #9b9b9b; } @@ -1396,6 +1405,26 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4312,6 +4341,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .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: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #191919; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #dedede; + border: 1px solid #191919; + border-width: 2px; + background: #191919; + 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: #888888; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffe082; + color: #212529; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #dedede; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ffe082; + } + .p-stepper .p-stepper-panels { + background: #323232; + padding: 0.571rem 1rem; + color: #dedede; + } + .p-stepper .p-stepper-separator { + background-color: #191919; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #323232; + color: #dedede; + } + .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: #ffe082; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 450bced75d..4777fd66aa 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -1367,6 +1367,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.858rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.858rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.858rem; + } ::-webkit-input-placeholder { color: #9b9b9b; } @@ -1396,6 +1405,26 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4312,6 +4341,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .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: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #191919; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #dedede; + border: 1px solid #191919; + border-width: 2px; + background: #191919; + 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: #888888; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #81d4fa; + color: #212529; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #dedede; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #81d4fa; + } + .p-stepper .p-stepper-panels { + background: #323232; + padding: 0.571rem 1rem; + color: #dedede; + } + .p-stepper .p-stepper-separator { + background-color: #191919; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #323232; + color: #dedede; + } + .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: #81d4fa; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index a59449d13f..773889e7e0 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -1367,6 +1367,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.858rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.858rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.858rem; + } ::-webkit-input-placeholder { color: #9b9b9b; } @@ -1396,6 +1405,26 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4312,6 +4341,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .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: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #191919; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #dedede; + border: 1px solid #191919; + border-width: 2px; + background: #191919; + 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: #888888; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #c5e1a5; + color: #212529; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #dedede; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #c5e1a5; + } + .p-stepper .p-stepper-panels { + background: #323232; + padding: 0.571rem 1rem; + color: #dedede; + } + .p-stepper .p-stepper-separator { + background-color: #191919; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #323232; + color: #dedede; + } + .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: #c5e1a5; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 5309fcdc36..af0aa05d07 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -1367,6 +1367,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.858rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.858rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.858rem; + } ::-webkit-input-placeholder { color: #9b9b9b; } @@ -1396,6 +1405,26 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4312,6 +4341,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .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: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #191919; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #dedede; + border: 1px solid #191919; + border-width: 2px; + background: #191919; + 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: #888888; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f48fb1; + color: #212529; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #dedede; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f48fb1; + } + .p-stepper .p-stepper-panels { + background: #323232; + padding: 0.571rem 1rem; + color: #dedede; + } + .p-stepper .p-stepper-separator { + background-color: #191919; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #323232; + color: #dedede; + } + .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: #f48fb1; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 14631845ea..6b81bb0725 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -1384,6 +1384,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 3rem; + } + .p-icon-field-left.p-float-label > label { + left: 3rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 3rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1413,6 +1422,26 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 1rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 1rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4396,6 +4425,109 @@ .p-splitter .p-splitter-gutter-resizing { background: hsla(0deg, 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(159, 168, 218, 0.16); + color: #9FA8DA; + } + .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: #9FA8DA; + } + .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: #9FA8DA; + } + .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; @@ -7866,6 +7998,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: #9FA8DA; + 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-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 342009d383..8f35779ec6 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -1384,6 +1384,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 3rem; + } + .p-icon-field-left.p-float-label > label { + left: 3rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 3rem; + } ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } @@ -1413,6 +1422,26 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 1rem; + color: rgba(0, 0, 0, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 1rem; + color: rgba(0, 0, 0, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4396,6 +4425,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(63, 81, 181, 0.12); + color: #3F51B5; + } + .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: #3F51B5; + } + .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: #3F51B5; + } + .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; @@ -7866,6 +7998,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: #3F51B5; + 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-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index e6c72495ba..c882683309 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -1384,6 +1384,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1413,6 +1422,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4396,6 +4425,109 @@ .p-splitter .p-splitter-gutter-resizing { background: hsla(0deg, 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(159, 168, 218, 0.16); + color: #9FA8DA; + } + .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: #9FA8DA; + } + .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: #9FA8DA; + } + .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; @@ -7866,6 +7998,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: #9FA8DA; + 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-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index a0c2255b58..037a8352d0 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -1384,6 +1384,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } @@ -1413,6 +1422,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4396,6 +4425,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(63, 81, 181, 0.12); + color: #3F51B5; + } + .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: #3F51B5; + } + .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: #3F51B5; + } + .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; @@ -7866,6 +7998,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: #3F51B5; + 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/mira/theme.css b/public/themes/mira/theme.css index ca2ea5bfd2..ad3749439b 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -1386,6 +1386,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: #4c566a; } @@ -1415,6 +1424,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: #81a1c1; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: #81a1c1; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4350,6 +4379,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #c2c7d1; } + .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: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4c566a; + border: 1px solid #ffffff; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #81a1c1; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #d8dee9; + color: #2e3440; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4c566a; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #5e81ac; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #4c566a; + } + .p-stepper .p-stepper-separator { + background-color: #e5e9f0; + 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: #4c566a; + } + .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: #5e81ac; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #eceff4; border: 0 none; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 530a41d7ec..c425d8b6bd 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.5rem; + } ::-webkit-input-placeholder { color: #697077; } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.3125rem 0.3125rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.25rem; + color: #697077; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.25rem; + color: #697077; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,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.2s; + border-radius: 1px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #697077; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #44a1d9; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #343a3f; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #1174c0; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.5rem; + color: #343a3f; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #343a3f; + } + .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: #1174c0; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f2f4f8; border: 0 none; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 8373c92d5b..e4582fea5b 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.858rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.858rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.858rem; + } ::-webkit-input-placeholder { color: #666666; } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4303,6 +4332,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .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: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #333333; + border: 1px solid #dee2e6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #848484; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #e02365; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #333333; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.571rem 1rem; + color: #333333; + } + .p-stepper .p-stepper-separator { + background-color: #c8c8c8; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #333333; + } + .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: #007ad9; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 40ee63fa8d..975968a736 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -1367,6 +1367,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.858rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.858rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.858rem; + } ::-webkit-input-placeholder { color: #666666; } @@ -1396,6 +1405,26 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4312,6 +4341,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .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: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #333333; + border: 1px solid #dee2e6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #848484; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #007ad9; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #333333; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.571rem 1rem; + color: #333333; + } + .p-stepper .p-stepper-separator { + background-color: #c8c8c8; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #333333; + } + .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: #007ad9; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index d0332b1ef8..320d374f80 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -1367,6 +1367,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.858rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.858rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.858rem; + } ::-webkit-input-placeholder { color: #666666; } @@ -1396,6 +1405,26 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4312,6 +4341,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .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: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #333333; + border: 1px solid #dee2e6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #848484; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #007ad9; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #333333; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.571rem 1rem; + color: #333333; + } + .p-stepper .p-stepper-separator { + background-color: #c8c8c8; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #333333; + } + .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: #007ad9; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index d970d35779..3dbfd9408a 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 1.858rem; + } + .p-icon-field-left.p-float-label > label { + left: 1.858rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 1.858rem; + } ::-webkit-input-placeholder { color: #a6a6a6; } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.429rem; + color: #a6a6a6; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.429rem; + color: #a6a6a6; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4303,6 +4332,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dadada; } + .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: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 2px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a6a6a6; + border: 1px solid #c8c8c8; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #a6a6a6; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #afd3c8; + color: #385048; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #666666; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #7b95a3; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.571rem 1rem; + color: #666666; + } + .p-stepper .p-stepper-separator { + background-color: #c8c8c8; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #666666; + } + .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: #7b95a3; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index c83f32023c..3878434d4c 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: #6c757d; } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,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.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #495057; + border: 1px solid #e9ecef; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6c757d; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #e3f2fd; + color: #495057; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #495057; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #2196f3; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #495057; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #495057; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #2196f3; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 1fdae1f888..1daf616c28 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: #6c757d; } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,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.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #495057; + border: 1px solid #e9ecef; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6c757d; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #e8f5e9; + color: #495057; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #495057; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #4caf50; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #495057; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #495057; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #4caf50; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 8e1add16fe..549fd90aff 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: #6c757d; } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,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.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #495057; + border: 1px solid #e9ecef; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6c757d; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #fff3e0; + color: #495057; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #495057; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ffc107; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #495057; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #495057; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #ffc107; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 0ce1e1997a..1f9aa09e1c 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -1383,6 +1383,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1412,6 +1421,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4370,6 +4399,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #3e4053; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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 #e0d8fc; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; + } + .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 #e0d8fc; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #b19df7; + } + .p-stepper .p-stepper-panels { + background: #282936; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #3e4053; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #282936; + 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: #b19df7; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3e4053; border: 0 none; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 14bc204db0..96a48ad2b7 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -1383,6 +1383,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #708da9; } @@ -1412,6 +1421,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #708da9; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #708da9; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4370,6 +4399,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dfe7ef; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #043d75; + border: 1px solid #f6f9fc; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #708da9; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #e2dcfc; + color: #7254f3; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #043d75; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #7254f3; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #043d75; + } + .p-stepper .p-stepper-separator { + background-color: #dfe7ef; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #043d75; + } + .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: #7254f3; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #eff3f8; border: 0 none; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 44a143db4e..0a25d12f4b 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -1392,6 +1392,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #71717a; } @@ -1421,6 +1430,26 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #71717a; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #71717a; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4356,6 +4385,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .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: 0.375rem; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #3f3f46; + border: 1px solid #f4f4f5; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: none; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #71717a; + font-weight: 600; + transition: none; + } + .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 #6366f1; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #eef2ff; + color: #312e81; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #3f3f46; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #4f46e5; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #3f3f46; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + 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: #3f3f46; + } + .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: #4f46e5; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #fafafa; border: 0 none; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index f4c3ff9d4e..fdc5dae56b 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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 #93cbf9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(100, 181, 246, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #64b5f6; + } + .p-stepper .p-stepper-panels { + background: #1f2d40; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #304562; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2d40; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #64b5f6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index cf7afa5e48..8970d9a548 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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 #a7d8a9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(129, 199, 132, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #81c784; + } + .p-stepper .p-stepper-panels { + background: #1f2d40; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #304562; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2d40; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #81c784; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index fe6f001289..2bf1e624b9 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1364,6 +1364,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2rem; + } + .p-icon-field-left.p-float-label > label { + left: 2rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1393,6 +1402,26 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4328,6 +4357,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .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 #ffe284; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(255, 213, 79, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ffd54f; + } + .p-stepper .p-stepper-panels { + background: #1f2d40; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #304562; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2d40; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-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: #ffd54f; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index e57b2e62cf..38da8f13b1 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -1390,6 +1390,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } @@ -1419,6 +1428,26 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } .p-listbox-list-wrapper { overflow: auto; } @@ -4402,6 +4431,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #263238; } + .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.3s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .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 #9eade6; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; + } + .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 #9eade6; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #9eade6; + } + .p-stepper .p-stepper-panels { + background: #161d21; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #263238; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.3s; + } + .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: #161d21; + 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: #9eade6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #263238; border: 0 none; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index a6eb4d25db..85b374d3c4 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -1390,6 +1390,15 @@ .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + .p-icon-field-left > .p-inputtext { + padding-left: 2.5rem; + } + .p-icon-field-left.p-float-label > label { + left: 2.5rem; + } + .p-icon-field-right > .p-inputtext { + padding-right: 2.5rem; + } ::-webkit-input-placeholder { color: #898989; } @@ -1419,6 +1428,26 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.75rem; + color: #898989; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.75rem; + color: #898989; + } .p-listbox-list-wrapper { overflow: auto; } @@ -4402,6 +4431,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #ebebeb; } + .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.3s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #6c6c6c; + border: 2px solid #ebebeb; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #898989; + font-weight: 600; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .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.1rem #bbc7ee; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ced6f1; + color: #585858; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #6c6c6c; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #5472d4; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #6c6c6c; + } + .p-stepper .p-stepper-separator { + background-color: #ebebeb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.3s; + } + .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: #6c6c6c; + } + .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: #5472d4; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f5f5f5; border: 0 none; From a287cd8f724186bed6e56795836d42b49649aec3 Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 11:03:28 +0300 Subject: [PATCH 02/10] Update imperativeHandle --- components/lib/stepper/Stepper.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js index 224cca999c..d2f76f2ac5 100644 --- a/components/lib/stepper/Stepper.js +++ b/components/lib/stepper/Stepper.js @@ -10,7 +10,7 @@ import { StepperHeader } from './StepperHeader'; import { StepperSeparator } from './StepperSeparator'; export const Stepper = React.memo( - React.forwardRef((inProps) => { + React.forwardRef((inProps, ref) => { const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = StepperBase.getProps(inProps, context); @@ -157,6 +157,12 @@ export const Stepper = React.memo( }); }; + React.useImperativeHandle(ref, () => ({ + getElement: () => navRef.current, + nextCallback: (e) => nextCallback(e, activeStepState), + prevCallback: (e) => prevCallback(e, activeStepState) + })); + const createPanelContent = () => { return stepperPanels().map((step, index) => { if (!isStepActive(index)) { From 708bebb88a2418e4dbe8ba301dc29028a71bec34 Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 11:33:01 +0300 Subject: [PATCH 03/10] Update stepper docs --- components/doc/stepper/basicdoc.js | 167 ++++++++++++++++++++++++++ components/doc/stepper/importdoc.js | 18 +++ components/doc/stepper/lineardoc.js | 166 +++++++++++++++++++++++++ components/doc/stepper/verticaldoc.js | 166 +++++++++++++++++++++++++ components/layout/menu.json | 4 + pages/stepper/index.js | 81 +++++++++++++ 6 files changed, 602 insertions(+) create mode 100644 components/doc/stepper/basicdoc.js create mode 100644 components/doc/stepper/importdoc.js create mode 100644 components/doc/stepper/lineardoc.js create mode 100644 components/doc/stepper/verticaldoc.js create mode 100644 pages/stepper/index.js diff --git a/components/doc/stepper/basicdoc.js b/components/doc/stepper/basicdoc.js new file mode 100644 index 0000000000..7b25a5dd3e --- /dev/null +++ b/components/doc/stepper/basicdoc.js @@ -0,0 +1,167 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { Button } from '@/components/lib/button/Button'; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { useRef } from 'react'; + +export function BasicDoc(props) { + const stepperRef = useRef(null); + + const code = { + basic: ` + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     + `, + javascript: ` +import React, { useRef } from "react"; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { Button } from '@/components/lib/button/Button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + ) +} + `, + typescript: ` +import React, { useRef } from "react"; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { Button } from '@/components/lib/button/Button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + ) +} + ` + }; + + return ( + <> + +

    + Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead prevCallback and{' '} + nextCallback events should be bound to your custom UI elements. +

    +     +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + + + ); +} diff --git a/components/doc/stepper/importdoc.js b/components/doc/stepper/importdoc.js new file mode 100644 index 0000000000..0320f85e7b --- /dev/null +++ b/components/doc/stepper/importdoc.js @@ -0,0 +1,18 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { Stepper } from 'primereact/stepper'; +import { StepperPanel } from 'primereact/stepperpanel'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/stepper/lineardoc.js b/components/doc/stepper/lineardoc.js new file mode 100644 index 0000000000..a11df8fd63 --- /dev/null +++ b/components/doc/stepper/lineardoc.js @@ -0,0 +1,166 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { Button } from '@/components/lib/button/Button'; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { useRef } from 'react'; + +export function LinearDoc(props) { + const stepperRef = useRef(null); + + const code = { + basic: ` + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     + `, + javascript: ` +import React, { useRef } from "react"; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { Button } from '@/components/lib/button/Button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + ) +} + `, + typescript: ` +import React, { useRef } from "react"; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { Button } from '@/components/lib/button/Button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + ) +} + ` + }; + + return ( + <> + +

    + When linear property is present, current step must be completed in order to move to the next step. +

    +     +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + + + ); +} diff --git a/components/doc/stepper/verticaldoc.js b/components/doc/stepper/verticaldoc.js new file mode 100644 index 0000000000..683110ebe8 --- /dev/null +++ b/components/doc/stepper/verticaldoc.js @@ -0,0 +1,166 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { Button } from '@/components/lib/button/Button'; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { useRef } from 'react'; + +export function VerticalDoc(props) { + const stepperRef = useRef(null); + + const code = { + basic: ` + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     + `, + javascript: ` +import React, { useRef } from "react"; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { Button } from '@/components/lib/button/Button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + ) +} + `, + typescript: ` +import React, { useRef } from "react"; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { Button } from '@/components/lib/button/Button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + ) +} + ` + }; + + return ( + <> + +

    + Layout of the Stepper is configured with the orientation property that accepts horizontal and vertical as available options. +

    +     +
    + + +
    +
    Content I
    +
    +
    +
    +     + +
    +
    Content II
    +
    +
    +
    +     + +
    +
    Content III
    +
    +
    +
    +     +     +
    + + + ); +} diff --git a/components/layout/menu.json b/components/layout/menu.json index a645c67cad..b534557f0e 100644 --- a/components/layout/menu.json +++ b/components/layout/menu.json @@ -244,6 +244,10 @@ "name": "Splitter", "to": "/splitter" }, + { + "name": "Stepper", + "to": "/stepper" + }, { "name": "TabView", "to": "/tabview" diff --git a/pages/stepper/index.js b/pages/stepper/index.js new file mode 100644 index 0000000000..775f328a06 --- /dev/null +++ b/pages/stepper/index.js @@ -0,0 +1,81 @@ +import { DocComponent } from '@/components/doc/common/doccomponent'; +import { BasicDoc } from '@/components/doc/stepper/basicdoc'; +import { ImportDoc } from '@/components/doc/stepper/importdoc'; +import { LinearDoc } from '@/components/doc/stepper/lineardoc'; +import { VerticalDoc } from '@/components/doc/stepper/verticaldoc'; + +const StepperDemo = () => { + const docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDoc + }, + { + id: 'vertical', + label: 'Vertical', + component: VerticalDoc + }, + { + id: 'linear', + label: 'Linear', + component: LinearDoc + } + ]; + const ptDocs = [ + // { + // id: 'pt.wireframe', + // label: 'Wireframe', + // component: Wireframe + // }, + // { + // id: 'pt.inputtext.options', + // label: 'InputText PT Options', + // component: DocApiTable + // }, + // { + // id: 'pt.demo', + // label: 'Example', + // component: PTDoc + // } + ]; + + const themingDocs = [ + // { + // id: 'styled', + // label: 'Styled', + // component: StyledDoc + // }, + // { + // id: 'unstyled', + // label: 'Unstyled', + // description: 'Theming is implemented with the pass through properties in unstyled mode.', + // children: [ + // { + // id: 'tailwind', + // label: 'Tailwind', + // component: TailwindDoc + // } + // ] + // } + ]; + + return ( + + ); +}; + +export default StepperDemo; From 71dd6675ed355071f0e07cbb8295d0856cab8450 Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 11:36:24 +0300 Subject: [PATCH 04/10] Add accessibility doc --- components/doc/stepper/accessibilitydoc.js | 46 ++++++++++++++++++++++ pages/stepper/index.js | 6 +++ 2 files changed, 52 insertions(+) create mode 100644 components/doc/stepper/accessibilitydoc.js diff --git a/components/doc/stepper/accessibilitydoc.js b/components/doc/stepper/accessibilitydoc.js new file mode 100644 index 0000000000..70a18a6cf9 --- /dev/null +++ b/components/doc/stepper/accessibilitydoc.js @@ -0,0 +1,46 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export function AccessibilityDoc() { + return ( + +

    Screen Reader

    +

    + Stepper container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Stepper. Each stepper header has a + tab role and aria-controls to refer to the corresponding stepper content element. The content element of each stepper has tabpanel role, an id to match the aria-controls of the header and + aria-labelledby reference to the header as the accessible name. +

    + +

    Tab Header Keyboard Support

    +
    + + + + + + + + + + + + + + + + + + + + + +
    KeyFunction
    + tab + Moves focus through the header.
    + enter + Activates the focused stepper header.
    + space + Activates the focused stepper header.
    +
    +     + ); +} diff --git a/pages/stepper/index.js b/pages/stepper/index.js index 775f328a06..598552d042 100644 --- a/pages/stepper/index.js +++ b/pages/stepper/index.js @@ -1,4 +1,5 @@ import { DocComponent } from '@/components/doc/common/doccomponent'; +import { AccessibilityDoc } from '@/components/doc/stepper/accessibilitydoc'; import { BasicDoc } from '@/components/doc/stepper/basicdoc'; import { ImportDoc } from '@/components/doc/stepper/importdoc'; import { LinearDoc } from '@/components/doc/stepper/lineardoc'; @@ -25,6 +26,11 @@ const StepperDemo = () => { id: 'linear', label: 'Linear', component: LinearDoc + }, + { + id: 'accessibility', + label: 'Accessibility', + component: AccessibilityDoc } ]; const ptDocs = [ From aa1397f3ab9d0874be5b097fa750aa266c9749d3 Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 11:41:34 +0300 Subject: [PATCH 05/10] update theming docs --- components/doc/stepper/theming/styleddoc.js | 75 +++++++++++++++++++ components/doc/stepper/theming/tailwinddoc.js | 13 ++++ pages/stepper/index.js | 36 ++++----- 3 files changed, 107 insertions(+), 17 deletions(-) create mode 100644 components/doc/stepper/theming/styleddoc.js create mode 100644 components/doc/stepper/theming/tailwinddoc.js diff --git a/components/doc/stepper/theming/styleddoc.js b/components/doc/stepper/theming/styleddoc.js new file mode 100644 index 0000000000..fe2bd9429a --- /dev/null +++ b/components/doc/stepper/theming/styleddoc.js @@ -0,0 +1,75 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export function StyledDoc() { + return ( + <> + +

    List of class names used in the styled mode.

    +     +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameElement
    p-stepperContainer element.
    p-stepper-horizontalContainer element with horizontal layout.
    p-stepper-verticalContainer element with vertical layout.
    p-stepper-navContainer element of navigator.
    p-stepper-panelsContainer element of stepper panel elements.
    p-stepper-panelContainer element of stepper panel element.
    p-stepper-headerContainer element of stepper header.
    p-stepper-actionContainer element of stepper action.
    p-stepper-numberContainer element of stepper number.
    p-stepper-titleContainer element of stepper title.
    p-stepper-separatorContainer element of stepper separator.
    p-stepper-toggleable-contentContainer element of stepper toggleable content.
    p-stepper-contentContainer element of stepper content.
    +
    + + ); +} diff --git a/components/doc/stepper/theming/tailwinddoc.js b/components/doc/stepper/theming/tailwinddoc.js new file mode 100644 index 0000000000..cd547e8a63 --- /dev/null +++ b/components/doc/stepper/theming/tailwinddoc.js @@ -0,0 +1,13 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export function TailwindDoc() { + return ( + + Visit{' '} + + Tailwind Presets + {' '} + project for detailed documentation, examples and ready-to-use presets about how to style PrimeReact components with Tailwind CSS. + + ); +} diff --git a/pages/stepper/index.js b/pages/stepper/index.js index 598552d042..3c44824fb0 100644 --- a/pages/stepper/index.js +++ b/pages/stepper/index.js @@ -3,6 +3,8 @@ import { AccessibilityDoc } from '@/components/doc/stepper/accessibilitydoc'; import { BasicDoc } from '@/components/doc/stepper/basicdoc'; import { ImportDoc } from '@/components/doc/stepper/importdoc'; import { LinearDoc } from '@/components/doc/stepper/lineardoc'; +import { StyledDoc } from '@/components/doc/stepper/theming/styleddoc'; +import { TailwindDoc } from '@/components/doc/stepper/theming/tailwinddoc'; import { VerticalDoc } from '@/components/doc/stepper/verticaldoc'; const StepperDemo = () => { @@ -52,23 +54,23 @@ const StepperDemo = () => { ]; const themingDocs = [ - // { - // id: 'styled', - // label: 'Styled', - // component: StyledDoc - // }, - // { - // id: 'unstyled', - // label: 'Unstyled', - // description: 'Theming is implemented with the pass through properties in unstyled mode.', - // children: [ - // { - // id: 'tailwind', - // label: 'Tailwind', - // component: TailwindDoc - // } - // ] - // } + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } ]; return ( From d94f661c66f4a2e0002cc69587817e3484d1d425 Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 11:46:20 +0300 Subject: [PATCH 06/10] update pt doc --- components/doc/stepper/pt/wireframe.js | 12 ++++++++++ pages/stepper/index.js | 32 ++++++++++++++------------ 2 files changed, 29 insertions(+), 15 deletions(-) create mode 100644 components/doc/stepper/pt/wireframe.js diff --git a/components/doc/stepper/pt/wireframe.js b/components/doc/stepper/pt/wireframe.js new file mode 100644 index 0000000000..eb2d077f02 --- /dev/null +++ b/components/doc/stepper/pt/wireframe.js @@ -0,0 +1,12 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export const Wireframe = (props) => { + return ( + <> + +
    + pt_image +
    + + ); +}; diff --git a/pages/stepper/index.js b/pages/stepper/index.js index 3c44824fb0..0d802d18c6 100644 --- a/pages/stepper/index.js +++ b/pages/stepper/index.js @@ -1,8 +1,10 @@ +import DocApiTable from '@/components/doc/common/docapitable'; import { DocComponent } from '@/components/doc/common/doccomponent'; import { AccessibilityDoc } from '@/components/doc/stepper/accessibilitydoc'; import { BasicDoc } from '@/components/doc/stepper/basicdoc'; import { ImportDoc } from '@/components/doc/stepper/importdoc'; import { LinearDoc } from '@/components/doc/stepper/lineardoc'; +import { Wireframe } from '@/components/doc/stepper/pt/wireframe'; import { StyledDoc } from '@/components/doc/stepper/theming/styleddoc'; import { TailwindDoc } from '@/components/doc/stepper/theming/tailwinddoc'; import { VerticalDoc } from '@/components/doc/stepper/verticaldoc'; @@ -36,21 +38,21 @@ const StepperDemo = () => { } ]; const ptDocs = [ - // { - // id: 'pt.wireframe', - // label: 'Wireframe', - // component: Wireframe - // }, - // { - // id: 'pt.inputtext.options', - // label: 'InputText PT Options', - // component: DocApiTable - // }, - // { - // id: 'pt.demo', - // label: 'Example', - // component: PTDoc - // } + { + id: 'pt.wireframe', + label: 'Wireframe', + component: Wireframe + }, + { + id: 'pt.stepper.options', + label: 'Stepper PT Options', + component: DocApiTable + }, + { + id: 'pt.stepperpanel.options', + label: 'StepperPanel PT Options', + component: DocApiTable + } ]; const themingDocs = [ From 57ebe7f25d32e9f5aa2829dc2eb1d74a5035cce8 Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 13:28:48 +0300 Subject: [PATCH 07/10] Add stepper dts --- components/doc/common/apidoc/index.json | 439 ++++++++++++++++++ components/lib/stepper/stepper.d.ts | 137 ++++++ components/lib/stepperpanel/stepperpanel.d.ts | 158 +++++++ pages/stepper/index.js | 4 +- 4 files changed, 736 insertions(+), 2 deletions(-) create mode 100644 components/lib/stepper/stepper.d.ts create mode 100644 components/lib/stepperpanel/stepperpanel.d.ts diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index a482a9582a..247f0050f3 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -46342,6 +46342,445 @@ } } }, + "stepper": { + "description": "Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.\n\n[Live Demo](https://www.primereact.org/stepper/)", + "components": { + "Stepper": { + "description": "Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.", + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [] + }, + "props": { + "description": "Defines valid properties in Stepper component.", + "values": [ + { + "name": "activeStep", + "optional": true, + "readonly": false, + "type": "number", + "default": "0", + "description": "Active step index of stepper." + }, + { + "name": "linear", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Whether the steps are clickable or not." + }, + { + "name": "orientation", + "optional": true, + "readonly": false, + "type": "\"horizontal\" | \"vertical\"", + "default": "horizontal", + "description": "Orientation of the stepper." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "StepperPassThroughOptions", + "default": "", + "description": "Uses to pass attributes to DOM elements inside the component." + }, + { + "name": "ptOptions", + "optional": true, + "readonly": false, + "type": "PassThroughOptions", + "default": "", + "description": "Used to configure passthrough(pt) options of the component." + }, + { + "name": "unstyled", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, it removes component related styles in the core." + } + ] + }, + "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": "onChange", + "parameters": [ + { + "name": "event", + "optional": false, + "type": "StepperChangeEvent" + } + ], + "returnType": "void", + "description": "Callback to invoke when an active panel is changed." + } + ] + } + } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": { + "StepperPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "StepperProps" + }, + { + "name": "state", + "optional": false, + "readonly": false, + "type": "StepperState" + } + ], + "callbacks": [] + }, + "StepperPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "Stepper.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "StepperPassThroughOptionType", + "description": "Used to pass attributes to the root's DOM element." + }, + { + "name": "nav", + "optional": true, + "readonly": false, + "type": "StepperPassThroughOptionType", + "description": "Used to pass attributes to the nav's DOM element." + }, + { + "name": "panelContainer", + "optional": true, + "readonly": false, + "type": "StepperPassThroughOptionType", + "description": "Used to pass attributes to the panel container's DOM element." + }, + { + "name": "stepperpanel", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the end handler's DOM element." + }, + { + "name": "hooks", + "optional": true, + "readonly": false, + "type": "ComponentHooks", + "description": "Used to manage all lifecycle hooks" + } + ], + "callbacks": [] + }, + "StepperPassThroughAttributes": { + "description": "Custom passthrough attributes for each DOM elements", + "relatedProp": "", + "props": [ + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "callbacks": [] + }, + "StepperState": { + "description": "Defines current inline state in Stepper component.", + "relatedProp": "", + "props": [ + { + "name": "activeStep", + "optional": false, + "readonly": false, + "type": "number", + "description": "Current active index state." + } + ], + "callbacks": [] + }, + "StepperChangeEvent": { + "description": "Custom tab change event.", + "relatedProp": "onChange", + "props": [ + { + "name": "originalEvent", + "optional": false, + "readonly": false, + "type": "Event", + "description": "Browser event" + }, + { + "name": "index", + "optional": false, + "readonly": false, + "type": "number", + "description": "Index of the selected stepper panel" + } + ], + "callbacks": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "StepperPassThroughOptionType": { + "values": "StepperPassThroughAttributes | Function | string | null | undefined" + } + } + } + }, + "stepperpanel": { + "description": "StepperPanel is a helper component for Stepper component.\n\n[Live Demo](https://www.primereact.org/stepper/)", + "components": { + "StepperPanel": { + "description": "StepperPanel is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.", + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [] + }, + "props": { + "description": "Defines valid properties in StepperPanel component.", + "values": [ + { + "name": "header", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Orientation of tab headers." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptions", + "default": "", + "description": "Used to pass attributes to DOM elements inside the component." + }, + { + "name": "ptOptions", + "optional": true, + "readonly": false, + "type": "PassThroughOptions", + "default": "", + "description": "Used to configure passthrough(pt) options of the component." + } + ] + }, + "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": [] + } + } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": { + "StepperPanelPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "StepperPanelProps", + "description": "Defines valid properties." + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "StepperPanelContext", + "description": "Defines current options." + } + ], + "callbacks": [] + }, + "StepperPanelPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the root's DOM element." + }, + { + "name": "header", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the header's DOM element." + }, + { + "name": "action", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the action's DOM element." + }, + { + "name": "number", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the number's DOM element." + }, + { + "name": "title", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the title's DOM element." + }, + { + "name": "separator", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the separator's DOM element." + }, + { + "name": "content", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the content's DOM element." + }, + { + "name": "panel", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the panel's DOM element." + }, + { + "name": "toggleableContent", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughOptionType", + "description": "Used to pass attributes to the toggleable content's DOM element." + }, + { + "name": "transition", + "optional": true, + "readonly": false, + "type": "StepperPanelPassThroughTransitionType", + "description": "Used to control Vue Transition API." + }, + { + "name": "hooks", + "optional": true, + "readonly": false, + "type": "ComponentHooks", + "description": "Used to manage all lifecycle hooks" + } + ], + "callbacks": [] + }, + "StepperPanelPassThroughAttributes": { + "description": "Custom passthrough attributes for each DOM elements", + "relatedProp": "", + "props": [ + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "callbacks": [] + }, + "StepperPanelContext": { + "description": "Defines current options in StepperPanel component.", + "relatedProp": "", + "props": [ + { + "name": "index", + "optional": false, + "readonly": false, + "type": "number", + "description": "Current index of the stepperpanel." + }, + { + "name": "count", + "optional": false, + "readonly": false, + "type": "number", + "description": "Count of stepperpanels" + }, + { + "name": "first", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Whether the stepperpanel is first." + }, + { + "name": "last", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Whether the stepperpanel is last." + }, + { + "name": "active", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Whether the stepperpanel is active." + }, + { + "name": "highlighted", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Whether the stepperpanel is highlighted." + }, + { + "name": "disabled", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Whether the stepperpanel is disabled." + } + ], + "callbacks": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "StepperPanelPassThroughOptionType": { + "values": "StepperPanelPassThroughAttributes | Function | string | null | undefined" + }, + "StepperPanelPassThroughTransitionType": { + "values": "TransitionProps | Function | undefined" + } + } + } + }, "steps": { "description": "Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.\n\n[Live Demo](https://www.primereact.org/steps/)", "components": { diff --git a/components/lib/stepper/stepper.d.ts b/components/lib/stepper/stepper.d.ts new file mode 100644 index 0000000000..0f93500a0d --- /dev/null +++ b/components/lib/stepper/stepper.d.ts @@ -0,0 +1,137 @@ +/** + * + * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process. + * + * [Live Demo](https://www.primereact.org/stepper/) + * + * @module stepper + * + */ +import * as React from 'react'; +import { ComponentHooks } from '../componentbase/componentbase'; +import { PassThroughOptions } from '../passthrough'; +import { StepperPanelPassThroughOptionType } from '../stepperpanel/stepperpanel'; + +export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface StepperPassThroughMethodOptions { + props: StepperProps; + state: StepperState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link Stepper.pt} + */ +export interface StepperPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: StepperPassThroughOptionType; + /** + * Used to pass attributes to the nav's DOM element. + */ + nav?: StepperPassThroughOptionType; + /** + * Used to pass attributes to the panel container's DOM element. + */ + panelContainer?: StepperPassThroughOptionType; + /** + * Used to pass attributes to the end handler's DOM element. + */ + stepperpanel?: StepperPanelPassThroughOptionType; + /** + * Used to manage all lifecycle hooks + * @see {@link ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface StepperPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Stepper component. + */ +export interface StepperState { + /** + * Current active index state. + */ + activeStep: number; +} + +/** + * Custom tab change event. + * @see {@link StepperProps.onChange} + */ +export interface StepperChangeEvent { + /** + * Browser event + */ + originalEvent: Event; + /** + * Index of the selected stepper panel + */ + index: number; +} + +/** + * Defines valid properties in Stepper component. + * @group Properties + */ +export interface StepperProps { + /** + * Active step index of stepper. + * @defaultValue 0 + */ + activeStep?: number | undefined; + /** + * Orientation of the stepper. + * @defaultValue horizontal + */ + orientation?: 'horizontal' | 'vertical' | undefined; + /** + * Whether the steps are clickable or not. + * @defaultValue false + */ + linear?: boolean | undefined; + /** + * Callback to invoke when an active panel is changed. + */ + onChange?(event: StepperChangeEvent): void; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {StepperPassThroughOptions} + */ + pt?: StepperPassThroughOptions; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; +} + +/** + * **PrimeReact - Stepper** + * + * _Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process._ + * + * [Live Demo](https://www.primereact.org/stepper/) + * --- --- + * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png) + * + * @group Component + */ +export declare const Stepper: React.Component; diff --git a/components/lib/stepperpanel/stepperpanel.d.ts b/components/lib/stepperpanel/stepperpanel.d.ts new file mode 100644 index 0000000000..39fd8c1942 --- /dev/null +++ b/components/lib/stepperpanel/stepperpanel.d.ts @@ -0,0 +1,158 @@ +/** + * + * StepperPanel is a helper component for Stepper component. + * + * [Live Demo](https://www.primereact.org/stepper/) + * + * @module stepperpanel + * + */ +import * as React from 'react'; +import { TransitionProps } from 'react-transition-group/Transition'; +import { ComponentHooks } from '../componentbase/componentbase'; +import { PassThroughOptions } from '../passthrough'; + +export declare type StepperPanelPassThroughOptionType = StepperPanelPassThroughAttributes | ((options: StepperPanelPassThroughMethodOptions) => StepperPanelPassThroughAttributes | string) | string | null | undefined; + +export declare type StepperPanelPassThroughTransitionType = TransitionProps | ((options: StepperPanelPassThroughMethodOptions) => TransitionProps) | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface StepperPanelPassThroughMethodOptions { + /** + * Defines valid properties. + */ + props: StepperPanelProps; + /** + * Defines current options. + */ + context: StepperPanelContext; +} + +/** + * Custom passthrough(pt) options. + * @see {@link StepperPanelProps.pt} + */ +export interface StepperPanelPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: StepperPanelPassThroughOptionType; + /** + * Used to pass attributes to the header's DOM element. + */ + header?: StepperPanelPassThroughOptionType; + /** + * Used to pass attributes to the action's DOM element. + */ + action?: StepperPanelPassThroughOptionType; + /** + * Used to pass attributes to the number's DOM element. + */ + number?: StepperPanelPassThroughOptionType; + /** + * Used to pass attributes to the title's DOM element. + */ + title?: StepperPanelPassThroughOptionType; + /** + * Used to pass attributes to the separator's DOM element. + */ + separator?: StepperPanelPassThroughOptionType; + /** + * Used to pass attributes to the content's DOM element. + */ + content?: StepperPanelPassThroughOptionType; + /** + * Used to pass attributes to the panel's DOM element. + */ + panel?: StepperPanelPassThroughOptionType; + /** + * Used to pass attributes to the toggleable content's DOM element. + */ + toggleableContent?: StepperPanelPassThroughOptionType; + /** + * Used to control Vue Transition API. + */ + transition?: StepperPanelPassThroughTransitionType; + /** + * Used to manage all lifecycle hooks + * @see {@link ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface StepperPanelPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current options in StepperPanel component. + */ +export interface StepperPanelContext { + /** + * Current index of the stepperpanel. + */ + index: number; + /** + * Count of stepperpanels + */ + count: number; + /** + * Whether the stepperpanel is first. + */ + first: boolean; + /** + * Whether the stepperpanel is last. + */ + last: boolean; + /** + * Whether the stepperpanel is active. + */ + active: boolean; + /** + * Whether the stepperpanel is highlighted. + */ + highlighted: boolean; + /** + * Whether the stepperpanel is disabled. + */ + disabled: boolean; +} + +/** + * Defines valid properties in StepperPanel component. + * @group Properties + */ +export interface StepperPanelProps { + /** + * Orientation of tab headers. + */ + header?: string | undefined; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {StepperPanelPassThroughOptions} + */ + pt?: StepperPanelPassThroughOptions; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; +} + +/** + * **PrimeReact - StepperPanel** + * + * _StepperPanel is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process._ + * + * [Live Demo](https://www.primereact.org/stepper/) + * --- --- + * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png) + * + * @group Component + */ +export declare const StepperPanel: React.Component; diff --git a/pages/stepper/index.js b/pages/stepper/index.js index 0d802d18c6..85d50c9672 100644 --- a/pages/stepper/index.js +++ b/pages/stepper/index.js @@ -77,11 +77,11 @@ const StepperDemo = () => { return ( From 2dcd3ca5cd65776148a015471b8c994d68ae64e3 Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 15:14:45 +0300 Subject: [PATCH 08/10] update vertical doc --- components/doc/stepper/verticaldoc.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/doc/stepper/verticaldoc.js b/components/doc/stepper/verticaldoc.js index 683110ebe8..42d592dd5a 100644 --- a/components/doc/stepper/verticaldoc.js +++ b/components/doc/stepper/verticaldoc.js @@ -48,7 +48,7 @@ export default function BasicDemo() { const stepperRef = useRef(null); return ( -
    +
    @@ -90,7 +90,7 @@ export default function BasicDemo() { const stepperRef = useRef(null); return ( -
    +
    @@ -131,8 +131,8 @@ export default function BasicDemo() { Layout of the Stepper is configured with the orientation property that accepts horizontal and vertical as available options.

    -
    - +
    +
    Content I
    From 365e44d7f7b29ed9894c46aef3f1b8815afdbfa5 Mon Sep 17 00:00:00 2001 From: gucal Date: Thu, 28 Mar 2024 16:29:19 +0300 Subject: [PATCH 09/10] Add transition --- components/lib/stepper/Stepper.js | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js index d2f76f2ac5..46a0b96ddf 100644 --- a/components/lib/stepper/Stepper.js +++ b/components/lib/stepper/Stepper.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/Componentbase'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { useMergeProps } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { UniqueComponentId, classNames } from '../utils/Utils'; import { StepperBase } from './StepperBase'; import { StepperContent } from './StepperContent'; @@ -17,11 +17,18 @@ export const Stepper = React.memo( const { ptm, cx, isUnstyled, ptmo } = StepperBase.setMetaData({ props }); + const [idState, setIdState] = React.useState(props.id); const [activeStepState, setActiveStepState] = React.useState(props.activeStep); const navRef = React.useRef(); useHandleStyle(StepperBase.css.styles, isUnstyled, { name: 'stepper' }); + useMountEffect(() => { + if (!idState) { + setIdState(UniqueComponentId()); + } + }); + const getStepProp = (step, name) => { return step.props ? step.props[name] : undefined; }; @@ -45,16 +52,15 @@ export const Stepper = React.memo( const updateActiveStep = (event, index) => { setActiveStepState(index); - //component event propu olarak ekle props.onChangeStep && props.onChangeStep({ originalEvent: event, index }); }; const getStepHeaderActionId = (index) => { - return `${UniqueComponentId()}_${index}_header_action`; + return `${idState}_${index}_header_action`; }; const getStepContentId = (index) => { - return `${UniqueComponentId()}_${index}content`; + return `${idState}_${index}content`; }; const stepperPanels = () => { @@ -217,6 +223,7 @@ export const Stepper = React.memo( const createVertical = () => { return stepperPanels().map((step, index) => { + const contentRef = React.useRef(); const navProps = mergeProps( { ref: navRef, @@ -237,10 +244,15 @@ export const Stepper = React.memo( }); const transitionProps = mergeProps({ - ...getStepPT(step, 'transition', index) + classNames: cx('stepper.content'), + ...getStepPT(step, 'transition', index), + timeout: { enter: 1000, exit: 450 }, + in: isStepActive(index), + unmountOnExit: true }); const toggleableContentProps = mergeProps({ + ref: contentRef, className: cx('stepper.toggleableContent'), ...getStepPT(step, 'toggleableContent', index) }); @@ -263,8 +275,8 @@ export const Stepper = React.memo( cx={cx} />
    - -
    + +
    {index !== stepperPanels().length - 1 && ( Date: Thu, 28 Mar 2024 18:23:13 +0300 Subject: [PATCH 10/10] Code refactor and lint fixes --- components/lib/stepper/Stepper.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js index 46a0b96ddf..92213a0ded 100644 --- a/components/lib/stepper/Stepper.js +++ b/components/lib/stepper/Stepper.js @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/Componentbase'; import { CSSTransition } from '../csstransition/CSSTransition'; @@ -30,7 +30,7 @@ export const Stepper = React.memo( }); const getStepProp = (step, name) => { - return step.props ? step.props[name] : undefined; + return step?.props?.[name]; }; const getStepKey = (step, index) => { @@ -130,7 +130,7 @@ export const Stepper = React.memo( const panelProps = mergeProps( { className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index })), - 'aria-current': isStepActive(index) ? 'step' : undefined, + 'aria-current': isStepActive(index) && 'step', role: 'presentation', 'data-p-highlight': isStepActive(index), 'data-p-disabled': isItemDisabled(index), @@ -223,12 +223,13 @@ export const Stepper = React.memo( const createVertical = () => { return stepperPanels().map((step, index) => { - const contentRef = React.useRef(); + const contentRef = React.createRef(null); + const navProps = mergeProps( { ref: navRef, className: cx('panel', { props, index, isStepActive }), - 'aria-current': isStepActive(index) ? 'step' : undefined, + 'aria-current': isStepActive(index) && 'step', ...getStepPT(step, 'root', index), ...getStepPT(step, 'panel', index), 'data-p-highlight': isStepActive(index),