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

Refactor #6636 - For DatePicker

pull/6620/head^2
tugcekucukoglu 2024-10-24 17:26:25 +03:00
parent caab6a672a
commit 316ea34b9b
1 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/primevue/src/datepicker/style/DatePickerStyle.js
View File

@ -12,25 +12,24 @@ const theme = ({ dt }) => `
}
.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.p-datepicker-dropdown {
cursor: pointer;
display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('datepicker.dropdown.width')};
border-top-right-radius: ${dt('datepicker.dropdown.border.radius')};
border-bottom-right-radius: ${dt('datepicker.dropdown.border.radius')};
border-start-end-radius: ${dt('datepicker.dropdown.border.radius')};
border-end-end-radius: ${dt('datepicker.dropdown.border.radius')};
background: ${dt('datepicker.dropdown.background')};
border: 1px solid ${dt('datepicker.dropdown.border.color')};
border-left: 0 none;
border-inline-start: 0 none;
color: ${dt('datepicker.dropdown.color')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
outline-color: transparent;
@ -59,15 +58,15 @@ const theme = ({ dt }) => `
}
.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
.p-datepicker-input-icon-container {
cursor: pointer;
position: absolute;
top: 50%;
right: ${dt('form.field.padding.x')};
margin-top: calc(-1 * (${dt('icon.size')} / 2));
inset-inline-end: ${dt('form.field.padding.x')};
margin-block-start: calc(-1 * (${dt('icon.size')} / 2));
color: ${dt('datepicker.input.icon.color')};
}
@ -107,7 +106,15 @@ const theme = ({ dt }) => `
font-weight: ${dt('datepicker.header.font.weight')};
background: ${dt('datepicker.header.background')};
color: ${dt('datepicker.header.color')};
border-bottom: 1px solid ${dt('datepicker.header.border.color')};
border-block-end: 1px solid ${dt('datepicker.header.border.color')};
}
.p-datepicker-next-button:dir(rtl) {
order: -1;
}
.p-datepicker-prev-button:dir(rtl) {
order: 1;
}
.p-datepicker-title {
@ -165,18 +172,18 @@ const theme = ({ dt }) => `
.p-datepicker-calendar-container .p-datepicker-calendar {
flex: 1 1 auto;
border-left: 1px solid ${dt('datepicker.group.border.color')};
padding-right: ${dt('datepicker.group.gap')};
padding-left: ${dt('datepicker.group.gap')};
border-inline-start: 1px solid ${dt('datepicker.group.border.color')};
padding-inline-end: ${dt('datepicker.group.gap')};
padding-inline-start: ${dt('datepicker.group.gap')};
}
.p-datepicker-calendar-container .p-datepicker-calendar:first-child {
padding-left: 0;
border-left: 0 none;
padding-inline-start: 0;
border-inline-start: 0 none;
}
.p-datepicker-calendar-container .p-datepicker-calendar:last-child {
padding-right: 0;
padding-inline-end: 0;
}
.p-datepicker-day-view {
@ -210,8 +217,9 @@ const theme = ({ dt }) => `
width: ${dt('datepicker.date.width')};
height: ${dt('datepicker.date.height')};
border-radius: ${dt('datepicker.date.border.radius')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')},
box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt(
'datepicker.transition.duration'
)};
border: 1px solid transparent;
outline-color: transparent;
color: ${dt('datepicker.date.color')};
@ -254,7 +262,7 @@ const theme = ({ dt }) => `
}
.p-datepicker-weeknumber {
text-align: center
text-align: center;
}
.p-datepicker-month-view {
@ -336,7 +344,7 @@ const theme = ({ dt }) => `
justify-content: space-between;
align-items: center;
padding: ${dt('datepicker.buttonbar.padding')};
border-top: 1px solid ${dt('datepicker.buttonbar.border.color')};
border-block-start: 1px solid ${dt('datepicker.buttonbar.border.color')};
}
.p-datepicker-buttonbar .p-button {
@ -347,7 +355,7 @@ const theme = ({ dt }) => `
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid ${dt('datepicker.time.picker.border.color')};
border-block-start: 1px solid ${dt('datepicker.time.picker.border.color')};
padding: 0;
gap: ${dt('datepicker.time.picker.gap')};
}
@ -368,7 +376,7 @@ const theme = ({ dt }) => `
}
.p-datepicker-timeonly .p-datepicker-time-picker {
border-top: 0 none;
border-block-start: 0 none;
}
`;
@ -377,7 +385,7 @@ const inlineStyles = {
};
const classes = {
root: ({ instance, props, state }) => [
root: ({ instance, state }) => [
'p-datepicker p-component p-inputwrapper',
{
'p-invalid': instance.$invalid,