From a28b7ed9b5007fee1bff4a17689976ded6acf498 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 15:50:11 +0300 Subject: [PATCH 01/20] Add Slider accessibility --- components/lib/slider/Slider.js | 37 +++++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js index f21d2a4959..2c9bf2f5b9 100644 --- a/components/lib/slider/Slider.js +++ b/components/lib/slider/Slider.js @@ -96,10 +96,39 @@ export const Slider = React.memo( handleIndex.current = index; const key = event.key; - if (key === 'ArrowRight' || key === 'ArrowUp') { - spin(event, 1); - } else if (key === 'ArrowLeft' || key === 'ArrowDown') { - spin(event, -1); + switch (key) { + case 'ArrowRight': + case 'ArrowUp': + spin(event, 1); + break; + + case 'ArrowLeft': + case 'ArrowDown': + spin(event, -1); + break; + + case 'PageUp': + spin(event, 10); + event.preventDefault(); + break; + + case 'PageDown': + spin(event, -10); + event.preventDefault(); + break; + + case 'Home': + spin(event, -value); + event.preventDefault(); + break; + + case 'End': + spin(event, props.max); + event.preventDefault(); + break; + + default: + break; } }; From e61bc04a4356198da661e35b531ac6cfb5846503 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 15:55:32 +0300 Subject: [PATCH 02/20] Add Knob accessibility --- components/lib/knob/Knob.js | 68 ++++++++++++++++++++++++++++++++- components/lib/knob/KnobBase.js | 1 + 2 files changed, 68 insertions(+), 1 deletion(-) diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js index 294d05315c..ede1487090 100644 --- a/components/lib/knob/Knob.js +++ b/components/lib/knob/Knob.js @@ -127,6 +127,20 @@ export const Knob = React.memo( } }; + const updateModelValue = (newValue) => { + let currentValue; + + if (newValue > props.max) currentValue = props.max; + else if (newValue < props.min) currentValue = props.min; + else currentValue = newValue; + + if (props.onChange) { + props.onChange({ + value: currentValue + }); + } + }; + const onClick = (event) => { if (!props.disabled && !props.readOnly) { updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY); @@ -154,6 +168,50 @@ export const Knob = React.memo( unbindWindowTouchEndListener(); }; + const onKeyDown = (event) => { + if (!props.disabled && !props.readonly) { + switch (event.code) { + case 'ArrowRight': + case 'ArrowUp': + event.preventDefault(); + updateModelValue(props.value + 1); + break; + + case 'ArrowLeft': + + case 'ArrowDown': { + event.preventDefault(); + updateModelValue(props.value - 1); + break; + } + + case 'Home': { + event.preventDefault(); + updateModelValue(props.min); + break; + } + + case 'End': { + event.preventDefault(); + updateModelValue(props.max); + break; + } + + case 'PageUp': { + event.preventDefault(); + updateModelValue(props.value + 10); + break; + } + + case 'PageDown': { + event.preventDefault(); + updateModelValue(props.value - 10); + break; + } + } + } + }; + React.useImperativeHandle(ref, () => ({ props, getElement: () => elementRef.current @@ -188,11 +246,19 @@ export const Knob = React.memo( viewBox: '0 0 100 100', width: props.size, height: props.size, + 'aria-valuemin': props.min, + 'aria-valuemax': props.max, + 'aria-valuenow': props.value, + 'aria-labelledby': props.ariaLabelledby, + 'aria-label': props.ariaLabel, + role: 'slider', + tabIndex: props.readonly || props.disabled ? -1 : props.tabIndex, onClick: (e) => onClick(e), onMouseDown: (e) => onMouseDown(e), onMouseUp: (e) => onMouseUp(e), onTouchStart: (e) => onTouchStart(e), - onTouchEnd: (e) => onTouchEnd(e) + onTouchEnd: (e) => onTouchEnd(e), + onKeyDown: (e) => onKeyDown(e) }, ptm('svg') ); diff --git a/components/lib/knob/KnobBase.js b/components/lib/knob/KnobBase.js index a898d1d771..b16dca1f6c 100644 --- a/components/lib/knob/KnobBase.js +++ b/components/lib/knob/KnobBase.js @@ -12,6 +12,7 @@ export const KnobBase = ComponentBase.extend({ disabled: false, readOnly: false, showValue: true, + tabIndex: 0, step: 1, min: 0, max: 100, From 47af437c41f5232efd705300e04ef4a6e1d8b185 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 15:59:17 +0300 Subject: [PATCH 03/20] Add Inputnumber accessibility --- components/lib/inputnumber/InputNumber.js | 41 ++++++++++++++--------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index cdbe60c02f..2bffe3d51d 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -348,21 +348,21 @@ export const InputNumber = React.memo( event.preventDefault(); } - switch (event.which) { + switch (event.code) { //up - case 38: + case 'ArrowUp': spin(event, 1); event.preventDefault(); break; //down - case 40: + case 'ArrowDown': spin(event, -1); event.preventDefault(); break; //left - case 37: + case 'ArrowLeft': if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) { event.preventDefault(); } @@ -370,7 +370,7 @@ export const InputNumber = React.memo( break; //right - case 39: + case 'ArrowRight': if (!isNumeralChar(inputValue.charAt(selectionStart))) { event.preventDefault(); } @@ -378,8 +378,8 @@ export const InputNumber = React.memo( break; //enter and tab - case 13: - case 9: + case 'Tab': + case 'Enter': newValueStr = validateValue(parseValue(inputValue)); inputRef.current.value = formatValue(newValueStr); inputRef.current.setAttribute('aria-valuenow', newValueStr); @@ -387,7 +387,7 @@ export const InputNumber = React.memo( break; //backspace - case 8: + case 'Backspace': event.preventDefault(); if (selectionStart === selectionEnd) { @@ -435,7 +435,7 @@ export const InputNumber = React.memo( break; // del - case 46: + case 'Delete': event.preventDefault(); if (selectionStart === selectionEnd) { @@ -476,13 +476,22 @@ export const InputNumber = React.memo( break; - // End - case 35: - // Home/Pos1 - case 36: - setTimeout(() => { - initCursor(); - }); + case 'End': + event.preventDefault(); + + if (!ObjectUtils.isEmpty(props.max)) { + updateModel(event, props.max); + } + + break; + case 'Home': + event.preventDefault(); + + if (!ObjectUtils.isEmpty(props.min)) { + updateModel(event, props.min); + } + + break; default: break; From 1f4f706dfaec900ff11c8279017916727720680e Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 16:00:23 +0300 Subject: [PATCH 04/20] Add ToggleButton accessibility --- components/lib/togglebutton/ToggleButton.js | 25 +++++++++++---------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js index abc680a496..32c89150b9 100644 --- a/components/lib/togglebutton/ToggleButton.js +++ b/components/lib/togglebutton/ToggleButton.js @@ -1,19 +1,18 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMergeProps, useMountEffect } from '../hooks/Hooks'; +import { useMountEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; import { ToggleButtonBase } from './ToggleButtonBase'; export const ToggleButton = React.memo( React.forwardRef((inProps, ref) => { - const [focusedState, setFocusedState] = React.useState(false); - const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ToggleButtonBase.getProps(inProps, context); const elementRef = React.useRef(null); + const [focusedState, setFocusedState] = React.useState(false); const { ptm, cx, isUnstyled } = ToggleButtonBase.setMetaData({ props, state: { @@ -48,6 +47,13 @@ export const ToggleButton = React.memo( } }; + const onKeyDown = (event) => { + if (event.keyCode === 32) { + toggle(event); + event.preventDefault(); + } + }; + const onFocus = (event) => { setFocusedState(true); props.onFocus && props.onFocus(event); @@ -58,13 +64,6 @@ export const ToggleButton = React.memo( props.onBlur && props.onBlur(event); }; - const onKeyDown = (event) => { - if (event.keyCode === 32) { - toggle(event); - event.preventDefault(); - } - }; - const createIcon = () => { if (hasIcon) { const iconProps = mergeProps( @@ -115,7 +114,9 @@ export const ToggleButton = React.memo( onKeyDown: onKeyDown, tabIndex: tabIndex, role: 'button', - 'aria-pressed': props.checked + 'aria-pressed': props.checked, + 'data-p-highlight': props.checked, + 'data-p-disabled': props.disabled }, ToggleButtonBase.getOtherProps(props), ptm('root') From 8acec9afacdb99a8f894d797098cf0a3285db20f Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 16:01:57 +0300 Subject: [PATCH 05/20] Add tristatecheckbox accessibility --- components/lib/tristatecheckbox/TriStateCheckbox.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index ad668bd615..daddaacb69 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -67,7 +67,7 @@ export const TriStateCheckbox = React.memo( }; const onKeyDown = (e) => { - if (e.keyCode === 32) { + if (e.code === 'Enter' || e.code === 'Space') { toggle(e); e.preventDefault(); } @@ -140,7 +140,8 @@ export const TriStateCheckbox = React.memo( { className: classNames(props.className, cx('root')), style: props.style, - onClick: onClick + onClick: onClick, + 'data-p-disabled': props.disabled }, TriStateCheckboxBase.getOtherProps(props), ptm('root') From 2abad331b39a948a725ea3b8aae1d70070186714 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 16:05:20 +0300 Subject: [PATCH 06/20] Add Checkbox accessibility --- components/lib/checkbox/Checkbox.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index bf0461f092..decf34543e 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -132,6 +132,8 @@ export const Checkbox = React.memo( className: classNames(props.className, cx('root', { checked, focusedState })), style: props.style, onClick: (e) => onClick(e), + 'data-p-highlight': checked, + 'data-p-disabled': props.disabled, onContextMenu: props.onContextMenu, onMouseDown: props.onMouseDown }, From 019a282a32345b23d1da039aa01987dc32bf85f0 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 16:18:38 +0300 Subject: [PATCH 07/20] Add InputSwitch accessibility --- components/lib/inputswitch/InputSwitch.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index 45ad2de977..4591689ec3 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -94,7 +94,9 @@ export const InputSwitch = React.memo( style: props.style, onClick, role: 'checkbox', - 'aria-checked': checked + 'aria-checked': checked, + 'data-p-highlight': checked, + 'data-p-disabled': props.disabled }, otherProps, ptm('root') From 354422498a8c9a7f063f700820de757cafa933e7 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 16:36:37 +0300 Subject: [PATCH 08/20] Add radiobutton accessibility --- components/lib/radiobutton/RadioButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index 79511b725a..a7e910bead 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -150,6 +150,7 @@ export const RadioButton = React.memo( onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, + checked: props.checked, disabled: props.disabled, required: props.required, tabIndex: props.tabIndex, From e9461bc0cdcbe8e8c2c0d6464dfd7878b1018882 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 17:11:28 +0300 Subject: [PATCH 09/20] Add SelectButton accessibility --- components/lib/selectbutton/SelectButton.js | 7 ++- .../lib/selectbutton/SelectButtonItem.js | 58 ++++++++++++++++--- 2 files changed, 56 insertions(+), 9 deletions(-) diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js index 1440ca31a5..d422ed3390 100644 --- a/components/lib/selectbutton/SelectButton.js +++ b/components/lib/selectbutton/SelectButton.js @@ -12,6 +12,8 @@ export const SelectButton = React.memo( const context = React.useContext(PrimeReactContext); const props = SelectButtonBase.getProps(inProps, context); + const [focusedIndex, setFocusedIndex] = React.useState(0); + const elementRef = React.useRef(null); const { ptm, cx } = SelectButtonBase.setMetaData({ @@ -94,7 +96,7 @@ export const SelectButton = React.memo( return props.options.map((option, index) => { const isDisabled = props.disabled || isOptionDisabled(option); const optionLabel = getOptionLabel(option); - const tabIndex = isDisabled ? null : 0; + const tabIndex = index === focusedIndex ? '0' : '-1'; const selected = isSelected(option); const key = optionLabel + '_' + index; @@ -105,13 +107,16 @@ export const SelectButton = React.memo( label={optionLabel} className={option.className} option={option} + setFocusedIndex={setFocusedIndex} onClick={onOptionClick} template={props.itemTemplate} selected={selected} tabIndex={tabIndex} + index={index} disabled={isDisabled} ptm={ptm} cx={cx} + elementRef={elementRef} /> ); }); diff --git a/components/lib/selectbutton/SelectButtonItem.js b/components/lib/selectbutton/SelectButtonItem.js index 51ef4ec890..b000337096 100644 --- a/components/lib/selectbutton/SelectButtonItem.js +++ b/components/lib/selectbutton/SelectButtonItem.js @@ -19,7 +19,9 @@ export const SelectButtonItem = React.memo((props) => { }); }; - const onClick = (event) => { + const onClick = (event, index) => { + props.setFocusedIndex(index); + if (props.onClick) { props.onClick({ originalEvent: event, @@ -36,15 +38,54 @@ export const SelectButtonItem = React.memo((props) => { setFocusedState(false); }; - const onKeyDown = (event) => { - const keyCode = event.which; + const onKeyDown = (event, index) => { + switch (event.code) { + case 'Space': { + onClick(event, index); + event.preventDefault(); + break; + } + + case 'ArrowDown': + + case 'ArrowRight': { + changeTabIndexes(event, 'next'); + event.preventDefault(); + break; + } + + case 'ArrowUp': + + case 'ArrowLeft': { + changeTabIndexes(event, 'prev'); + event.preventDefault(); + break; + } - if (keyCode === 32) { - onClick(event); - event.preventDefault(); + default: + break; } }; + const changeTabIndexes = (event, direction) => { + let firstTabableChild, index; + + for (let i = 0; i <= props.elementRef.current.children.length - 1; i++) { + if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') firstTabableChild = { elem: props.elementRef.current.children[i], index: i }; + } + + if (direction === 'prev') { + if (firstTabableChild.index === 0) index = props.elementRef.current.children.length - 1; + else index = firstTabableChild.index - 1; + } else { + if (firstTabableChild.index === props.elementRef.current.children.length - 1) index = 0; + else index = firstTabableChild.index + 1; + } + + props.setFocusedIndex(index); + props.elementRef.current.children[index].focus(); + }; + const createContent = () => { const labelProps = mergeProps( { @@ -64,9 +105,10 @@ export const SelectButtonItem = React.memo((props) => { role: 'button', 'aria-label': props.label, 'aria-pressed': props.selected, - onClick: onClick, - onKeyDown: onKeyDown, + onClick: (event) => onClick(event, props.index), + onKeyDown: (event) => onKeyDown(event, props.index), tabIndex: props.tabIndex, + 'aria-disabled': props.disabled, onFocus: onFocus, onBlur: onBlur }, From 53d49b687fce07e20578504e43c89ad75838bf59 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 17:57:43 +0300 Subject: [PATCH 10/20] Update rating accessibility --- components/lib/rating/Rating.js | 42 ++- components/lib/rating/RatingBase.js | 2 +- public/themes/arya-blue/theme.css | 32 +- public/themes/arya-green/theme.css | 32 +- public/themes/arya-orange/theme.css | 32 +- public/themes/arya-purple/theme.css | 32 +- public/themes/bootstrap4-dark-blue/theme.css | 32 +- .../themes/bootstrap4-dark-purple/theme.css | 32 +- public/themes/bootstrap4-light-blue/theme.css | 32 +- .../themes/bootstrap4-light-purple/theme.css | 32 +- public/themes/fluent-light/theme.css | 32 +- public/themes/lara-dark-amber/theme.css | 32 +- public/themes/lara-dark-blue/theme.css | 32 +- public/themes/lara-dark-cyan/theme.css | 32 +- public/themes/lara-dark-green/theme.css | 32 +- public/themes/lara-dark-indigo/theme.css | 32 +- public/themes/lara-dark-pink/theme.css | 32 +- public/themes/lara-dark-purple/theme.css | 32 +- public/themes/lara-dark-teal/theme.css | 32 +- public/themes/lara-light-amber/theme.css | 32 +- public/themes/lara-light-blue/theme.css | 32 +- public/themes/lara-light-cyan/theme.css | 32 +- public/themes/lara-light-green/theme.css | 32 +- public/themes/lara-light-indigo/theme.css | 32 +- public/themes/lara-light-pink/theme.css | 32 +- public/themes/lara-light-purple/theme.css | 32 +- public/themes/lara-light-teal/theme.css | 32 +- public/themes/luna-amber/theme.css | 32 +- public/themes/luna-blue/theme.css | 32 +- public/themes/luna-green/theme.css | 32 +- public/themes/luna-pink/theme.css | 32 +- public/themes/md-dark-deeppurple/theme.css | 296 ++++++++++-------- public/themes/md-dark-indigo/theme.css | 296 ++++++++++-------- public/themes/md-light-deeppurple/theme.css | 32 +- public/themes/md-light-indigo/theme.css | 32 +- public/themes/mdc-dark-deeppurple/theme.css | 296 ++++++++++-------- public/themes/mdc-dark-indigo/theme.css | 296 ++++++++++-------- public/themes/mdc-light-deeppurple/theme.css | 32 +- public/themes/mdc-light-indigo/theme.css | 32 +- public/themes/mira/theme.css | 32 +- public/themes/nano/theme.css | 32 +- public/themes/nova-accent/theme.css | 32 +- public/themes/nova-alt/theme.css | 32 +- public/themes/nova/theme.css | 32 +- public/themes/rhea/theme.css | 32 +- public/themes/saga-blue/theme.css | 32 +- public/themes/saga-green/theme.css | 32 +- public/themes/saga-orange/theme.css | 32 +- public/themes/saga-purple/theme.css | 32 +- public/themes/soho-dark/theme.css | 82 +++-- public/themes/soho-light/theme.css | 32 +- public/themes/tailwind-light/theme.css | 32 +- public/themes/vela-blue/theme.css | 32 +- public/themes/vela-green/theme.css | 32 +- public/themes/vela-orange/theme.css | 32 +- public/themes/vela-purple/theme.css | 32 +- public/themes/viva-dark/theme.css | 32 +- public/themes/viva-light/theme.css | 32 +- 58 files changed, 2048 insertions(+), 894 deletions(-) diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js index 97380e26a9..08c49b9a47 100644 --- a/components/lib/rating/Rating.js +++ b/components/lib/rating/Rating.js @@ -15,6 +15,9 @@ export const Rating = React.memo( const context = React.useContext(PrimeReactContext); const props = RatingBase.getProps(inProps, context); + const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1); + const [isFocusVisibleItem, setFocusVisibleItem] = React.useState(true); + const elementRef = React.useRef(null); const { ptm, cx, isUnstyled } = RatingBase.setMetaData({ @@ -53,6 +56,8 @@ export const Rating = React.memo( }); } + setFocusedOptionIndex(i); + event.preventDefault(); }; @@ -79,11 +84,37 @@ export const Rating = React.memo( }; const onStarKeyDown = (event, value) => { - if (event.key === 'Enter') { - rate(event, value); + switch (event.key) { + case 'Enter': + case 'Space': + rate(event, value); + event.preventDefault(); + break; + case 'ArrowLeft': + case 'ArrowUp': + event.preventDefault(); + rate(event, props.value - 1 < 1 ? props.stars : props.value - 1); + break; + + case 'ArrowRight': + case 'ArrowDown': + event.preventDefault(); + rate(event, props.value + 1 > props.stars ? 1 : props.value + 1); + break; + + default: + break; } }; + const onFocus = (event, value) => { + setFocusedOptionIndex(value); + }; + + const onBlur = (event) => { + setFocusedOptionIndex(-1); + }; + const onCancelKeyDown = (event) => { if (event.key === 'Enter') { clear(event); @@ -111,10 +142,13 @@ export const Rating = React.memo( const itemProps = mergeProps( { key: value, - className: cx('item', { active }), + className: cx('item', { active, focusedOptionIndex, isFocusVisibleItem, value }), + 'data-p-focused': value === focusedOptionIndex, tabIndex: tabIndex, onClick: (e) => rate(e, value), - onKeyDown: (e) => onStarKeyDown(e, value) + onKeyDown: (e) => onStarKeyDown(e, value), + onFocus: (e) => onFocus(e, value), + onBlur: (e) => onBlur(e) }, getPTOptions(props.value, 'item') ); diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js index 1e6820586e..26321d6d55 100644 --- a/components/lib/rating/RatingBase.js +++ b/components/lib/rating/RatingBase.js @@ -3,7 +3,7 @@ import { classNames } from '../utils/Utils'; const classes = { onIcon: 'p-rating-icon', - item: ({ active }) => classNames('p-rating-item', { 'p-rating-item-active': active }), + item: ({ active, value, isFocusVisibleItem, focusedOptionIndex }) => classNames('p-rating-item', { 'p-rating-item-active': active }, { 'p-focus': value === focusedOptionIndex && isFocusVisibleItem }), cancelIcon: 'p-rating-icon p-rating-cancel', cancelItem: 'p-rating-item p-rating-cancel-item', root: ({ props }) => diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 915ffc15b7..92755a6363 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #93cbf9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 41043c2f93..b34ce001fc 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #a7d8a9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index a93f549484..6e369305d2 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #ffe284; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index 4524f26c3f..df168d53fa 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #cf95d9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a241b2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 3594a56607..9b7f52c9c3 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } .p-datepicker { padding: 0; background: #2a323d; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #e3f3fe; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #3f4b5b; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index 33453f0894..73ca072706 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + border-color: #c298d8; + } .p-datepicker { padding: 0; background: #2a323d; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #f0e6f5; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #3f4b5b; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 1734755b41..79cf7865b3 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + border-color: #007bff; + } .p-datepicker { padding: 0; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dee2e6; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #efefef; color: #212529; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index 25d20c8b78..5eac14ec25 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); + border-color: #883cae; + } .p-datepicker { padding: 0; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dee2e6; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #efefef; color: #212529; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index e4c57408c6..7ac0cb4d6d 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } .p-datepicker { padding: 0.75rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: inset 0 0 0 1px #605e5c; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #323130; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #a4252c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #f3f2f1; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #323130; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 380daaf33d..02525e4428 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #fde68a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index b5e128d188..353e1dd05f 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #bfdbfe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 7e7ab819fb..a74d4c9786 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a5f3fc; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 78f7054a85..75935fbacf 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a7f3d0; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index fd504bc895..f02aa39790 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #c7d2fe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 27624fad01..105d397812 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #fbcfe8; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index e749f66253..68054af94e 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + border-color: #a78bfa; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ddd6fe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index 0d4eb344e6..aad089e96d 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #99f6e4; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 097e174cee..b7b3b67d22 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #fef08a; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #b45309; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index b7bea218d3..3169eeb734 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + border-color: #3b82f6; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #bfdbfe; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #1d4ed8; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 6aadf0196f..f72a17922e 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0e7490; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 6c75aed430..b46aa87fce 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #047857; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index ad78b81e32..c0bdc9ef6c 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + border-color: #6366f1; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #c7d2fe; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4338ca; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index cb52e7740d..3d5e2ce9b2 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #be185d; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index 0a04caedf6..4358cad38d 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ddd6fe; + border-color: #8b5cf6; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #ddd6fe; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #6d28d9; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index d35bafba94..9720f1389f 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #99f6e4; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0f766e; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index ed0dab4c1d..2e12844fca 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #ffe082; + } .p-datepicker { padding: 0.857rem; background: #323232; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 5738b01b6c..01bb3ccd77 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81d4fa; + } .p-datepicker { padding: 0.857rem; background: #323232; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 52e13fa24f..a69737f6f2 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #c5e1a5; + } .p-datepicker { padding: 0.857rem; background: #323232; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index e9369266dd..9cc7d3e212 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #f48fb1; + } .p-datepicker { padding: 0.857rem; background: #323232; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index cb8b34190f..7212b2f9ee 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/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: #CE93D8; @@ -435,11 +435,17 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } .p-datepicker { 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) { @@ -456,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; } @@ -540,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 { @@ -605,7 +611,7 @@ background: rgba(206, 147, 216, 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; @@ -643,13 +649,14 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } .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; } @@ -716,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; @@ -726,20 +733,20 @@ 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 { width: 18px; height: 18px; } .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; @@ -783,13 +790,13 @@ border-color: #f44435; } .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-checkbox-box.p-highlight { background: #CE93D8; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; @@ -848,7 +855,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; } @@ -898,7 +905,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; @@ -938,7 +945,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-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-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -953,13 +960,13 @@ background: transparent; } .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .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); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -967,14 +974,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, @@ -1035,7 +1042,7 @@ height: 1rem; } .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; } @@ -1057,7 +1064,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); @@ -1078,7 +1085,7 @@ 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; @@ -1145,13 +1152,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; @@ -1164,12 +1171,12 @@ .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; } .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; @@ -1217,7 +1224,7 @@ } .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.p-invalid { border-color: #f44435; @@ -1243,7 +1250,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: #CE93D8; @@ -1251,7 +1258,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; } @@ -1277,7 +1284,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; } @@ -1316,7 +1323,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; @@ -1370,7 +1377,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-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-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { outline: 0 none; @@ -1393,13 +1400,13 @@ background: transparent; } .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .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); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; @@ -1430,7 +1437,7 @@ height: 20px; } .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; @@ -1469,10 +1476,10 @@ outline: 0 none; } .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-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1480,9 +1487,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #CE93D8; 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); @@ -1495,7 +1519,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1550,7 +1574,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; } @@ -1590,7 +1614,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; } @@ -1616,7 +1640,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; } @@ -1646,7 +1670,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; @@ -1697,13 +1721,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.p-button { background: #2f2f2f; @@ -2885,10 +2909,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3018,7 +3038,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; @@ -3026,12 +3046,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; @@ -3040,7 +3060,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; @@ -3104,12 +3124,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: #CE93D8; @@ -3122,10 +3142,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 { @@ -3289,12 +3309,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: #CE93D8; @@ -3367,11 +3387,11 @@ color: #CE93D8; } .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 { @@ -3783,7 +3803,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; @@ -3793,7 +3813,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; @@ -3855,10 +3875,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; @@ -3866,7 +3886,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-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4281,7 +4301,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); @@ -4302,7 +4322,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 { @@ -4444,7 +4464,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); @@ -4484,7 +4504,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 { @@ -4545,7 +4565,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 { @@ -4595,7 +4615,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); @@ -4682,7 +4702,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); @@ -4717,7 +4737,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 { @@ -4797,7 +4817,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); @@ -4825,7 +4845,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 { @@ -4854,7 +4874,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 { @@ -4920,7 +4940,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 { @@ -4970,7 +4990,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); @@ -5131,7 +5151,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); @@ -5155,7 +5175,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) { @@ -5232,7 +5252,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); @@ -5273,7 +5293,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 { @@ -5323,7 +5343,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; @@ -5429,7 +5449,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); @@ -5450,7 +5470,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 { @@ -5841,7 +5861,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 { @@ -5867,7 +5887,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; @@ -6111,8 +6131,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6122,13 +6142,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, #CE93D8, #CE93D8), 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; } @@ -6326,7 +6346,7 @@ background-color: rgba(239, 154, 154, 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); @@ -6376,7 +6396,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; @@ -6403,8 +6423,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6414,13 +6434,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, #CE93D8, #CE93D8), 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; } @@ -6481,8 +6501,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6492,13 +6512,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, #CE93D8, #CE93D8), 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; } @@ -6537,15 +6557,15 @@ transition: box-shadow 0.2s; } .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; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6605,8 +6625,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6616,13 +6636,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, #CE93D8, #CE93D8), 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; } @@ -6692,8 +6712,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6703,13 +6723,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, #CE93D8, #CE93D8), 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; } @@ -6755,20 +6775,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; } @@ -6788,8 +6808,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6931,8 +6951,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6942,13 +6962,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, #CE93D8, #CE93D8), 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; } @@ -7096,10 +7116,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7341,8 +7361,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -7352,13 +7372,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, #CE93D8, #CE93D8), 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-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index b3ff001ec2..a35da4216c 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; @@ -435,11 +435,17 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } .p-datepicker { 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) { @@ -456,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; } @@ -540,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 { @@ -605,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; @@ -643,13 +649,14 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } .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; } @@ -716,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; @@ -726,20 +733,20 @@ 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 { width: 18px; height: 18px; } .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; @@ -783,13 +790,13 @@ border-color: #f44435; } .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-checkbox-box.p-highlight { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; @@ -848,7 +855,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; } @@ -898,7 +905,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; @@ -938,7 +945,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-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-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -953,13 +960,13 @@ background: transparent; } .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .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); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -967,14 +974,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, @@ -1035,7 +1042,7 @@ height: 1rem; } .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; } @@ -1057,7 +1064,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1078,7 +1085,7 @@ 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; @@ -1145,13 +1152,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; @@ -1164,12 +1171,12 @@ .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; } .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; @@ -1217,7 +1224,7 @@ } .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.p-invalid { border-color: #f44435; @@ -1243,7 +1250,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; @@ -1251,7 +1258,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; } @@ -1277,7 +1284,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; } @@ -1316,7 +1323,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; @@ -1370,7 +1377,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-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-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { outline: 0 none; @@ -1393,13 +1400,13 @@ background: transparent; } .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .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); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; @@ -1430,7 +1437,7 @@ height: 20px; } .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; @@ -1469,10 +1476,10 @@ outline: 0 none; } .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-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1480,9 +1487,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; 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); @@ -1495,7 +1519,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1550,7 +1574,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; } @@ -1590,7 +1614,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; } @@ -1616,7 +1640,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; } @@ -1646,7 +1670,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; @@ -1697,13 +1721,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.p-button { background: #2f2f2f; @@ -2885,10 +2909,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3018,7 +3038,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; @@ -3026,12 +3046,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; @@ -3040,7 +3060,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; @@ -3104,12 +3124,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; @@ -3122,10 +3142,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 { @@ -3289,12 +3309,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; @@ -3367,11 +3387,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 { @@ -3783,7 +3803,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; @@ -3793,7 +3813,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; @@ -3855,10 +3875,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; @@ -3866,7 +3886,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-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4281,7 +4301,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); @@ -4302,7 +4322,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 { @@ -4444,7 +4464,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); @@ -4484,7 +4504,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 { @@ -4545,7 +4565,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 { @@ -4595,7 +4615,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); @@ -4682,7 +4702,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); @@ -4717,7 +4737,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 { @@ -4797,7 +4817,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); @@ -4825,7 +4845,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 { @@ -4854,7 +4874,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 { @@ -4920,7 +4940,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 { @@ -4970,7 +4990,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); @@ -5131,7 +5151,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); @@ -5155,7 +5175,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) { @@ -5232,7 +5252,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); @@ -5273,7 +5293,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 { @@ -5323,7 +5343,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; @@ -5429,7 +5449,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); @@ -5450,7 +5470,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 { @@ -5841,7 +5861,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 { @@ -5867,7 +5887,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; @@ -6111,8 +6131,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; @@ -6122,13 +6142,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; } @@ -6326,7 +6346,7 @@ background-color: rgba(239, 154, 154, 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); @@ -6376,7 +6396,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; @@ -6403,8 +6423,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; @@ -6414,13 +6434,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; } @@ -6481,8 +6501,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; @@ -6492,13 +6512,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; } @@ -6537,15 +6557,15 @@ transition: box-shadow 0.2s; } .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; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6605,8 +6625,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; @@ -6616,13 +6636,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; } @@ -6692,8 +6712,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; @@ -6703,13 +6723,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; } @@ -6755,20 +6775,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; } @@ -6788,8 +6808,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; @@ -6931,8 +6951,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; @@ -6942,13 +6962,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; } @@ -7096,10 +7116,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7341,8 +7361,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; @@ -7352,13 +7372,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-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index d129df560f..fe0d03456a 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1480,9 +1487,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #673AB7; 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); @@ -1495,7 +1519,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2885,10 +2909,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 4442441fba..39723afe4c 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1480,9 +1487,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; 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); @@ -1495,7 +1519,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2885,10 +2909,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 37b91b8238..54cfaf7397 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/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: #CE93D8; @@ -435,11 +435,17 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } .p-datepicker { 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) { @@ -456,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; } @@ -540,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 { @@ -605,7 +611,7 @@ background: rgba(206, 147, 216, 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; @@ -643,13 +649,14 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } .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; } @@ -716,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; @@ -726,20 +733,20 @@ 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 { width: 18px; height: 18px; } .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; @@ -783,13 +790,13 @@ border-color: #f44435; } .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-checkbox-box.p-highlight { background: #CE93D8; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; @@ -848,7 +855,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; } @@ -898,7 +905,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; @@ -938,7 +945,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-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-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -953,13 +960,13 @@ background: transparent; } .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .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); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -967,14 +974,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, @@ -1035,7 +1042,7 @@ height: 1rem; } .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; } @@ -1057,7 +1064,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); @@ -1078,7 +1085,7 @@ 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; @@ -1145,13 +1152,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; @@ -1164,12 +1171,12 @@ .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; } .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; @@ -1217,7 +1224,7 @@ } .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.p-invalid { border-color: #f44435; @@ -1243,7 +1250,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: #CE93D8; @@ -1251,7 +1258,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; } @@ -1277,7 +1284,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; } @@ -1316,7 +1323,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; @@ -1370,7 +1377,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-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-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { outline: 0 none; @@ -1393,13 +1400,13 @@ background: transparent; } .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .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); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; @@ -1430,7 +1437,7 @@ height: 20px; } .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; @@ -1469,10 +1476,10 @@ outline: 0 none; } .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-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1480,9 +1487,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #CE93D8; 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); @@ -1495,7 +1519,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1550,7 +1574,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; } @@ -1590,7 +1614,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; } @@ -1616,7 +1640,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; } @@ -1646,7 +1670,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; @@ -1697,13 +1721,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.p-button { background: #2f2f2f; @@ -2885,10 +2909,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3018,7 +3038,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; @@ -3026,12 +3046,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; @@ -3040,7 +3060,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; @@ -3104,12 +3124,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: #CE93D8; @@ -3122,10 +3142,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 { @@ -3289,12 +3309,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: #CE93D8; @@ -3367,11 +3387,11 @@ color: #CE93D8; } .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 { @@ -3783,7 +3803,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; @@ -3793,7 +3813,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; @@ -3855,10 +3875,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; @@ -3866,7 +3886,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-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4281,7 +4301,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); @@ -4302,7 +4322,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 { @@ -4444,7 +4464,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); @@ -4484,7 +4504,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 { @@ -4545,7 +4565,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 { @@ -4595,7 +4615,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); @@ -4682,7 +4702,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); @@ -4717,7 +4737,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 { @@ -4797,7 +4817,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); @@ -4825,7 +4845,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 { @@ -4854,7 +4874,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 { @@ -4920,7 +4940,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 { @@ -4970,7 +4990,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); @@ -5131,7 +5151,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); @@ -5155,7 +5175,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) { @@ -5232,7 +5252,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); @@ -5273,7 +5293,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 { @@ -5323,7 +5343,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; @@ -5429,7 +5449,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); @@ -5450,7 +5470,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 { @@ -5841,7 +5861,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 { @@ -5867,7 +5887,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; @@ -6111,8 +6131,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6122,13 +6142,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, #CE93D8, #CE93D8), 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; } @@ -6326,7 +6346,7 @@ background-color: rgba(239, 154, 154, 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); @@ -6376,7 +6396,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; @@ -6403,8 +6423,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6414,13 +6434,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, #CE93D8, #CE93D8), 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; } @@ -6481,8 +6501,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6492,13 +6512,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, #CE93D8, #CE93D8), 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; } @@ -6537,15 +6557,15 @@ transition: box-shadow 0.2s; } .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; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6605,8 +6625,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6616,13 +6636,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, #CE93D8, #CE93D8), 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; } @@ -6692,8 +6712,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6703,13 +6723,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, #CE93D8, #CE93D8), 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; } @@ -6755,20 +6775,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; } @@ -6788,8 +6808,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6931,8 +6951,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -6942,13 +6962,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, #CE93D8, #CE93D8), 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; } @@ -7096,10 +7116,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7341,8 +7361,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, #CE93D8, #CE93D8), 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, #CE93D8, #CE93D8), 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; @@ -7352,13 +7372,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, #CE93D8, #CE93D8), 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-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index d578f6dba9..8b45e460c6 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; @@ -435,11 +435,17 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } .p-datepicker { 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) { @@ -456,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; } @@ -540,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 { @@ -605,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; @@ -643,13 +649,14 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } .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; } @@ -716,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; @@ -726,20 +733,20 @@ 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 { width: 18px; height: 18px; } .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; @@ -783,13 +790,13 @@ border-color: #f44435; } .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-checkbox-box.p-highlight { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; @@ -848,7 +855,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; } @@ -898,7 +905,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; @@ -938,7 +945,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-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-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -953,13 +960,13 @@ background: transparent; } .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .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); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -967,14 +974,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, @@ -1035,7 +1042,7 @@ height: 1rem; } .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; } @@ -1057,7 +1064,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1078,7 +1085,7 @@ 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; @@ -1145,13 +1152,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; @@ -1164,12 +1171,12 @@ .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; } .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; @@ -1217,7 +1224,7 @@ } .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.p-invalid { border-color: #f44435; @@ -1243,7 +1250,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; @@ -1251,7 +1258,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; } @@ -1277,7 +1284,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; } @@ -1316,7 +1323,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; @@ -1370,7 +1377,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-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-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { outline: 0 none; @@ -1393,13 +1400,13 @@ background: transparent; } .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .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); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; @@ -1430,7 +1437,7 @@ height: 20px; } .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; @@ -1469,10 +1476,10 @@ outline: 0 none; } .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-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1480,9 +1487,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; 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); @@ -1495,7 +1519,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1550,7 +1574,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; } @@ -1590,7 +1614,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; } @@ -1616,7 +1640,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; } @@ -1646,7 +1670,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; @@ -1697,13 +1721,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.p-button { background: #2f2f2f; @@ -2885,10 +2909,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3018,7 +3038,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; @@ -3026,12 +3046,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; @@ -3040,7 +3060,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; @@ -3104,12 +3124,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; @@ -3122,10 +3142,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 { @@ -3289,12 +3309,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; @@ -3367,11 +3387,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 { @@ -3783,7 +3803,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; @@ -3793,7 +3813,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; @@ -3855,10 +3875,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; @@ -3866,7 +3886,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-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4281,7 +4301,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); @@ -4302,7 +4322,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 { @@ -4444,7 +4464,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); @@ -4484,7 +4504,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 { @@ -4545,7 +4565,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 { @@ -4595,7 +4615,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); @@ -4682,7 +4702,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); @@ -4717,7 +4737,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 { @@ -4797,7 +4817,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); @@ -4825,7 +4845,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 { @@ -4854,7 +4874,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 { @@ -4920,7 +4940,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 { @@ -4970,7 +4990,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); @@ -5131,7 +5151,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); @@ -5155,7 +5175,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) { @@ -5232,7 +5252,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); @@ -5273,7 +5293,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 { @@ -5323,7 +5343,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; @@ -5429,7 +5449,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); @@ -5450,7 +5470,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 { @@ -5841,7 +5861,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 { @@ -5867,7 +5887,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; @@ -6111,8 +6131,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; @@ -6122,13 +6142,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; } @@ -6326,7 +6346,7 @@ background-color: rgba(239, 154, 154, 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); @@ -6376,7 +6396,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; @@ -6403,8 +6423,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; @@ -6414,13 +6434,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; } @@ -6481,8 +6501,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; @@ -6492,13 +6512,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; } @@ -6537,15 +6557,15 @@ transition: box-shadow 0.2s; } .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; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6605,8 +6625,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; @@ -6616,13 +6636,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; } @@ -6692,8 +6712,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; @@ -6703,13 +6723,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; } @@ -6755,20 +6775,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; } @@ -6788,8 +6808,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; @@ -6931,8 +6951,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; @@ -6942,13 +6962,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; } @@ -7096,10 +7116,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7341,8 +7361,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; @@ -7352,13 +7372,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-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 63c273fbd2..47e3df24a1 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1480,9 +1487,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #673AB7; 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); @@ -1495,7 +1519,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2885,10 +2909,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index d15d8205fe..7622a54963 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1480,9 +1487,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; 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); @@ -1495,7 +1519,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2885,10 +2909,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index 8d736e5421..dda9d72995 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -437,6 +437,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + border-color: #81a1c1; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -645,7 +651,8 @@ box-shadow: 0 0 0 0.2rem #c0d0e0; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1482,9 +1489,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #81a1c1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4c566a; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1497,7 +1521,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #bf616a; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -2887,10 +2911,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #ffffff; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #eceff4; color: #4c566a; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 1517f9e72e..7f7bfdad1d 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; + } .p-datepicker { padding: 0.25rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #90c9f5; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0e5d9a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #343a3f; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #dde1e6; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f2f4f8; color: #343a3f; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index f786f090d7..a6be3830b2 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0.25rem; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 3c1d618ba6..327239e417 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0.25rem; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index a1e3ed24a7..a9c8dbc1c8 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0.25rem; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index d8d22aa4ba..cc3727c05d 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7b95a3; + } .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0.25rem; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #617c8a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #666666; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f3b9b9; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dadada; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #666666; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index b49b941381..82dca8b87c 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196f3; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0b7ad1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index ccf5fe2fbd..2792deb3da 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4caf50; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3d8c40; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 5f67ffed8b..5199c5a384 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #ffc107; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #d29d00; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 1c70f39fa1..246eedc456 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9c27b0; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #df9eea; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7d1f8d; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 0cd7b48d62..8a08a3a806 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; @@ -434,6 +434,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; + } .p-datepicker { padding: 0.5rem; background: #282936; @@ -642,7 +648,8 @@ box-shadow: 0 0 0 1px #e0d8fc; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -748,7 +755,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 { @@ -762,7 +769,7 @@ .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { border-color: #b19df7; @@ -776,7 +783,7 @@ .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ff9a9a; @@ -1450,7 +1457,7 @@ width: 12px; height: 12px; transition-duration: 0.2s; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #b19df7; @@ -1459,7 +1466,7 @@ .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ff9a9a; @@ -1479,9 +1486,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9378f4; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1494,7 +1518,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -1530,20 +1554,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; @@ -1726,26 +1750,26 @@ .p-togglebutton.p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, .p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton.p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton.p-button.p-invalid > .p-button { 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; @@ -1755,12 +1779,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 { @@ -1842,7 +1866,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); @@ -2884,10 +2908,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #3e4053; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -3617,7 +3637,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; @@ -4054,7 +4074,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; @@ -4065,7 +4085,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; @@ -5879,7 +5899,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; @@ -5935,7 +5955,7 @@ background: #b19df7; } .p-progressbar .p-progressbar-label { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); line-height: 1.5rem; } .p-terminal { @@ -5951,7 +5971,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; @@ -5992,7 +6012,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 5d9cadbaa2..3027c088f5 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -434,6 +434,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; + } .p-datepicker { padding: 0.5rem; background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%); @@ -642,7 +648,8 @@ box-shadow: 0 0 0 1px #c7bbfa; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1479,9 +1486,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #5935f1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #043d75; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1494,7 +1518,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -2884,10 +2908,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #dfe7ef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #eff3f8; color: #708da9; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 4f7853cf4d..9b77aa95de 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -446,6 +446,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + border-color: #4f46e5; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -654,7 +660,8 @@ box-shadow: 0 0 0 1px #6366f1; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1491,9 +1498,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4f46e5; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3f3f46; transition: none; @@ -1506,7 +1530,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ef4444; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -2896,10 +2920,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #f4f4f5; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #fafafa; color: #3f3f46; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index c1cf3fe476..a2c6f98952 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; + } .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #93cbf9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index ad2e61e9db..50a085ab3e 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; + } .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #a7d8a9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 3d320120a0..56bcaa5fb1 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; + } .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #ffe284; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 077bb262b5..d037c35db7 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #cf95d9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a241b2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 3bd06c8314..e8a47cb750 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -441,6 +441,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; + } .p-datepicker { padding: 0.5rem; background: #161d21; @@ -649,7 +655,8 @@ box-shadow: 0 0 0 1px #9eade6; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1486,9 +1493,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7f93de; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1501,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -2891,10 +2915,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #263238; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #161d21; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index ab8a5d0153..3b65d267da 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -441,6 +441,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -649,7 +655,8 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1486,9 +1493,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3c5ece; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #6c6c6c; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1501,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -2891,10 +2915,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #f5f5f5; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #6c6c6c; From 0578eb06ef3484f171a774f800b3a7a8f5453fd8 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 5 Feb 2024 18:42:10 +0300 Subject: [PATCH 11/20] Add chips accessibility --- components/lib/chips/Chips.js | 111 ++++++++++++++++-- components/lib/chips/ChipsBase.js | 17 +-- public/themes/arya-blue/theme.css | 74 ++++++++---- public/themes/arya-green/theme.css | 74 ++++++++---- public/themes/arya-orange/theme.css | 74 ++++++++---- public/themes/bootstrap4-dark-blue/theme.css | 74 ++++++++---- public/themes/bootstrap4-light-blue/theme.css | 74 ++++++++---- public/themes/fluent-light/theme.css | 72 ++++++++---- public/themes/lara-dark-amber/theme.css | 74 ++++++++---- public/themes/lara-dark-blue/theme.css | 74 ++++++++---- public/themes/lara-dark-cyan/theme.css | 74 ++++++++---- public/themes/lara-dark-green/theme.css | 74 ++++++++---- public/themes/lara-dark-indigo/theme.css | 74 ++++++++---- public/themes/lara-dark-pink/theme.css | 74 ++++++++---- public/themes/lara-dark-teal/theme.css | 74 ++++++++---- public/themes/lara-light-amber/theme.css | 74 ++++++++---- public/themes/lara-light-blue/theme.css | 74 ++++++++---- public/themes/lara-light-cyan/theme.css | 74 ++++++++---- public/themes/lara-light-green/theme.css | 74 ++++++++---- public/themes/lara-light-indigo/theme.css | 74 ++++++++---- public/themes/lara-light-pink/theme.css | 74 ++++++++---- public/themes/lara-light-teal/theme.css | 74 ++++++++---- public/themes/luna-amber/theme.css | 74 ++++++++---- public/themes/luna-blue/theme.css | 74 ++++++++---- public/themes/luna-green/theme.css | 74 ++++++++---- public/themes/luna-pink/theme.css | 74 ++++++++---- public/themes/md-dark-indigo/theme.css | 74 ++++++++---- public/themes/md-light-indigo/theme.css | 74 ++++++++---- public/themes/mdc-dark-indigo/theme.css | 74 ++++++++---- public/themes/mdc-light-indigo/theme.css | 74 ++++++++---- public/themes/mira/theme.css | 74 ++++++++---- public/themes/nano/theme.css | 74 ++++++++---- public/themes/nova-accent/theme.css | 74 ++++++++---- public/themes/nova-alt/theme.css | 74 ++++++++---- public/themes/nova/theme.css | 74 ++++++++---- public/themes/rhea/theme.css | 74 ++++++++---- public/themes/saga-blue/theme.css | 74 ++++++++---- public/themes/saga-green/theme.css | 74 ++++++++---- public/themes/saga-orange/theme.css | 74 ++++++++---- public/themes/soho-dark/theme.css | 74 ++++++++---- public/themes/soho-light/theme.css | 74 ++++++++---- public/themes/tailwind-light/theme.css | 79 ++++++++----- public/themes/vela-blue/theme.css | 74 ++++++++---- public/themes/vela-green/theme.css | 74 ++++++++---- public/themes/vela-orange/theme.css | 74 ++++++++---- public/themes/viva-dark/theme.css | 74 ++++++++---- public/themes/viva-light/theme.css | 74 ++++++++---- 47 files changed, 2361 insertions(+), 1100 deletions(-) diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js index b853ca9468..8f91c3a996 100644 --- a/components/lib/chips/Chips.js +++ b/components/lib/chips/Chips.js @@ -14,6 +14,7 @@ export const Chips = React.memo( const context = React.useContext(PrimeReactContext); const props = ChipsBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); + const [focusedIndex, setFocusedIndex] = React.useState(null); const { ptm, cx, isUnstyled } = ChipsBase.setMetaData({ props, @@ -93,32 +94,94 @@ export const Chips = React.memo( DomHandler.focus(inputRef.current); }; + const onContainerKeyDown = (event) => { + switch (event.code) { + case 'ArrowLeft': + onArrowLeftKeyOn(event); + break; + + case 'ArrowRight': + onArrowRightKeyOn(event); + break; + + case 'Backspace': + onBackspaceKeyOn(event); + break; + + default: + break; + } + }; + + const onArrowLeftKeyOn = () => { + let focusIndex = focusedIndex; + + if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) { + focusIndex = focusIndex === null ? props.value.length - 1 : focusIndex - 1; + if (focusIndex < 0) focusIndex = 0; + } + + setFocusedIndex(focusIndex); + }; + + const onArrowRightKeyOn = () => { + let focusIndex = focusedIndex; + + if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) { + if (focusIndex === props.value.length - 1) { + focusIndex = null; + inputRef.current.focus(); + } else { + focusIndex++; + } + } + + setFocusedIndex(focusIndex); + }; + + const onBackspaceKeyOn = (event) => { + if (focusedIndex !== null) { + removeItem(event, focusedIndex); + } + }; + const onKeyDown = (event) => { const inputValue = event.target.value; const values = props.value || []; props.onKeyDown && props.onKeyDown(event); - // do not continue if the user defined keydown wants to prevent if (event.defaultPrevented) { return; } - switch (event.key) { + switch (event.code) { case 'Backspace': - if (inputRef.current.value.length === 0 && values.length > 0) { + if (inputValue.length === 0 && values.length > 0) { removeItem(event, values.length - 1); } break; case 'Enter': + case 'NumpadEnter': if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) { addItem(event, inputValue, true); } break; + case 'ArrowLeft': + if (inputValue.length === 0 && values && values.length > 0) { + DomHandler.focus(listRef.current); + } + + break; + + case 'ArrowRight': + event.stopPropagation(); + break; + default: if (props.keyfilter) { KeyFilter.onKeyPress(event, props.keyfilter); @@ -181,8 +244,18 @@ export const Chips = React.memo( } }; + const onContainerFocus = (event) => { + setFocusedState(true); + }; + + const onContainerBlur = () => { + setFocusedIndex(-1); + setFocusedState(false); + }; + const onFocus = (event) => { setFocusedState(true); + setFocusedIndex(null); props.onFocus && props.onFocus(event); }; @@ -228,6 +301,10 @@ export const Chips = React.memo( } }); + const focusedOptionId = () => { + return focusedIndex !== null ? `${props.inputId}_chips_item_${focusedIndex}` : null; + }; + const createRemoveIcon = (value, index) => { const iconProps = mergeProps( { @@ -259,9 +336,16 @@ export const Chips = React.memo( const icon = createRemoveIcon(value, index); const tokenProps = mergeProps( { - key: index, - className: cx('token'), - 'data-p-highlight': true + key: `${index}_${value}`, + id: props.inputId + '_chips_item_' + index, + role: 'option', + 'aria-label': value, + className: cx('token', { focusedIndex, index }), + 'aria-selected': true, + 'aria-setsize': props.value.length, + 'aria-posinset': index + 1, + 'data-p-highlight': true, + 'data-p-focused': focusedIndex === index }, ptm('token') ); @@ -317,10 +401,19 @@ export const Chips = React.memo( const containerProps = mergeProps( { ref: listRef, - className: cx('container', { focusedState }), + className: cx('container', { isFilled }), onClick: (e) => onWrapperClick(e), + onKeyDown: (e) => onContainerKeyDown(e), + tabIndex: -1, + role: 'listbox', + 'aria-orientation': 'horizontal', + 'aria-labelledby': props.ariaLabelledby, + 'aria-label': props.ariaLabel, + 'aria-activedescendant': focusedState ? focusedOptionId() : undefined, 'data-p-disabled': props.disabled, - 'data-p-focus': focusedState + 'data-p-focus': focusedState, + onFocus: onContainerFocus, + onBlur: onContainerBlur }, ptm('container') ); @@ -341,7 +434,7 @@ export const Chips = React.memo( { id: props.id, ref: elementRef, - className: classNames(props.className, cx('root', { isFilled, focusedState })), + className: classNames(props.className, cx('root', { isFilled, focusedState, disabled: props.disabled })), style: props.style }, ptm('root') diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js index 215cd33868..0da86e425e 100644 --- a/components/lib/chips/ChipsBase.js +++ b/components/lib/chips/ChipsBase.js @@ -77,17 +77,18 @@ const styles = ` const classes = { removeTokenIcon: 'p-chips-token-icon', label: 'p-chips-token-label', - token: 'p-chips-token p-highlight', - inputToken: 'p-chips-input-token', - container: ({ props, focusedState }) => - classNames('p-inputtext p-chips-multiple-container', { - 'p-disabled': props.disabled, - 'p-focus': focusedState + token: ({ focusedIndex, index }) => + classNames('p-chips-token', { + 'p-focus': focusedIndex === index }), - root: ({ isFilled, focusedState }) => + inputToken: 'p-chips-input-token', + container: ({ isFilled }) => classNames('p-inputtext p-chips-multiple-container', { 'p-variant-filled': isFilled }), + root: ({ isFilled, focusedState, disabled }) => classNames('p-chips p-component p-inputwrapper', { 'p-inputwrapper-filled': isFilled, - 'p-inputwrapper-focus': focusedState + 'p-inputwrapper-focus': focusedState, + 'p-disabled': disabled, + 'p-focus': focusedState }) }; diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 92755a6363..92087ae919 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #2396f2; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #64b5f6; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(100, 181, 246, 0.16); + background: #383838; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index b34ce001fc..bec2a57144 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #54b358; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81c784; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(129, 199, 132, 0.16); + background: #383838; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 6e369305d2..163f56b4ca 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffc50c; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ffd54f; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(255, 213, 79, 0.16); + background: #383838; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 9b7f52c9c3..4b7a0459b5 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -784,26 +784,69 @@ .p-highlight .p-checkbox .p-checkbox-box { border-color: #151515; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3f4b5b; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; - background: #8dd0ff; + background: #3f4b5b; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #4c5866; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1473,26 +1516,9 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1505,7 +1531,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 79cf7865b3..c8b9214e0b 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -784,26 +784,69 @@ .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ced4da; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; - background: #007bff; + background: #dee2e6; color: #212529; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #ced4da; + color: #212529; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1473,26 +1516,9 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1505,7 +1531,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 7ac0cb4d6d..ebe1af6aef 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -781,19 +781,58 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005a9e; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #323130; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; @@ -801,6 +840,10 @@ color: #323130; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e1dfdd; + color: #323130; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #323130; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #a4252c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 02525e4428..b2caa37903 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #fde68a; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #fbbf24; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(251, 191, 36, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #fde68a; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 353e1dd05f..7b3aa3535d 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #bfdbfe; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #60a5fa; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(96, 165, 250, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #bfdbfe; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index a74d4c9786..4f09ae84fb 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #a5f3fc; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #22d3ee; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(34, 211, 238, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a5f3fc; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 75935fbacf..4fc0d5ba42 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #a7f3d0; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #34d399; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(52, 211, 153, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a7f3d0; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index f02aa39790..ed9864ddf1 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #c7d2fe; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #818cf8; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(129, 140, 248, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #c7d2fe; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 105d397812..b596f379b9 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #fbcfe8; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #f472b6; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(244, 114, 182, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #fbcfe8; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index aad089e96d..010454b674 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #99f6e4; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2dd4bf; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(45, 212, 191, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #99f6e4; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index b7b3b67d22..bb2af0e3a5 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #b45309; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #f59e0b; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; border-color: #f59e0b; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #fffbeb; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #b45309; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 3169eeb734..149c1c3015 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #1d4ed8; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3b82f6; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; border-color: #3b82f6; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #eff6ff; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #1d4ed8; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index f72a17922e..c535e4f228 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0e7490; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #06b6d4; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; border-color: #06b6d4; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #ecfeff; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0e7490; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index b46aa87fce..f793a198e1 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #047857; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #10b981; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #f0fdfa; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #047857; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index c0bdc9ef6c..a1680bcf20 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #4338ca; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #6366f1; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; border-color: #6366f1; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #eef2ff; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4338ca; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 3d5e2ce9b2..016e6461da 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #be185d; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ec4899; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; border-color: #ec4899; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #fdf2f8; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #be185d; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 9720f1389f..8de91b4a17 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -798,26 +798,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0f766e; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #14b8a6; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #0f766e; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1484,26 +1527,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0f766e; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1516,7 +1542,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 2e12844fca..667b349a54 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -784,26 +784,69 @@ .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ffe082; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #ffe082; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #ffe082; + background: #4b4b4b; color: #dedede; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: #dedede; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1473,26 +1516,9 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1505,7 +1531,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 01bb3ccd77..71e1a18304 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -784,26 +784,69 @@ .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81d4fa; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #81d4fa; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #81d4fa; + background: #4b4b4b; color: #dedede; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: #dedede; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1473,26 +1516,9 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1505,7 +1531,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index a69737f6f2..dd43bac3b3 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -784,26 +784,69 @@ .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #c5e1a5; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #c5e1a5; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #c5e1a5; + background: #4b4b4b; color: #dedede; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: #dedede; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1473,26 +1516,9 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1505,7 +1531,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 9cc7d3e212..d1ee509d39 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -784,26 +784,69 @@ .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #f48fb1; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #f48fb1; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #f48fb1; + background: #4b4b4b; color: #dedede; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: #dedede; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1473,26 +1516,9 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1505,7 +1531,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index a35da4216c..325a2db710 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -801,26 +801,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #9FA8DA; } + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(159, 168, 218, 0.16); + 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(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 { margin-left: 0.5rem; } @@ -1487,26 +1530,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; 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); @@ -1519,7 +1545,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: none; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 39723afe4c..ab48cc83a7 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -801,26 +801,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3F51B5; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #3F51B5; } + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(63, 81, 181, 0.12); + background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: rgba(0, 0, 0, 0.24); + color: rgba(0, 0, 0, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1487,26 +1530,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; 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); @@ -1519,7 +1545,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: none; diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 8b45e460c6..b3411f8e7c 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -801,26 +801,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #9FA8DA; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(159, 168, 218, 0.16); + 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(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 { margin-left: 0.5rem; } @@ -1487,26 +1530,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; 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); @@ -1519,7 +1545,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: none; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 7622a54963..d7ec3e8fc2 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -801,26 +801,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3F51B5; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #3F51B5; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(63, 81, 181, 0.12); + background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: rgba(0, 0, 0, 0.24); + color: rgba(0, 0, 0, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1487,26 +1530,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; 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); @@ -1519,7 +1545,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: none; diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index dda9d72995..d6cf8c5a99 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -803,26 +803,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #81a1c1; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81a1c1; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: #d8dee9; + background: #e5e9f0; color: #4c566a; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #d8dee9; + color: #4c566a; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1489,26 +1532,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #81a1c1; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4c566a; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1521,7 +1547,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #bf616a; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 7f7bfdad1d..b146201655 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0e5d9a; } - .p-chips .p-chips-multiple-container { - padding: 0.125rem 0.25rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #1174c0; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } + .p-chips .p-chips-multiple-container { + padding: 0.125rem 0.25rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.125rem 0.25rem; margin-right: 0.5rem; - background: #44a1d9; + background: #dee2e6; color: #343a3f; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #c8cbcf; + color: #343a3f; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0e5d9a; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #343a3f; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index a6be3830b2..83072f003c 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #e02365; + background: #c8c8c8; color: #333333; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #bababa; + color: #333333; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 327239e417..2e4fa8e681 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -784,26 +784,69 @@ .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #007ad9; + background: #c8c8c8; color: #333333; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #bababa; + color: #333333; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1473,26 +1516,9 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1505,7 +1531,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index a9c8dbc1c8..acec7ca32d 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -784,26 +784,69 @@ .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #007ad9; + background: #c8c8c8; color: #333333; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #bababa; + color: #333333; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1473,26 +1516,9 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1505,7 +1531,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index cc3727c05d..7073fec1fd 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #617c8a; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #a6a6a6; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #afd3c8; + background: #dadada; color: #666666; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #cbcbcb; + color: #666666; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #617c8a; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #666666; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f3b9b9; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 82dca8b87c..d7b684f97e 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0b7ad1; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2196f3; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196f3; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: #e3f2fd; + background: #dee2e6; color: #495057; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #ced4da; + color: #495057; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0b7ad1; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 2792deb3da..c861ab83fe 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3d8c40; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #4caf50; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4caf50; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: #e8f5e9; + background: #dee2e6; color: #495057; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #ced4da; + color: #495057; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3d8c40; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 5199c5a384..313946e1f5 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #d29d00; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ffc107; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #ffc107; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: #fff3e0; + background: #dee2e6; color: #495057; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #ced4da; + color: #495057; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #d29d00; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 8a08a3a806..5e43e102c0 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -800,26 +800,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9378f4; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #b19df7; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(177, 157, 247, 0.16); + background: #3e4053; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #4c4d5f; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1486,26 +1529,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9378f4; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1518,7 +1544,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 3027c088f5..0934683562 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -800,26 +800,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #5935f1; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #7254f3; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #e2dcfc; + background: #dfe7ef; color: #043d75; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #d3dbe3; + color: #043d75; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1486,26 +1529,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #5935f1; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #043d75; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1518,7 +1544,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 9b77aa95de..c2a90352fa 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -1,9 +1,6 @@ :root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, - "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol", "Noto Color Emoji"; + --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --surface-a: #ffffff; --surface-b: #fafafa; --surface-c: #f4f4f5; @@ -812,26 +809,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #4f46e5; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #d4d4d8; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #eef2ff; + background: #e5e7eb; color: #3f3f46; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #d4d4d8; + color: #3f3f46; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1498,26 +1538,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4f46e5; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #3f3f46; transition: none; @@ -1530,7 +1553,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ef4444; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index a2c6f98952..b5c6de9bef 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #2396f2; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #64b5f6; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(100, 181, 246, 0.16); + background: #304562; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3e526d; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 50a085ab3e..bdf3654862 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #54b358; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81c784; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(129, 199, 132, 0.16); + background: #304562; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3e526d; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 56bcaa5fb1..32271b6966 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -781,26 +781,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffc50c; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ffd54f; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(255, 213, 79, 0.16); + background: #304562; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3e526d; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1467,26 +1510,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1525,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index e8a47cb750..3fae161d18 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -807,26 +807,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #7f93de; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2d3e44; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; - background: rgba(158, 173, 230, 0.16); + background: #263238; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #2d3e44; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1493,26 +1536,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7f93de; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1525,7 +1551,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 3b65d267da..84d23cf9f2 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -807,26 +807,69 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3c5ece; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.75rem; - gap: 0.5rem; + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #cecece; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; - background: #ced6f1; + background: #ebebeb; color: #6c6c6c; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e1e1e1; + color: #6c6c6c; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -1493,26 +1536,9 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3c5ece; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #6c6c6c; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1525,7 +1551,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; From 351c47a08e95abc852d385f74f8ce0217d990ca2 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 00:49:05 +0300 Subject: [PATCH 12/20] add listbox accessibility --- components/lib/listbox/ListBox.js | 16 ++++- components/lib/listbox/ListBoxBase.js | 3 + components/lib/listbox/ListBoxItem.js | 44 +++++++++----- public/themes/arya-blue/theme.css | 58 +++++++++++++++++-- public/themes/arya-green/theme.css | 58 +++++++++++++++++-- public/themes/arya-orange/theme.css | 58 +++++++++++++++++-- public/themes/bootstrap4-dark-blue/theme.css | 58 +++++++++++++++++-- public/themes/bootstrap4-light-blue/theme.css | 58 +++++++++++++++++-- public/themes/fluent-light/theme.css | 58 +++++++++++++++++-- public/themes/lara-dark-amber/theme.css | 58 +++++++++++++++++-- public/themes/lara-dark-blue/theme.css | 58 +++++++++++++++++-- public/themes/lara-dark-cyan/theme.css | 58 +++++++++++++++++-- public/themes/lara-dark-green/theme.css | 58 +++++++++++++++++-- public/themes/lara-dark-indigo/theme.css | 58 +++++++++++++++++-- public/themes/lara-dark-pink/theme.css | 58 +++++++++++++++++-- public/themes/lara-dark-teal/theme.css | 58 +++++++++++++++++-- public/themes/lara-light-amber/theme.css | 58 +++++++++++++++++-- public/themes/lara-light-blue/theme.css | 58 +++++++++++++++++-- public/themes/lara-light-cyan/theme.css | 58 +++++++++++++++++-- public/themes/lara-light-green/theme.css | 58 +++++++++++++++++-- public/themes/lara-light-indigo/theme.css | 58 +++++++++++++++++-- public/themes/lara-light-pink/theme.css | 58 +++++++++++++++++-- public/themes/lara-light-teal/theme.css | 58 +++++++++++++++++-- public/themes/luna-amber/theme.css | 58 +++++++++++++++++-- public/themes/luna-blue/theme.css | 58 +++++++++++++++++-- public/themes/luna-green/theme.css | 58 +++++++++++++++++-- public/themes/luna-pink/theme.css | 58 +++++++++++++++++-- public/themes/md-dark-indigo/theme.css | 58 +++++++++++++++++-- public/themes/md-light-indigo/theme.css | 58 +++++++++++++++++-- public/themes/mdc-dark-indigo/theme.css | 58 +++++++++++++++++-- public/themes/mdc-light-indigo/theme.css | 58 +++++++++++++++++-- public/themes/mira/theme.css | 58 +++++++++++++++++-- public/themes/nano/theme.css | 58 +++++++++++++++++-- public/themes/nova-accent/theme.css | 58 +++++++++++++++++-- public/themes/nova-alt/theme.css | 58 +++++++++++++++++-- public/themes/nova/theme.css | 58 +++++++++++++++++-- public/themes/rhea/theme.css | 58 +++++++++++++++++-- public/themes/saga-blue/theme.css | 58 +++++++++++++++++-- public/themes/saga-green/theme.css | 58 +++++++++++++++++-- public/themes/saga-orange/theme.css | 58 +++++++++++++++++-- public/themes/soho-dark/theme.css | 58 +++++++++++++++++-- public/themes/soho-light/theme.css | 58 +++++++++++++++++-- public/themes/tailwind-light/theme.css | 58 +++++++++++++++++-- public/themes/vela-blue/theme.css | 58 +++++++++++++++++-- public/themes/vela-green/theme.css | 58 +++++++++++++++++-- public/themes/vela-orange/theme.css | 58 +++++++++++++++++-- public/themes/viva-dark/theme.css | 58 +++++++++++++++++-- public/themes/viva-light/theme.css | 58 +++++++++++++++++-- 48 files changed, 2432 insertions(+), 241 deletions(-) diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index 07f8d56966..5abed41683 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -3,7 +3,7 @@ import { FilterService, PrimeReactContext, localeOption } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { ListBoxBase } from './ListBoxBase'; import { ListBoxHeader } from './ListBoxHeader'; @@ -14,10 +14,12 @@ export const ListBox = React.memo( const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = ListBoxBase.getProps(inProps, context); + const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null); const [filterValueState, setFilterValueState] = React.useState(''); const elementRef = React.useRef(null); const virtualScrollerRef = React.useRef(null); + const id = React.useRef(UniqueComponentId()); const optionTouched = React.useRef(false); const filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || ''; const hasFilter = filteredValue && filteredValue.trim().length > 0; @@ -318,6 +320,7 @@ export const ListBox = React.memo( return ( { const [focusedState, setFocusedState] = React.useState(false); + + const mergeProps = useMergeProps(); const { ptCallbacks: { ptm, cx } @@ -16,7 +18,8 @@ export const ListBoxItem = React.memo((props) => { context: { selected: props.selected, disabled: props.disabled, - focused: focusedState + focused: focusedState, + focusedOptionIndex: props.focusedOptionIndex } }); }; @@ -29,7 +32,7 @@ export const ListBoxItem = React.memo((props) => { setFocusedState(false); }; - const onClick = (event) => { + const onClick = (event, index) => { if (props.onClick) { props.onClick({ originalEvent: event, @@ -37,6 +40,8 @@ export const ListBoxItem = React.memo((props) => { }); } + props.setFocusedOptionIndex(index); + event.preventDefault(); }; @@ -49,31 +54,44 @@ export const ListBoxItem = React.memo((props) => { } }; - const onKeyDown = (event) => { + const onKeyDown = (event, index) => { const item = event.currentTarget; - switch (event.which) { - //down - case 40: + switch (event.key) { + case 'ArrowDown': const nextItem = findNextItem(item); + props.setFocusedOptionIndex(index + 1 > props.length - 1 ? props.length - 1 : index + 1); + nextItem && nextItem.focus(); event.preventDefault(); break; - //up - case 38: + case 'ArrowUp': const prevItem = findPrevItem(item); + props.setFocusedOptionIndex(index - 1 < 0 ? 0 : index - 1); + prevItem && prevItem.focus(); event.preventDefault(); break; - //enter - case 13: - onClick(event); + case 'Home': + props.setFocusedOptionIndex(0); + event.preventDefault(); + break; + + case 'End': + props.setFocusedOptionIndex(props.length - 1); + event.preventDefault(); + break; + + case 'Enter': + case 'NumpadEnter': + case 'Space': + onClick(event, props.focusedOptionIndex); event.preventDefault(); break; @@ -100,9 +118,9 @@ export const ListBoxItem = React.memo((props) => { { className: cx('item', { props }), style: props.style, - onClick: onClick, + onClick: (event) => onClick(event, props.index), onTouchEnd: onTouchEnd, - onKeyDown: onKeyDown, + onKeyDown: (event) => onKeyDown(event, props.focusedOptionIndex), onFocus: onFocus, onBlur: onBlur, tabIndex: '-1', diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 92087ae919..793567af6f 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; + } .p-listbox.p-invalid { border-color: #ef9a9a; } diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index bec2a57144..ee4914ad43 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; + } .p-listbox.p-invalid { border-color: #ef9a9a; } diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 163f56b4ca..a1c8c6894d 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; + } .p-listbox.p-invalid { border-color: #ef9a9a; } diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 4b7a0459b5..029abe0369 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -1194,11 +1194,40 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #2a323d; color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.5rem; @@ -1218,6 +1247,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1227,15 +1257,16 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #151515; background: #8dd0ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1248,10 +1279,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #64bfff; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } .p-listbox.p-invalid { border-color: #f19ea6; } diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index c8b9214e0b..12c267b315 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -1194,11 +1194,40 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #212529; border: 1px solid #ced4da; border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.5rem; @@ -1218,6 +1247,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1227,15 +1257,16 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #ffffff; background: #007bff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1248,10 +1279,27 @@ color: #212529; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #0067d6; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #212529; + background: #e9ecef; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; background: #e9ecef; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #212529; + background: #e9ecef; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + border-color: #007bff; + } .p-listbox.p-invalid { border-color: #dc3545; } diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index ebe1af6aef..75c1c91e7a 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #323130; border: 1px solid #605e5c; border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 0.5rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #323130; background: #edebe9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 0.5rem; @@ -1245,10 +1276,27 @@ color: #323130; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #e1dfdd; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #323130; + background: #f3f2f1; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #323130; background: #f3f2f1; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #323130; + background: #f3f2f1; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } .p-listbox.p-invalid { border-color: #a4252c; } diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index b2caa37903..40a1b4c0a8 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(251, 191, 36, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; + } .p-listbox.p-invalid { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 7b3aa3535d..ce4b786a6d 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(96, 165, 250, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(96, 165, 250, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; + } .p-listbox.p-invalid { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 4f09ae84fb..5353397c6e 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(34, 211, 238, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; + } .p-listbox.p-invalid { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 4fc0d5ba42..73cf76bf26 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(52, 211, 153, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; + } .p-listbox.p-invalid { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index ed9864ddf1..a6e9dd0ab1 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 140, 248, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(129, 140, 248, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; + } .p-listbox.p-invalid { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index b596f379b9..ec7b830444 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(244, 114, 182, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; + } .p-listbox.p-invalid { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index 010454b674..abe7eeecc6 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(45, 212, 191, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(45, 212, 191, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } .p-listbox.p-invalid { border-color: #fca5a5; } diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index bb2af0e3a5..962c81bcc9 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #b45309; background: #fffbeb; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #fef08a; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(245, 158, 11, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } .p-listbox.p-invalid { border-color: #e24c4c; } diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 149c1c3015..43d89248b4 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #1d4ed8; background: #eff6ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bfdbfe; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + border-color: #3b82f6; + } .p-listbox.p-invalid { border-color: #e24c4c; } diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index c535e4f228..160903df68 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #0e7490; background: #ecfeff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a5f3fc; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(6, 182, 212, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } .p-listbox.p-invalid { border-color: #e24c4c; } diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index f793a198e1..6a786ab659 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #047857; background: #f0fdfa; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7f3d0; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(16, 185, 129, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } .p-listbox.p-invalid { border-color: #e24c4c; } diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index a1680bcf20..c3d22031a1 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #4338ca; background: #eef2ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7d2fe; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(99, 102, 241, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + border-color: #6366f1; + } .p-listbox.p-invalid { border-color: #e24c4c; } diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 016e6461da..aeb3468421 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #be185d; background: #fdf2f8; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #fbcfe8; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(236, 72, 153, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } .p-listbox.p-invalid { border-color: #e24c4c; } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 8de91b4a17..85dab2d211 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -1208,11 +1208,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1232,6 +1261,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1241,15 +1271,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #0f766e; background: #0f766e; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99f6e4; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1262,10 +1293,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } .p-listbox.p-invalid { border-color: #e24c4c; } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 667b349a54..44b7da4a63 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -1194,11 +1194,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #323232; color: #dedede; border: 1px solid #4b4b4b; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.429rem 0.857rem; @@ -1218,6 +1247,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1227,15 +1257,16 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #212529; background: #ffe082; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1248,10 +1279,27 @@ color: #dedede; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(255, 224, 130, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #dedede; + background: #4c4c4c; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #ffe082; + } .p-listbox.p-invalid { border-color: #e57373; } diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 71e1a18304..883b8d9acd 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -1194,11 +1194,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #323232; color: #dedede; border: 1px solid #4b4b4b; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.429rem 0.857rem; @@ -1218,6 +1247,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1227,15 +1257,16 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #212529; background: #81d4fa; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1248,10 +1279,27 @@ color: #dedede; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(129, 212, 250, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #dedede; + background: #4c4c4c; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81d4fa; + } .p-listbox.p-invalid { border-color: #e57373; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index dd43bac3b3..66b8388a22 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -1194,11 +1194,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #323232; color: #dedede; border: 1px solid #4b4b4b; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.429rem 0.857rem; @@ -1218,6 +1247,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1227,15 +1257,16 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #212529; background: #c5e1a5; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1248,10 +1279,27 @@ color: #dedede; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(197, 225, 165, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #dedede; + background: #4c4c4c; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #c5e1a5; + } .p-listbox.p-invalid { border-color: #e57373; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index d1ee509d39..3c9612beb4 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -1194,11 +1194,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #323232; color: #dedede; border: 1px solid #4b4b4b; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.429rem 0.857rem; @@ -1218,6 +1247,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1227,15 +1257,16 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #212529; background: #f48fb1; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1248,10 +1279,27 @@ color: #dedede; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(244, 143, 177, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #dedede; + background: #4c4c4c; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #f48fb1; + } .p-listbox.p-invalid { border-color: #e57373; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 325a2db710..8b5bf3d182 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -1211,11 +1211,40 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); 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; @@ -1235,6 +1264,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1244,15 +1274,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1265,10 +1296,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0deg, 0%, 100%, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: hsla(0deg, 0%, 100%, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0deg, 0%, 100%, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } .p-listbox.p-invalid { border-color: #f44435; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index ab48cc83a7..33698840b8 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -1211,11 +1211,40 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; 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; @@ -1235,6 +1264,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1244,15 +1274,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1265,10 +1296,27 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } .p-listbox.p-invalid { border-color: #b00020; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index b3411f8e7c..e9f42d0a0e 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -1211,11 +1211,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); 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; @@ -1235,6 +1264,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1244,15 +1274,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1265,10 +1296,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0deg, 0%, 100%, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: hsla(0deg, 0%, 100%, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0deg, 0%, 100%, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } .p-listbox.p-invalid { border-color: #f44435; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index d7ec3e8fc2..1089d44358 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -1211,11 +1211,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; 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; @@ -1235,6 +1264,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1244,15 +1274,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1265,10 +1296,27 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } .p-listbox.p-invalid { border-color: #b00020; } diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index d6cf8c5a99..5af9826bd8 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -1213,11 +1213,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4c566a; border: 1px solid #d8dee9; border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1237,6 +1266,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1246,15 +1276,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #2e3440; background: #d8dee9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c0d0e0; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1267,10 +1298,27 @@ color: #4c566a; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #bec8da; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4c566a; + background: transparent; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4c566a; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4c566a; + background: transparent; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + border-color: #81a1c1; + } .p-listbox.p-invalid { border-color: #bf616a; } diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index b146201655..d8ea4d4e24 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.3125rem 0.3125rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #343a3f; border: 1px solid #a5acb3; border-radius: 1px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.25rem 0.5rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.25rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #ffffff; background: #44a1d9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #90c9f5; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.25rem 0.5rem; @@ -1245,10 +1276,27 @@ color: #343a3f; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #1174c0; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #343a3f; + background: #dde1e6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #343a3f; background: #dde1e6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #343a3f; + background: #dde1e6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; + } .p-listbox.p-invalid { border-color: #d8222f; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 83072f003c..bf80778da0 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #333333; border: 1px solid #a6a6a6; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.429rem 0.857rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #ffffff; background: #e02365; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1245,10 +1276,27 @@ color: #333333; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #e02365; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #333333; + background: #eaeaea; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #333333; + background: #eaeaea; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-listbox.p-invalid { border-color: #a80000; } diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 2e4fa8e681..4fd268548d 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -1194,11 +1194,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #333333; border: 1px solid #a6a6a6; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.429rem 0.857rem; @@ -1218,6 +1247,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1227,15 +1257,16 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #ffffff; background: #007ad9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1248,10 +1279,27 @@ color: #333333; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #007ad9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #333333; + background: #eaeaea; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #333333; + background: #eaeaea; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-listbox.p-invalid { border-color: #a80000; } diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index acec7ca32d..82361c4280 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -1194,11 +1194,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #333333; border: 1px solid #a6a6a6; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.429rem 0.857rem; @@ -1218,6 +1247,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1227,15 +1257,16 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #ffffff; background: #007ad9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1248,10 +1279,27 @@ color: #333333; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #007ad9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #333333; + background: #eaeaea; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #333333; + background: #eaeaea; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-listbox.p-invalid { border-color: #a80000; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 7073fec1fd..6178a86295 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #666666; border: 1px solid #dadada; border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.429rem 0.857rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #385048; background: #afd3c8; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1245,10 +1276,27 @@ color: #666666; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #aed3c7; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #666666; + background: #f4f4f4; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #666666; background: #f4f4f4; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #666666; + background: #f4f4f4; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7b95a3; + } .p-listbox.p-invalid { border-color: #e7a3a3; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index d7b684f97e..bd735831b3 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #495057; border: 1px solid #ced4da; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #495057; background: #e3f2fd; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: #495057; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #495057; + background: #e9ecef; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #495057; + background: #e9ecef; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196f3; + } .p-listbox.p-invalid { border-color: #f44336; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index c861ab83fe..cd43902c0d 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #495057; border: 1px solid #ced4da; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #495057; background: #e8f5e9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: #495057; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #495057; + background: #e9ecef; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #495057; + background: #e9ecef; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4caf50; + } .p-listbox.p-invalid { border-color: #f44336; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 313946e1f5..1b026f8862 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #495057; border: 1px solid #ced4da; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #495057; background: #fff3e0; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: #495057; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(255, 193, 7, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #495057; + background: #e9ecef; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #495057; + background: #e9ecef; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #ffc107; + } .p-listbox.p-invalid { border-color: #f44336; } diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 5e43e102c0..1d12561a21 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -1210,11 +1210,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #282936; color: rgba(255, 255, 255, 0.87); border: 1px solid #3e4053; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1234,6 +1263,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1243,15 +1273,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #b19df7; background: rgba(177, 157, 247, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e0d8fc; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1264,10 +1295,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(177, 157, 247, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; + } .p-listbox.p-invalid { border-color: #ff9a9a; } diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 0934683562..3993913e82 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -1210,11 +1210,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #043d75; border: 1px solid #d3dbe3; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1234,6 +1263,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1243,15 +1273,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #7254f3; background: #e2dcfc; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7bbfa; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1264,10 +1295,27 @@ color: #043d75; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #cbc0fa; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #043d75; + background: #f6f9fc; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #043d75; background: #f6f9fc; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #043d75; + background: #f6f9fc; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; + } .p-listbox.p-invalid { border-color: #ff6767; } diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index c2a90352fa..f535af1e74 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -1219,11 +1219,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #3f3f46; border: 1px solid #d4d4d8; border-radius: 0.375rem; + transition: none; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 0.75rem; @@ -1243,6 +1272,7 @@ } .p-listbox .p-listbox-list { padding: 0.25rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1252,15 +1282,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #312e81; background: #eef2ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366f1; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1273,10 +1304,27 @@ color: #3f3f46; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #e0e7ff; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #18181b; + background: #f4f4f5; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #18181b; background: #f4f4f5; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #18181b; + background: #f4f4f5; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + border-color: #4f46e5; + } .p-listbox.p-invalid { border-color: #f0a9a7; } diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index b5c6de9bef..f3f09d785d 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; + } .p-listbox.p-invalid { border-color: #ef9a9a; } diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index bdf3654862..1df4123c9e 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; + } .p-listbox.p-invalid { border-color: #ef9a9a; } diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 32271b6966..ce88eae3c9 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1191,11 +1191,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1215,6 +1244,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1224,15 +1254,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1245,10 +1276,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; + } .p-listbox.p-invalid { border-color: #ef9a9a; } diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 3fae161d18..46d3c15c05 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -1217,11 +1217,40 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #161d21; color: rgba(255, 255, 255, 0.87); border: 2px solid #263238; border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1.5rem; @@ -1241,6 +1270,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0.5rem; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0 0 4px 0; @@ -1250,15 +1280,16 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #9eade6; background: rgba(158, 173, 230, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #9eade6; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1271,10 +1302,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(158, 173, 230, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(158, 173, 230, 0.08); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.08); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; + } .p-listbox.p-invalid { border-color: #f78c79; } diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 84d23cf9f2..86bed825a3 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -1217,11 +1217,40 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #6c6c6c; border: 2px solid #e1e1e1; border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1.5rem; @@ -1241,6 +1270,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0.5rem; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0 0 4px 0; @@ -1250,15 +1280,16 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #585858; background: #ced6f1; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bbc7ee; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1271,10 +1302,27 @@ color: #6c6c6c; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #aebbe8; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #6c6c6c; + background: #edf0fa; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #6c6c6c; background: #edf0fa; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #6c6c6c; + background: #edf0fa; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; + } .p-listbox.p-invalid { border-color: #f88c79; } From d77cc3913cbfa997068a78c0961acf3b4cd6facd Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 02:16:04 +0300 Subject: [PATCH 13/20] Add Dropdown accessibility --- components/lib/dropdown/Dropdown.js | 135 ++++++++++++------ components/lib/dropdown/DropdownBase.js | 3 +- components/lib/dropdown/DropdownItem.js | 8 +- components/lib/dropdown/DropdownPanel.js | 38 ++++- public/themes/arya-blue/theme.css | 128 ++++++++++++++--- public/themes/arya-green/theme.css | 128 ++++++++++++++--- public/themes/arya-orange/theme.css | 128 ++++++++++++++--- public/themes/bootstrap4-dark-blue/theme.css | 128 ++++++++++++++--- public/themes/bootstrap4-light-blue/theme.css | 128 ++++++++++++++--- public/themes/fluent-light/theme.css | 128 ++++++++++++++--- public/themes/lara-dark-amber/theme.css | 128 ++++++++++++++--- public/themes/lara-dark-blue/theme.css | 128 ++++++++++++++--- public/themes/lara-dark-cyan/theme.css | 128 ++++++++++++++--- public/themes/lara-dark-green/theme.css | 128 ++++++++++++++--- public/themes/lara-dark-indigo/theme.css | 128 ++++++++++++++--- public/themes/lara-dark-pink/theme.css | 128 ++++++++++++++--- public/themes/lara-dark-teal/theme.css | 128 ++++++++++++++--- public/themes/lara-light-amber/theme.css | 128 ++++++++++++++--- public/themes/lara-light-blue/theme.css | 128 ++++++++++++++--- public/themes/lara-light-cyan/theme.css | 128 ++++++++++++++--- public/themes/lara-light-green/theme.css | 128 ++++++++++++++--- public/themes/lara-light-indigo/theme.css | 128 ++++++++++++++--- public/themes/lara-light-pink/theme.css | 128 ++++++++++++++--- public/themes/lara-light-teal/theme.css | 128 ++++++++++++++--- public/themes/luna-amber/theme.css | 128 ++++++++++++++--- public/themes/luna-blue/theme.css | 128 ++++++++++++++--- public/themes/luna-green/theme.css | 128 ++++++++++++++--- public/themes/luna-pink/theme.css | 128 ++++++++++++++--- public/themes/md-dark-indigo/theme.css | 128 ++++++++++++++--- public/themes/md-light-indigo/theme.css | 128 ++++++++++++++--- public/themes/mdc-dark-indigo/theme.css | 128 ++++++++++++++--- public/themes/mdc-light-indigo/theme.css | 128 ++++++++++++++--- public/themes/mira/theme.css | 128 ++++++++++++++--- public/themes/nano/theme.css | 128 ++++++++++++++--- public/themes/nova-accent/theme.css | 128 ++++++++++++++--- public/themes/nova-alt/theme.css | 128 ++++++++++++++--- public/themes/nova/theme.css | 128 ++++++++++++++--- public/themes/rhea/theme.css | 128 ++++++++++++++--- public/themes/saga-blue/theme.css | 128 ++++++++++++++--- public/themes/saga-green/theme.css | 128 ++++++++++++++--- public/themes/saga-orange/theme.css | 128 ++++++++++++++--- public/themes/soho-dark/theme.css | 128 ++++++++++++++--- public/themes/soho-light/theme.css | 128 ++++++++++++++--- public/themes/tailwind-light/theme.css | 128 ++++++++++++++--- public/themes/vela-blue/theme.css | 128 ++++++++++++++--- public/themes/vela-green/theme.css | 128 ++++++++++++++--- public/themes/vela-orange/theme.css | 128 ++++++++++++++--- public/themes/viva-dark/theme.css | 128 ++++++++++++++--- public/themes/viva-light/theme.css | 128 ++++++++++++++--- 49 files changed, 4948 insertions(+), 996 deletions(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index 2cf1d32838..a51a7a109b 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -18,6 +18,7 @@ export const Dropdown = React.memo( const props = DropdownBase.getProps(inProps, context); const [filterState, setFilterState] = React.useState(''); const [focusedState, setFocusedState] = React.useState(false); + const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const elementRef = React.useRef(null); const overlayRef = React.useRef(null); @@ -154,10 +155,25 @@ export const Dropdown = React.memo( onUpKey(event); break; + case 'ArrowLeft': + case 'ArrowRight': + onArrowLeftKey(event, props.editable); + break; + + case 'Home': + onHomeKey(event); + break; + + case 'End': + onEndKey(event); + break; + case 'Space': + onSpaceKey(event, props.editable); + break; + case 'Enter': - overlayVisibleState ? hide() : show(); - event.preventDefault(); + onEnterKey(event); break; case 'Escape': @@ -181,6 +197,11 @@ export const Dropdown = React.memo( onUpKey(event); break; + case 'ArrowLeft': + case 'ArrowRight': + onArrowLeftKey(event, true); + break; + case 'Escape': case 'Enter': hide(); @@ -194,13 +215,13 @@ export const Dropdown = React.memo( const onUpKey = (event) => { if (visibleOptions) { - const prevOption = findPrevOption(getSelectedOptionIndex()); + if (!overlayVisibleState) { + show(); + setFocusedOptionIndex(visibleOptions.length - 1); + } else { + const target = focusedOptionIndex === null ? visibleOptions.length - 1 : focusedOptionIndex === 0 ? 0 : focusedOptionIndex - 1; - if (prevOption) { - selectItem({ - originalEvent: event, - option: prevOption - }); + setFocusedOptionIndex(target); } } @@ -209,23 +230,53 @@ export const Dropdown = React.memo( const onDownKey = (event) => { if (visibleOptions) { - if (!overlayVisibleState && event.altKey) { + if (!overlayVisibleState) { show(); + setFocusedOptionIndex(0); } else { - const nextOption = findNextOption(getSelectedOptionIndex()); + const targetIndex = focusedOptionIndex === null ? 0 : focusedOptionIndex + 1 > visibleOptions.length - 1 ? visibleOptions.length - 1 : focusedOptionIndex + 1; - if (nextOption) { - selectItem({ - originalEvent: event, - option: nextOption - }); - } + setFocusedOptionIndex(targetIndex); } } event.preventDefault(); }; + const onHomeKey = (event) => { + !overlayVisibleState && show(); + setFocusedOptionIndex(0); + event.preventDefault(); + }; + + const onEndKey = (event) => { + !overlayVisibleState && show(); + setFocusedOptionIndex(visibleOptions.length - 1); + event.preventDefault(); + }; + + const onSpaceKey = (event, pressedInInputText = false) => { + !pressedInInputText && onEnterKey(event); + }; + + const onEnterKey = (event) => { + if (overlayVisibleState) { + selectItem({ + originalEvent: event, + option: visibleOptions[focusedOptionIndex] + }); + hide(); + } else { + show(); + } + + event.preventDefault(); + }; + + const onArrowLeftKey = (event, pressedInInputText = false) => { + pressedInInputText && setFocusedOptionIndex(null); + }; + const findNextOption = (index) => { if (props.optionGroupLabel) { const groupIndex = index === -1 ? 0 : index.group; @@ -294,7 +345,7 @@ export const Dropdown = React.memo( const char = event.key; - if (char.length !== 1) { + if (char.length !== 1 || props.editable) { // only single character keys matter for searching return; } @@ -306,14 +357,8 @@ export const Dropdown = React.memo( if (searchValue.current) { const searchIndex = getSelectedOptionIndex(); - const newOption = props.optionGroupLabel ? searchOptionInGroup(searchIndex) : searchOption(searchIndex + 1); - if (newOption) { - selectItem({ - originalEvent: event, - option: newOption - }); - } + setFocusedOptionIndex(props.optionGroupLabel ? searchIndex : searchIndex + 1); } searchTimeout.current = setTimeout(() => { @@ -321,26 +366,6 @@ export const Dropdown = React.memo( }, 250); }; - const searchOption = (index) => { - if (searchValue.current) { - return searchOptionInRange(index, visibleOptions.length) || searchOptionInRange(0, index); - } - - return null; - }; - - const searchOptionInRange = (start, end) => { - for (let i = start; i < end; i++) { - const opt = visibleOptions[i]; - - if (matchesSearchValue(opt)) { - return opt; - } - } - - return null; - }; - const searchOptionInGroup = (index) => { const searchIndex = index === -1 ? { group: 0, option: -1 } : index; @@ -380,6 +405,16 @@ export const Dropdown = React.memo( }; const onEditableInputChange = (event) => { + !overlayVisibleState && show(); + + let searchIndex = null; + + if (event.target.value) { + searchIndex = visibleOptions.findIndex((item) => item.name.toLocaleLowerCase().startsWith(event.target.value.toLocaleLowerCase())); + } + + setFocusedOptionIndex(searchIndex); + if (props.onChange) { props.onChange({ originalEvent: event.originalEvent, @@ -532,6 +567,12 @@ export const Dropdown = React.memo( setOverlayVisibleState(false); }; + const onFocus = () => { + if (props.editable) { + DomHandler.focus(inputRef.current); + } + }; + const onOverlayEnter = (callback) => { ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']); DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' }); @@ -774,8 +815,9 @@ export const Dropdown = React.memo( maxLength: props.maxLength, onInput: onEditableInputChange, onFocus: onEditableInputFocus, + onKeyDown: onInputKeyDown, onBlur: onInputBlur, - tabIndex: props.tabIndex || 0, + tabIndex: !props.disabled ? props.tabIndex : -1, 'aria-haspopup': 'listbox', ...ariaProps }, @@ -886,6 +928,7 @@ export const Dropdown = React.memo( onClick: (e) => onClick(e), onMouseDown: props.onMouseDown, onContextMenu: props.onContextMenu, + onFocus: onFocus, 'data-p-disabled': props.disabled, 'data-p-focus': focusedState }, @@ -910,6 +953,8 @@ export const Dropdown = React.memo( appendTo={appendTo} onClick={onPanelClick} onOptionClick={onOptionClick} + focusedOptionIndex={focusedOptionIndex} + setFocusedOptionIndex={setFocusedOptionIndex} filterValue={filterState} hasFilter={hasFilter} onFilterClearIconClick={onFilterClearIconClick} diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index be712f548f..01d7c21929 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -37,10 +37,11 @@ const classes = { 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), - item: ({ selected, disabled, label }) => + item: ({ selected, disabled, label, index, focusedOptionIndex }) => classNames('p-dropdown-item', { 'p-highlight': selected, 'p-disabled': disabled, + 'p-focus': index === focusedOptionIndex, 'p-dropdown-item-empty': !label || label.length === 0 }), wrapper: 'p-dropdown-items-wrapper', diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js index 3411df8cb6..4269973ed7 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -5,7 +5,7 @@ import { classNames, ObjectUtils } from '../utils/Utils'; export const DropdownItem = React.memo((props) => { const mergeProps = useMergeProps(); - const { ptm, cx, selected, disabled, option, label } = props; + const { ptm, cx, selected, disabled, option, label, index, focusedOptionIndex, setFocusedOptionIndex } = props; const getPTOptions = (key) => { return ptm(key, { @@ -16,7 +16,9 @@ export const DropdownItem = React.memo((props) => { }); }; - const onClick = (event) => { + const onClick = (event, i) => { + setFocusedOptionIndex(i); + if (props.onClick) { props.onClick({ originalEvent: event, @@ -30,7 +32,7 @@ export const DropdownItem = React.memo((props) => { { role: 'option', key: props.label, - className: classNames(option.className, cx('item', { selected, disabled, label })), + className: classNames(option.className, cx('item', { selected, disabled, label, index, focusedOptionIndex })), style: props.style, onClick: (e) => onClick(e), 'aria-label': label, diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 32baf68614..b8fe856ca5 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -78,7 +78,24 @@ export const DropdownPanel = React.memo( const optionKey = j + '_' + props.getOptionRenderKey(option); const disabled = props.isOptionDisabled(option); - return ; + return ( + + ); }); }; @@ -124,7 +141,24 @@ export const DropdownPanel = React.memo( const optionKey = index + '_' + props.getOptionRenderKey(option); const disabled = props.isOptionDisabled(option); - return ; + return ( + + ); } }; diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 793567af6f..b00b4752cc 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #64b5f6; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } + .p-dropdown.p-variant-filled { + background: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index ee4914ad43..dc48df0fab 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #81c784; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } + .p-dropdown.p-variant-filled { + background: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index a1c8c6894d..00c1645c4b 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ffd54f; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } + .p-dropdown.p-variant-filled { + background: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 029abe0369..8cc852741c 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -879,11 +879,90 @@ .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #20262e; border: 1px solid #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #3f4b5b; @@ -894,6 +973,18 @@ box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + .p-dropdown.p-variant-filled { + background: #3f4b5b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #3f4b5b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3f4b5b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -904,7 +995,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -946,13 +1037,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -965,14 +1049,28 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #151515; background: #8dd0ff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #64bfff; + } + .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: rgba(255, 255, 255, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -985,18 +1083,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #3f4b5b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #3f4b5b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #3f4b5b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 12c267b315..2388d8eea3 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -879,11 +879,90 @@ .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ced4da; @@ -894,6 +973,18 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + .p-dropdown.p-variant-filled { + background: #efefef; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #efefef; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #efefef; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -904,7 +995,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -946,13 +1037,6 @@ right: 0.75rem; color: #495057; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -965,14 +1049,28 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #ffffff; background: #007bff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #0067d6; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #212529; background: #e9ecef; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -985,18 +1083,6 @@ color: #212529; background: transparent; } - .p-input-filled .p-dropdown { - background: #efefef; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #efefef; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #efefef; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #e9ecef; color: #495057; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 75c1c91e7a..5b6ee64bec 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #605e5c; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #323130; @@ -891,6 +970,18 @@ box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + .p-dropdown.p-variant-filled { + background: #faf9f8; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #faf9f8; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #faf9f8; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #605e5c; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: #605e5c; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #323130; background: #edebe9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #e1dfdd; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #323130; background: #f3f2f1; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 0.5rem; @@ -982,18 +1080,6 @@ color: #323130; background: transparent; } - .p-input-filled .p-dropdown { - background: #faf9f8; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #faf9f8; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #faf9f8; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 40a1b4c0a8..daf52d7be5 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #fbbf24; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(251, 191, 36, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index ce4b786a6d..44ec2a7fad 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #60a5fa; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(96, 165, 250, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(96, 165, 250, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 5353397c6e..f0fc74a00c 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #22d3ee; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(34, 211, 238, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 73cf76bf26..dfa13ef5dd 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #34d399; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(52, 211, 153, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index a6e9dd0ab1..3f38e06a6d 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #818cf8; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 140, 248, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(129, 140, 248, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index ec7b830444..8ecc84a73d 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #f472b6; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(244, 114, 182, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index abe7eeecc6..71a9f44a3f 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #2dd4bf; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(45, 212, 191, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(45, 212, 191, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 962c81bcc9..c9503caf9f 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #f59e0b; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem #fef08a; border-color: #f59e0b; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #b45309; background: #fffbeb; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(245, 158, 11, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 43d89248b4..5c7a57aabf 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #3b82f6; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem #bfdbfe; border-color: #3b82f6; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #1d4ed8; background: #eff6ff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 160903df68..c2c603c3e0 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #06b6d4; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; border-color: #06b6d4; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #0e7490; background: #ecfeff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(6, 182, 212, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 6a786ab659..a5ed875ad3 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #10b981; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #047857; background: #f0fdfa; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(16, 185, 129, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index c3d22031a1..3ac5ed2e78 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #6366f1; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem #c7d2fe; border-color: #6366f1; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #4338ca; background: #eef2ff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(99, 102, 241, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index aeb3468421..12ded900b4 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ec4899; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; border-color: #ec4899; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #be185d; background: #fdf2f8; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(236, 72, 153, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 85dab2d211..29b854d549 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -893,11 +893,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #14b8a6; @@ -908,6 +987,18 @@ box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -918,7 +1009,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -960,13 +1051,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -979,14 +1063,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #0f766e; background: #0f766e; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -999,18 +1097,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 44b7da4a63..d04ff1540b 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -879,11 +879,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #191919; border: 1px solid #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ffe082; @@ -894,6 +973,18 @@ box-shadow: 0 0 0 0.1rem white; border-color: #ffe082; } + .p-dropdown.p-variant-filled { + background: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.429rem; } @@ -904,7 +995,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -946,13 +1037,6 @@ right: 0.429rem; color: #888888; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -965,14 +1049,28 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #212529; background: #ffe082; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(255, 224, 130, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.857rem; @@ -985,18 +1083,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #252525; color: #888888; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 883b8d9acd..8d062dc5a5 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -879,11 +879,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #191919; border: 1px solid #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #81d4fa; @@ -894,6 +973,18 @@ box-shadow: 0 0 0 0.1rem white; border-color: #81d4fa; } + .p-dropdown.p-variant-filled { + background: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.429rem; } @@ -904,7 +995,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -946,13 +1037,6 @@ right: 0.429rem; color: #888888; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -965,14 +1049,28 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #212529; background: #81d4fa; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(129, 212, 250, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.857rem; @@ -985,18 +1083,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #252525; color: #888888; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 66b8388a22..bf722c2bbc 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -879,11 +879,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #191919; border: 1px solid #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #c5e1a5; @@ -894,6 +973,18 @@ box-shadow: 0 0 0 0.1rem white; border-color: #c5e1a5; } + .p-dropdown.p-variant-filled { + background: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.429rem; } @@ -904,7 +995,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -946,13 +1037,6 @@ right: 0.429rem; color: #888888; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -965,14 +1049,28 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #212529; background: #c5e1a5; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(197, 225, 165, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.857rem; @@ -985,18 +1083,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #252525; color: #888888; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 3c9612beb4..de342a1722 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -879,11 +879,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #191919; border: 1px solid #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #f48fb1; @@ -894,6 +973,18 @@ box-shadow: 0 0 0 0.1rem white; border-color: #f48fb1; } + .p-dropdown.p-variant-filled { + background: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.429rem; } @@ -904,7 +995,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -946,13 +1037,6 @@ right: 0.429rem; color: #888888; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -965,14 +1049,28 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #212529; background: #f48fb1; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(244, 143, 177, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.857rem; @@ -985,18 +1083,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #252525; color: #888888; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 8b5bf3d182..739c669ec8 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -896,11 +896,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1e1e1e; border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -911,6 +990,18 @@ box-shadow: none; border-color: #9FA8DA; } + .p-dropdown.p-variant-filled { + background: hsla(0deg, 0%, 100%, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 2rem; } @@ -921,7 +1012,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -963,13 +1054,6 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 4rem; - margin-right: -4rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 3rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -982,14 +1066,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: hsla(0deg, 0%, 100%, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 1rem; @@ -1002,18 +1100,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: hsla(0deg, 0%, 100%, 0.06); - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 33698840b8..4048f30453 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -896,11 +896,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -911,6 +990,18 @@ box-shadow: none; border-color: #3F51B5; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 2rem; } @@ -921,7 +1012,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -963,13 +1054,6 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 4rem; - margin-right: -4rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 3rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -982,14 +1066,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 1rem; @@ -1002,18 +1100,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index e9f42d0a0e..a91c5b9583 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -896,11 +896,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1e1e1e; border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -911,6 +990,18 @@ box-shadow: none; border-color: #9FA8DA; } + .p-dropdown.p-variant-filled { + background: hsla(0deg, 0%, 100%, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -921,7 +1012,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -963,13 +1054,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -982,14 +1066,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: hsla(0deg, 0%, 100%, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem; @@ -1002,18 +1100,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: hsla(0deg, 0%, 100%, 0.06); - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 1089d44358..832899f86b 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -896,11 +896,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -911,6 +990,18 @@ box-shadow: none; border-color: #3F51B5; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -921,7 +1012,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -963,13 +1054,6 @@ right: 0.75rem; color: rgba(0, 0, 0, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -982,14 +1066,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem; @@ -1002,18 +1100,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index 5af9826bd8..144974cf10 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -898,11 +898,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d8dee9; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #81a1c1; @@ -913,6 +992,18 @@ box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } + .p-dropdown.p-variant-filled { + background: #eceff4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #eceff4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -923,7 +1014,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #4c566a; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -965,13 +1056,6 @@ right: 0.5rem; color: #81a1c1; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -984,14 +1068,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #2e3440; background: #d8dee9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #bec8da; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4c566a; background: transparent; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1004,18 +1102,6 @@ color: #4c566a; background: transparent; } - .p-input-filled .p-dropdown { - background: #eceff4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #eceff4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: #81a1c1; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index d8ea4d4e24..270cdffd94 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #a5acb3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 1px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #1174c0; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } + .p-dropdown.p-variant-filled { + background: #f2f4f8; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f4f8; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.25rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #697077; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.25rem; color: #697077; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.5rem; - margin-right: -2.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.25rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #ffffff; background: #44a1d9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #1174c0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #343a3f; background: #dde1e6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.25rem 0.5rem; @@ -982,18 +1080,6 @@ color: #343a3f; background: transparent; } - .p-input-filled .p-dropdown { - background: #f2f4f8; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f2f4f8; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #dde1e6; color: #697077; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index bf80778da0..46dc15ac7b 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #212121; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-dropdown.p-variant-filled { + background: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.429rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.429rem; color: #848484; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -962,14 +1046,28 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #ffffff; background: #e02365; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #e02365; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.857rem; @@ -982,18 +1080,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #eaeaea; color: #848484; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 4fd268548d..a328254c3f 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -879,11 +879,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #212121; @@ -894,6 +973,18 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-dropdown.p-variant-filled { + background: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.429rem; } @@ -904,7 +995,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -946,13 +1037,6 @@ right: 0.429rem; color: #848484; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -965,14 +1049,28 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #ffffff; background: #007ad9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #007ad9; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.857rem; @@ -985,18 +1083,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #eaeaea; color: #848484; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 82361c4280..cf283c650c 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -879,11 +879,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #212121; @@ -894,6 +973,18 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-dropdown.p-variant-filled { + background: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.429rem; } @@ -904,7 +995,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -946,13 +1037,6 @@ right: 0.429rem; color: #848484; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -965,14 +1049,28 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #ffffff; background: #007ad9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #007ad9; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.857rem; @@ -985,18 +1083,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #eaeaea; color: #848484; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 6178a86295..3636e448d7 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #dadada; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #a6a6a6; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } + .p-dropdown.p-variant-filled { + background: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.429rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #a6a6a6; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.429rem; color: #a6a6a6; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -962,14 +1046,28 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #385048; background: #afd3c8; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #aed3c7; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #666666; background: #f4f4f4; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.857rem; @@ -982,18 +1080,6 @@ color: #666666; background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #dbdbdb; color: #666666; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index bd735831b3..9f0ff33bca 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #2196f3; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196f3; } + .p-dropdown.p-variant-filled { + background: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: #6c757d; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #495057; background: #e3f2fd; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #e9ecef; color: #6c757d; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index cd43902c0d..c3ba8aef7c 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #4caf50; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4caf50; } + .p-dropdown.p-variant-filled { + background: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: #6c757d; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #495057; background: #e8f5e9; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #e9ecef; color: #6c757d; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 1b026f8862..41f0920636 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ffc107; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #ffc107; } + .p-dropdown.p-variant-filled { + background: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: #6c757d; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #495057; background: #fff3e0; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(255, 193, 7, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #e9ecef; color: #6c757d; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 1d12561a21..e58542da78 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -895,11 +895,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1d1e27; border: 1px solid #3e4053; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #b19df7; @@ -910,6 +989,18 @@ box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } + .p-dropdown.p-variant-filled { + background: #3e4053; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #3e4053; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3e4053; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -920,7 +1011,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -962,13 +1053,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -981,14 +1065,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #b19df7; background: rgba(177, 157, 247, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(177, 157, 247, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1001,18 +1099,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #3e4053; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #3e4053; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #3e4053; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 3993913e82..ee60613996 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -895,11 +895,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d3dbe3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #7254f3; @@ -910,6 +989,18 @@ box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } + .p-dropdown.p-variant-filled { + background: #f6f9fc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f6f9fc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -920,7 +1011,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #708da9; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -962,13 +1053,6 @@ right: 0.75rem; color: #708da9; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -981,14 +1065,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #7254f3; background: #e2dcfc; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #cbc0fa; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #043d75; background: #f6f9fc; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1001,18 +1099,6 @@ color: #043d75; background: transparent; } - .p-input-filled .p-dropdown { - background: #f6f9fc; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f6f9fc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f6f9fc; color: #708da9; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index f535af1e74..010d7d46ba 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -904,11 +904,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d4d4d8; transition: none; border-radius: 0.375rem; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #d4d4d8; @@ -919,6 +998,18 @@ box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } + .p-dropdown.p-variant-filled { + background: #fafafa; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #fafafa; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -929,7 +1020,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #71717a; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -971,13 +1062,6 @@ right: 0.75rem; color: #71717a; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.25rem 0; } @@ -990,14 +1074,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #312e81; background: #eef2ff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #e0e7ff; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #18181b; background: #f4f4f5; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1010,18 +1108,6 @@ color: #3f3f46; background: transparent; } - .p-input-filled .p-dropdown { - background: #fafafa; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #fafafa; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #fafafa; color: #71717a; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index f3f09d785d..2f94363a34 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #64b5f6; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } + .p-dropdown.p-variant-filled { + background: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 1df4123c9e..1681add80f 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #81c784; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } + .p-dropdown.p-variant-filled { + background: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index ce88eae3c9..f5a3d2f386 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -876,11 +876,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ffd54f; @@ -891,6 +970,18 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } + .p-dropdown.p-variant-filled { + background: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -901,7 +992,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -943,13 +1034,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -962,14 +1046,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -982,18 +1080,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 46d3c15c05..48e5c6b607 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -902,11 +902,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #0e1315; border: 2px solid #263238; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #2d3e44; @@ -917,6 +996,18 @@ box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } + .p-dropdown.p-variant-filled { + background: #263238; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #263238; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #263238; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -927,7 +1018,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -969,13 +1060,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0.5rem; } @@ -988,14 +1072,28 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #9eade6; background: rgba(158, 173, 230, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(158, 173, 230, 0.24); + } + .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: rgba(158, 173, 230, 0.08); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1008,18 +1106,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #263238; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #263238; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #263238; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 86bed825a3..24eb3f4841 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -902,11 +902,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 2px solid #e1e1e1; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #cecece; @@ -917,6 +996,18 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } + .p-dropdown.p-variant-filled { + background: #f2f2f2; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f2f2; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f2f2f2; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -927,7 +1018,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #898989; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -969,13 +1060,6 @@ right: 0.75rem; color: #898989; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0.5rem; } @@ -988,14 +1072,28 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #585858; background: #ced6f1; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: #aebbe8; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #6c6c6c; background: #edf0fa; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1008,18 +1106,6 @@ color: #6c6c6c; background: transparent; } - .p-input-filled .p-dropdown { - background: #f2f2f2; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f2f2f2; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f2f2f2; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f5f5f5; color: #898989; From 3231aac04f8c12360a1b55968819f6f37ebe6be9 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 04:00:24 +0300 Subject: [PATCH 14/20] Dropdown keydown fix --- components/lib/dropdown/Dropdown.js | 1 + components/lib/dropdown/DropdownItem.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index a51a7a109b..36bd41bee9 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -172,6 +172,7 @@ export const Dropdown = React.memo( onSpaceKey(event, props.editable); break; + case 'NumpadEnter': case 'Enter': onEnterKey(event); break; diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js index 4269973ed7..4288b50a8b 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -34,7 +34,7 @@ export const DropdownItem = React.memo((props) => { key: props.label, className: classNames(option.className, cx('item', { selected, disabled, label, index, focusedOptionIndex })), style: props.style, - onClick: (e) => onClick(e), + onClick: (e) => onClick(e, index), 'aria-label': label, 'aria-selected': selected, 'data-p-highlight': selected, From d046dc5ceaa7e4cff92447ea565cc418581bebc9 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 04:00:31 +0300 Subject: [PATCH 15/20] Add Multi select accessibility --- components/lib/listbox/ListBoxBase.js | 1 + components/lib/multiselect/MultiSelect.js | 137 ++++++++++------- components/lib/multiselect/MultiSelectBase.js | 5 +- components/lib/multiselect/MultiSelectItem.js | 18 +-- .../lib/multiselect/MultiSelectPanel.js | 8 +- public/themes/arya-blue/theme.css | 141 ++++++++++++++---- public/themes/arya-green/theme.css | 141 ++++++++++++++---- public/themes/arya-orange/theme.css | 141 ++++++++++++++---- public/themes/bootstrap4-dark-blue/theme.css | 141 ++++++++++++++---- public/themes/bootstrap4-light-blue/theme.css | 141 ++++++++++++++---- public/themes/fluent-light/theme.css | 141 ++++++++++++++---- public/themes/lara-dark-amber/theme.css | 141 ++++++++++++++---- public/themes/lara-dark-blue/theme.css | 141 ++++++++++++++---- public/themes/lara-dark-cyan/theme.css | 141 ++++++++++++++---- public/themes/lara-dark-green/theme.css | 141 ++++++++++++++---- public/themes/lara-dark-indigo/theme.css | 141 ++++++++++++++---- public/themes/lara-dark-pink/theme.css | 141 ++++++++++++++---- public/themes/lara-dark-teal/theme.css | 141 ++++++++++++++---- public/themes/lara-light-amber/theme.css | 141 ++++++++++++++---- public/themes/lara-light-blue/theme.css | 141 ++++++++++++++---- public/themes/lara-light-cyan/theme.css | 141 ++++++++++++++---- public/themes/lara-light-green/theme.css | 141 ++++++++++++++---- public/themes/lara-light-indigo/theme.css | 141 ++++++++++++++---- public/themes/lara-light-pink/theme.css | 141 ++++++++++++++---- public/themes/lara-light-teal/theme.css | 141 ++++++++++++++---- public/themes/luna-amber/theme.css | 141 ++++++++++++++---- public/themes/luna-blue/theme.css | 141 ++++++++++++++---- public/themes/luna-green/theme.css | 141 ++++++++++++++---- public/themes/luna-pink/theme.css | 141 ++++++++++++++---- public/themes/md-dark-indigo/theme.css | 141 ++++++++++++++---- public/themes/md-light-indigo/theme.css | 141 ++++++++++++++---- public/themes/mdc-dark-indigo/theme.css | 141 ++++++++++++++---- public/themes/mdc-light-indigo/theme.css | 141 ++++++++++++++---- public/themes/mira/theme.css | 141 ++++++++++++++---- public/themes/nano/theme.css | 141 ++++++++++++++---- public/themes/nova-accent/theme.css | 141 ++++++++++++++---- public/themes/nova-alt/theme.css | 141 ++++++++++++++---- public/themes/nova/theme.css | 141 ++++++++++++++---- public/themes/rhea/theme.css | 141 ++++++++++++++---- public/themes/saga-blue/theme.css | 141 ++++++++++++++---- public/themes/saga-green/theme.css | 141 ++++++++++++++---- public/themes/saga-orange/theme.css | 141 ++++++++++++++---- public/themes/soho-dark/theme.css | 141 ++++++++++++++---- public/themes/soho-light/theme.css | 141 ++++++++++++++---- public/themes/tailwind-light/theme.css | 141 ++++++++++++++---- public/themes/vela-blue/theme.css | 141 ++++++++++++++---- public/themes/vela-green/theme.css | 141 ++++++++++++++---- public/themes/vela-orange/theme.css | 141 ++++++++++++++---- public/themes/viva-dark/theme.css | 141 ++++++++++++++---- public/themes/viva-light/theme.css | 141 ++++++++++++++---- 50 files changed, 5093 insertions(+), 1421 deletions(-) diff --git a/components/lib/listbox/ListBoxBase.js b/components/lib/listbox/ListBoxBase.js index cf26ebb115..edc68ccdbc 100644 --- a/components/lib/listbox/ListBoxBase.js +++ b/components/lib/listbox/ListBoxBase.js @@ -46,6 +46,7 @@ const styles = ` cursor: pointer; position: relative; overflow: hidden; + outline: none; } .p-listbox-filter-container { diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index a4ad7751ff..0165efef92 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -17,7 +17,7 @@ export const MultiSelect = React.memo( const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = MultiSelectBase.getProps(inProps, context); - + const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null); const [filterState, setFilterState] = React.useState(''); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(props.inline); @@ -88,45 +88,6 @@ export const MultiSelect = React.memo( } }; - const onOptionKeyDown = (event) => { - const originalEvent = event.originalEvent; - const listItem = originalEvent.currentTarget; - - switch (originalEvent.which) { - //down - case 40: - const nextItem = findNextItem(listItem); - - nextItem && nextItem.focus(); - originalEvent.preventDefault(); - break; - - //up - case 38: - const prevItem = findPrevItem(listItem); - - prevItem && prevItem.focus(); - originalEvent.preventDefault(); - break; - - //enter and space - case 13: - case 32: - onOptionSelect(event); - originalEvent.preventDefault(); - break; - - //escape - case 27: - hide(); - DomHandler.focus(inputRef.current); - break; - - default: - break; - } - }; - const findNextItem = (item) => { const nextItem = item.nextElementSibling; @@ -147,34 +108,97 @@ export const MultiSelect = React.memo( } }; + const onArrowUpKey = (event) => { + if (!overlayVisibleState) { + show(); + setFocusedOptionIndex(visibleOptions.length - 1); + } else { + const target = focusedOptionIndex === null ? visibleOptions.length - 1 : focusedOptionIndex === 0 ? 0 : focusedOptionIndex - 1; + + setFocusedOptionIndex(target); + } + + event.preventDefault(); + }; + + const onArrowDownKey = (event) => { + if (!overlayVisibleState) { + show(); + setFocusedOptionIndex(0); + } else { + const targetIndex = focusedOptionIndex === null ? 0 : focusedOptionIndex + 1 > visibleOptions.length - 1 ? visibleOptions.length - 1 : focusedOptionIndex + 1; + + setFocusedOptionIndex(targetIndex); + } + + event.preventDefault(); + }; + + const onEnterKey = (event) => { + if (!overlayVisibleState) { + show(); + } else { + if (focusedOptionIndex !== null) { + onOptionSelect({ + originalEvent: event, + option: visibleOptions[focusedOptionIndex] + }); + } + } + + event.preventDefault(); + }; + + const onHomeKey = (event) => { + !overlayVisibleState && show(); + setFocusedOptionIndex(0); + event.preventDefault(); + }; + + const onEndKey = (event) => { + !overlayVisibleState && show(); + setFocusedOptionIndex(visibleOptions.length - 1); + event.preventDefault(); + }; + const onKeyDown = (event) => { - switch (event.which) { - //down - case 40: + switch (event.code) { + case 'ArrowUp': if (props.inline) break; + onArrowUpKey(event); + break; - if (!overlayVisibleState && event.altKey) { - show(); - event.preventDefault(); - } + case 'ArrowDown': + if (props.inline) break; + onArrowDownKey(event); break; - //space - case 32: + case 'Space': + case 'NumpadEnter': + case 'Enter': + if (props.inline) break; + onEnterKey(event); + break; + + case 'Home': + if (props.inline) break; + onHomeKey(event); + event.preventDefault(); + break; + + case 'End': if (props.inline) break; - overlayVisibleState ? hide() : show(); + onEndKey(event); event.preventDefault(); break; - //escape - case 27: + case 'Escape': if (props.inline) break; hide(); break; - //tab - case 9: + case 'Tab': if (overlayVisibleState) { const firstFocusableElement = DomHandler.getFirstFocusableElement(overlayRef.current); @@ -742,7 +766,7 @@ export const MultiSelect = React.memo( role: 'listbox', 'aria-expanded': overlayVisibleState, disabled: props.disabled, - tabIndex: props.tabIndex, + tabIndex: !props.disabled ? props.tabIndex : -1, ...ariaProps }, ptm('input') @@ -769,6 +793,8 @@ export const MultiSelect = React.memo( onClick={onPanelClick} onOverlayHide={hide} filterValue={filterState} + focusedOptionIndex={focusedOptionIndex} + setFocusedOptionIndex={setFocusedOptionIndex} hasFilter={hasFilter} onFilterInputChange={onFilterInputChange} resetFilter={resetFilter} @@ -785,7 +811,6 @@ export const MultiSelect = React.memo( isAllSelected={isAllSelected} onOptionSelect={onOptionSelect} allowOptionSelect={allowOptionSelect} - onOptionKeyDown={onOptionKeyDown} in={overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js index 2746e9eff3..562a937dd9 100644 --- a/components/lib/multiselect/MultiSelectBase.js +++ b/components/lib/multiselect/MultiSelectBase.js @@ -48,7 +48,8 @@ const classes = { item: ({ itemProps: props }) => classNames('p-multiselect-item', { 'p-highlight': props.selected, - 'p-disabled': props.disabled + 'p-disabled': props.disabled, + 'p-focus': props.focusedOptionIndex === props.index }), checkboxContainer: 'p-checkbox p-component', checkboxIcon: 'p-checkbox-icon p-c', @@ -143,6 +144,7 @@ const styles = ` white-space: nowrap; position: relative; overflow: hidden; + outline: none; } .p-multiselect-header { @@ -184,6 +186,7 @@ const styles = ` position: absolute; top: 50%; margin-top: -.5rem; + right: 3rem; } .p-fluid .p-multiselect { diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js index 8d9464e66c..18d252cb0e 100644 --- a/components/lib/multiselect/MultiSelectItem.js +++ b/components/lib/multiselect/MultiSelectItem.js @@ -15,7 +15,9 @@ export const MultiSelectItem = React.memo((props) => { context: { selected: props.selected, disabled: props.disabled, - focused: focusedState + focused: focusedState, + focusedIndex: props.focusedIndex, + index: props.index } }); }; @@ -29,6 +31,8 @@ export const MultiSelectItem = React.memo((props) => { }; const onClick = (event) => { + props.setFocusedOptionIndex(props.index); + if (props.onClick) { props.onClick({ originalEvent: event, @@ -40,15 +44,6 @@ export const MultiSelectItem = React.memo((props) => { event.stopPropagation(); }; - const onKeyDown = (event) => { - if (props.onKeyDown) { - props.onKeyDown({ - originalEvent: event, - option: props.option - }); - } - }; - const checkboxIconProps = mergeProps( { className: cx('checkboxIcon') @@ -60,7 +55,7 @@ export const MultiSelectItem = React.memo((props) => { const checkboxIcon = props.selected ? IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, { selected: props.selected }) : null; const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label; - const tabIndex = props.disabled ? null : props.tabIndex || 0; + const tabIndex = props.disabled ? -1 : props.tabIndex; const checkboxContainerProps = mergeProps( { @@ -82,7 +77,6 @@ export const MultiSelectItem = React.memo((props) => { className: classNames(props.className, props.option.className, cx('item', { itemProps: props })), style: props.style, onClick: onClick, - onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, tabIndex: tabIndex, diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 7c475a01e3..e0702c8d8a 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -107,14 +107,16 @@ export const MultiSelectPanel = React.memo( return ( .p-inputtext { border-color: #ef9a9a; } diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index dc48df0fab..ba69e82390 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -1413,11 +1413,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #81c784; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #383838; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #383838; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 00c1645c4b..e591e7aa8d 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -1413,11 +1413,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ffd54f; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #383838; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #383838; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 8cc852741c..8e73324138 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -1416,11 +1416,100 @@ color: #151515; background: #8dd0ff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #20262e; border: 1px solid #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #3f4b5b; @@ -1431,8 +1520,14 @@ box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #3f4b5b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #3f4b5b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3f4b5b; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; @@ -1458,22 +1553,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f19ea6; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1490,9 +1575,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1500,7 +1582,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1531,19 +1617,23 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #151515; background: #8dd0ff; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #64bfff; + } + .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: rgba(255, 255, 255, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1559,15 +1649,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #3f4b5b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #3f4b5b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #3f4b5b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 2388d8eea3..b8d33e02c2 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -1416,11 +1416,100 @@ color: #ffffff; background: #007bff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ced4da; @@ -1431,8 +1520,14 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #efefef; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #efefef; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #efefef; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; @@ -1458,22 +1553,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: #495057; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #dc3545; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #212529; @@ -1490,9 +1575,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1500,7 +1582,11 @@ right: 0.75rem; color: #495057; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6c757d; @@ -1531,19 +1617,23 @@ transition: box-shadow 0.15s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #ffffff; background: #007bff; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #0067d6; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #212529; background: #e9ecef; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1559,15 +1649,6 @@ color: #212529; background: transparent; } - .p-input-filled .p-multiselect { - background: #efefef; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #efefef; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #efefef; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 5b6ee64bec..7809f02929 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -1413,11 +1413,100 @@ color: #323130; background: #edebe9; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #605e5c; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #323130; @@ -1428,8 +1517,14 @@ box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #faf9f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #faf9f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #faf9f8; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } - .p-multiselect .p-multiselect-clear-icon { - color: #605e5c; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #a4252c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #ffffff; color: #323130; @@ -1487,9 +1572,6 @@ border-top-right-radius: 2px; border-top-left-radius: 2px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: #605e5c; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #605e5c; @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #323130; background: #edebe9; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #e1dfdd; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #323130; background: #f3f2f1; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: #323130; background: transparent; } - .p-input-filled .p-multiselect { - background: #faf9f8; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #faf9f8; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #faf9f8; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index daf52d7be5..03f46db27a 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -1430,11 +1430,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #fbbf24; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(251, 191, 36, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 44ec2a7fad..ef8586f593 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -1430,11 +1430,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(96, 165, 250, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #60a5fa; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(96, 165, 250, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(96, 165, 250, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index f0fc74a00c..ebb8d6400b 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -1430,11 +1430,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #22d3ee; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(34, 211, 238, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index dfa13ef5dd..710ca089f2 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -1430,11 +1430,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #34d399; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(52, 211, 153, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 3f38e06a6d..8775095ca4 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -1430,11 +1430,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 140, 248, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #818cf8; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 140, 248, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(129, 140, 248, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 8ecc84a73d..d19ccaa6b9 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -1430,11 +1430,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #f472b6; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(244, 114, 182, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index 71a9f44a3f..dc7162cce9 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -1430,11 +1430,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(45, 212, 191, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #2dd4bf; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(45, 212, 191, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(45, 212, 191, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index c9503caf9f..cf8d173f99 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -1430,11 +1430,100 @@ color: #b45309; background: #fffbeb; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #f59e0b; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem #fef08a; border-color: #f59e0b; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #b45309; background: #fffbeb; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(245, 158, 11, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #fef08a; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 5c7a57aabf..2c9e24fe47 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -1430,11 +1430,100 @@ color: #1d4ed8; background: #eff6ff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #3b82f6; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem #bfdbfe; border-color: #3b82f6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #1d4ed8; background: #eff6ff; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bfdbfe; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index c2c603c3e0..16dd45a914 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -1430,11 +1430,100 @@ color: #0e7490; background: #ecfeff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #06b6d4; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; border-color: #06b6d4; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #0e7490; background: #ecfeff; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(6, 182, 212, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a5f3fc; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index a5ed875ad3..425562dead 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -1430,11 +1430,100 @@ color: #047857; background: #f0fdfa; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #10b981; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #047857; background: #f0fdfa; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(16, 185, 129, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7f3d0; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 3ac5ed2e78..429a4e4ad7 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -1430,11 +1430,100 @@ color: #4338ca; background: #eef2ff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #6366f1; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem #c7d2fe; border-color: #6366f1; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #4338ca; background: #eef2ff; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(99, 102, 241, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7d2fe; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 12ded900b4..e05e707fea 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -1430,11 +1430,100 @@ color: #be185d; background: #fdf2f8; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ec4899; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; border-color: #ec4899; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #be185d; background: #fdf2f8; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(236, 72, 153, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #fbcfe8; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 29b854d549..533d8231f8 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -1430,11 +1430,100 @@ color: #0f766e; background: #0f766e; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #14b8a6; @@ -1445,8 +1534,14 @@ box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1472,22 +1567,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1504,9 +1589,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1514,7 +1596,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1545,19 +1631,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #0f766e; background: #0f766e; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99f6e4; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1573,15 +1663,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index d04ff1540b..985671cf93 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -1416,11 +1416,100 @@ color: #212529; background: #ffe082; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #191919; border: 1px solid #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ffe082; @@ -1431,8 +1520,14 @@ box-shadow: 0 0 0 0.1rem white; border-color: #ffe082; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1458,22 +1553,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #888888; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e57373; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #323232; color: #dedede; @@ -1490,9 +1575,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.429rem; } @@ -1500,7 +1582,11 @@ right: 0.429rem; color: #888888; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(136, 136, 136, 0.5333333333); @@ -1531,19 +1617,23 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #212529; background: #ffe082; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(255, 224, 130, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1559,15 +1649,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 8d062dc5a5..e939b06272 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -1416,11 +1416,100 @@ color: #212529; background: #81d4fa; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #191919; border: 1px solid #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #81d4fa; @@ -1431,8 +1520,14 @@ box-shadow: 0 0 0 0.1rem white; border-color: #81d4fa; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1458,22 +1553,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #888888; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e57373; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #323232; color: #dedede; @@ -1490,9 +1575,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.429rem; } @@ -1500,7 +1582,11 @@ right: 0.429rem; color: #888888; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(136, 136, 136, 0.5333333333); @@ -1531,19 +1617,23 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #212529; background: #81d4fa; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(129, 212, 250, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1559,15 +1649,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index bf722c2bbc..67a5a9ec32 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -1416,11 +1416,100 @@ color: #212529; background: #c5e1a5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #191919; border: 1px solid #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #c5e1a5; @@ -1431,8 +1520,14 @@ box-shadow: 0 0 0 0.1rem white; border-color: #c5e1a5; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1458,22 +1553,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #888888; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e57373; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #323232; color: #dedede; @@ -1490,9 +1575,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.429rem; } @@ -1500,7 +1582,11 @@ right: 0.429rem; color: #888888; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(136, 136, 136, 0.5333333333); @@ -1531,19 +1617,23 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #212529; background: #c5e1a5; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(197, 225, 165, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1559,15 +1649,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index de342a1722..37758d2db3 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -1416,11 +1416,100 @@ color: #212529; background: #f48fb1; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #191919; border: 1px solid #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #f48fb1; @@ -1431,8 +1520,14 @@ box-shadow: 0 0 0 0.1rem white; border-color: #f48fb1; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1458,22 +1553,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #888888; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e57373; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #323232; color: #dedede; @@ -1490,9 +1575,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.429rem; } @@ -1500,7 +1582,11 @@ right: 0.429rem; color: #888888; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(136, 136, 136, 0.5333333333); @@ -1531,19 +1617,23 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #212529; background: #f48fb1; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(244, 143, 177, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1559,15 +1649,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 739c669ec8..c836ad32c2 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -1433,11 +1433,100 @@ color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #1e1e1e; border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1448,8 +1537,14 @@ box-shadow: none; border-color: #9FA8DA; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; + .p-multiselect.p-variant-filled { + background: hsla(0deg, 0%, 100%, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1475,22 +1570,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 1rem 1rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; - } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1507,9 +1592,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 2rem; } @@ -1517,7 +1599,11 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -1548,19 +1634,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: hsla(0deg, 0%, 100%, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1576,15 +1666,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: hsla(0deg, 0%, 100%, 0.06); - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 4048f30453..07ed790ef5 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -1433,11 +1433,100 @@ color: #3F51B5; background: rgba(63, 81, 181, 0.12); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1448,8 +1537,14 @@ box-shadow: none; border-color: #3F51B5; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1475,22 +1570,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(0, 0, 0, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 1rem 1rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; - } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1507,9 +1592,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 2rem; } @@ -1517,7 +1599,11 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -1548,19 +1634,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1576,15 +1666,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index a91c5b9583..745ee08ace 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -1433,11 +1433,100 @@ color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #1e1e1e; border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1448,8 +1537,14 @@ box-shadow: none; border-color: #9FA8DA; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: hsla(0deg, 0%, 100%, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1475,22 +1570,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1507,9 +1592,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1517,7 +1599,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1548,19 +1634,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: hsla(0deg, 0%, 100%, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1576,15 +1666,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: hsla(0deg, 0%, 100%, 0.06); - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 832899f86b..03b43807e8 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -1433,11 +1433,100 @@ color: #3F51B5; background: rgba(63, 81, 181, 0.12); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1448,8 +1537,14 @@ box-shadow: none; border-color: #3F51B5; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1475,22 +1570,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(0, 0, 0, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1507,9 +1592,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1517,7 +1599,11 @@ right: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -1548,19 +1634,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1576,15 +1666,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index 144974cf10..d873599dfc 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -1435,11 +1435,100 @@ color: #2e3440; background: #d8dee9; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d8dee9; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #81a1c1; @@ -1450,8 +1539,14 @@ box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #eceff4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #eceff4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1477,22 +1572,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: #81a1c1; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #bf616a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #ffffff; color: #4c566a; @@ -1509,9 +1594,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1519,7 +1601,11 @@ right: 0.5rem; color: #81a1c1; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #81a1c1; @@ -1550,19 +1636,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #2e3440; background: #d8dee9; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #bec8da; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4c566a; background: transparent; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c0d0e0; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1578,15 +1668,6 @@ color: #4c566a; background: transparent; } - .p-input-filled .p-multiselect { - background: #eceff4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #eceff4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 270cdffd94..5d174c729e 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -1413,11 +1413,100 @@ color: #ffffff; background: #44a1d9; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #a5acb3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 1px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #1174c0; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.25rem; + .p-multiselect.p-variant-filled { + background: #f2f4f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f4f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.25rem 0.25rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 1px; border-bottom-right-radius: 1px; } - .p-multiselect .p-multiselect-clear-icon { - color: #697077; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #d8222f; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.125rem 0.25rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.25rem 0.25rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.25rem; - } .p-multiselect-panel { background: #ffffff; color: #343a3f; @@ -1487,9 +1572,6 @@ border-top-right-radius: 1px; border-top-left-radius: 1px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.25rem; } @@ -1497,7 +1579,11 @@ right: 0.25rem; color: #697077; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 1rem; height: 1rem; color: #878d96; @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #ffffff; background: #44a1d9; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #1174c0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #343a3f; background: #dde1e6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #90c9f5; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: #343a3f; background: transparent; } - .p-input-filled .p-multiselect { - background: #f2f4f8; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f2f4f8; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 46dc15ac7b..584a16b509 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -1413,11 +1413,100 @@ color: #ffffff; background: #e02365; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #212121; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #848484; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #a80000; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.429rem; } @@ -1497,7 +1579,11 @@ right: 0.429rem; color: #848484; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #a6a6a6; @@ -1528,19 +1614,23 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #ffffff; background: #e02365; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #e02365; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index a328254c3f..d63f2e988e 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -1416,11 +1416,100 @@ color: #ffffff; background: #007ad9; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #212121; @@ -1431,8 +1520,14 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1458,22 +1553,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #848484; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #a80000; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1490,9 +1575,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.429rem; } @@ -1500,7 +1582,11 @@ right: 0.429rem; color: #848484; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #a6a6a6; @@ -1531,19 +1617,23 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #ffffff; background: #007ad9; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #007ad9; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1559,15 +1649,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index cf283c650c..54fb418ce1 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -1416,11 +1416,100 @@ color: #ffffff; background: #007ad9; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #212121; @@ -1431,8 +1520,14 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1458,22 +1553,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #848484; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #a80000; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1490,9 +1575,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.429rem; } @@ -1500,7 +1582,11 @@ right: 0.429rem; color: #848484; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #a6a6a6; @@ -1531,19 +1617,23 @@ transition: background-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #ffffff; background: #007ad9; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #007ad9; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1559,15 +1649,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 3636e448d7..4fdfdbba5f 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1413,11 +1413,100 @@ color: #385048; background: #afd3c8; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #dadada; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #a6a6a6; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } - .p-multiselect .p-multiselect-clear-icon { - color: #a6a6a6; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e7a3a3; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #ffffff; color: #666666; @@ -1487,9 +1572,6 @@ border-top-right-radius: 2px; border-top-left-radius: 2px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.429rem; } @@ -1497,7 +1579,11 @@ right: 0.429rem; color: #a6a6a6; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #a6a6a6; @@ -1528,19 +1614,23 @@ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #385048; background: #afd3c8; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #aed3c7; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #666666; background: #f4f4f4; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: #666666; background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 9f0ff33bca..21ecd1a446 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1413,11 +1413,100 @@ color: #495057; background: #e3f2fd; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #2196f3; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196f3; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6c757d; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44336; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: #6c757d; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6c757d; @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #495057; background: #e3f2fd; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index c3ba8aef7c..848416417a 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1413,11 +1413,100 @@ color: #495057; background: #e8f5e9; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #4caf50; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4caf50; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6c757d; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44336; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: #6c757d; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6c757d; @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #495057; background: #e8f5e9; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 41f0920636..cb2519d539 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1413,11 +1413,100 @@ color: #495057; background: #fff3e0; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ffc107; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #ffc107; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6c757d; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44336; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: #6c757d; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6c757d; @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #495057; background: #fff3e0; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(255, 193, 7, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index e58542da78..d23b0688e9 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -1432,11 +1432,100 @@ color: #b19df7; background: rgba(177, 157, 247, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #1d1e27; border: 1px solid #3e4053; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #b19df7; @@ -1447,8 +1536,14 @@ box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #3e4053; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #3e4053; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3e4053; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1474,22 +1569,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #ff9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1506,9 +1591,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1516,7 +1598,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1547,19 +1633,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #b19df7; background: rgba(177, 157, 247, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(177, 157, 247, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e0d8fc; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1575,15 +1665,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #3e4053; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #3e4053; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #3e4053; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index ee60613996..957fef8f0b 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -1432,11 +1432,100 @@ color: #7254f3; background: #e2dcfc; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d3dbe3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #7254f3; @@ -1447,8 +1536,14 @@ box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f6f9fc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f6f9fc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1474,22 +1569,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #708da9; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #ff6767; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #043d75; @@ -1506,9 +1591,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1516,7 +1598,11 @@ right: 0.75rem; color: #708da9; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #708da9; @@ -1547,19 +1633,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #7254f3; background: #e2dcfc; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #cbc0fa; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #043d75; background: #f6f9fc; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7bbfa; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1575,15 +1665,6 @@ color: #043d75; background: transparent; } - .p-input-filled .p-multiselect { - background: #f6f9fc; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f6f9fc; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 010d7d46ba..5afb470ab2 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -1441,11 +1441,100 @@ color: #312e81; background: #eef2ff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d4d4d8; transition: none; border-radius: 0.375rem; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #d4d4d8; @@ -1456,8 +1545,14 @@ box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #fafafa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #fafafa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1483,22 +1578,12 @@ border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } - .p-multiselect .p-multiselect-clear-icon { - color: #71717a; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #f0a9a7; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #3f3f46; @@ -1515,9 +1600,6 @@ border-top-right-radius: 0.375rem; border-top-left-radius: 0.375rem; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1525,7 +1607,11 @@ right: 0.75rem; color: #71717a; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #71717a; @@ -1556,19 +1642,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #312e81; background: #eef2ff; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #e0e7ff; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #18181b; background: #f4f4f5; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366f1; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1584,15 +1674,6 @@ color: #3f3f46; background: transparent; } - .p-input-filled .p-multiselect { - background: #fafafa; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #fafafa; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 2f94363a34..d980247cc2 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1413,11 +1413,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #64b5f6; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 1681add80f..99cb80121d 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1413,11 +1413,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #81c784; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index f5a3d2f386..6b6b01f861 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1413,11 +1413,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ffd54f; @@ -1428,8 +1517,14 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1455,22 +1550,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1487,9 +1572,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1497,7 +1579,11 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1528,19 +1614,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1556,15 +1646,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 48e5c6b607..12e9cf1f13 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -1439,11 +1439,100 @@ color: #9eade6; background: rgba(158, 173, 230, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #0e1315; border: 2px solid #263238; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #2d3e44; @@ -1454,8 +1543,14 @@ box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #263238; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #263238; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #263238; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; @@ -1481,22 +1576,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.857rem; - } .p-multiselect.p-invalid.p-component { border-color: #f78c79; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1513,9 +1598,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1523,7 +1605,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1554,19 +1640,23 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #9eade6; background: rgba(158, 173, 230, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(158, 173, 230, 0.24); + } + .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: rgba(158, 173, 230, 0.08); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #9eade6; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1582,15 +1672,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #263238; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #263238; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #263238; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 24eb3f4841..6cd951e990 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -1439,11 +1439,100 @@ color: #585858; background: #ced6f1; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 2px solid #e1e1e1; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #cecece; @@ -1454,8 +1543,14 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f2f2f2; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f2f2; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f2f2f2; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; @@ -1481,22 +1576,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #898989; - right: 2.857rem; - } .p-multiselect.p-invalid.p-component { border-color: #f88c79; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #6c6c6c; @@ -1513,9 +1598,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1523,7 +1605,11 @@ right: 0.75rem; color: #898989; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #898989; @@ -1554,19 +1640,23 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #585858; background: #ced6f1; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: #aebbe8; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #6c6c6c; background: #edf0fa; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bbc7ee; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1582,15 +1672,6 @@ color: #6c6c6c; background: transparent; } - .p-input-filled .p-multiselect { - background: #f2f2f2; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f2f2f2; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f2f2f2; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } From 84d658729891f04045eeeac2ad69454b04e01b75 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 04:12:29 +0300 Subject: [PATCH 16/20] Listbox keyboard support change --- components/lib/listbox/ListBoxItem.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js index 75cee7594a..b2b7b53c8a 100644 --- a/components/lib/listbox/ListBoxItem.js +++ b/components/lib/listbox/ListBoxItem.js @@ -5,7 +5,6 @@ import { DomHandler, ObjectUtils } from '../utils/Utils'; export const ListBoxItem = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); - const mergeProps = useMergeProps(); const { @@ -57,7 +56,7 @@ export const ListBoxItem = React.memo((props) => { const onKeyDown = (event, index) => { const item = event.currentTarget; - switch (event.key) { + switch (event.code) { case 'ArrowDown': const nextItem = findNextItem(item); From f11f6a1f06d650dfbaf2fb11984724d93881fcfb Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 10:15:51 +0300 Subject: [PATCH 17/20] Update listbox --- components/lib/listbox/ListBox.js | 374 +++++++++++++++++++++++++- components/lib/listbox/ListBoxBase.js | 3 +- components/lib/listbox/ListBoxItem.js | 63 +---- 3 files changed, 370 insertions(+), 70 deletions(-) diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index 5abed41683..40d8ddda5e 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -15,11 +15,15 @@ export const ListBox = React.memo( const context = React.useContext(PrimeReactContext); const props = ListBoxBase.getProps(inProps, context); const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null); - + const searchTimeout = React.useRef(null); + const firstHiddenFocusableElement = React.useRef(null); + const lastHiddenFocusableElement = React.useRef(null); + const [startRangeIndex, setStartRangeIndex] = React.useState(-1); const [filterValueState, setFilterValueState] = React.useState(''); const elementRef = React.useRef(null); const virtualScrollerRef = React.useRef(null); const id = React.useRef(UniqueComponentId()); + const listRef = React.useRef(null); const optionTouched = React.useRef(false); const filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || ''; const hasFilter = filteredValue && filteredValue.trim().length > 0; @@ -35,15 +39,14 @@ export const ListBox = React.memo( useHandleStyle(ListBoxBase.css.styles, ptCallbacks.isUnstyled, { name: 'listbox' }); - const onOptionSelect = (event) => { - const option = event.option; - + const onOptionSelect = (event, option, index = -1) => { if (props.disabled || isOptionDisabled(option)) { return; } props.multiple ? onOptionSelectMultiple(event.originalEvent, option) : onOptionSelectSingle(event.originalEvent, option); optionTouched.current = false; + index !== -1 && setFocusedOptionIndex(index); }; const onOptionTouchEnd = () => { @@ -127,6 +130,307 @@ export const ListBox = React.memo( } }; + const hasSelectedOption = () => { + return ObjectUtils.isNotEmpty(props.value); + }; + + const isOptionGroup = (option) => { + return props.optionGroupLabel && option.optionGroup && option.group; + }; + + const isValidOption = (option) => { + return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option)); + }; + + const isValidSelectedOption = (option) => { + return isValidOption(option) && isSelected(option); + }; + + const findFirstOptionIndex = () => { + return visibleOptions.findIndex((option) => isValidOption(option)); + }; + + const findLastOptionIndex = () => { + return ObjectUtils.findLastIndex(visibleOptions, (option) => isValidOption(option)); + }; + + const findNextOptionIndex = (index) => { + const matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index; + }; + + const findPrevOptionIndex = (index) => { + const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex : index; + }; + + const focusedOptionId = () => { + return focusedOptionIndex !== -1 ? `${id.current}_${focusedOptionIndex}` : null; + }; + + const findNearestSelectedOptionIndex = (index, firstCheckUp = false) => { + let matchedOptionIndex = -1; + + if (hasSelectedOption) { + if (firstCheckUp) { + matchedOptionIndex = findPrevSelectedOptionIndex(index); + matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex; + } else { + matchedOptionIndex = findNextSelectedOptionIndex(index); + matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex; + } + } + + return matchedOptionIndex > -1 ? matchedOptionIndex : index; + }; + + const isOptionMatched = (option) => { + return isValidOption(option) && getOptionLabel(option)?.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.toLocaleLowerCase(props.filterLocale)); + }; + + const searchOptions = (event, char) => { + searchValue = (searchValue || '') + char; + + let optionIndex = -1; + + if (ObjectUtils.isNotEmpty(searchValue)) { + if (focusedOptionIndex !== -1) { + optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex((option) => isOptionMatched(option)); + optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex((option) => isOptionMatched(option)) : optionIndex + focusedOptionIndex; + } else { + optionIndex = visibleOptions.findIndex((option) => isOptionMatched(option)); + } + + if (optionIndex === -1 && focusedOptionIndex === -1) { + optionIndex = findFirstFocusedOptionIndex(); + } + + if (optionIndex !== -1) { + changeFocusedOptionIndex(event, optionIndex); + } + } + + if (searchTimeout.current) { + clearTimeout(searchTimeout.current); + } + + searchTimeout.current = setTimeout(() => { + searchValue = ''; + searchTimeout.current = null; + }, 500); + }; + + const findNextSelectedOptionIndex = (index) => { + const matchedOptionIndex = hasSelectedOption && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidSelectedOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1; + }; + + const findPrevSelectedOptionIndex = (index) => { + const matchedOptionIndex = hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidSelectedOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex : -1; + }; + + const onOptionSelectRange = (event, start = -1, end = -1) => { + start === -1 && (start = findNearestSelectedOptionIndex(end, true)); + end === -1 && (end = findNearestSelectedOptionIndex(start)); + + if (start !== -1 && end !== -1) { + const rangeStart = Math.min(start, end); + const rangeEnd = Math.max(start, end); + const value = visibleOptions + .slice(rangeStart, rangeEnd + 1) + .filter((option) => isValidOption(option)) + .map((option) => getOptionValue(option)); + + updateModel(event, value); + } + }; + + const findFirstFocusedOptionIndex = () => { + const selectedIndex = findFirstSelectedOptionIndex(); + + return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex; + }; + + const changeFocusedOptionIndex = (event, index) => { + if (focusedOptionIndex !== index) { + setFocusedOptionIndex(index); + scrollInView(); + + if (props.selectOnFocus && !props.multiple) { + onOptionSelect(event, visibleOptions[index]); + } + } + }; + + const onArrowDownKey = (event) => { + const optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : findFirstFocusedOptionIndex(); + + if (props.multiple && event.shiftKey) { + onOptionSelectRange(event, startRangeIndex, optionIndex); + } + + changeFocusedOptionIndex(event, optionIndex); + event.preventDefault(); + }; + + const onArrowUpKey = (event) => { + const optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : findLastFocusedOptionIndex(); + + if (props.multiple && event.shiftKey) { + onOptionSelectRange(event, optionIndex, startRangeIndex); + } + + changeFocusedOptionIndex(event, optionIndex); + event.preventDefault(); + }; + + const onEnterKey = (event) => { + if (focusedOptionIndex !== -1) { + if (props.multiple && event.shiftKey) onOptionSelectRange(event, focusedOptionIndex); + else onOptionSelect(event, visibleOptions[focusedOptionIndex]); + } + + event.preventDefault(); + }; + + const onSpaceKey = (event) => { + onEnterKey(event); + }; + + const onShiftKey = () => { + setStartRangeIndex(focusedOptionIndex); + }; + + const onHomeKey = (event, pressedInInputText = false) => { + if (pressedInInputText) { + event.currentTarget.setSelectionRange(0, 0); + setFocusedOptionIndex(-1); + } else { + let metaKey = event.metaKey || event.ctrlKey; + let optionIndex = findFirstOptionIndex(); + + if (props.multiple && event.shiftKey && metaKey) { + onOptionSelectRange(event, optionIndex, startRangeIndex); + } + + changeFocusedOptionIndex(event, optionIndex); + } + + event.preventDefault(); + }; + + const onEndKey = (event, pressedInInputText = false) => { + if (pressedInInputText) { + const target = event.currentTarget; + const len = target.value.length; + + target.setSelectionRange(len, len); + focusedOptionIndex = -1; + } else { + let metaKey = event.metaKey || event.ctrlKey; + let optionIndex = findLastOptionIndex(); + + if (props.multiple && event.shiftKey && metaKey) { + onOptionSelectRange(event, startRangeIndex, optionIndex); + } + + changeFocusedOptionIndex(event, optionIndex); + } + + event.preventDefault(); + }; + + const onPageUpKey = (event) => { + scrollInView(0); + event.preventDefault(); + }; + + const onPageDownKey = (event) => { + scrollInView(visibleOptions.length - 1); + event.preventDefault(); + }; + + const onKeyDown = (event) => { + const metaKey = event.metaKey || event.ctrlKey; + + switch (event.code) { + case 'ArrowDown': + onArrowDownKey(event); + break; + + case 'ArrowUp': + onArrowUpKey(event); + break; + + case 'Home': + onHomeKey(event); + break; + + case 'End': + onEndKey(event); + break; + + case 'PageDown': + onPageDownKey(event); + break; + + case 'PageUp': + onPageUpKey(event); + break; + + case 'Enter': + case 'NumpadEnter': + case 'Space': + onSpaceKey(event); + event.preventDefault(); + break; + + case 'Tab': + //NOOP + break; + + case 'ShiftLeft': + case 'ShiftRight': + onShiftKey(event); + break; + + default: + if (props.multiple && event.code === 'KeyA' && metaKey) { + const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option)); + + updateModel(event, value); + + event.preventDefault(); + break; + } + + if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + searchOptions(event, event.key); + event.preventDefault(); + } + + break; + } + }; + + const scrollInView = (index = -1) => { + setTimeout(() => { + const idx = index !== -1 ? `${id.current}_${index}` : focusedOptionId(); + const element = listRef.current.querySelector(`li[id="${idx}"]`); + + if (element) { + element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }); + } else if (props.virtualScrollerOptions) { + virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(index !== -1 ? index : props.focusedOptionIndex); + } + }, 0); + }; + const onFilter = (event) => { virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0); @@ -233,6 +537,30 @@ export const ListBox = React.memo( return option && option['disabled'] !== undefined ? option['disabled'] : false; }; + const onFirstHiddenFocus = () => { + DomHandler.focus(listRef.current); + + const firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])'); + + lastHiddenFocusableElement.current.tabIndex = DomHandler.isElement(firstFocusableEl) ? undefined : -1; + firstHiddenFocusableElement.current.tabIndex = -1; + }; + + const onLastHiddenFocus = (event) => { + const relatedTarget = event.relatedTarget; + + if (relatedTarget === listRef.current) { + const firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])'); + + DomHandler.focus(firstFocusableEl); + firstHiddenFocusableElement.current.tabIndex = undefined; + } else { + DomHandler.focus(firstHiddenFocusableElement.current); + } + + astHiddenFocusableElement.current.tabIndex = -1; + }; + const getOptionGroupRenderKey = (optionGroup) => { return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel); }; @@ -329,10 +657,8 @@ export const ListBox = React.memo( template={props.itemTemplate} selected={isSelected(option)} onClick={onOptionSelect} - length={visibleOptions.length} index={j} focusedOptionIndex={focusedOptionIndex} - setFocusedOptionIndex={setFocusedOptionIndex} onTouchEnd={onOptionTouchEnd} disabled={disabled} ptCallbacks={ptCallbacks} @@ -378,9 +704,7 @@ export const ListBox = React.memo( key={optionKey} label={optionLabel} index={index} - length={visibleOptions.length} focusedOptionIndex={focusedOptionIndex} - setFocusedOptionIndex={setFocusedOptionIndex} option={option} style={style} template={props.itemTemplate} @@ -433,6 +757,7 @@ export const ListBox = React.memo( style: ptCallbacks.sx('list', { options }), className: ptCallbacks.cx('list', { options }), role: 'listbox', + tabIndex: '-1', 'aria-multiselectable': props.multiple, ...ariaProps }, @@ -450,9 +775,12 @@ export const ListBox = React.memo( const listProps = mergeProps( { + ref: listRef, className: ptCallbacks.cx('list'), role: 'listbox', 'aria-multiselectable': props.multiple, + tabIndex: '-1', + onKeyDown: onKeyDown, ...ariaProps }, ptCallbacks.ptm('list') @@ -489,11 +817,41 @@ export const ListBox = React.memo( ptCallbacks.ptm('root') ); + const hiddenFirstElement = mergeProps( + { + ref: firstHiddenFocusableElement, + role: 'presentation', + 'aria-hidden': 'true', + className: 'p-hidden-accessible p-hidden-focusable', + tabIndex: !props.disabled ? props.tabIndex : -1, + onFocus: onFirstHiddenFocus, + 'data-p-hidden-accessible': true, + 'data-p-hidden-focusable': true + }, + ptCallbacks.ptm('hiddenFirstFocusableEl') + ); + + const hiddenLastElement = mergeProps( + { + ref: lastHiddenFocusableElement, + role: 'presentation', + 'aria-hidden': 'true', + className: 'p-hidden-accessible p-hidden-focusable', + tabIndex: !props.disabled ? props.tabIndex : -1, + onFocus: onLastHiddenFocus, + 'data-p-hidden-accessible': true, + 'data-p-hidden-focusable': true + }, + ptCallbacks.ptm('hiddenFirstFocusableEl') + ); + return ( <>
+ {header}
{list}
+
{hasTooltip && } diff --git a/components/lib/listbox/ListBoxBase.js b/components/lib/listbox/ListBoxBase.js index edc68ccdbc..80d9dbffd7 100644 --- a/components/lib/listbox/ListBoxBase.js +++ b/components/lib/listbox/ListBoxBase.js @@ -4,7 +4,7 @@ import { classNames } from '../utils/Utils'; const classes = { itemGroup: 'p-listbox-item-group', emptyMessage: 'p-listbox-empty-message', - list: ({ props, options }) => (props.virtualScrollerOptions ? classNames('p-listbox-list', options.className) : 'p-listbox-list'), + list: 'p-listbox-list', wrapper: ({ props }) => classNames('p-listbox-list-wrapper', props.listClassName), root: ({ props }) => classNames( @@ -87,6 +87,7 @@ export const ListBoxBase = ComponentBase.extend({ filterPlaceholder: null, filterTemplate: null, filterValue: null, + selectOnFocus: false, id: null, itemTemplate: null, listClassName: null, diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js index b2b7b53c8a..db5f7e8a0c 100644 --- a/components/lib/listbox/ListBoxItem.js +++ b/components/lib/listbox/ListBoxItem.js @@ -31,19 +31,6 @@ export const ListBoxItem = React.memo((props) => { setFocusedState(false); }; - const onClick = (event, index) => { - if (props.onClick) { - props.onClick({ - originalEvent: event, - option: props.option - }); - } - - props.setFocusedOptionIndex(index); - - event.preventDefault(); - }; - const onTouchEnd = (event) => { if (props.onTouchEnd) { props.onTouchEnd({ @@ -53,52 +40,6 @@ export const ListBoxItem = React.memo((props) => { } }; - const onKeyDown = (event, index) => { - const item = event.currentTarget; - - switch (event.code) { - case 'ArrowDown': - const nextItem = findNextItem(item); - - props.setFocusedOptionIndex(index + 1 > props.length - 1 ? props.length - 1 : index + 1); - - nextItem && nextItem.focus(); - - event.preventDefault(); - break; - - case 'ArrowUp': - const prevItem = findPrevItem(item); - - props.setFocusedOptionIndex(index - 1 < 0 ? 0 : index - 1); - - prevItem && prevItem.focus(); - - event.preventDefault(); - break; - - case 'Home': - props.setFocusedOptionIndex(0); - event.preventDefault(); - break; - - case 'End': - props.setFocusedOptionIndex(props.length - 1); - event.preventDefault(); - break; - - case 'Enter': - case 'NumpadEnter': - case 'Space': - onClick(event, props.focusedOptionIndex); - event.preventDefault(); - break; - - default: - break; - } - }; - const findNextItem = (item) => { const nextItem = item.nextElementSibling; @@ -115,11 +56,11 @@ export const ListBoxItem = React.memo((props) => { const itemProps = mergeProps( { + id: props.id, className: cx('item', { props }), style: props.style, - onClick: (event) => onClick(event, props.index), + onClick: (event) => props.onClick(event, props.option, props.index), onTouchEnd: onTouchEnd, - onKeyDown: (event) => onKeyDown(event, props.focusedOptionIndex), onFocus: onFocus, onBlur: onBlur, tabIndex: '-1', From e72986d20e04eb0c58f46d0d61e509f7159bfad0 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 11:09:10 +0300 Subject: [PATCH 18/20] Update dropdown --- components/lib/dropdown/Dropdown.js | 333 ++++++++++++++++++++--- components/lib/dropdown/DropdownBase.js | 2 + components/lib/dropdown/DropdownItem.js | 5 +- components/lib/dropdown/DropdownPanel.js | 5 +- 4 files changed, 300 insertions(+), 45 deletions(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index 36bd41bee9..9fdfb241e0 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -17,11 +17,14 @@ export const Dropdown = React.memo( const context = React.useContext(PrimeReactContext); const props = DropdownBase.getProps(inProps, context); const [filterState, setFilterState] = React.useState(''); + const [clicked, setClicked] = React.useState(false); const [focusedState, setFocusedState] = React.useState(false); const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const elementRef = React.useRef(null); const overlayRef = React.useRef(null); + const firstHiddenFocusableElementOnOverlay = React.useRef(null); + const lastHiddenFocusableElementOnOverlay = React.useRef(null); const inputRef = React.useRef(props.inputRef); const focusInputRef = React.useRef(props.focusInputRef); const virtualScrollerRef = React.useRef(null); @@ -79,6 +82,18 @@ export const Dropdown = React.memo( } }; + const onFirstHiddenFocus = (event) => { + const focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current; + + DomHandler.focus(focusableEl); + }; + + const onLastHiddenFocus = (event) => { + const focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current; + + DomHandler.focus(focusableEl); + }; + const isClearClicked = (event) => { return DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'clearicon') || DomHandler.isAttributeEquals(event.target.parentElement || event.target, 'data-pc-section', 'filterclearicon'); }; @@ -101,6 +116,8 @@ export const Dropdown = React.memo( DomHandler.focus(focusInputRef.current); overlayVisibleState ? hide() : show(); } + + setClicked(true); }; const onInputFocus = (event) => { @@ -138,6 +155,17 @@ export const Dropdown = React.memo( } }; + const onOptionSelect = (event, option, isHide = true) => { + const value = getOptionValue(option); + + selectItem({ + originalEvent: event, + option: value + }); + + isHide && hide(true); + }; + const onPanelClick = (event) => { OverlayService.emit('overlay-click', { originalEvent: event, @@ -146,13 +174,21 @@ export const Dropdown = React.memo( }; const onInputKeyDown = (event) => { + if (props.disabled || DomHandler.isAndroid()) { + event.preventDefault(); + + return; + } + + const metaKey = event.metaKey || event.ctrlKey; + switch (event.code) { case 'ArrowDown': - onDownKey(event); + onArrowDownKey(event); break; case 'ArrowUp': - onUpKey(event); + onArrowUpKey(event); break; case 'ArrowLeft': @@ -168,6 +204,14 @@ export const Dropdown = React.memo( onEndKey(event); break; + case 'PageDown': + onPageDownKey(event); + break; + + case 'PageUp': + onPageUpKey(event); + break; + case 'Space': onSpaceKey(event, props.editable); break; @@ -178,24 +222,42 @@ export const Dropdown = React.memo( break; case 'Escape': + onEscapeKey(event); + break; + case 'Tab': - hide(); + onTabKey(event); + break; + + case 'Backspace': + onBackspaceKey(event, props.editable); + break; + + case 'ShiftLeft': + case 'ShiftRight': + //NOOP break; default: - search(event); + if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + !overlayVisibleState && show(); + !props.editable && searchOptions(event, event.key); + } + break; } + + setClicked(false); }; const onFilterInputKeyDown = (event) => { switch (event.code) { case 'ArrowDown': - onDownKey(event); + onArrowDownKey(event); break; case 'ArrowUp': - onUpKey(event); + onArrowUpKey(event); break; case 'ArrowLeft': @@ -205,7 +267,7 @@ export const Dropdown = React.memo( case 'Escape': case 'Enter': - hide(); + onEnterKey(event); event.preventDefault(); break; @@ -214,45 +276,180 @@ export const Dropdown = React.memo( } }; - const onUpKey = (event) => { - if (visibleOptions) { - if (!overlayVisibleState) { - show(); - setFocusedOptionIndex(visibleOptions.length - 1); + const hasFocusableElements = () => { + return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0; + }; + + const isOptionMatched = (option) => { + return isValidOption(option) && getOptionLabel(option)?.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)); + }; + + const isValidOption = (option) => { + return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option)); + }; + + const hasSelectedOption = () => { + return ObjectUtils.isNotEmpty(props.value); + }; + + const isValidSelectedOption = (option) => { + return isValidOption(option) && isSelected(option); + }; + + const findSelectedOptionIndex = () => { + return hasSelectedOption ? visibleOptions.findIndex((option) => isValidSelectedOption(option)) : -1; + }; + + const findFirstFocusedOptionIndex = () => { + const selectedIndex = findSelectedOptionIndex(); + + return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex; + }; + + const searchOptions = (event, char) => { + searchValue.current = (searchValue.current || '') + char; + + let optionIndex = -1; + let matched = false; + + if (ObjectUtils.isNotEmpty(searchValue.current)) { + if (focusedOptionIndex !== -1) { + optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex((option) => isOptionMatched(option)); + optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex((option) => isOptionMatched(option)) : optionIndex + focusedOptionIndex; } else { - const target = focusedOptionIndex === null ? visibleOptions.length - 1 : focusedOptionIndex === 0 ? 0 : focusedOptionIndex - 1; + optionIndex = visibleOptions.findIndex((option) => isOptionMatched(option)); + } + + if (optionIndex !== -1) { + matched = true; + } - setFocusedOptionIndex(target); + if (optionIndex === -1 && focusedOptionIndex === -1) { + optionIndex = findFirstFocusedOptionIndex(); + } + + if (optionIndex !== -1) { + changeFocusedOptionIndex(event, optionIndex); } } - event.preventDefault(); + if (searchTimeout.current) { + clearTimeout(searchTimeout.current); + } + + searchTimeout.current = setTimeout(() => { + searchValue.current = ''; + searchTimeout.current = null; + }, 500); + + return matched; }; - const onDownKey = (event) => { - if (visibleOptions) { - if (!overlayVisibleState) { - show(); - setFocusedOptionIndex(0); - } else { - const targetIndex = focusedOptionIndex === null ? 0 : focusedOptionIndex + 1 > visibleOptions.length - 1 ? visibleOptions.length - 1 : focusedOptionIndex + 1; + const findLastFocusedOptionIndex = () => { + const selectedIndex = findSelectedOptionIndex(); + + return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex; + }; + + const findFirstOptionIndex = () => { + return visibleOptions.findIndex((option) => isValidOption(option)); + }; + + const findLastOptionIndex = () => { + return ObjectUtils.findLastIndex(visibleOptions, (option) => isValidOption(option)); + }; + + const findNextOptionIndex = (index) => { + const matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index; + }; + + const findPrevOptionIndex = (index) => { + const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex : index; + }; + + const changeFocusedOptionIndex = (event, index) => { + if (focusedOptionIndex !== index) { + setFocusedOptionIndex(index); - setFocusedOptionIndex(targetIndex); + if (props.selectOnFocus) { + onOptionSelect(event, visibleOptions[index], false); } } + }; + + const onArrowDownKey = (event) => { + if (!overlayVisibleState) { + show(); + props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex()); + } else { + const optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex(); + + changeFocusedOptionIndex(event, optionIndex); + } event.preventDefault(); }; - const onHomeKey = (event) => { - !overlayVisibleState && show(); - setFocusedOptionIndex(0); + const onArrowUpKey = (event, pressedInInputText = false) => { + if (event.altKey && !pressedInInputText) { + if (focusedOptionIndex !== -1) { + onOptionSelect(event, visibleOptions[focusedOptionIndex]); + } + + state.overlayVisible && hide(); + event.preventDefault(); + } else { + const optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex(); + + changeFocusedOptionIndex(event, optionIndex); + + !overlayVisibleState && show(); + event.preventDefault(); + } + }; + + const onArrowLeftKey = (event, pressedInInputText = false) => { + pressedInInputText && setFocusedOptionIndex(-1); + }; + + const onHomeKey = (event, pressedInInputText = false) => { + if (pressedInInputText) { + event.currentTarget.setSelectionRange(0, 0); + setFocusedOptionIndex(-1); + } else { + changeFocusedOptionIndex(event, findFirstOptionIndex()); + + !overlayVisibleState && show(); + } + event.preventDefault(); }; - const onEndKey = (event) => { - !overlayVisibleState && show(); - setFocusedOptionIndex(visibleOptions.length - 1); + const onEndKey = (event, pressedInInputText = false) => { + if (pressedInInputText) { + const target = event.currentTarget; + const len = target.value.length; + + target.setSelectionRange(len, len); + setFocusedOptionIndex(-1); + } else { + changeFocusedOptionIndex(event, findLastOptionIndex()); + + !overlayVisibleState && show(); + } + + event.preventDefault(); + }; + + const onPageUpKey = (event) => { + event.preventDefault(); + }; + + const onPageDownKey = (event) => { event.preventDefault(); }; @@ -261,21 +458,45 @@ export const Dropdown = React.memo( }; const onEnterKey = (event) => { - if (overlayVisibleState) { - selectItem({ - originalEvent: event, - option: visibleOptions[focusedOptionIndex] - }); - hide(); + if (!overlayVisibleState) { + setFocusedOptionIndex(-1); + onArrowDownKey(event); } else { - show(); + if (focusedOptionIndex !== -1) { + onOptionSelect(event, visibleOptions[focusedOptionIndex]); + } + + hide(); } event.preventDefault(); }; - const onArrowLeftKey = (event, pressedInInputText = false) => { - pressedInInputText && setFocusedOptionIndex(null); + const onEscapeKey = (event) => { + overlayVisibleState && hide(); + event.preventDefault(); + }; + + const onTabKey = (event, pressedInInputText = false) => { + if (!pressedInInputText) { + if (overlayVisibleState && hasFocusableElements()) { + DomHandler.focus($refs.firstHiddenFocusableElementOnOverlay); + + event.preventDefault(); + } else { + if (focusedOptionIndex !== -1) { + onOptionSelect(event, visibleOptions[focusedOptionIndex]); + } + + overlayVisibleState && hide(); + } + } + }; + + const onBackspaceKey = (event, pressedInInputText = false) => { + if (pressedInInputText) { + !overlayVisibleState && show(); + } }; const findNextOption = (index) => { @@ -561,11 +782,13 @@ export const Dropdown = React.memo( }; const show = () => { + setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : props.editable ? -1 : findSelectedOptionIndex()); setOverlayVisibleState(true); }; const hide = () => { setOverlayVisibleState(false); + setClicked(false); }; const onFocus = () => { @@ -632,6 +855,10 @@ export const Dropdown = React.memo( return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option); }; + const isOptionGroup = (option) => { + return props.optionGroupLabel && option.optionGroup && option.group; + }; + const isOptionDisabled = (option) => { if (props.optionDisabled) { return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled); @@ -937,6 +1164,34 @@ export const Dropdown = React.memo( ptm('root') ); + const firstHiddenFocusableElementProps = mergeProps( + { + ref: firstHiddenFocusableElementOnOverlay, + role: 'presentation', + 'aria-hidden': 'true', + className: 'p-hidden-accessible p-hidden-focusable', + tabIndex: '0', + onFocus: onFirstHiddenFocus, + 'data-p-hidden-accessible': true, + 'data-p-hidden-focusable': true + }, + ptm('hiddenFirstFocusableEl') + ); + + const lastHiddenFocusableElementProps = mergeProps( + { + ref: lastHiddenFocusableElementOnOverlay, + role: 'presentation', + 'aria-hidden': 'true', + className: 'p-hidden-accessible p-hidden-focusable', + tabIndex: '0', + onFocus: onLastHiddenFocus, + 'data-p-hidden-accessible': true, + 'data-p-hidden-focusable': true + }, + ptm('hiddenLastFocusableEl') + ); + return ( <>
@@ -945,6 +1200,7 @@ export const Dropdown = React.memo( {labelElement} {clearIcon} {dropdownIcon} + +
{hasTooltip && } diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index 01d7c21929..f7ec9c3737 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -191,6 +191,8 @@ export const DropdownBase = ComponentBase.extend({ onShow: null, optionDisabled: null, optionGroupChildren: 'items', + selectOnFocus: false, + autoOptionFocus: false, optionGroupLabel: null, optionGroupTemplate: null, optionLabel: null, diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js index 4288b50a8b..bdb3460750 100644 --- a/components/lib/dropdown/DropdownItem.js +++ b/components/lib/dropdown/DropdownItem.js @@ -5,7 +5,7 @@ import { classNames, ObjectUtils } from '../utils/Utils'; export const DropdownItem = React.memo((props) => { const mergeProps = useMergeProps(); - const { ptm, cx, selected, disabled, option, label, index, focusedOptionIndex, setFocusedOptionIndex } = props; + const { ptm, cx, selected, disabled, option, label, index, focusedOptionIndex } = props; const getPTOptions = (key) => { return ptm(key, { @@ -17,8 +17,6 @@ export const DropdownItem = React.memo((props) => { }; const onClick = (event, i) => { - setFocusedOptionIndex(i); - if (props.onClick) { props.onClick({ originalEvent: event, @@ -38,6 +36,7 @@ export const DropdownItem = React.memo((props) => { 'aria-label': label, 'aria-selected': selected, 'data-p-highlight': selected, + 'data-p-focused': focusedOptionIndex === index, 'data-p-disabled': disabled }, getPTOptions('item', { selected, disabled, option, label }) diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index b8fe856ca5..5bfe4e3eb3 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -15,6 +15,7 @@ export const DropdownPanel = React.memo( const { ptm, cx, sx } = props; const context = React.useContext(PrimeReactContext); const virtualScrollerRef = React.useRef(null); + const filterInputRef = React.useRef(null); const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter; const filterOptions = { @@ -83,10 +84,8 @@ export const DropdownPanel = React.memo( key={optionKey} index={j} focusedOptionIndex={props.focusedOptionIndex} - setFocusedOptionIndex={props.setFocusedOptionIndex} label={optionLabel} option={option} - length={groupChildren.length} style={style} template={props.itemTemplate} selected={props.isSelected(option)} @@ -146,9 +145,7 @@ export const DropdownPanel = React.memo( key={optionKey} label={optionLabel} index={index} - length={props.visibleOptions.length} focusedOptionIndex={props.focusedOptionIndex} - setFocusedOptionIndex={props.setFocusedOptionIndex} option={option} style={style} template={props.itemTemplate} From c24e3e0de5a4d16ba85bf0231cd390f20290ab66 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 12:14:51 +0300 Subject: [PATCH 19/20] Update multiselect --- components/lib/multiselect/MultiSelect.js | 383 +++++++++++++++--- components/lib/multiselect/MultiSelectBase.js | 2 + components/lib/multiselect/MultiSelectItem.js | 7 +- .../lib/multiselect/MultiSelectPanel.js | 2 - 4 files changed, 340 insertions(+), 54 deletions(-) diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 0165efef92..b88958275d 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -18,10 +18,16 @@ export const MultiSelect = React.memo( const context = React.useContext(PrimeReactContext); const props = MultiSelectBase.getProps(inProps, context); const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null); + const [clicked, setClicked] = React.useState(false); const [filterState, setFilterState] = React.useState(''); + const [startRangeIndex, setStartRangeIndex] = React.useState(-1); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(props.inline); const elementRef = React.useRef(null); + const searchValue = React.useRef(null); + const searchTimeout = React.useRef(null); + const firstHiddenFocusableElementOnOverlay = React.useRef(null); + const lastHiddenFocusableElementOnOverlay = React.useRef(null); const inputRef = React.useRef(props.inputRef); const labelRef = React.useRef(null); const overlayRef = React.useRef(null); @@ -54,6 +60,18 @@ export const MultiSelect = React.memo( when: overlayVisibleState }); + const onFirstHiddenFocus = (event) => { + const focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current; + + DomHandler.focus(focusableEl); + }; + + const onLastHiddenFocus = (event) => { + const focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current; + + DomHandler.focus(focusableEl); + }; + const onPanelClick = (event) => { OverlayService.emit('overlay-click', { originalEvent: event, @@ -65,27 +83,63 @@ export const MultiSelect = React.memo( return !props.selectionLimit || !props.value || (props.value && props.value.length < props.selectionLimit); }; - const onOptionSelect = (event) => { - const { originalEvent, option } = event; + const findNextSelectedOptionIndex = (index) => { + const matchedOptionIndex = hasSelectedOption && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidSelectedOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1; + }; + + const findPrevSelectedOptionIndex = (index) => { + const matchedOptionIndex = hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidSelectedOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex : -1; + }; + + const findNearestSelectedOptionIndex = (index, firstCheckUp = false) => { + let matchedOptionIndex = -1; + + if (hasSelectedOption) { + if (firstCheckUp) { + matchedOptionIndex = findPrevSelectedOptionIndex(index); + matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex; + } else { + matchedOptionIndex = findNextSelectedOptionIndex(index); + matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex; + } + } + + return matchedOptionIndex > -1 ? matchedOptionIndex : index; + }; + + const onOptionSelectRange = (event, start = -1, end = -1) => { + start === -1 && (start = findNearestSelectedOptionIndex(end, true)); + end === -1 && (end = findNearestSelectedOptionIndex(start)); + if (start !== -1 && end !== -1) { + const rangeStart = Math.min(start, end); + const rangeEnd = Math.max(start, end); + const value = visibleOptions + .slice(rangeStart, rangeEnd + 1) + .filter((option) => isValidOption(option)) + .map((option) => getOptionValue(option)); + + updateModel(event, value); + } + }; + + const onOptionSelect = (event, option, index = -1) => { if (props.disabled || isOptionDisabled(option)) { return; } - const optionValue = getOptionValue(option); - const isUsed = isOptionValueUsed(option); - const selected = isSelected(option); - const allowSelect = allowOptionSelect(); + let selected = isSelected(option); + let value = null; - if (selected) { - updateModel( - originalEvent, - props.value.filter((val) => !ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey)), - option - ); - } else if (allowSelect) { - updateModel(originalEvent, [...(props.value || []), optionValue], option); - } + if (selected) value = props.value.filter((val) => !ObjectUtils.equals(val, getOptionValue(option), equalityKey)); + else value = [...(props.value || []), getOptionValue(option)]; + + updateModel(event, value); + index !== -1 && setFocusedOptionIndex(index); }; const findNextItem = (item) => { @@ -106,62 +160,140 @@ export const MultiSelect = React.memo( DomHandler.focus(inputRef.current); event.preventDefault(); } + + setClicked(true); }; - const onArrowUpKey = (event) => { + const onArrowDownKey = (event) => { if (!overlayVisibleState) { show(); - setFocusedOptionIndex(visibleOptions.length - 1); + props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex()); } else { - const target = focusedOptionIndex === null ? visibleOptions.length - 1 : focusedOptionIndex === 0 ? 0 : focusedOptionIndex - 1; + const optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex(); + + if (event.shiftKey) { + onOptionSelectRange(event, startRangeIndex, optionIndex); + } - setFocusedOptionIndex(target); + changeFocusedOptionIndex(event, optionIndex); } event.preventDefault(); }; - const onArrowDownKey = (event) => { + const onArrowUpKey = (event, pressedInInputText = false) => { + if (event.altKey && !pressedInInputText) { + if (focusedOptionIndex !== -1) { + onOptionSelect(event, visibleOptions[focusedOptionIndex]); + } + + overlayVisibleState && hide(); + event.preventDefault(); + } else { + const optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex(); + + changeFocusedOptionIndex(event, optionIndex); + + !overlayVisibleState && show(); + event.preventDefault(); + } + }; + + const onEnterKey = (event) => { if (!overlayVisibleState) { - show(); - setFocusedOptionIndex(0); + setFocusedOptionIndex(-1); + onArrowDownKey(event); } else { - const targetIndex = focusedOptionIndex === null ? 0 : focusedOptionIndex + 1 > visibleOptions.length - 1 ? visibleOptions.length - 1 : focusedOptionIndex + 1; + if (focusedOptionIndex !== -1) { + if (event.shiftKey) onOptionSelectRange(event, focusedOptionIndex); + else onOptionSelect(event, visibleOptions[focusedOptionIndex]); + } - setFocusedOptionIndex(targetIndex); + hide(); } event.preventDefault(); }; - const onEnterKey = (event) => { - if (!overlayVisibleState) { - show(); + const onHomeKey = (event, pressedInInputText = false) => { + const { currentTarget } = event; + + if (pressedInInputText) { + const len = currentTarget.value.length; + + currentTarget.setSelectionRange(0, event.shiftKey ? len : 0); + setFocusedOptionIndex(-1); } else { - if (focusedOptionIndex !== null) { - onOptionSelect({ - originalEvent: event, - option: visibleOptions[focusedOptionIndex] - }); + let metaKey = event.metaKey || event.ctrlKey; + let optionIndex = findFirstOptionIndex(); + + if (event.shiftKey && metaKey) { + onOptionSelectRange(event, optionIndex, startRangeIndex); + } + + changeFocusedOptionIndex(event, optionIndex); + + !overlayVisibleState && show(); + } + + event.preventDefault(); + }; + + const onEndKey = (event, pressedInInputText = false) => { + const { currentTarget } = event; + + if (pressedInInputText) { + const len = currentTarget.value.length; + + currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len); + focusedOptionIndex = -1; + } else { + let metaKey = event.metaKey || event.ctrlKey; + let optionIndex = findLastOptionIndex(); + + if (event.shiftKey && metaKey) { + onOptionSelectRange(event, startRangeIndex, optionIndex); } + + changeFocusedOptionIndex(event, optionIndex); + + !overlayVisibleState && show(); } event.preventDefault(); }; - const onHomeKey = (event) => { - !overlayVisibleState && show(); - setFocusedOptionIndex(0); + const onPageUpKey = (event) => { event.preventDefault(); }; - const onEndKey = (event) => { - !overlayVisibleState && show(); - setFocusedOptionIndex(visibleOptions.length - 1); + const onPageDownKey = (event) => { event.preventDefault(); }; + const onTabKey = (event, pressedInInputText = false) => { + if (!pressedInInputText) { + if (overlayVisibleState && hasFocusableElements()) { + DomHandler.focus(event.shiftKey ? lastHiddenFocusableElementOnOverlay.current : firstHiddenFocusableElementOnOverlay.current); + + event.preventDefault(); + } else { + if (focusedOptionIndex !== -1) { + onOptionSelect(event, visibleOptions[focusedOptionIndex]); + } + + overlayVisibleState && hide(filter); + } + } + }; + + const onShiftKey = () => { + setStartRangeIndex(focusedOptionIndex); + }; + const onKeyDown = (event) => { + const metaKey = event.metaKey || event.ctrlKey; + switch (event.code) { case 'ArrowUp': if (props.inline) break; @@ -193,26 +325,48 @@ export const MultiSelect = React.memo( event.preventDefault(); break; + case 'PageDown': + onPageDownKey(event); + break; + + case 'PageUp': + onPageUpKey(event); + break; + case 'Escape': if (props.inline) break; hide(); break; case 'Tab': - if (overlayVisibleState) { - const firstFocusableElement = DomHandler.getFirstFocusableElement(overlayRef.current); - - if (firstFocusableElement) { - firstFocusableElement.focus(); - event.preventDefault(); - } - } + onTabKey(event); + break; + case 'ShiftLeft': + case 'ShiftRight': + onShiftKey(event); break; default: + if (event.code === 'KeyA' && metaKey) { + const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option)); + + updateModel(event, value); + + event.preventDefault(); + break; + } + + if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + !overlayVisibleState && show(); + searchOptions(event); + event.preventDefault(); + } + break; } + + setClicked(false); }; const onSelectAll = (event) => { @@ -301,10 +455,14 @@ export const MultiSelect = React.memo( const show = () => { setOverlayVisibleState(true); + setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : findSelectedOptionIndex()); + DomHandler.focus(inputRef.current); }; const hide = () => { + setFocusedOptionIndex(-1); setOverlayVisibleState(false); + setClicked(false); }; const onOverlayEnter = (callback) => { @@ -500,10 +658,113 @@ export const MultiSelect = React.memo( return (!props.useOptionAsValue && props.optionValue) || (option && option['value'] !== undefined); }; + const isOptionGroup = (option) => { + return props.optionGroupLabel && option.optionGroup && option.group; + }; + + const hasSelectedOption = () => { + return ObjectUtils.isNotEmpty(props.value); + }; + + const hasFocusableElements = () => { + return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0; + }; + + const isOptionMatched = (option) => { + return isValidOption(option) && getOptionLabel(option)?.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)); + }; + + const isValidOption = (option) => { + return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option)); + }; + + const isValidSelectedOption = (option) => { + return isValidOption(option) && isSelected(option); + }; + const checkValidity = () => { return inputRef.current.checkValidity(); }; + const findSelectedOptionIndex = () => { + return hasSelectedOption ? visibleOptions?.findIndex((option) => isValidSelectedOption(option)) : -1; + }; + + const findFirstFocusedOptionIndex = () => { + const selectedIndex = findSelectedOptionIndex(); + + return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex; + }; + + const findLastFocusedOptionIndex = () => { + const selectedIndex = findSelectedOptionIndex(); + + return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex; + }; + + const findFirstOptionIndex = () => { + return visibleOptions.findIndex((option) => isValidOption(option)); + }; + + const findLastOptionIndex = () => { + return ObjectUtils.findLastIndex(visibleOptions, (option) => isValidOption(option)); + }; + + const findNextOptionIndex = (index) => { + const matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index; + }; + + const findPrevOptionIndex = (index) => { + const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidOption(option)) : -1; + + return matchedOptionIndex > -1 ? matchedOptionIndex : index; + }; + + const searchOptions = (event) => { + searchValue.current = (searchValue.current || '') + event.key; + + let optionIndex = -1; + + if (ObjectUtils.isNotEmpty(searchValue.current)) { + if (focusedOptionIndex !== -1) { + optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex((option) => isOptionMatched(option)); + optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex((option) => isOptionMatched(option)) : optionIndex + focusedOptionIndex; + } else { + optionIndex = visibleOptions.findIndex((option) => isOptionMatched(option)); + } + + if (optionIndex === -1 && focusedOptionIndex === -1) { + optionIndex = findFirstFocusedOptionIndex(); + } + + if (optionIndex !== -1) { + changeFocusedOptionIndex(event, optionIndex); + } + } + + if (searchTimeout.current) { + clearTimeout(searchTimeout.current); + } + + searchTimeout.current = setTimeout(() => { + searchValue.current = ''; + searchTimeout.current = null; + }, 500); + }; + + const changeFocusedOptionIndex = (event, index) => { + if (focusedOptionIndex !== index) { + setFocusedOptionIndex(index); + scrollInView(); + + if (props.selectOnFocus) { + onOptionSelect(event, visibleOptions[index], false); + } + } + }; + const removeChip = (event, item) => { const value = props.value.filter((val) => !ObjectUtils.equals(val, item, equalityKey)); @@ -772,6 +1033,34 @@ export const MultiSelect = React.memo( ptm('input') ); + const firstHiddenElementProps = mergeProps( + { + ref: firstHiddenFocusableElementOnOverlay, + role: 'presentation', + 'aria-hidden': true, + className: 'p-hidden-accessible p-hidden-focusable', + tabIndex: '0', + onFocus: onFirstHiddenFocus, + 'data-p-hidden-accessible': true, + 'data-p-hidden-focusable': true + }, + ptm('hiddenFirstFocusableEl') + ); + + const lastHiddenElementProps = mergeProps( + { + ref: lastHiddenFocusableElementOnOverlay, + role: 'presentation', + 'aria-hidden': true, + className: 'p-hidden-accessible p-hidden-focusable', + tabIndex: '0', + onFocus: onLastHiddenFocus, + 'data-p-hidden-accessible': true, + 'data-p-hidden-focusable': true + }, + ptm('hiddenLastFocusableEl') + ); + return ( <>
@@ -785,6 +1074,7 @@ export const MultiSelect = React.memo( {triggerIcon} )} + +
{hasTooltip && } diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js index 562a937dd9..9eb06ae3e7 100644 --- a/components/lib/multiselect/MultiSelectBase.js +++ b/components/lib/multiselect/MultiSelectBase.js @@ -223,6 +223,8 @@ export const MultiSelectBase = ComponentBase.extend({ filterBy: null, filterInputAutoFocus: true, filterLocale: undefined, + selectOnFocus: false, + autoOptionFocus: false, filterMatchMode: 'contains', filterPlaceholder: null, filterTemplate: null, diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js index 18d252cb0e..e91409ce8f 100644 --- a/components/lib/multiselect/MultiSelectItem.js +++ b/components/lib/multiselect/MultiSelectItem.js @@ -31,13 +31,8 @@ export const MultiSelectItem = React.memo((props) => { }; const onClick = (event) => { - props.setFocusedOptionIndex(props.index); - if (props.onClick) { - props.onClick({ - originalEvent: event, - option: props.option - }); + props.onClick(event, props.option); } event.preventDefault(); diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index e0702c8d8a..588362a156 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -110,7 +110,6 @@ export const MultiSelectPanel = React.memo( index={j} key={optionKey} focusedOptionIndex={props.focusedOptionIndex} - setFocusedOptionIndex={props.setFocusedOptionIndex} label={optionLabel} option={option} style={style} @@ -187,7 +186,6 @@ export const MultiSelectPanel = React.memo( hostName={props.hostName} key={optionKey} focusedOptionIndex={props.focusedOptionIndex} - setFocusedOptionIndex={props.setFocusedOptionIndex} label={optionLabel} option={option} style={style} From 286d33183bb0ccc400b9c4b1d110d642a0d75ffa Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 6 Feb 2024 12:18:54 +0300 Subject: [PATCH 20/20] Update accessibility docs --- components/doc/accordion/accessibilitydoc.js | 145 +++--- .../doc/autocomplete/accessibilitydoc.js | 257 +++++----- components/doc/breadcrumb/accessibilitydoc.js | 4 +- components/doc/button/accessibilitydoc.js | 81 ++-- components/doc/calendar/accessibilitydoc.js | 444 +++++++++--------- components/doc/captcha/accessibilitydoc.js | 21 +- components/doc/card/accessibilitydoc.js | 31 +- components/doc/carousel/accessibilitydoc.js | 212 ++++----- .../doc/cascadeselect/accessibilitydoc.js | 230 +++++---- components/doc/chart/accessibilitydoc.js | 5 +- components/doc/checkbox/accessibilitydoc.js | 69 ++- components/doc/chips/accessibilitydoc.js | 155 +++--- .../doc/colorpicker/accessibilitydoc.js | 211 ++++----- .../doc/confirmdialog/accessibilitydoc.js | 161 ++++--- .../doc/confirmpopup/accessibilitydoc.js | 143 +++--- .../doc/contextmenu/accessibilitydoc.js | 167 ++++--- .../doc/datascroller/accessibilitydoc.js | 21 +- components/doc/datatable/accessibilitydoc.js | 369 ++++++++------- components/doc/dataview/accessibilitydoc.js | 73 ++- .../doc/deferredcontent/accessibilitydoc.js | 35 +- components/doc/dialog/accessibilitydoc.js | 159 +++---- components/doc/divider/accessibilitydoc.js | 19 +- components/doc/dock/accessibilitydoc.js | 139 +++--- components/doc/dropdown/accessibilitydoc.js | 329 +++++++------ components/doc/editor/accessibilitydoc.js | 15 +- components/doc/fieldset/accessibilitydoc.js | 99 ++-- components/doc/fileupload/accessibilitydoc.js | 23 +- components/doc/galleria/accessibilitydoc.js | 219 +++++---- components/doc/gmap/accessibilitydoc.js | 13 +- components/doc/image/accessibilitydoc.js | 105 ++--- components/doc/inputmask/accessibilitydoc.js | 57 ++- .../doc/inputnumber/accessibilitydoc.js | 107 ++--- .../doc/inputswitch/accessibilitydoc.js | 69 ++- components/doc/inputtext/accessibilitydoc.js | 57 ++- .../doc/inputtextarea/accessibilitydoc.js | 57 ++- components/doc/keyfilter/accessibilitydoc.js | 13 +- components/doc/knob/accessibilitydoc.js | 141 +++--- components/doc/listbox/accessibilitydoc.js | 207 ++++---- components/doc/megamenu/accessibilitydoc.js | 179 ++++--- components/doc/mention/accessibilitydoc.js | 139 +++--- components/doc/menu/accessibilitydoc.js | 159 +++---- components/doc/menubar/accessibilitydoc.js | 187 ++++---- components/doc/message/accessibilitydoc.js | 75 ++- components/doc/messages/accessibilitydoc.js | 75 ++- .../doc/multiselect/accessibilitydoc.js | 427 +++++++++-------- .../multistatecheckbox/accessibilitydoc.js | 73 ++- components/doc/orderlist/accessibilitydoc.js | 261 +++++----- .../doc/organizationchart/accessibilitydoc.js | 91 ++-- .../doc/overlaypanel/accessibilitydoc.js | 143 +++--- components/doc/paginator/accessibilitydoc.js | 119 +++-- components/doc/panel/accessibilitydoc.js | 97 ++-- components/doc/panelmenu/accessibilitydoc.js | 263 +++++------ components/doc/password/accessibilitydoc.js | 69 ++- components/doc/picklist/accessibilitydoc.js | 267 ++++++----- .../doc/radiobutton/accessibilitydoc.js | 105 ++--- components/doc/rating/accessibilitydoc.js | 105 ++--- .../doc/scrollpanel/accessibilitydoc.js | 91 ++-- .../doc/selectbutton/accessibilitydoc.js | 67 ++- components/doc/sidebar/accessibilitydoc.js | 151 +++--- components/doc/slider/accessibilitydoc.js | 143 +++--- components/doc/speeddial/accessibilitydoc.js | 185 ++++---- .../doc/splitbutton/accessibilitydoc.js | 251 +++++----- components/doc/splitter/accessibilitydoc.js | 137 +++--- components/doc/steps/accessibilitydoc.js | 127 +++-- components/doc/tabmenu/accessibilitydoc.js | 127 +++-- components/doc/tabview/accessibilitydoc.js | 129 +++-- components/doc/tieredmenu/accessibilitydoc.js | 197 ++++---- components/doc/timeline/accessibilitydoc.js | 15 +- components/doc/toast/accessibilitydoc.js | 73 ++- .../doc/togglebutton/accessibilitydoc.js | 71 ++- components/doc/toolbar/accessibilitydoc.js | 23 +- components/doc/tooltip/accessibilitydoc.js | 53 +-- components/doc/tree/accessibilitydoc.js | 155 +++--- components/doc/treeselect/accessibilitydoc.js | 345 +++++++------- components/doc/treetable/accessibilitydoc.js | 235 +++++---- .../doc/tristatecheckbox/accessibilitydoc.js | 83 ++-- .../doc/virtualscroller/accessibilitydoc.js | 21 +- 77 files changed, 4973 insertions(+), 5202 deletions(-) diff --git a/components/doc/accordion/accessibilitydoc.js b/components/doc/accordion/accessibilitydoc.js index c2b50fe052..1c4ef9fa77 100644 --- a/components/doc/accordion/accessibilitydoc.js +++ b/components/doc/accordion/accessibilitydoc.js @@ -1,81 +1,78 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; export function AccessibilityDoc() { return ( - - -

Screen Reader

-

- Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the - value of the header property and can be customized by defining an aria-label or aria-labelledby via the headerProps property. -

-

- The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header. -

+ +

Screen Reader

+

+ Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the + value of the header property and can be customized by defining an aria-label or aria-labelledby via the headerProps property. +

+

+ The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header. +

-

Header Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the next the focusable element in the page tab sequence.
- shift + tab - Moves focus to the previous the focusable element in the page tab sequence.
- enter - Toggles the visibility of the content.
- space - Toggles the visibility of the content.
- down arrow - Moves focus to the next header.
- up arrow - Moves focus to the previous header.
- home - Moves focus to the first header.
- end - Moves focus to the last header.
-
- - +

Header Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the next the focusable element in the page tab sequence.
+ shift + tab + Moves focus to the previous the focusable element in the page tab sequence.
+ enter + Toggles the visibility of the content.
+ space + Toggles the visibility of the content.
+ down arrow + Moves focus to the next header.
+ up arrow + Moves focus to the previous header.
+ home + Moves focus to the first header.
+ end + Moves focus to the last header.
+
+ ); } diff --git a/components/doc/autocomplete/accessibilitydoc.js b/components/doc/autocomplete/accessibilitydoc.js index 9b5c84b2b0..1020bdc72b 100644 --- a/components/doc/autocomplete/accessibilitydoc.js +++ b/components/doc/autocomplete/accessibilitydoc.js @@ -1,4 +1,3 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; @@ -16,138 +15,136 @@ export function AccessibilityDoc() { }; return ( - - -

Screen Reader

-

- Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to{' '} - aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct - screen reader which option to read during keyboard navigation within the popup list. -

-

- In multiple mode, chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip. -

-

- The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the - input element. -

+ +

Screen Reader

+

+ Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to{' '} + aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct + screen reader which option to read during keyboard navigation within the popup list. +

+

+ In multiple mode, chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip. +

+

+ The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the + input element. +

- + -

Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element.
- up arrow - Highlights the previous item if popup is visible.
- down arrow - Highlights the next item if popup is visible.
- enter - Selects the highlighted item and closes the popup if popup is visible.
- home - Highlights the first item if popup is visible.
- end - Highlights the last item if popup is visible.
- escape - Hides the popup.
-
+

Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element.
+ up arrow + Highlights the previous item if popup is visible.
+ down arrow + Highlights the next item if popup is visible.
+ enter + Selects the highlighted item and closes the popup if popup is visible.
+ home + Highlights the first item if popup is visible.
+ end + Highlights the last item if popup is visible.
+ escape + Hides the popup.
+
-

Chips Input Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
- backspace - Deletes the previous chip if the input field is empty.
- left arrow - Moves focus to the previous chip if available and input field is empty.
-
+

Chips Input Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ backspace + Deletes the previous chip if the input field is empty.
+ left arrow + Moves focus to the previous chip if available and input field is empty.
+
-

Chip Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- left arrow - Moves focus to the previous chip if available.
- right arrow - Moves focus to the next chip, if there is none then input field receives the focus.
- backspace - Deletes the chips and adds focus to the input field.
-
- - +

Chip Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ left arrow + Moves focus to the previous chip if available.
+ right arrow + Moves focus to the next chip, if there is none then input field receives the focus.
+ backspace + Deletes the chips and adds focus to the input field.
+
+ ); } diff --git a/components/doc/breadcrumb/accessibilitydoc.js b/components/doc/breadcrumb/accessibilitydoc.js index 9b4f5a6580..ebf4233dff 100644 --- a/components/doc/breadcrumb/accessibilitydoc.js +++ b/components/doc/breadcrumb/accessibilitydoc.js @@ -3,7 +3,7 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext'; export function AccessibilityDoc() { return ( - +

Screen Reader

@@ -14,6 +14,6 @@ export function AccessibilityDoc() {

Keyboard Support

No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.

 - + ); } diff --git a/components/doc/button/accessibilitydoc.js b/components/doc/button/accessibilitydoc.js index 5e1e78d58e..0504d01973 100644 --- a/components/doc/button/accessibilitydoc.js +++ b/components/doc/button/accessibilitydoc.js @@ -1,4 +1,3 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; @@ -17,48 +16,46 @@ export function AccessibilityDoc() { }; return ( - - -

Screen Reader

-

- Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the - button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly. -

+ +

Screen Reader

+

+ Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is + icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly. +

- + -

Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the button.
- enter - Activates the button.
- space - Activates the button.
-
- - +

Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the button.
+ enter + Activates the button.
+ space + Activates the button.
+
+ ); } diff --git a/components/doc/calendar/accessibilitydoc.js b/components/doc/calendar/accessibilitydoc.js index 6e01f4501d..284012dba6 100644 --- a/components/doc/calendar/accessibilitydoc.js +++ b/components/doc/calendar/accessibilitydoc.js @@ -1,4 +1,3 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; @@ -18,238 +17,235 @@ export function AccessibilityDoc() { }; return ( - - -

Screen Reader

-

- Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to{' '} - aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the - popup. -

-

- The optional calendar button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the{' '} - chooseDate - key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be able - to notify users about the current value. -

+ +

Screen Reader

+

+ Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to{' '} + aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup. +

+

+ The optional calendar button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the{' '} + chooseDate + key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be able to + notify users about the current value. +

-

- Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth,{' '} - nextMonth,prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys. -

+

+ Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth, nextMonth, + prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys. +

-

- Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date - value. Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute. -

+

+ Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. + Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute. +

-

- Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and{' '} - pm keys. -

+

+ Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and pm{' '} + keys. +

-

- Calendar also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected. -

+

+ Calendar also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected. +

- + -

Choose Date Button Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
- space - Opens popup and moves focus to the selected date, if there is none focuses on today.
- enter - Opens popup and moves focus to the selected date, if there is none focuses on today.
-
+

Choose Date Button Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ space + Opens popup and moves focus to the selected date, if there is none focuses on today.
+ enter + Opens popup and moves focus to the selected date, if there is none focuses on today.
+
-

Popup Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- escape - Closes the popup and moves focus to the input element.
- tab - Moves focus to the next focusable element within the popup.
- shift + tab - Moves focus to the next focusable element within the popup.
-
+

Popup Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ escape + Closes the popup and moves focus to the input element.
+ tab + Moves focus to the next focusable element within the popup.
+ shift + tab + Moves focus to the next focusable element within the popup.
+
-

Header Buttons Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
- enter - Triggers the button action.
- space - Triggers the button action.
-
+

Header Buttons Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ enter + Triggers the button action.
+ space + Triggers the button action.
+
-

Date Grid Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- enter - Selects the date, closes the popup and moves focus to the input element.
- space - Selects the date, closes the popup and moves focus to the input element.
- up arrow - Moves focus to the same day of the previous week.
- down arrow - Moves focus to the same day of the next week.
- right arrow - Moves focus to the next day.
- left arrow - Moves focus to the previous day.
- home - Moves focus to the first day of the current week.
- end - Moves focus to the last day of the current week.
- page up - Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.
- shift + page up - Changes the date to previous year in date picker mode. Has no effect in month or year picker
- page down - Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.
- shift + page down - Changes the date to next year in date picker mode. Has no effect in month or year picker
-
+

Date Grid Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ enter + Selects the date, closes the popup and moves focus to the input element.
+ space + Selects the date, closes the popup and moves focus to the input element.
+ up arrow + Moves focus to the same day of the previous week.
+ down arrow + Moves focus to the same day of the next week.
+ right arrow + Moves focus to the next day.
+ left arrow + Moves focus to the previous day.
+ home + Moves focus to the first day of the current week.
+ end + Moves focus to the last day of the current week.
+ page up + Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.
+ shift + page up + Changes the date to previous year in date picker mode. Has no effect in month or year picker
+ page down + Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.
+ shift + page down + Changes the date to next year in date picker mode. Has no effect in month or year picker
+
-

Footer Buttons Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
- enter - Triggers the button action.
- space - Triggers the button action.
-
- - +

Footer Buttons Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ enter + Triggers the button action.
+ space + Triggers the button action.
+
+ ); } diff --git a/components/doc/captcha/accessibilitydoc.js b/components/doc/captcha/accessibilitydoc.js index f1d30ecee7..87ed1bb7f2 100644 --- a/components/doc/captcha/accessibilitydoc.js +++ b/components/doc/captcha/accessibilitydoc.js @@ -1,18 +1,15 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; export function AccessibilityDoc() { return ( - - -

- Refer to the{' '} - - Recaptcha Accessibility - {' '} - documentation for more information. -

- - + +

+ Refer to the{' '} + + Recaptcha Accessibility + {' '} + documentation for more information. +

+ ); } diff --git a/components/doc/card/accessibilitydoc.js b/components/doc/card/accessibilitydoc.js index 7b0227bf42..88a24c8bdd 100644 --- a/components/doc/card/accessibilitydoc.js +++ b/components/doc/card/accessibilitydoc.js @@ -1,4 +1,3 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; @@ -12,23 +11,21 @@ export function AccessibilityDoc() { }; return ( - - -

Screen Reader

-

- A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you - require to use one of the{' '} - - landmark - {' '} - roles like region, you may use the role property. -

+ +

Screen Reader

+

+ A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you + require to use one of the{' '} + + landmark + {' '} + roles like region, you may use the role property. +

- + -

Keyboard Support

-

Component does not include any interactive elements.

- - +

Keyboard Support

+

Component does not include any interactive elements.

+ ); } diff --git a/components/doc/carousel/accessibilitydoc.js b/components/doc/carousel/accessibilitydoc.js index 93bc109c61..d8bef5720a 100644 --- a/components/doc/carousel/accessibilitydoc.js +++ b/components/doc/carousel/accessibilitydoc.js @@ -1,120 +1,116 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; - import { DocSectionText } from '@/components/doc/common/docsectiontext'; import Link from 'next/link'; export function AccessibilityDoc() { return ( - - -

Screen Reader

-

- Carousel uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has aria-live{' '} - attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay. -

+ +

Screen Reader

+

+ Carousel uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has aria-live{' '} + attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay. +

-

- A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of the - item. Inactive slides are hidden from the readers with aria-hidden. -

+

+ A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of the item. + Inactive slides are hidden from the readers with aria-hidden. +

-

- Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default - respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps. -

+

+ Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default + respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps. +

-

- Quick navigation elements are button elements with an aria-label attribute referring to the aria.pageLabel of the locale API. Current page is marked with aria-current. -

+

+ Quick navigation elements are button elements with an aria-label attribute referring to the aria.pageLabel of the locale API. Current page is marked with aria-current. +

-

Next/Prev Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus through interactive elements in the carousel.
- enter - Activates navigation.
- space - Activates navigation.
-
+

Next/Prev Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus through interactive elements in the carousel.
+ enter + Activates navigation.
+ space + Activates navigation.
+
-

Quick Navigation Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus through the active slide link.
- enter - Activates the focused slide link.
- space - Activates the focused slide link.
- right arrow - Moves focus to the next slide link.
- left arrow - Moves focus to the previous slide link.
- home - Moves focus to the first slide link.
- end - Moves focus to the last slide link.
-
- - +

Quick Navigation Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus through the active slide link.
+ enter + Activates the focused slide link.
+ space + Activates the focused slide link.
+ right arrow + Moves focus to the next slide link.
+ left arrow + Moves focus to the previous slide link.
+ home + Moves focus to the first slide link.
+ end + Moves focus to the last slide link.
+
+ ); } diff --git a/components/doc/cascadeselect/accessibilitydoc.js b/components/doc/cascadeselect/accessibilitydoc.js index bcb9b083aa..c50f463481 100644 --- a/components/doc/cascadeselect/accessibilitydoc.js +++ b/components/doc/cascadeselect/accessibilitydoc.js @@ -1,4 +1,3 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; @@ -13,125 +12,122 @@ export function AccessibilityDoc() { }; return ( - - -

Screen Reader

-

- Value to describe the component can either be provided with aria-labelledby or aria-label props. The cascadeselect element has a combobox role in addition to aria-haspopup and aria-expanded{' '} - attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. -

-

- The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label,{' '} - aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and - added to each treeitem. -

+ +

Screen Reader

+

+ Value to describe the component can either be provided with aria-labelledby or aria-label props. The cascadeselect element has a combobox role in addition to aria-haspopup and aria-expanded{' '} + attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. +

+

+ The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label, aria-selected{' '} + and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. +

-

- If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element. -

+

+ If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element. +

- + -

Closed State Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the cascadeselect element.
- space - Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
- down arrow - Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
+

Closed State Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the cascadeselect element.
+ space + Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
+ down arrow + Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
+
-

Popup Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Hides the popup and moves focus to the next tabbable element.
- shift + tab - Hides the popup and moves focus to the previous tabbable element.
- enter - Selects the focused option and closes the popup.
- space - Selects the focused option and closes the popup.
- escape - Closes the popup, moves focus to the cascadeselect element.
- down arrow - Moves focus to the next option.
- up arrow - Moves focus to the previous option.
- right arrow - If option is closed, opens the option otherwise moves focus to the first child option.
- left arrow - If option is open, closes the option otherwise moves focus to the parent option.
-
- - +

Popup Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Hides the popup and moves focus to the next tabbable element.
+ shift + tab + Hides the popup and moves focus to the previous tabbable element.
+ enter + Selects the focused option and closes the popup.
+ space + Selects the focused option and closes the popup.
+ escape + Closes the popup, moves focus to the cascadeselect element.
+ down arrow + Moves focus to the next option.
+ up arrow + Moves focus to the previous option.
+ right arrow + If option is closed, opens the option otherwise moves focus to the first child option.
+ left arrow + If option is open, closes the option otherwise moves focus to the parent option.
+
+ ); } diff --git a/components/doc/chart/accessibilitydoc.js b/components/doc/chart/accessibilitydoc.js index b19e1b608d..4754a7b07c 100644 --- a/components/doc/chart/accessibilitydoc.js +++ b/components/doc/chart/accessibilitydoc.js @@ -1,4 +1,3 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; @@ -14,7 +13,7 @@ export function AccessibilityDoc() { }; return ( - +

Screen Reader

@@ -27,6 +26,6 @@ export function AccessibilityDoc() {

- + ); } diff --git a/components/doc/checkbox/accessibilitydoc.js b/components/doc/checkbox/accessibilitydoc.js index c882ab7a63..85cf17845e 100644 --- a/components/doc/checkbox/accessibilitydoc.js +++ b/components/doc/checkbox/accessibilitydoc.js @@ -1,4 +1,3 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; @@ -16,42 +15,40 @@ export function AccessibilityDoc() { }; return ( - - -

Screen Reader

-

- Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using{' '} - aria-labelledby, aria-label props. -

+ +

Screen Reader

+

+ Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using{' '} + aria-labelledby, aria-label props. +

- + -

Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the checkbox.
- space - Toggles the checked state.
-
- - +

Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the checkbox.
+ space + Toggles the checked state.
+
+ ); } diff --git a/components/doc/chips/accessibilitydoc.js b/components/doc/chips/accessibilitydoc.js index 524ff68850..4269f6e454 100644 --- a/components/doc/chips/accessibilitydoc.js +++ b/components/doc/chips/accessibilitydoc.js @@ -1,4 +1,3 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; @@ -16,86 +15,84 @@ export function AccessibilityDoc() { }; return ( - - -

Screen Reader

-

- Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. Chip list uses listbox role with{' '} - aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip. -

+ +

Screen Reader

+

+ Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. Chip list uses listbox role with aria-orientation{' '} + set to horizontal whereas each chip has the option role with aria-label set to the label of the chip. +

- + -

Input Field Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the input element
- enter - Adds a new chips using the input field value.
- backspace - Deletes the previous chip if the input field is empty.
- left arrow - Moves focus to the previous chip if available and input field is empty.
-
+

Input Field Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the input element
+ enter + Adds a new chips using the input field value.
+ backspace + Deletes the previous chip if the input field is empty.
+ left arrow + Moves focus to the previous chip if available and input field is empty.
+
-

Chip Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- left arrow - Moves focus to the previous chip if available.
- right arrow - Moves focus to the next chip, if there is none then input field receives the focus.
- backspace - Deletes the chips and adds focus to the input field.
-
- - +

Chip Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ left arrow + Moves focus to the previous chip if available.
+ right arrow + Moves focus to the next chip, if there is none then input field receives the focus.
+ backspace + Deletes the chips and adds focus to the input field.
+
+ ); } diff --git a/components/doc/colorpicker/accessibilitydoc.js b/components/doc/colorpicker/accessibilitydoc.js index 54ef923c9c..6b9b5c45d5 100644 --- a/components/doc/colorpicker/accessibilitydoc.js +++ b/components/doc/colorpicker/accessibilitydoc.js @@ -1,117 +1,114 @@ -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; export function AccessibilityDoc() { return ( - - -

Screen Reader

-

- Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen - readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats. -

+ +

Screen Reader

+

+ Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen + readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats. +

-

Closed State Keyboard Support of Popup ColorPicker

-
- - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the color picker button.
- space - Opens the popup and moves focus to the color slider.
-
+

Closed State Keyboard Support of Popup ColorPicker

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the color picker button.
+ space + Opens the popup and moves focus to the color slider.
+
-

Popup Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- enter - Selects the color and closes the popup.
- space - Selects the color and closes the popup.
- escape - Closes the popup, moves focus to the input.
-
+

Popup Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ enter + Selects the color and closes the popup.
+ space + Selects the color and closes the popup.
+ escape + Closes the popup, moves focus to the input.
+
-

Color Picker Slider

-
- - - - - - - - - - - - - -
KeyFunction
- arrow keys - Changes color.
-
+

Color Picker Slider

+
+ + + + + + + + + + + + + +
KeyFunction
+ arrow keys + Changes color.
+
-

Hue Slider

-
- - - - - - - - - - - - - -
KeyFunction
- - up arrow - down arrow - - Changes hue.
-
- - +

Hue Slider

+
+ + + + + + + + + + + + + +
KeyFunction
+ + up arrow + down arrow + + Changes hue.
+
+ ); } diff --git a/components/doc/confirmdialog/accessibilitydoc.js b/components/doc/confirmdialog/accessibilitydoc.js index a87426e19d..753cee3c95 100644 --- a/components/doc/confirmdialog/accessibilitydoc.js +++ b/components/doc/confirmdialog/accessibilitydoc.js @@ -1,27 +1,25 @@ import { CodeHighlight } from '@/components/doc/common/codehighlight'; -import { DevelopmentSection } from '@/components/doc/common/developmentsection'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; export function AccessibilityDoc() { return ( - - -

Screen Reader

-

- ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this - default behavior. In addition aria-modal is added since focus is kept within the popup. -

-

- It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. -

+ +

Screen Reader

+

+ ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default + behavior. In addition aria-modal is added since focus is kept within the popup. +

+

+ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. +

-

- When confirm function is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is - defined. -

+

+ When confirm function is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is + defined. +

- - {` + + {` const confirm = (event) => { confirmDialog({ trigger: event.currentTarget, @@ -37,77 +35,76 @@ const confirm = (event) => { `} - + -

- If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly. -

- - {` +

+ If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly. +

+ + {` setVisible(false)} message="Are you sure you want to proceed?" header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />