vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1744, Fixed #1743, Fixed #1580

pull/1751/head
Cagatay Civici 2021-11-11 14:31:37 +03:00
parent 089f315ced
commit 4714b324c1
43 changed files with 1464 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/themes/arya-blue/theme.css
View File

@ -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%;
}

39
public/themes/arya-green/theme.css
View File

@ -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%;
}

39
public/themes/arya-orange/theme.css
View File

@ -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%;
}

39
public/themes/arya-purple/theme.css
View File

@ -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%;
}

39
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -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;
}

39
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -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;
}

39
public/themes/bootstrap4-light-blue/theme.css
View File

@ -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;
}

39
public/themes/bootstrap4-light-purple/theme.css
View File

@ -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;
}

41
public/themes/fluent-light/theme.css
View File

@ -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%;
}

39
public/themes/lara-dark-indigo/theme.css
View File

@ -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%;
}

39
public/themes/lara-dark-purple/theme.css
View File

@ -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%;
}

41
public/themes/lara-light-indigo/theme.css
View File

@ -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%;
}

41
public/themes/lara-light-purple/theme.css
View File

@ -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%;
}

41
public/themes/luna-amber/theme.css
View File

@ -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%;
}

41
public/themes/luna-blue/theme.css
View File

@ -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%;
}

41
public/themes/luna-green/theme.css
View File

@ -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%;
}

41
public/themes/luna-pink/theme.css
View File

@ -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%;
}

39
public/themes/md-dark-deeppurple/theme.css
View File

@ -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%;
}

39
public/themes/md-dark-indigo/theme.css
View File

@ -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%;
}

39
public/themes/md-light-deeppurple/theme.css
View File

@ -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%;
}

39
public/themes/md-light-indigo/theme.css
View File

@ -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%;
}

39
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -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%;
}

39
public/themes/mdc-dark-indigo/theme.css
View File

@ -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%;
}

39
public/themes/mdc-light-deeppurple/theme.css
View File

@ -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%;
}

39
public/themes/mdc-light-indigo/theme.css
View File

@ -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%;
}

41
public/themes/nova-accent/theme.css
View File

@ -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%;
}

41
public/themes/nova-alt/theme.css
View File

@ -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%;
}

41
public/themes/nova-vue/theme.css
View File

@ -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%;
}

41
public/themes/nova/theme.css
View File

@ -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%;
}

41
public/themes/rhea/theme.css
View File

@ -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%;
}

41
public/themes/saga-blue/theme.css
View File

@ -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%;
}

41
public/themes/saga-green/theme.css
View File

@ -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%;
}

41
public/themes/saga-orange/theme.css
View File

@ -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%;
}

41
public/themes/saga-purple/theme.css
View File

@ -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%;
}

47
public/themes/tailwind-light/theme.css
View File

@ -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;
}

39
public/themes/vela-blue/theme.css
View File

@ -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%;
}

39
public/themes/vela-green/theme.css
View File

@ -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%;
}

39
public/themes/vela-orange/theme.css
View File

@ -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%;
}

39
public/themes/vela-purple/theme.css
View File

@ -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%;
}

13
src/assets/menu/menu.json
View File

@ -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",

178
src/components/calendar/Calendar.vue
View File

@ -15,21 +15,24 @@
<span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
</button>
<div class="p-datepicker-title">
<span class="p-datepicker-month" v-if="!monthNavigator && (view !== 'month')">{{getMonthName(month.month)}}</span>
<select class="p-datepicker-month" v-if="monthNavigator && (view !== 'month') && numberOfMonths === 1" @change="onMonthDropdownChange($event.target.value)">
<option :value="index" v-for="(monthName, index) of monthNames" :key="monthName" :selected="index === month.month">{{monthName}}</option>
</select>
<span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
<select class="p-datepicker-year" v-if="yearNavigator && numberOfMonths === 1" @change="onYearDropdownChange($event.target.value)">
<option :value="year" v-for="year of yearOptions" :key="year" :selected="year === currentYear">{{year}}</option>
</select>
<button type="button" @click="switchToMonthView" v-if="currentView === 'date'" class="p-datepicker-month p-link" :disabled="$attrs.disabled">
{{getMonthName(month.month)}}
</button>
<button type="button" @click="switchToYearView" v-if="currentView !== 'year'" class="p-datepicker-year p-link" :disabled="$attrs.disabled">
{{currentYear}}
</button>
<span class="p-datepicker-decade" v-if="currentView === 'year'">
<slot name="decade" :years="yearPickerValues">
{{yearPickerValues[0]}} - {{yearPickerValues[yearPickerValues.length - 1]}}
</slot>
</span>
</div>
<button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1)"
@click="onNextButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
<span class="p-datepicker-next-icon pi pi-chevron-right"></span>
</button>
</div>
<div class="p-datepicker-calendar-container" v-if="view ==='date'">
<div class="p-datepicker-calendar-container" v-if="currentView ==='date'">
<table class="p-datepicker-calendar">
<thead>
<tr>
@ -61,12 +64,18 @@
</div>
</div>
</div>
<div class="p-monthpicker" v-if="view === 'month'">
<div class="p-monthpicker" v-if="currentView === 'month'">
<span v-for="(m,i) of monthPickerValues" :key="m" @click="onMonthSelect($event, i)" @keydown="onMonthCellKeydown($event,i)"
class="p-monthpicker-month" :class="{'p-highlight': isMonthSelected(i)}" v-ripple>
{{m}}
</span>
</div>
<div class="p-yearpicker" v-if="currentView === 'year'">
<span v-for="y of yearPickerValues" :key="y" @click="onYearSelect($event, y)" @keydown="onYearCellKeydown($event,y)"
class="p-yearpicker-year" :class="{'p-highlight': isYearSelected(y)}" v-ripple>
{{y}}
</span>
</div>
</template>
<div class="p-timepicker" v-if="showTime||timeOnly">
<div class="p-hour-picker">
@ -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) {
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;

18
src/views/calendar/CalendarDemo.vue
View File

@ -14,7 +14,7 @@
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" />
<Calendar id="basic" v-model="date1" autocomplete="off" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="dateformat">DateFormat</label>
@ -32,10 +32,6 @@
<label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="navigators">Navigators</label>
<Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
@ -46,19 +42,23 @@
</div>
<div class="p-field p-col-12 p-md-4">
<label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="yearpicker">Year Picker</label>
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>

102
src/views/calendar/CalendarDoc.vue
View File

@ -154,9 +154,16 @@ export default {
</code></pre>
<h5>Month Picker</h5>
<p>Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.</p>
<p>Month picker is used to select month and year only without the date, set <i>view</i> mode as "month" to activate month picker.</p>
<pre v-code><code>
&lt;Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;Calendar v-model="value" view="month" dateFormat="mm/yy" /&gt;
</code></pre>
<h5>Year Picker</h5>
<p>Similar to the month picker, year picker can be used to select years only. Set <i>view</i> to "year" to display the year picker.</p>
<pre v-code><code>
&lt;Calendar v-model="value" view="year" dateFormat="yy" /&gt;
</code></pre>
@ -238,7 +245,7 @@ export default {
<td>view</td>
<td>string</td>
<td>date</td>
<td>Type of view to display, valid values are "date" for datepicker and "month" for month picker.</td>
<td>Type of view to display, valid values are "date", "month" and "year".</td>
</tr>
<tr>
<td>touchUI</td>
@ -247,22 +254,23 @@ export default {
<td>When enabled, calendar overlay is displayed as optimized for touch devices.</td>
</tr>
<tr>
<td>monthNavigator</td>
<td style="text-decoration: line-through">monthNavigator</td>
<td>boolean</td>
<td>false</td>
<td>Whether the month should be rendered as a dropdown instead of text.</td>
<td>Whether the month should be rendered as a dropdown instead of text. <br /> <br /> <b> Deprecated: </b> Navigator is always on</td>
</tr>
<tr>
<td>yearNavigator</td>
<td style="text-decoration: line-through">yearNavigator</td>
<td>boolean</td>
<td>false</td>
<td>Whether the year should be rendered as a dropdown instead of text.</td>
<td>Whether the year should be rendered as a dropdown instead of text. <br /> <br /> <b> Deprecated: </b> Navigator is always on.</td>
</tr>
<tr>
<td>yearRange</td>
<td style="text-decoration: line-through">yearRange</td>
<td>string</td>
<td>null</td>
<td>The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).</td>
<td>The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020). <br><br>
<b> Deprecated: </b> Years are based on decades by default.</td>
</tr>
<tr>
<td>panelClass</td>
@ -600,7 +608,7 @@ export default {
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" />
<Calendar id="basic" v-model="date1" autocomplete="off" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="dateformat">DateFormat</label>
@ -618,10 +626,6 @@ export default {
<label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="navigators">Navigators</label>
<Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
@ -632,19 +636,23 @@ export default {
</div>
<div class="p-field p-col-12 p-md-4">
<label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="yearpicker">Year Picker</label>
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
@ -733,7 +741,7 @@ export default {
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" />
<Calendar id="basic" v-model="date1" autocomplete="off" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="dateformat">DateFormat</label>
@ -751,10 +759,6 @@ export default {
<label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="navigators">Navigators</label>
<Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
@ -765,19 +769,23 @@ export default {
</div>
<div class="p-field p-col-12 p-md-4">
<label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="yearpicker">Year Picker</label>
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
@ -866,73 +874,73 @@ export default {
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<p-calendar id="basic" v-model="date1"></p-calendar>
<Calendar id="basic" v-model="date1" autocomplete="off" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="dateformat">DateFormat</label>
<p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
<Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="icon">Icon</label>
<p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
<Calendar id="icon" v-model="date3" :showIcon="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="minmax">MinMax</label>
<p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="disableddays">Disabled Days</label>
<p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="navigators">Navigators</label>
<p-calendar id="navigators" v-model="date6" :month-navigator="true" :year-navigator="true" year-range="2000:2030"></p-calendar>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiple">Multiple</label>
<p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="range">Range</label>
<p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="buttonbar">Button Bar</label>
<p-calendar id="buttonbar" v-model="date7" :show-button-bar="true"></p-calendar>
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time24">Time / 24h</label>
<p-calendar id="time24" v-model="date8" :show-time="true" :show-seconds="true"></p-calendar>
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="time12">Time / 12h</label>
<p-calendar id="time12" v-model="date9" :time-only="true" hour-format="12"></p-calendar>
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="monthpicker">Month Picker</label>
<p-calendar id="monthpicker" v-model="date10" view="month" date-format="mm/yy" :year-navigator="true" year-range="2000:2030"></p-calendar>
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="yearpicker">Year Picker</label>
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<p-calendar id="multiplemonths" v-model="date11" :number-of-months="3"></p-calendar>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
</div>
<div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label>
<p-calendar id="datetemplate" v-model="date12">
<Calendar id="datetemplate" v-model="date12">
<template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
<template v-else>{{slotProps.date.day}}</template>
</template>
</p-calendar>
</Calendar>
</div>
<div class="p-field p-col-12 p-md-4">
<label for="touchUI">TouchUI</label>
<p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
<Calendar id="touchUI" v-model="date13" :touchUI="true" />
</div>
</div>
<h5>Inline</h5>
<p-calendar v-model="date14" :inline="true" :show-week="true" />
<Calendar v-model="date14" :inline="true" :showWeek="true" />
</div>
<script type="module">