From 7f7f60a3c0fbcde4cc4ac5918b9e8c986d547a36 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 1 Apr 2024 16:07:59 +0300 Subject: [PATCH 01/49] Add filled prop autocomplete --- components/lib/autocomplete/AutoComplete.js | 4 +- .../lib/autocomplete/AutoCompleteBase.js | 12 +- components/lib/autocomplete/autocomplete.d.ts | 5 + public/themes/arya-blue/theme.css | 33 +- public/themes/arya-green/theme.css | 33 +- public/themes/arya-orange/theme.css | 33 +- public/themes/bootstrap4-dark-blue/theme.css | 33 +- public/themes/bootstrap4-light-blue/theme.css | 33 +- public/themes/fluent-light/theme.css | 33 +- public/themes/lara-dark-amber/theme.css | 33 +- public/themes/lara-dark-blue/theme.css | 33 +- public/themes/lara-dark-cyan/theme.css | 33 +- public/themes/lara-dark-green/theme.css | 33 +- public/themes/lara-dark-indigo/theme.css | 33 +- public/themes/lara-dark-pink/theme.css | 33 +- public/themes/lara-dark-teal/theme.css | 33 +- public/themes/lara-light-amber/theme.css | 33 +- public/themes/lara-light-blue/theme.css | 33 +- public/themes/lara-light-cyan/theme.css | 33 +- public/themes/lara-light-green/theme.css | 33 +- public/themes/lara-light-indigo/theme.css | 33 +- public/themes/lara-light-pink/theme.css | 33 +- public/themes/lara-light-teal/theme.css | 33 +- public/themes/luna-amber/theme.css | 33 +- public/themes/luna-blue/theme.css | 33 +- public/themes/luna-green/theme.css | 33 +- public/themes/luna-pink/theme.css | 33 +- public/themes/md-dark-indigo/theme.css | 323 +++++++++--------- public/themes/md-light-indigo/theme.css | 33 +- public/themes/mdc-dark-indigo/theme.css | 323 +++++++++--------- public/themes/mdc-light-indigo/theme.css | 33 +- public/themes/mira/theme.css | 33 +- public/themes/nano/theme.css | 33 +- public/themes/nova-accent/theme.css | 33 +- public/themes/nova-alt/theme.css | 33 +- public/themes/nova/theme.css | 33 +- public/themes/rhea/theme.css | 33 +- public/themes/saga-blue/theme.css | 33 +- public/themes/saga-green/theme.css | 33 +- public/themes/saga-orange/theme.css | 33 +- public/themes/soho-dark/theme.css | 83 ++--- public/themes/soho-light/theme.css | 33 +- public/themes/tailwind-light/theme.css | 35 +- public/themes/vela-blue/theme.css | 33 +- public/themes/vela-green/theme.css | 33 +- public/themes/vela-orange/theme.css | 33 +- public/themes/viva-dark/theme.css | 33 +- public/themes/viva-light/theme.css | 33 +- 48 files changed, 825 insertions(+), 1313 deletions(-) diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index dbb15b9708..6442e8fca3 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -546,7 +546,7 @@ export const AutoComplete = React.memo( aria-controls={ariaControls} aria-haspopup="listbox" aria-expanded={overlayVisibleState} - className={classNames(props.inputClassName, cx('input'))} + className={classNames(props.inputClassName, cx('input', { context }))} style={props.inputStyle} autoComplete="off" readOnly={props.readOnly} @@ -666,7 +666,7 @@ export const AutoComplete = React.memo( const containerProps = mergeProps( { ref: multiContainerRef, - className: cx('container'), + className: cx('container', { context }), onClick: allowMoreValues ? onMultiContainerClick : undefined, onContextMenu: props.onContextMenu, onMouseDown: props.onMouseDown, diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index 4235241dd4..e2aee24cbc 100644 --- a/components/lib/autocomplete/AutoCompleteBase.js +++ b/components/lib/autocomplete/AutoCompleteBase.js @@ -11,9 +11,10 @@ const classes = { 'p-invalid': props.invalid, 'p-inputwrapper-focus': focusedState }), - container: ({ props }) => + container: ({ props, context }) => classNames('p-autocomplete-multiple-container p-component p-inputtext', { - 'p-disabled': props.disabled + 'p-disabled': props.disabled, + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled' }), loadingIcon: 'p-autocomplete-loader', dropdownButton: 'p-autocomplete-dropdown', @@ -21,13 +22,13 @@ const classes = { token: 'p-autocomplete-token p-highlight', tokenLabel: 'p-autocomplete-token-label', inputToken: 'p-autocomplete-input-token', - input: ({ props }) => + input: ({ props, context }) => classNames('p-autocomplete-input', { - 'p-autocomplete-dd-input': props.dropdown + 'p-autocomplete-dd-input': props.dropdown, + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled' }), panel: ({ context }) => classNames('p-autocomplete-panel p-component', { - 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), listWrapper: 'p-autocomplete-items-wrapper', @@ -166,6 +167,7 @@ export const AutoCompleteBase = ComponentBase.extend({ inputId: null, inputRef: null, inputStyle: null, + variant: null, invalid: false, itemTemplate: null, loadingIcon: null, diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts index 8322f651e9..fad25a34c5 100755 --- a/components/lib/autocomplete/autocomplete.d.ts +++ b/components/lib/autocomplete/autocomplete.d.ts @@ -266,6 +266,11 @@ export interface AutoCompleteProps extends Omit label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 53038d0c89..c4ddf835e6 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #81c784; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index a2d4387a6a..62c4c7afe7 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ffd54f; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index eacbd16cfe..09fc9488fe 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #3f4b5b; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f19ea6; } + .p-inputtext.p-variant-filled { + background-color: #3f4b5b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1343,30 +1353,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.15s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f19ea6; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 5a0604409c..46ff654306 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ced4da; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #dc3545; } + .p-inputtext.p-variant-filled { + background-color: #efefef; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #efefef; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1343,30 +1353,9 @@ color: #6c757d; transition-duration: 0.15s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #dc3545; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #495057; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #495057; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 183eb1491d..7ac6f51783 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 2px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #323130; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #a4252c; } + .p-inputtext.p-variant-filled { + background-color: #faf9f8; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #faf9f8; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #faf9f8; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: #605e5c; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #a4252c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #605e5c; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #605e5c; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 3a96c27dad..2fecc48da1 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #fbbf24; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 9fc3607064..2378e2942d 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #60a5fa; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index a57900349b..45bcb4cc37 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #22d3ee; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 882d6424b2..9a5368c5dd 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #34d399; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 13cc223f94..8a2bc35e0a 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #818cf8; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 42f435e013..5a38f17821 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #f472b6; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index c7d71ddfee..90a7e2126b 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #2dd4bf; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 44d8bebbc3..77e0a944ad 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #f59e0b; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 71ab9ef24e..aeccacbaf2 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #3b82f6; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 552e27017b..b7bb2efa49 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #06b6d4; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index e929fbb116..4f34d65394 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #10b981; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index be84648378..c3a5e2920b 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #6366f1; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index ceec59fa62..01b86c9904 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ec4899; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 93f92db6c4..6d79a7222c 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #14b8a6; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 50de091e7c..ca624727a5 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ffe082; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #9b9b9b; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e57373; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #888888; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #888888; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 8640928be4..8195bd5de9 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #81d4fa; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #9b9b9b; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e57373; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #888888; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #888888; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 80509a8d03..84eee414d6 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #c5e1a5; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #9b9b9b; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e57373; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #888888; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #888888; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 119822249c..f162878a2a 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #f48fb1; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #9b9b9b; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e57373; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #888888; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #888888; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 5aa09c8992..e8c0a4735d 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,13 +733,13 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-checkbox { position: relative; @@ -771,11 +771,11 @@ height: 18px; } .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); border-radius: 4px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -794,7 +794,7 @@ height: 14px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -834,25 +834,25 @@ border-color: #f44435; } .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -872,13 +872,13 @@ align-items: center; } .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -938,12 +938,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: hsla(0deg, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -1058,7 +1058,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1073,13 +1073,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1121,7 +1121,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1163,7 +1163,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1185,14 +1185,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1288,7 +1288,7 @@ border-radius: 0.5rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; outline-color: transparent; @@ -1310,7 +1310,7 @@ transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1330,10 +1330,11 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: rgba(255, 255, 255, 0.6); @@ -1347,6 +1348,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: hsla(0deg, 0%, 100%, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1360,30 +1370,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44435; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 1rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 3rem; - } - .p-input-icon-left.p-float-label > label { - left: 3rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 1rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 3rem; - } .p-icon-field-left > .p-inputtext { padding-left: 3rem; } @@ -1406,13 +1395,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1472,14 +1461,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1532,15 +1521,15 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1572,7 +1561,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1668,7 +1657,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1683,13 +1672,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1701,7 +1690,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1730,7 +1719,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1794,7 +1783,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1876,11 +1865,11 @@ opacity: 0; z-index: 1; outline: 0 none; - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); border-radius: 50%; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1919,25 +1908,25 @@ border-color: #f44435; } .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { background: #121212; } .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; @@ -2029,7 +2018,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -2069,7 +2058,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -2095,7 +2084,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2125,7 +2114,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2176,13 +2165,13 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-togglebutton { position: relative; @@ -3575,7 +3564,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3583,12 +3572,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3597,7 +3586,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3661,12 +3650,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3679,10 +3668,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3846,12 +3835,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3980,11 +3969,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4523,7 +4512,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4533,7 +4522,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4595,10 +4584,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4606,7 +4595,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-stepper .p-stepper-nav { display: flex; @@ -5124,7 +5113,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5145,7 +5134,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -5287,7 +5276,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5327,7 +5316,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5388,7 +5377,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5438,7 +5427,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5525,7 +5514,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5560,7 +5549,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5640,7 +5629,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5668,7 +5657,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5697,7 +5686,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5763,7 +5752,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5813,7 +5802,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5974,7 +5963,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5998,7 +5987,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -6075,7 +6064,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -6116,7 +6105,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -6166,7 +6155,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -6272,7 +6261,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -6293,7 +6282,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6684,7 +6673,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6710,7 +6699,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -7012,8 +7001,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7023,13 +7012,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7258,7 +7247,7 @@ background-color: rgba(255, 255, 255, 0.16); } .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -7308,7 +7297,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -7335,8 +7324,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7346,13 +7335,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7413,8 +7402,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7424,13 +7413,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7472,7 +7461,7 @@ border-radius: 2px; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } @@ -7491,7 +7480,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); @@ -7500,7 +7489,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); @@ -7546,8 +7535,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7557,13 +7546,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7633,8 +7622,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7644,13 +7633,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7696,20 +7685,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7729,8 +7718,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7875,8 +7864,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7886,13 +7875,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -8043,7 +8032,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); @@ -8052,7 +8041,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); @@ -8309,8 +8298,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8320,13 +8309,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 22f3ff1824..52a4648d6d 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -1334,6 +1334,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: rgba(0, 0, 0, 0.87); @@ -1347,6 +1348,15 @@ .p-inputtext.p-invalid.p-component { border-color: #b00020; } + .p-inputtext.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1360,30 +1370,9 @@ color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #b00020; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 1rem; - color: rgba(0, 0, 0, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 3rem; - } - .p-input-icon-left.p-float-label > label { - left: 3rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 1rem; - color: rgba(0, 0, 0, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 3rem; - } .p-icon-field-left > .p-inputtext { padding-left: 3rem; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 1151d57f1d..23bbff37c9 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,13 +733,13 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-checkbox { position: relative; @@ -771,11 +771,11 @@ height: 18px; } .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); border-radius: 4px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -794,7 +794,7 @@ height: 14px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -834,25 +834,25 @@ border-color: #f44435; } .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -872,13 +872,13 @@ align-items: center; } .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -938,12 +938,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: hsla(0deg, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -1058,7 +1058,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1073,13 +1073,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1121,7 +1121,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1163,7 +1163,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1185,14 +1185,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 0.75rem 0.75rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1288,7 +1288,7 @@ border-radius: 0.5rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; outline-color: transparent; @@ -1310,7 +1310,7 @@ transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1330,10 +1330,11 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: rgba(255, 255, 255, 0.6); @@ -1347,6 +1348,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: hsla(0deg, 0%, 100%, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1360,30 +1370,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44435; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } @@ -1406,13 +1395,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1472,14 +1461,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1532,15 +1521,15 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1572,7 +1561,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1668,7 +1657,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1683,13 +1672,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1701,7 +1690,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1730,7 +1719,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1794,7 +1783,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1876,11 +1865,11 @@ opacity: 0; z-index: 1; outline: 0 none; - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); border-radius: 50%; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1919,25 +1908,25 @@ border-color: #f44435; } .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { background: #121212; } .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; @@ -2029,7 +2018,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -2069,7 +2058,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -2095,7 +2084,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2125,7 +2114,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2176,13 +2165,13 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-togglebutton { position: relative; @@ -3575,7 +3564,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3583,12 +3572,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3597,7 +3586,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3661,12 +3650,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3679,10 +3668,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3846,12 +3835,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3980,11 +3969,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4523,7 +4512,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4533,7 +4522,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4595,10 +4584,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4606,7 +4595,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-stepper .p-stepper-nav { display: flex; @@ -5124,7 +5113,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5145,7 +5134,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -5287,7 +5276,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5327,7 +5316,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5388,7 +5377,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5438,7 +5427,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5525,7 +5514,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5560,7 +5549,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5640,7 +5629,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5668,7 +5657,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5697,7 +5686,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5763,7 +5752,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5813,7 +5802,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5974,7 +5963,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5998,7 +5987,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -6075,7 +6064,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -6116,7 +6105,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -6166,7 +6155,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -6272,7 +6261,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -6293,7 +6282,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6684,7 +6673,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6710,7 +6699,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -7012,8 +7001,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7023,13 +7012,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7258,7 +7247,7 @@ background-color: rgba(255, 255, 255, 0.16); } .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -7308,7 +7297,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -7335,8 +7324,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7346,13 +7335,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7413,8 +7402,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7424,13 +7413,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7472,7 +7461,7 @@ border-radius: 2px; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } @@ -7491,7 +7480,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); @@ -7500,7 +7489,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); @@ -7546,8 +7535,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7557,13 +7546,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7633,8 +7622,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7644,13 +7633,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7696,20 +7685,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7729,8 +7718,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7875,8 +7864,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7886,13 +7875,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -8043,7 +8032,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); @@ -8052,7 +8041,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); @@ -8309,8 +8298,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8320,13 +8309,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 123a2154b9..6b7b81957d 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -1334,6 +1334,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: rgba(0, 0, 0, 0.87); @@ -1347,6 +1348,15 @@ .p-inputtext.p-invalid.p-component { border-color: #b00020; } + .p-inputtext.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1360,30 +1370,9 @@ color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #b00020; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(0, 0, 0, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(0, 0, 0, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index fccf607f80..2bbfbe65e2 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -1336,6 +1336,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #81a1c1; @@ -1349,6 +1350,15 @@ .p-inputtext.p-invalid.p-component { border-color: #bf616a; } + .p-inputtext.p-variant-filled { + background-color: #eceff4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #eceff4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1362,30 +1372,9 @@ color: #4c566a; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #bf616a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #81a1c1; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #81a1c1; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 382547b844..4502cf9e9c 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 1px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #1174c0; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #d8222f; } + .p-inputtext.p-variant-filled { + background-color: #f2f4f8; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f2f4f8; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.21875rem 0.21875rem; @@ -1340,30 +1350,9 @@ color: #697077; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #d8222f; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.25rem; - color: #697077; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.25rem; - color: #697077; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.5rem; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 5a1369b399..f6c6e52d95 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #212121; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1340,30 +1350,9 @@ color: #666666; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #a80000; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #848484; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #848484; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 30b6a74e7b..c151d91cf5 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #212121; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #666666; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #a80000; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #848484; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #848484; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index f9f75834c2..80e91fe404 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #212121; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #666666; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #a80000; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #848484; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #848484; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 5bbbc9303e..93d9cf71ba 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 2px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #a6a6a6; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e7a3a3; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1340,30 +1350,9 @@ color: #a6a6a6; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e7a3a3; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #a6a6a6; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #a6a6a6; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 92ed8e13b9..33f1c4091d 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #2196f3; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: #6c757d; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44336; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #6c757d; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #6c757d; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 942ae9fb7a..b75c571a2c 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #4caf50; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: #6c757d; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44336; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #6c757d; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #6c757d; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 6aa2c42475..713a6a36c7 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ffc107; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: #6c757d; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44336; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #6c757d; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #6c757d; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index b9742543d6..b2410ba81e 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -10,7 +10,7 @@ --text-color: rgba(255, 255, 255, 0.87); --text-color-secondary: rgba(255, 255, 255, 0.6); --primary-color: #b19df7; - --primary-color-text: hsl(234, 15%, 13%); + --primary-color-text: hsl(234deg, 15%, 13%); --surface-0: #1d1e27; --surface-50: #34343d; --surface-100: #4a4b52; @@ -785,7 +785,7 @@ } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 14px; } .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { @@ -804,7 +804,7 @@ } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 14px; } .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { @@ -821,7 +821,7 @@ .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; @@ -1333,6 +1333,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #b19df7; @@ -1346,6 +1347,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ff9a9a; } + .p-inputtext.p-variant-filled { + background-color: #3e4053; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #3e4053; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #3e4053; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1359,30 +1369,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ff9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } @@ -1892,7 +1881,7 @@ width: 12px; height: 12px; transition-duration: 0.2s; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #b19df7; @@ -1906,7 +1895,7 @@ background: #9378f4; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: 0 none; @@ -2009,20 +1998,20 @@ .p-selectbutton .p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, .p-selectbutton .p-button.p-highlight .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton.p-invalid > .p-button { border-color: #ff9a9a; @@ -2224,11 +2213,11 @@ .p-togglebutton.p-highlight .p-button { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton.p-highlight .p-button .p-button-icon-left, .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { background: rgba(255, 255, 255, 0.03); @@ -2242,11 +2231,11 @@ .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { outline: 0 none; @@ -2258,7 +2247,7 @@ border-color: #ff9a9a; } .p-button { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); background: #b19df7; border: 1px solid #b19df7; padding: 0.75rem 1.25rem; @@ -2268,12 +2257,12 @@ } .p-button:not(:disabled):hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); border-color: #a28af5; } .p-button:not(:disabled):active { background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); border-color: #9378f4; } .p-button.p-button-outlined { @@ -2355,7 +2344,7 @@ height: 1rem; line-height: 1rem; color: #b19df7; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-button.p-button-raised { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -4357,7 +4346,7 @@ border-radius: 50%; width: 1rem; height: 1rem; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-timeline .p-timeline-event-connector { background-color: #3e4053; @@ -4897,7 +4886,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); width: 2rem; height: 2rem; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4908,7 +4897,7 @@ } .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-overlaypanel:after { border: solid transparent; @@ -6722,7 +6711,7 @@ } .p-tag { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; @@ -6836,7 +6825,7 @@ background: #b19df7; } .p-progressbar .p-progressbar-label { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); line-height: 1.5rem; } .p-terminal { @@ -6852,7 +6841,7 @@ } .p-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -6893,7 +6882,7 @@ } .p-tag { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index e8d4ee3988..b3d7c3cd6c 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -1333,6 +1333,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #7254f3; @@ -1346,6 +1347,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ff6767; } + .p-inputtext.p-variant-filled { + background-color: #f6f9fc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f6f9fc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1359,30 +1369,9 @@ color: #708da9; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ff6767; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #708da9; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #708da9; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index f5859be644..08ab564816 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -1342,6 +1342,7 @@ transition: none; appearance: none; border-radius: 0.375rem; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #d4d4d8; @@ -1355,6 +1356,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f0a9a7; } + .p-inputtext.p-variant-filled { + background-color: #fafafa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #fafafa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1368,29 +1378,8 @@ color: #71717a; transition-duration: 0.2s; } - .p-float-label > label.p-error { - color: #e24c4c; - } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #71717a; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #71717a; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; + .p-float-label > .p-invalid + label { + color: #f0a9a7; } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index b4102aafee..7afd32d95c 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #64b5f6; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 703e012ca8..6fbf50ada4 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #81c784; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 0c801a0ab0..d362309a85 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ffd54f; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 860f9bdf42..aadbe4ea9f 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -1340,6 +1340,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #2d3e44; @@ -1353,6 +1354,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f78c79; } + .p-inputtext.p-variant-filled { + background-color: #263238; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #263238; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #263238; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1366,30 +1376,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.3s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f78c79; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 4931c66a7d..a9b9f46eb7 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -1340,6 +1340,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #cecece; @@ -1353,6 +1354,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f88c79; } + .p-inputtext.p-variant-filled { + background-color: #f2f2f2; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f2f2f2; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f2f2f2; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1366,30 +1376,9 @@ color: #898989; transition-duration: 0.3s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f88c79; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #898989; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #898989; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } From b46b55ffaec6767a196ee54fc0496c8eb8d66dbb Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 1 Apr 2024 16:12:31 +0300 Subject: [PATCH 02/49] Add filled doc --- components/doc/autocomplete/filleddoc.js | 71 ++++++++++++++++++++++++ pages/autocomplete/index.js | 6 ++ 2 files changed, 77 insertions(+) create mode 100644 components/doc/autocomplete/filleddoc.js diff --git a/components/doc/autocomplete/filleddoc.js b/components/doc/autocomplete/filleddoc.js new file mode 100644 index 0000000000..6de79a0a22 --- /dev/null +++ b/components/doc/autocomplete/filleddoc.js @@ -0,0 +1,71 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete'; +import { useState } from 'react'; + +export function FilledDoc(props) { + const [value, setValue] = useState(''); + const [items, setItems] = useState([]); + + const search = (event) => { + setItems([...Array(10).keys()].map((item) => event.query + '-' + item)); + }; + + const code = { + basic: ` + setValue(e.value)} variant="filled" /> + `, + javascript: ` +import React, { useState } from "react"; +import { AutoComplete } from "primereact/autocomplete"; + +export default function FilledDemo() { + const [value, setValue] = useState(''); + const [items, setItems] = useState([]); + + const search = (event) => { + setItems([...Array(10).keys()].map(item => event.query + '-' + item)); + } + + return ( +
+ setValue(e.value)} variant="filled" /> +
+ ) +} + `, + typescript: ` +import React, { useState } from "react"; +import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete"; + +export default function FilledDemo() { + const [value, setValue] = useState(''); + const [items, setItems] = useState([]); + + const search = (event: AutoCompleteCompleteEvent) => { + setItems([...Array(10).keys()].map(item => event.query + '-' + item)); + } + + return ( +
+ setValue(e.value)} variant="filled" /> +
+ ) +} + ` + }; + + return ( + <> + +

+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. +

+ +
+ setValue(e.value)} variant="filled" /> +
+ + + ); +} diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js index 008bdb6404..570aae98f8 100644 --- a/pages/autocomplete/index.js +++ b/pages/autocomplete/index.js @@ -2,6 +2,7 @@ import { AccessibilityDoc } from '@/components/doc/autocomplete/accessibilitydoc import { BasicDoc } from '@/components/doc/autocomplete/basicdoc'; import { DisabledDoc } from '@/components/doc/autocomplete/disableddoc'; import { DropdownDoc } from '@/components/doc/autocomplete/dropdowndoc'; +import { FilledDoc } from '@/components/doc/autocomplete/filleddoc'; import { FloatLabelDoc } from '@/components/doc/autocomplete/floatlabeldoc'; import { ForceSelectionDoc } from '@/components/doc/autocomplete/forceselectiondoc'; import { FormikDoc } from '@/components/doc/autocomplete/form/formikdoc'; @@ -72,6 +73,11 @@ const AutoCompleteDemo = () => { label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', From d70a74a0056827569de1cff52364d45a93daf869 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 1 Apr 2024 16:13:32 +0300 Subject: [PATCH 03/49] Remove Form doc --- components/doc/autocomplete/form/formikdoc.js | 234 ------------------ .../doc/autocomplete/form/hookformdoc.js | 197 --------------- pages/autocomplete/index.js | 19 -- 3 files changed, 450 deletions(-) delete mode 100644 components/doc/autocomplete/form/formikdoc.js delete mode 100644 components/doc/autocomplete/form/hookformdoc.js diff --git a/components/doc/autocomplete/form/formikdoc.js b/components/doc/autocomplete/form/formikdoc.js deleted file mode 100644 index c06936b3bc..0000000000 --- a/components/doc/autocomplete/form/formikdoc.js +++ /dev/null @@ -1,234 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete'; -import { Button } from '@/components/lib/button/Button'; -import { Toast } from '@/components/lib/toast/Toast'; -import { classNames } from '@/components/lib/utils/Utils'; -import { useFormik } from 'formik'; -import { useRef, useState } from 'react'; - -export function FormikDoc(props) { - const toast = useRef(null); - const [items, setItems] = useState([]); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item }); - }; - - const search = (event) => { - setItems([...Array(10).keys()].map((item) => event.query + '-' + item)); - }; - - const formik = useFormik({ - initialValues: { - item: '' - }, - validate: (data) => { - let errors = {}; - - if (!data.item) { - errors.item = 'Value is required.'; - } - - return errors; - }, - onSubmit: (data) => { - data.item && show(data); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - const code = { - basic: ` -
-
Value
- - { - formik.setFieldValue('item', e.value); - }} - /> - {getFormErrorMessage('item')} - - - - - ); - }; - - const header = renderHeader(); - - const formik = useFormik({ - initialValues: { - blog: '' - }, - validate: (data) => { - let errors = {}; - - if (!data.blog || data.blog === \`n\`) { - - errors.blog = 'Content is required.'; - } - - return errors; - }, - onSubmit: (data) => { - data.blog && show(); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - return ( -
-
- - { - formik.setFieldValue('blog', e.textValue); - }} - style={{ height: '320px' }} - /> -
- {getFormErrorMessage('blog')} -
- -
- ) -} - `, - typescript: ` -import React, { useRef } from "react"; -import { useFormik } from 'formik'; -import { Editor, EditorTextChangeEvent } from 'primereact/editor'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; - -export default function FormikDoc() { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Blog Submitted', detail: 'The blog is uploaded' }); - }; - - const renderHeader = () => { - return ( - - - - - - ); - }; - - const header = renderHeader(); - - const formik = useFormik({ - initialValues: { - blog: '' - }, - validate: (data) => { - let errors = {}; - - if (!data.blog || data.blog === \`n\`) { - - errors.blog = 'Content is required.'; - } - - return errors; - }, - onSubmit: (data) => { - data.blog && show(); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - return ( -
-
- - { - formik.setFieldValue('blog', e.textValue); - }} - style={{ height: '320px' }} - /> -
- {getFormErrorMessage('blog')} -
- -
- ) -} - ` - }; - - return ( - <> - -

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

- -
-
- - { - formik.setFieldValue('blog', e.textValue); - }} - style={{ height: '320px' }} - /> -
- {getFormErrorMessage('blog')} -
- -
- - - ); -} diff --git a/components/doc/editor/form/hookformdoc.js b/components/doc/editor/form/hookformdoc.js deleted file mode 100644 index 00cc88f458..0000000000 --- a/components/doc/editor/form/hookformdoc.js +++ /dev/null @@ -1,220 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { Editor } from '@/components/lib/editor/Editor'; -import { Toast } from '@/components/lib/toast/Toast'; -import { useRef } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -export function HookFormDoc(props) { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Submission Received', detail: 'The blog is uploaded' }); - }; - - const renderHeader = () => { - return ( - - - - - - ); - }; - - const header = renderHeader(); - - const defaultValues = { - blog: '' - }; - - const { - control, - formState: { errors }, - handleSubmit, - reset - } = useForm({ defaultValues }); - - const onSubmit = (data) => { - data.blog && show(); - - reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - return ( -
-
- - field.onChange(e.textValue)} style={{ height: '320px' }} />} - /> -
- {getFormErrorMessage('blog')} -
- -
- ) -} - `, - typescript: ` -import React, { useRef } from "react"; -import { useForm, Controller } from 'react-hook-form'; -import { Editor, EditorTextChangeEvent } from 'primereact/editor'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; - -export default function HookFormDoc() { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Submission Received', detail: 'The blog is uploaded' }); - }; - - const renderHeader = () => { - return ( - - - - - - ); - }; - - const header = renderHeader(); - - const defaultValues = { - blog: '' - }; - - const { - control, - formState: { errors }, - handleSubmit, - reset - } = useForm({ defaultValues }); - - const onSubmit = (data) => { - data.blog && show(); - - reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - return ( -
-
- - field.onChange(e.textValue)} style={{ height: '320px' }} />} - /> -
- {getFormErrorMessage('blog')} -
- -
- ) -} - ` - }; - - return ( - <> - -

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

- -
-
- - field.onChange(e.textValue)} style={{ height: '320px' }} />} - /> -
- {getFormErrorMessage('blog')} -
- -
- - - ); -} diff --git a/pages/editor/index.js b/pages/editor/index.js index 5f6f93bff0..056ef3c529 100644 --- a/pages/editor/index.js +++ b/pages/editor/index.js @@ -2,8 +2,6 @@ import DocApiTable from '@/components/doc/common/docapitable'; import { DocComponent } from '@/components/doc/common/doccomponent'; import { AccessibilityDoc } from '@/components/doc/editor/accessibilitydoc'; import { BasicDoc } from '@/components/doc/editor/basicdoc'; -import { FormikDoc } from '@/components/doc/editor/form/formikdoc'; -import { HookFormDoc } from '@/components/doc/editor/form/hookformdoc'; import { ImportDoc } from '@/components/doc/editor/importdoc'; import { PTDoc } from '@/components/doc/editor/pt/ptdoc'; import { Wireframe } from '@/components/doc/editor/pt/wireframe'; @@ -40,24 +38,6 @@ const EditorDemo = () => { label: 'Template', component: TemplateDoc }, - { - id: 'form', - label: 'Form', - description: 'Compatibility with popular React form libraries.', - children: [ - { - id: 'formik', - label: 'Formik', - component: FormikDoc - }, - { - id: 'hookform', - label: 'Hook Form', - component: HookFormDoc - } - ] - }, - { id: 'accessibility', label: 'Accessibility', From c86dd05d7046370a760f9629f351f5801ae21e49 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 3 Apr 2024 09:53:25 +0300 Subject: [PATCH 19/49] Update dropdown.d.ts --- components/lib/dropdown/dropdown.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index 9283c03ff3..2381f21566 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -272,6 +272,11 @@ export interface DropdownProps extends Omit Date: Wed, 3 Apr 2024 10:02:57 +0300 Subject: [PATCH 20/49] Update inputnumber --- components/lib/dropdown/DropdownBase.js | 1 + components/lib/inputnumber/InputNumber.js | 2 +- components/lib/inputnumber/InputNumberBase.js | 5 +++++ components/lib/inputnumber/inputnumber.d.ts | 5 +++++ 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index 5e81e0b5df..257e1f976a 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -188,6 +188,7 @@ export const DropdownBase = ComponentBase.extend({ inputId: null, inputRef: null, invalid: false, + variant: null, itemTemplate: null, loading: false, loadingIcon: null, diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index 60f595358a..53546e2872 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1099,7 +1099,7 @@ export const InputNumber = React.memo( }, [props.disabled]); const createInputElement = () => { - const className = classNames('p-inputnumber-input', props.inputClassName); + const className = classNames(props.inputClassName, cx('input', { context })); const valueToRender = formattedValue(props.value); return ( diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js index b452ee20b5..27a2e4b3f5 100644 --- a/components/lib/inputnumber/InputNumberBase.js +++ b/components/lib/inputnumber/InputNumberBase.js @@ -11,6 +11,10 @@ const classes = { 'p-inputnumber-buttons-vertical': vertical, 'p-invalid': props.invalid }), + input: ({ props, context }) => + classNames('p-inputnumber-input', { + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled' + }), buttonGroup: 'p-inputnumber-button-group', incrementButton: ({ props }) => classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', { @@ -153,6 +157,7 @@ export const InputNumberBase = ComponentBase.extend({ inputRef: null, inputStyle: null, invalid: false, + variant: null, locale: undefined, localeMatcher: undefined, max: null, diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts index 4d6bff60a4..0038e81c64 100644 --- a/components/lib/inputnumber/inputnumber.d.ts +++ b/components/lib/inputnumber/inputnumber.d.ts @@ -237,6 +237,11 @@ export interface InputNumberProps extends Omit Date: Wed, 3 Apr 2024 10:03:19 +0300 Subject: [PATCH 21/49] Update inputnumber docs --- components/doc/chips/floatlabeldoc.js | 4 +- components/doc/inputnumber/filleddoc.js | 56 ++++ components/doc/inputnumber/floatlabeldoc.js | 24 +- components/doc/inputnumber/form/formikdoc.js | 256 ------------------ .../doc/inputnumber/form/hookformdoc.js | 186 ------------- components/doc/inputnumber/invaliddoc.js | 10 +- pages/inputnumber/index.js | 26 +- 7 files changed, 85 insertions(+), 477 deletions(-) create mode 100644 components/doc/inputnumber/filleddoc.js delete mode 100644 components/doc/inputnumber/form/formikdoc.js delete mode 100644 components/doc/inputnumber/form/hookformdoc.js diff --git a/components/doc/chips/floatlabeldoc.js b/components/doc/chips/floatlabeldoc.js index 3c1946d977..d0e4d09f99 100644 --- a/components/doc/chips/floatlabeldoc.js +++ b/components/doc/chips/floatlabeldoc.js @@ -56,7 +56,9 @@ export default function FloatLabelDemo() { return ( <> - A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. +

+ A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. +

diff --git a/components/doc/inputnumber/filleddoc.js b/components/doc/inputnumber/filleddoc.js new file mode 100644 index 0000000000..26372e29c3 --- /dev/null +++ b/components/doc/inputnumber/filleddoc.js @@ -0,0 +1,56 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; +import { useState } from 'react'; + +export function FilledDoc(props) { + const [value, setValue] = useState(null); + + const code = { + basic: ` + setValue(e.value)} mode="decimal" minFractionDigits={2} /> +`, + javascript: ` +import React, { useState } from "react"; +import { InputNumber } from 'primereact/inputnumber'; + +export default function FilledDemo() { + const [value, setValue] = useState(151351); + + return ( +
+ setValue(e.value)} mode="decimal" minFractionDigits={2} /> +
+ ) +} + `, + typescript: ` +import React, { useState } from "react"; +import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber'; + +export default function FilledDemo() { + const [value, setValue] = useState(151351); + + return ( +
+ setValue(e.value)} mode="decimal" minFractionDigits={2} /> +
+ ) +} + ` + }; + + return ( + <> + +

+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. +

+ +
+ setValue(e.value)} minFractionDigits={2} /> +
+ + + ); +} diff --git a/components/doc/inputnumber/floatlabeldoc.js b/components/doc/inputnumber/floatlabeldoc.js index 254b49cbbc..7157103acd 100644 --- a/components/doc/inputnumber/floatlabeldoc.js +++ b/components/doc/inputnumber/floatlabeldoc.js @@ -1,6 +1,8 @@ import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel'; import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; +import Link from 'next/link'; import { useState } from 'react'; export function FloatLabelDoc(props) { @@ -8,24 +10,25 @@ export function FloatLabelDoc(props) { const code = { basic: ` - + setValue(e.value)} /> - + `, javascript: ` import React, { useState } from "react"; import { InputNumber } from 'primereact/inputnumber'; +import { FloatLabel } from 'primereact/floatlabel'; export default function FloatLabelDemo() { const [value, setValue] = useState(151351); return (
- + setValue(e.value)} /> - +
) } @@ -33,16 +36,17 @@ export default function FloatLabelDemo() { typescript: ` import React, { useState } from "react"; import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber'; +import { FloatLabel } from 'primereact/floatlabel'; export default function FloatLabelDemo() { const [value, setValue] = useState(151351); return (
- + setValue(e.value)} /> - +
) } @@ -52,13 +56,15 @@ export default function FloatLabelDemo() { return ( <> -

A floating label appears on top of the input field when focused.

+

+ A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. +

- + setValue(e.value)} /> - +
diff --git a/components/doc/inputnumber/form/formikdoc.js b/components/doc/inputnumber/form/formikdoc.js deleted file mode 100644 index d9dd801e39..0000000000 --- a/components/doc/inputnumber/form/formikdoc.js +++ /dev/null @@ -1,256 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; -import { Toast } from '@/components/lib/toast/Toast'; -import { classNames } from '@/components/lib/utils/Utils'; -import { useFormik } from 'formik'; -import { useRef } from 'react'; - -export function FormikDoc(props) { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.year }); - }; - - const formik = useFormik({ - initialValues: { - year: null - }, - validate: (data) => { - let errors = {}; - - if (!data.year) { - errors.year = 'Year is required.'; - } - - if (data.year < 1960) { - errors.year = 'Enter a valid year.'; - } - - if (data.year > 2050) { - errors.year = 'Enter a valid year.'; - } - - return errors; - }, - onSubmit: (data) => { - data && show(data); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - const code = { - basic: ` - - { - formik.setFieldValue('year', e.value); - }} - useGrouping={false} - inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })} - pt={{ - input: { - root: { autoComplete: 'off' } - } - }} -/> -{getFormErrorMessage('year')} -
- ) -} - `, - typescript: ` -import React, { useRef } from "react"; -import { useFormik } from 'formik'; -import { InputNumber } from 'primereact/inputnumber'; -import { Button } from 'primereact/button'; -import { classNames } from 'primereact/utils'; -import { Toast } from 'primereact/toast'; - -export default function FormikDoc() { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.year }); - }; - - const formik = useFormik({ - initialValues: { - year: null - }, - validate: (data) => { - let errors = {}; - - if (!data.year) { - errors.year = 'Year is required.'; - } - - if (data.year < 1960) { - errors.year = \`Enter a valid year.\`; - } - - if (data.year > 2050) { - errors.year = \`Enter a valid year.\`; - } - - return errors; - }, - onSubmit: (data) => { - data && show(data); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - return ( -
-
- - - { - formik.setFieldValue('year', e.value); - }} - useGrouping={false} - inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })} - pt={{ - input: { - root: { autoComplete: 'off' } - } - }} - /> - {getFormErrorMessage('year')} -
- ) -} - ` - }; - - return ( - <> - -

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

- -
-
- - - { - formik.setFieldValue('year', e.value); - }} - useGrouping={false} - inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })} - pt={{ - input: { - root: { autoComplete: 'off' } - } - }} - /> - {getFormErrorMessage('year')} -
- - - ); -} diff --git a/components/doc/inputnumber/form/hookformdoc.js b/components/doc/inputnumber/form/hookformdoc.js deleted file mode 100644 index 9e379e03fd..0000000000 --- a/components/doc/inputnumber/form/hookformdoc.js +++ /dev/null @@ -1,186 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; -import { Toast } from '@/components/lib/toast/Toast'; -import { classNames } from '@/components/lib/utils/Utils'; -import { useRef } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -export function HookFormDoc(props) { - const toast = useRef(null); - const defaultValues = { year: null }; - const form = useForm({ defaultValues }); - const errors = form.formState.errors; - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('year') }); - }; - - const onSubmit = (data) => { - data.year && show(); - form.reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - const code = { - basic: ` - - (value >= 1960 && value <= 2050) || 'Enter a valid year.' - }} - render={({ field, fieldState }) => ( - <> - - field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} /> - {getFormErrorMessage(field.name)} - - )} -/> -