From 4714b324c17e390568592e51ae80e1362af71dd9 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 11 Nov 2021 14:31:37 +0300 Subject: [PATCH] Fixed #1744, Fixed #1743, Fixed #1580 --- public/themes/arya-blue/theme.css | 39 +++- public/themes/arya-green/theme.css | 39 +++- public/themes/arya-orange/theme.css | 39 +++- public/themes/arya-purple/theme.css | 39 +++- public/themes/bootstrap4-dark-blue/theme.css | 39 +++- .../themes/bootstrap4-dark-purple/theme.css | 39 +++- public/themes/bootstrap4-light-blue/theme.css | 39 +++- .../themes/bootstrap4-light-purple/theme.css | 39 +++- public/themes/fluent-light/theme.css | 41 +++- public/themes/lara-dark-indigo/theme.css | 39 +++- public/themes/lara-dark-purple/theme.css | 39 +++- public/themes/lara-light-indigo/theme.css | 41 +++- public/themes/lara-light-purple/theme.css | 41 +++- public/themes/luna-amber/theme.css | 41 +++- public/themes/luna-blue/theme.css | 41 +++- public/themes/luna-green/theme.css | 41 +++- public/themes/luna-pink/theme.css | 41 +++- public/themes/md-dark-deeppurple/theme.css | 39 +++- public/themes/md-dark-indigo/theme.css | 39 +++- public/themes/md-light-deeppurple/theme.css | 39 +++- public/themes/md-light-indigo/theme.css | 39 +++- public/themes/mdc-dark-deeppurple/theme.css | 39 +++- public/themes/mdc-dark-indigo/theme.css | 39 +++- public/themes/mdc-light-deeppurple/theme.css | 39 +++- public/themes/mdc-light-indigo/theme.css | 39 +++- public/themes/nova-accent/theme.css | 41 +++- public/themes/nova-alt/theme.css | 41 +++- public/themes/nova-vue/theme.css | 41 +++- public/themes/nova/theme.css | 41 +++- public/themes/rhea/theme.css | 41 +++- public/themes/saga-blue/theme.css | 41 +++- public/themes/saga-green/theme.css | 41 +++- public/themes/saga-orange/theme.css | 41 +++- public/themes/saga-purple/theme.css | 41 +++- public/themes/tailwind-light/theme.css | 47 ++++- public/themes/vela-blue/theme.css | 39 +++- public/themes/vela-green/theme.css | 39 +++- public/themes/vela-orange/theme.css | 39 +++- public/themes/vela-purple/theme.css | 39 +++- src/assets/menu/menu.json | 13 +- src/components/calendar/Calendar.vue | 180 ++++++++++++++++-- src/views/calendar/CalendarDemo.vue | 18 +- src/views/calendar/CalendarDoc.vue | 102 +++++----- 43 files changed, 1464 insertions(+), 410 deletions(-) diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index a509cf3bb..5b740f6da 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64B5F6; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #64B5F6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(100, 181, 246, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #383838; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,6 +4662,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; @@ -4647,11 +4670,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #1e1e1e; z-index: 1; border-radius: 50%; } diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 195c1e615..6ad15d4a3 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81C784; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #81C784; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(129, 199, 132, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #383838; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,6 +4662,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; @@ -4647,11 +4670,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #1e1e1e; z-index: 1; border-radius: 50%; } diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 1f9ffd3b4..90df0c5ab 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #FFD54F; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #FFD54F; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 213, 79, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #383838; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,6 +4662,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; @@ -4647,11 +4670,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #1e1e1e; z-index: 1; border-radius: 50%; } diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index f9b10cb07..9b011b886 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - border-color: #BA68C8; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #BA68C8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(186, 104, 200, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #383838; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,6 +4662,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; @@ -4647,11 +4670,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #1e1e1e; z-index: 1; border-radius: 50%; } diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 3a22d657e..738a98107 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: color 0.15s, box-shadow 0.15s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - border-color: #8dd0ff; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #8dd0ff; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #151515; background: #8dd0ff; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.15s; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #151515; + background: #8dd0ff; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #3f4b5b; padding-right: 0; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4652,6 +4674,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.15s; border-radius: 4px; background: transparent; @@ -4659,11 +4682,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 4px; } diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index 0ddb6da58..b30170069 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: color 0.15s, box-shadow 0.15s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #f0e6f5; - border-color: #c298d8; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #c298d8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #151515; background: #c298d8; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.15s; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #151515; + background: #c298d8; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #3f4b5b; padding-right: 0; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4652,6 +4674,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.15s; border-radius: 4px; background: transparent; @@ -4659,11 +4682,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 4px; } diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index b14637921..2bf20643d 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #212529; + transition: box-shadow 0.15s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - border-color: #007bff; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #007bff; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #ffffff; background: #007bff; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.15s; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #ffffff; + background: #007bff; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dee2e6; padding-right: 0; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #e9ecef; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + 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 { @@ -4652,6 +4674,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.15s; border-radius: 4px; background: transparent; @@ -4659,11 +4682,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #212529; border: 1px solid #dee2e6; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 4px; } diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index 3b7e42c07..b8ed03d8f 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #212529; + transition: box-shadow 0.15s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); - border-color: #883cae; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #883cae; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #ffffff; background: #883cae; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.15s; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #ffffff; + background: #883cae; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dee2e6; padding-right: 0; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #e9ecef; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + 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 { @@ -4652,6 +4674,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.15s; border-radius: 4px; background: transparent; @@ -4659,11 +4682,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #212529; border: 1px solid #dee2e6; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 4px; } diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index a309b770d..b38b79142 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #323130; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - border-color: #0078d4; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #0078d4; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #323130; background: #edebe9; } +.p-datepicker .p-yearpicker { + margin: 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 1px; + transition: box-shadow 0.2s; + border-radius: 2px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #323130; + background: #edebe9; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #edebe9; padding-right: 0.75rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #f3f2f1; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4591,18 +4613,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 2px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #323130; border: 1px solid #f3f2f1; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 2e8105ca1..bd0b6a8be 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -380,14 +380,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); - border-color: #A5B4FC; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #A5B4FC; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -485,6 +487,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(165, 180, 252, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(165, 180, 252, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #444c56; padding-right: 0.5rem; @@ -515,6 +529,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4626,6 +4648,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: transparent; @@ -4633,11 +4656,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index 9097875ab..9fa3037d1 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -380,14 +380,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e7e1fe; - border-color: #C4B5FD; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #C4B5FD; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -485,6 +487,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(196, 181, 253, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(196, 181, 253, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #444c56; padding-right: 0.5rem; @@ -515,6 +529,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e7e1fe; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e7e1fe; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4626,6 +4648,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 6px; background: transparent; @@ -4633,11 +4656,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 86461398f..a3369e71b 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -380,14 +380,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #495057; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #c1c2f9; - border-color: #6366F1; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #6366F1; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -485,6 +487,18 @@ color: #4338CA; background: #EEF2FF; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #4338CA; + background: #EEF2FF; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dee2e6; padding-right: 0.5rem; @@ -515,6 +529,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c1c2f9; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #e9ecef; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c1c2f9; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4626,18 +4648,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 6px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; border: 1px solid #e9ecef; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index cc3b6bbd2..83c008aaa 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -380,14 +380,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #495057; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #d1befb; - border-color: #8B5CF6; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #8B5CF6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -485,6 +487,18 @@ color: #6D28D9; background: #F5F3FF; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 6px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #6D28D9; + background: #F5F3FF; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dee2e6; padding-right: 0.5rem; @@ -515,6 +529,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #d1befb; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #e9ecef; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #d1befb; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4626,18 +4648,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 6px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; border: 1px solid #e9ecef; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 88f643eb5..d18c1c119 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #dedede; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #FFE082; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #FFE082; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #212529; background: #FFE082; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #212529; + background: #FFE082; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #4b4b4b; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #4c4c4c; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4603,18 +4625,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #191919; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #dedede; border: 1px solid #191919; + background: #191919; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #191919; z-index: 1; border-radius: 50%; } diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index e2009c959..bfbf995d3 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #dedede; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #81D4FA; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #81D4FA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #212529; background: #81D4FA; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #212529; + background: #81D4FA; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #4b4b4b; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #4c4c4c; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4603,18 +4625,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #191919; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #dedede; border: 1px solid #191919; + background: #191919; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #191919; z-index: 1; border-radius: 50%; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index c138e49f9..3646b473c 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #dedede; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #C5E1A5; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #C5E1A5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #212529; background: #C5E1A5; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #212529; + background: #C5E1A5; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #4b4b4b; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #4c4c4c; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4603,18 +4625,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #191919; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #dedede; border: 1px solid #191919; + background: #191919; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #191919; z-index: 1; border-radius: 50%; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 458d39fd3..c3f810d3e 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #dedede; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #F48FB1; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #F48FB1; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #212529; background: #F48FB1; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #212529; + background: #F48FB1; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #4b4b4b; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #4c4c4c; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4603,18 +4625,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #191919; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #dedede; border: 1px solid #191919; + background: #191919; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #191919; z-index: 1; border-radius: 50%; } diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 89e8c39bc..e6a268b8f 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -369,14 +369,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - 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); +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 500; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #CE93D8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -474,6 +476,18 @@ color: #CE93D8; background: rgba(206, 147, 216, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #CE93D8; + background: rgba(206, 147, 216, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; @@ -504,6 +518,14 @@ outline-offset: 0; box-shadow: none; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4664,6 +4686,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 4px; background: transparent; @@ -4671,11 +4694,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 1px solid transparent; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index ccd2530ed..ddc9be7c6 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -369,14 +369,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - 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); +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 500; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #9FA8DA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -474,6 +476,18 @@ color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #9FA8DA; + background: rgba(159, 168, 218, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; @@ -504,6 +518,14 @@ outline-offset: 0; box-shadow: none; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4664,6 +4686,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 4px; background: transparent; @@ -4671,11 +4694,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 1px solid transparent; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 67ca9117b..b2a1f273f 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -369,14 +369,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - 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); +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(0, 0, 0, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 500; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -474,6 +476,18 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #673AB7; + background: rgba(103, 58, 183, 0.12); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid rgba(0, 0, 0, 0.12); padding-right: 0.5rem; @@ -504,6 +518,14 @@ outline-offset: 0; box-shadow: none; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(0, 0, 0, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4664,6 +4686,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 4px; background: transparent; @@ -4671,11 +4694,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(0, 0, 0, 0.87); border: 1px solid transparent; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 35becfc94..c5a0739a7 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -369,14 +369,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - 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); +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(0, 0, 0, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 500; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #3F51B5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -474,6 +476,18 @@ color: #3F51B5; background: rgba(63, 81, 181, 0.12); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #3F51B5; + background: rgba(63, 81, 181, 0.12); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid rgba(0, 0, 0, 0.12); padding-right: 0.5rem; @@ -504,6 +518,14 @@ outline-offset: 0; box-shadow: none; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(0, 0, 0, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4664,6 +4686,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 4px; background: transparent; @@ -4671,11 +4694,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(0, 0, 0, 0.87); border: 1px solid transparent; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 3edbe3128..5111731da 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -369,14 +369,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - 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); +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 500; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #CE93D8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -474,6 +476,18 @@ color: #CE93D8; background: rgba(206, 147, 216, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #CE93D8; + background: rgba(206, 147, 216, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; @@ -504,6 +518,14 @@ outline-offset: 0; box-shadow: none; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4664,6 +4686,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 4px; background: transparent; @@ -4671,11 +4694,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 1px solid transparent; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index c23f7c948..14e0d3775 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -369,14 +369,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - 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); +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 500; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #9FA8DA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -474,6 +476,18 @@ color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #9FA8DA; + background: rgba(159, 168, 218, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; @@ -504,6 +518,14 @@ outline-offset: 0; box-shadow: none; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4664,6 +4686,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 4px; background: transparent; @@ -4671,11 +4694,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 1px solid transparent; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 67af9f286..25702e9f8 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -369,14 +369,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - 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); +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(0, 0, 0, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 500; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -474,6 +476,18 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #673AB7; + background: rgba(103, 58, 183, 0.12); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid rgba(0, 0, 0, 0.12); padding-right: 0.5rem; @@ -504,6 +518,14 @@ outline-offset: 0; box-shadow: none; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(0, 0, 0, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4664,6 +4686,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 4px; background: transparent; @@ -4671,11 +4694,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(0, 0, 0, 0.87); border: 1px solid transparent; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 39e097b91..6e8254596 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -369,14 +369,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - 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); +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(0, 0, 0, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 500; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #3F51B5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -474,6 +476,18 @@ color: #3F51B5; background: rgba(63, 81, 181, 0.12); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 4px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #3F51B5; + background: rgba(63, 81, 181, 0.12); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid rgba(0, 0, 0, 0.12); padding-right: 0.5rem; @@ -504,6 +518,14 @@ outline-offset: 0; box-shadow: none; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(0, 0, 0, 0.04); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4664,6 +4686,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 4px; background: transparent; @@ -4671,11 +4694,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(0, 0, 0, 0.87); border: 1px solid transparent; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 9bda936bb..306c28bbb 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #333333; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #ffffff; background: #e02365; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #ffffff; + background: #e02365; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #d8dae2; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #eaeaea; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4591,18 +4613,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #333333; border: 1px solid #dee2e6; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 1d03ce38c..b8c52fd1d 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #333333; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #ffffff; background: #007ad9; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #ffffff; + background: #007ad9; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #d8dae2; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #eaeaea; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4603,18 +4625,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #333333; border: 1px solid #dee2e6; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 8a03f6064..38380f94f 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #333333; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #c2e9d8; - border-color: #41b883; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #41b883; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #ffffff; background: #41b883; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #ffffff; + background: #41b883; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #d8dae2; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c2e9d8; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #eaeaea; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c2e9d8; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4603,18 +4625,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #333333; border: 1px solid #dee2e6; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index a3b1a34e2..fbf6c9048 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #333333; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #ffffff; background: #007ad9; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #ffffff; + background: #007ad9; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #d8dae2; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #eaeaea; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4603,18 +4625,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #333333; border: 1px solid #dee2e6; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 2fd30abb9..3b83f4d7b 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #666666; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 700; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - border-color: #7B95A3; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #7B95A3; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #385048; background: #AFD3C8; } +.p-datepicker .p-yearpicker { + margin: 0.857rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 2px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #385048; + background: #AFD3C8; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dadada; padding-right: 0.857rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #f4f4f4; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4591,18 +4613,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #a6a6a6; border: 1px solid #c8c8c8; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 5c79fd52b..b0c88756f 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #495057; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - border-color: #2196F3; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #2196F3; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #495057; background: #E3F2FD; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #495057; + background: #E3F2FD; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dee2e6; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #e9ecef; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,18 +4662,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; border: 1px solid #e9ecef; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 412204b22..7d14ae7f3 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #495057; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - border-color: #4CAF50; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #4CAF50; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #495057; background: #E8F5E9; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #495057; + background: #E8F5E9; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dee2e6; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #e9ecef; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,18 +4662,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; border: 1px solid #e9ecef; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index d49641116..a30efefdd 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #495057; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - border-color: #FFC107; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #FFC107; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #495057; background: #FFF3E0; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #495057; + background: #FFF3E0; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dee2e6; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #e9ecef; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,18 +4662,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; border: 1px solid #e9ecef; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 4478d6768..b74b5dfb3 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #495057; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - border-color: #9C27B0; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #9C27B0; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: #495057; background: #F3E5F5; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #495057; + background: #F3E5F5; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #dee2e6; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #e9ecef; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,18 +4662,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #495057; border: 1px solid #e9ecef; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 989de9dda..b48529c92 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -380,14 +380,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: #3f3f46; transition: none; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366F1; - border-color: #4F46E5; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #4F46E5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -485,6 +487,18 @@ color: #312E81; background: #EEF2FF; } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: none; + border-radius: 0.375rem; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: #312E81; + background: #EEF2FF; +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #f3f4f6; padding-right: 0.5rem; @@ -515,6 +529,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366F1; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: #f4f4f5; +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366F1; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4675,18 +4697,19 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: none; border-radius: 0.375rem; - background: transparent; + background: #ffffff; } .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: #3f3f46; border: 1px solid #f4f4f5; + background: #ffffff; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: #ffffff; z-index: 1; border-radius: 50%; } @@ -5443,3 +5466,11 @@ .p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366F1, 0 1px 2px 0 rgba(0, 0, 0, 0); } + +.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { + background-color: #4F46E5; +} + +.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { + background-color: #4F46E5; +} diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 64183918b..0757d80ad 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64B5F6; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #64B5F6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(100, 181, 246, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #304562; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,6 +4662,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; @@ -4647,11 +4670,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index d2c3cb62d..da16010a7 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81C784; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #81C784; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(129, 199, 132, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #304562; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,6 +4662,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; @@ -4647,11 +4670,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index ddad2c84d..040b03ed6 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #FFD54F; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #FFD54F; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 213, 79, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #304562; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,6 +4662,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; @@ -4647,11 +4670,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 712fdddb5..480f9454a 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -345,14 +345,16 @@ .p-datepicker .p-datepicker-header .p-datepicker-title { line-height: 2rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { + color: rgba(255, 255, 255, 0.87); + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + font-weight: 600; + padding: 0.5rem; } -.p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - border-color: #BA68C8; +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { + color: #BA68C8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -450,6 +452,18 @@ color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } +.p-datepicker .p-yearpicker { + margin: 0.5rem 0; +} +.p-datepicker .p-yearpicker .p-yearpicker-year { + padding: 0.5rem; + transition: box-shadow 0.2s; + border-radius: 3px; +} +.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { + color: rgba(255, 255, 255, 0.87); + background: rgba(186, 104, 200, 0.16); +} .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-right: 1px solid #304562; padding-right: 0.5rem; @@ -480,6 +494,14 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):hover { + background: rgba(255, 255, 255, 0.03); +} +.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-highlight):not(.p-disabled):focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; +} @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { @@ -4640,6 +4662,7 @@ } .p-steps .p-steps-item .p-menuitem-link { + background: transparent; transition: box-shadow 0.2s; border-radius: 3px; background: transparent; @@ -4647,11 +4670,11 @@ .p-steps .p-steps-item .p-menuitem-link .p-steps-number { color: rgba(255, 255, 255, 0.87); border: 0 none; + background: transparent; min-width: 2rem; height: 2rem; line-height: 2rem; font-size: 1.143rem; - background: transparent; z-index: 1; border-radius: 50%; } diff --git a/src/assets/menu/menu.json b/src/assets/menu/menu.json index 72c83895c..9418e9fa0 100644 --- a/src/assets/menu/menu.json +++ b/src/assets/menu/menu.json @@ -170,12 +170,12 @@ "children": [ { "name": "AutoComplete", - "to": "/autocomplete", - "badge":"Updated" + "to": "/autocomplete" }, { "name": "Calendar", - "to": "/calendar" + "to": "/calendar", + "badge": "Updated" }, { "name": "CascadeSelect", @@ -195,8 +195,7 @@ }, { "name": "Dropdown", - "to": "/dropdown", - "badge": "Updated" + "to": "/dropdown" }, { "name": "Editor", @@ -236,8 +235,7 @@ }, { "name": "Listbox", - "to": "/listbox", - "badge":"Updated" + "to": "/listbox" }, { "name": "MultiSelect", @@ -688,7 +686,6 @@ { "name": "Chart", "meta": ["chart"], - "badge": "Updated", "children": [ { "name": "ChartModel", diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue index f15dce81c..583d6973f 100755 --- a/src/components/calendar/Calendar.vue +++ b/src/components/calendar/Calendar.vue @@ -15,21 +15,24 @@
- {{getMonthName(month.month)}} - - {{view === 'month' ? currentYear : month.year}} - + + + + + {{yearPickerValues[0]}} - {{yearPickerValues[yearPickerValues.length - 1]}} + +
-
+
@@ -61,12 +64,18 @@ -
+
{{m}}
+
+ + {{y}} + +
@@ -358,7 +367,8 @@ export default { currentSecond: null, pm: null, focused: false, - overlayVisible: false + overlayVisible: false, + currentView: this.view } }, watch: { @@ -413,6 +423,9 @@ export default { isMonthSelected(month) { return this.isComparable() ? (this.modelValue.getMonth() === month && this.modelValue.getFullYear() === this.currentYear) : false; }, + isYearSelected(year) { + return this.isComparable() ? (this.modelValue.getFullYear() === year) : false; + }, isDateEquals(value, dateMeta) { if (value) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year; @@ -557,6 +570,7 @@ export default { } }, onOverlayLeave() { + this.currentView = this.view; this.unbindOutsideClickListener(); this.unbindScrollListener(); this.unbindResizeListener(); @@ -587,9 +601,12 @@ export default { return; } - if (this.view === 'month') { + if (this.currentView === 'month') { this.decrementYear(); } + else if (this.currentView === 'year') { + this.decrementDecade(); + } else { if (this.currentMonth === 0) { this.currentMonth = 11; @@ -609,9 +626,12 @@ export default { return; } - if (this.view === 'month') { + if (this.currentView === 'month') { this.incrementYear(); } + else if (this.currentView === 'year') { + this.incrementDecade(); + } else { if (this.currentMonth === 11) { this.currentMonth = 0; @@ -627,9 +647,27 @@ export default { decrementYear() { this.currentYear--; }, + decrementDecade() { + this.currentYear = this.currentYear - 10; + }, incrementYear() { this.currentYear++; }, + incrementDecade() { + this.currentYear = this.currentYear + 10; + }, + switchToMonthView(event) { + this.currentView = 'month'; + setTimeout(() => { + + this.alignOverlay(); + }, 1000); + event.preventDefault(); + }, + switchToYearView(event) { + this.currentView = 'year'; + event.preventDefault(); + }, isEnabled() { return !this.$attrs.disabled && !this.$attrs.readonly; }, @@ -1285,7 +1323,24 @@ export default { } }, onMonthSelect(event, index) { - this.onDateSelect(event, {year: this.currentYear, month: index, day: 1, selectable: true}); + if (this.view === 'month') { + this.onDateSelect(event, {year: this.currentYear, month: index, day: 1, selectable: true}); + } + else { + this.currentMonth = index; + this.currentView = 'date'; + this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear}); + } + }, + onYearSelect(event, year) { + if (this.view === 'year') { + this.onDateSelect(event, {year: year, month: 0, day: 1, selectable: true}); + } + else { + this.currentYear = year; + this.currentView = 'month'; + this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear}); + } }, enableModality() { if (!this.mask) { @@ -1508,7 +1563,7 @@ export default { iValue++; }; - if (this.view === 'month') { + if (this.currentView === 'month') { day = 1; } @@ -1824,6 +1879,74 @@ export default { break; } }, + onYearCellKeydown(event, index) { + const cell = event.currentTarget; + + switch (event.which) { + //arrows + case 38: + case 40: { + cell.tabIndex = '-1'; + var cells = cell.parentElement.children; + var cellIndex = DomHandler.index(cell); + let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex -3]; + if (nextCell) { + nextCell.tabIndex = '0'; + nextCell.focus(); + } + event.preventDefault(); + break; + } + + //left arrow + case 37: { + cell.tabIndex = '-1'; + let prevCell = cell.previousElementSibling; + if (prevCell) { + prevCell.tabIndex = '0'; + prevCell.focus(); + } + event.preventDefault(); + break; + } + + //right arrow + case 39: { + cell.tabIndex = '-1'; + let nextCell = cell.nextElementSibling; + if (nextCell) { + nextCell.tabIndex = '0'; + nextCell.focus(); + } + event.preventDefault(); + break; + } + + //enter + case 13: { + this.onMonthSelect(event, index); + event.preventDefault(); + break; + } + + //escape + case 27: { + this.overlayVisible = false; + event.preventDefault(); + break; + } + + //tab + case 9: { + this.trapFocus(event); + break; + } + + default: + //no op + break; + } + }, updateFocus() { let cell; if (this.navigationState) { @@ -1859,7 +1982,7 @@ export default { initFocusableCell() { let cell; - if (this.view === 'month') { + if (this.currentView === 'month') { let cells = DomHandler.find(this.overlay, '.p-monthpicker .p-monthpicker-month'); let selectedCell= DomHandler.findSingle(this.overlay, '.p-monthpicker .p-monthpicker-month.p-highlight'); cells.forEach(cell => cell.tabIndex = -1); @@ -2024,7 +2147,8 @@ export default { 'p-disabled': this.$attrs.disabled, 'p-datepicker-timeonly': this.timeOnly, 'p-datepicker-multiple-month': this.numberOfMonths > 1, - 'p-datepicker-monthpicker': (this.view === 'month'), + 'p-datepicker-monthpicker': (this.currentView === 'month'), + 'p-datepicker-yearpicker': (this.currentView === 'year'), 'p-datepicker-touch-ui': this.touchUI, 'p-input-filled': this.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': this.$primevue.config.ripple === false @@ -2152,6 +2276,15 @@ export default { return monthPickerValues; }, + yearPickerValues() { + let yearPickerValues = []; + let base = this.currentYear - (this.currentYear % 10); + for (let i = 0; i < 10; i++) { + yearPickerValues.push(base + i); + } + + return yearPickerValues; + }, formattedCurrentHour() { return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour; }, @@ -2233,7 +2366,7 @@ export default { } .p-datepicker-inline { - display: inline-flex; + display: inline-block; position: static; } @@ -2290,6 +2423,17 @@ export default { position: relative; } +/* Year Picker */ +.p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; +} + /* Button Bar */ .p-datepicker-buttonbar { display: flex; diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue index 2971452b7..6ce5f1029 100755 --- a/src/views/calendar/CalendarDemo.vue +++ b/src/views/calendar/CalendarDemo.vue @@ -14,7 +14,7 @@
- +
@@ -32,10 +32,6 @@
-
- - -
@@ -46,19 +42,23 @@
- +
- +
- +
- + +
+
+ +
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue index 74891c4ea..136b086fe 100755 --- a/src/views/calendar/CalendarDoc.vue +++ b/src/views/calendar/CalendarDoc.vue @@ -154,9 +154,16 @@ export default {
Month Picker
-

Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.

+

Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.


-<Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
+<Calendar v-model="value" view="month" dateFormat="mm/yy" />
+
+
+ +
Year Picker
+

Similar to the month picker, year picker can be used to select years only. Set view to "year" to display the year picker.

+

+<Calendar v-model="value" view="year" dateFormat="yy" />
@@ -238,7 +245,7 @@ export default {
- + @@ -247,22 +254,23 @@ export default { - + - + - + - + - + - + @@ -600,7 +608,7 @@ export default {
- +
@@ -618,10 +626,6 @@ export default {
-
- - -
@@ -632,19 +636,23 @@ export default {
- +
- +
- +
- + +
+
+ +
@@ -733,7 +741,7 @@ export default {
- +
@@ -751,10 +759,6 @@ export default {
-
- - -
@@ -765,19 +769,23 @@ export default {
- +
- +
- +
- + +
+
+ +
@@ -866,73 +874,73 @@ export default {
- +
- +
- +
- +
- -
-
- - +
- +
- +
- +
- +
- +
- + +
+
+ +
- +
- + - +
- +
Inline
- +
view string dateType of view to display, valid values are "date" for datepicker and "month" for month picker.Type of view to display, valid values are "date", "month" and "year".
touchUIWhen enabled, calendar overlay is displayed as optimized for touch devices.
monthNavigatormonthNavigator boolean falseWhether the month should be rendered as a dropdown instead of text.Whether the month should be rendered as a dropdown instead of text.

Deprecated: Navigator is always on
yearNavigatoryearNavigator boolean falseWhether the year should be rendered as a dropdown instead of text.Whether the year should be rendered as a dropdown instead of text.

Deprecated: Navigator is always on.
yearRangeyearRange string nullThe range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).

+ Deprecated: Years are based on decades by default.
panelClass