From 234c9a48d20ac70217f728e650932fe65d445b81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Wed, 20 Sep 2023 11:59:50 +0300 Subject: [PATCH] Fixed #4474 - Calendar: focus state update --- components/lib/calendar/BaseCalendar.vue | 3 ++- public/themes/arya-blue/theme.css | 6 ++++++ public/themes/arya-green/theme.css | 6 ++++++ public/themes/arya-orange/theme.css | 6 ++++++ public/themes/arya-purple/theme.css | 6 ++++++ public/themes/bootstrap4-dark-blue/theme.css | 6 ++++++ public/themes/bootstrap4-dark-purple/theme.css | 6 ++++++ public/themes/bootstrap4-light-blue/theme.css | 6 ++++++ public/themes/bootstrap4-light-purple/theme.css | 6 ++++++ public/themes/fluent-light/theme.css | 6 ++++++ public/themes/lara-dark-blue/theme.css | 6 ++++++ public/themes/lara-dark-indigo/theme.css | 6 ++++++ public/themes/lara-dark-purple/theme.css | 6 ++++++ public/themes/lara-dark-teal/theme.css | 6 ++++++ public/themes/lara-light-blue/theme.css | 6 ++++++ public/themes/lara-light-indigo/theme.css | 6 ++++++ public/themes/lara-light-purple/theme.css | 6 ++++++ public/themes/lara-light-teal/theme.css | 6 ++++++ public/themes/luna-amber/theme.css | 6 ++++++ public/themes/luna-blue/theme.css | 6 ++++++ public/themes/luna-green/theme.css | 6 ++++++ public/themes/luna-pink/theme.css | 6 ++++++ public/themes/md-dark-deeppurple/theme.css | 6 ++++++ public/themes/md-dark-indigo/theme.css | 6 ++++++ public/themes/md-light-deeppurple/theme.css | 6 ++++++ public/themes/md-light-indigo/theme.css | 6 ++++++ public/themes/mdc-dark-deeppurple/theme.css | 6 ++++++ public/themes/mdc-dark-indigo/theme.css | 6 ++++++ public/themes/mdc-light-deeppurple/theme.css | 6 ++++++ public/themes/mdc-light-indigo/theme.css | 6 ++++++ public/themes/mira/theme.css | 6 ++++++ public/themes/nano/theme.css | 6 ++++++ public/themes/nova-accent/theme.css | 6 ++++++ public/themes/nova-alt/theme.css | 6 ++++++ public/themes/nova-vue/theme.css | 6 ++++++ public/themes/nova/theme.css | 6 ++++++ public/themes/rhea/theme.css | 6 ++++++ public/themes/saga-blue/theme.css | 6 ++++++ public/themes/saga-green/theme.css | 6 ++++++ public/themes/saga-orange/theme.css | 6 ++++++ public/themes/saga-purple/theme.css | 6 ++++++ public/themes/soho-dark/theme.css | 6 ++++++ public/themes/soho-light/theme.css | 6 ++++++ public/themes/tailwind-light/theme.css | 6 ++++++ public/themes/vela-blue/theme.css | 6 ++++++ public/themes/vela-green/theme.css | 6 ++++++ public/themes/vela-orange/theme.css | 6 ++++++ public/themes/vela-purple/theme.css | 6 ++++++ public/themes/viva-dark/theme.css | 6 ++++++ public/themes/viva-light/theme.css | 6 ++++++ 50 files changed, 296 insertions(+), 1 deletion(-) diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue index 910fcfd04..60a7ac053 100644 --- a/components/lib/calendar/BaseCalendar.vue +++ b/components/lib/calendar/BaseCalendar.vue @@ -162,7 +162,8 @@ const classes = { 'p-calendar-timeonly': props.timeOnly, 'p-calendar-disabled': props.disabled, 'p-inputwrapper-filled': props.modelValue, - 'p-inputwrapper-focus': state.focused + 'p-inputwrapper-focus': state.focused, + 'p-focus': state.focused || state.overlayVisible } ], input: 'p-inputtext p-component', diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index a153297a5..eac26ee43 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -333,6 +333,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; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 27384a21f..400b5bca0 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -333,6 +333,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; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 18a65c779..7d6fe6c07 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -333,6 +333,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; diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index c60ad3e37..0fbcd29f1 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -333,6 +333,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; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 4a595be04..b6fe0c5a0 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -333,6 +333,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; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index c0cf00294..c3084b567 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -333,6 +333,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; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index a8170fc1a..5c4cc8276 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -333,6 +333,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; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index 608a456dc..bcbc7dbd2 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -333,6 +333,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; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index f4d6f7ef7..b6cfe5587 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -333,6 +333,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; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index c9cf1ae9c..b3ca2dcf0 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -333,6 +333,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(147, 197, 253, 0.5); + border-color: #93C5FD; +} .p-datepicker { padding: 0.5rem; diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 546970861..102417283 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -333,6 +333,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(165, 180, 252, 0.5); + border-color: #A5B4FC; +} .p-datepicker { padding: 0.5rem; diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index 9375e42b2..27ba9b821 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -333,6 +333,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(196, 181, 253, 0.5); + border-color: #C4B5FD; +} .p-datepicker { padding: 0.5rem; diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index 8ff5d0642..16514c0fa 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -333,6 +333,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(94, 234, 212, 0.5); + border-color: #5EEAD4; +} .p-datepicker { padding: 0.5rem; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index aac0fe4bd..db93241a7 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -333,6 +333,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; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 1c7836714..0802001ba 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -333,6 +333,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; diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index 2e5d2cbe6..57d827fb8 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -333,6 +333,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; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index cf6612e9f..33ac2b408 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -333,6 +333,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; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 89fc4dcb2..bd9dfbd14 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -333,6 +333,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; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index cd4926dbd..960192d75 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -333,6 +333,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; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index d23ac7069..01137e082 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -333,6 +333,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; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 3006e5503..4b4e9a412 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -333,6 +333,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; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 7bf16348b..cb29423ba 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -357,6 +357,12 @@ .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; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index d4d1cb11e..ecabe03c7 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -357,6 +357,12 @@ .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; diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 78515cad3..7102f9c07 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -357,6 +357,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; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index ec0b10b42..bcc4f8dce 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -357,6 +357,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; diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index bc6b9ac50..8ca80cc48 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -357,6 +357,12 @@ .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; diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index da8886ea4..466f03854 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -357,6 +357,12 @@ .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; diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 205e981b4..553188962 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -357,6 +357,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; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 5510498a3..71bd852d7 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -357,6 +357,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; diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index 4b3bdf2b5..7241f3380 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -361,6 +361,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; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index c77bf27c2..6cf244c0c 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -333,6 +333,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; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index d4735edd6..42512ca1f 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -333,6 +333,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; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index d35703a90..6f52f0b85 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -333,6 +333,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; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 8b4bbd57a..db7a289b7 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -333,6 +333,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 #c2e9d8; + border-color: #41b883; +} .p-datepicker { padding: 0.857rem; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index f79004283..2c78e7285 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -333,6 +333,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; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 6add30318..b7d91262e 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -333,6 +333,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; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index ab9121c51..ef3b175ff 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -333,6 +333,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; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index c63aa8354..0553b350b 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -333,6 +333,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; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 3439e0a37..8e6dff678 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -333,6 +333,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; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index ca85c5039..4338c053b 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -333,6 +333,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; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index ecb7a0fb6..3bc86812f 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -357,6 +357,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; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index fbd9301fe..51697a3eb 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -357,6 +357,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; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index b72d65882..6e8fe9b51 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -368,6 +368,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; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 94fe8ad98..dc20cdb2e 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -333,6 +333,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; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 9acf2f91d..d08d0c421 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -333,6 +333,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; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index aad533956..1ad467fe4 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -333,6 +333,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; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 7f14bc468..bfa933e9e 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -333,6 +333,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; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 4e5b90ddc..38c3590b7 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -365,6 +365,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; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 0d0b7dda9..7b49a6adf 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -365,6 +365,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;