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

Fixed calendar dropdown style

pull/5507/head
Cagatay Civici 2024-03-25 12:24:03 +03:00
parent 1881bc1502
commit 50fd75d6c8
2 changed files with 71 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/lib/themes/primeone/base/calendar/index.js
View File

@ -15,13 +15,57 @@ export default {
border-bottom-right-radius: 0;
}
.p-calendar-w-btn .p-datepicker-trigger {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.p-datepicker-trigger {
cursor: pointer;
display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('calendar.dropdown.width')};
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
background: ${dt('calendar.dropdown.background')};
border: 1px solid ${dt('calendar.dropdown.border.color')};
border-left: 0 none;
background: ${dt('calendar.dropdown.background')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-calendar .p-datepicker-trigger-icon {
.p-datepicker-trigger:not(:disabled):hover {
background: ${dt('calendar.dropdown.hover.background')};
border-color: ${dt('calendar.dropdown.hover.border.color')};
background: ${dt('calendar.dropdown.hover.background')};
}
.p-datepicker-trigger:not(:disabled):active {
background: ${dt('calendar.dropdown.active.background')};
border-color: ${dt('calendar.dropdown.active.border.color')};
background: ${dt('calendar.dropdown.active.background')};
}
.p-datepicker-trigger:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-calendar:has(.p-input-icon) {
position: relative;
}
.p-calendar:has(.p-input-icon) .p-calendar-input {
padding-right: 2.5rem;
}
.p-calendar .p-input-icon {
cursor: pointer;
position: absolute;
top: 50%;
right: .75rem;
margin-top: -.5rem;
}
.p-fluid .p-calendar {

23
components/lib/themes/primeone/presets/aura/calendar/index.js
View File

@ -64,6 +64,18 @@ export default {
hoverBackground: '{surface.100}',
color: '{surface.500}',
hoverColor: '{surface.600}'
},
dropdown: {
width: '2.5rem',
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
color: '{surface.600}',
hoverColor: '{surface.700}',
activeColor: '{surface.800}'
}
},
dark: {
@ -130,6 +142,17 @@ export default {
hoverBackground: '{surface.800}',
color: '{surface.400}',
hoverColor: '{surface.300}'
},
dropdown: {
background: '{surface.800}',
hoverBackground: '{surface.700}',
activeBackground: '{surface.600}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
color: '{surface.300}',
hoverColor: '{surface.200}',
activeColor: '{surface.100}'
}
}
}