diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js index 0a9a4d999..a3d765d1e 100644 --- a/packages/primevue/src/datepicker/style/DatePickerStyle.js +++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js @@ -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 { @@ -279,7 +287,7 @@ const theme = ({ dt }) => ` } .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover { - color: ${dt('datepicker.date.hover.color')}; + color: ${dt('datepicker.date.hover.color')}; background: ${dt('datepicker.date.hover.background')}; } @@ -335,8 +343,8 @@ const theme = ({ dt }) => ` display: flex; justify-content: space-between; align-items: center; - padding: ${dt('datepicker.buttonbar.padding')}; - border-top: 1px solid ${dt('datepicker.buttonbar.border.color')}; + padding: ${dt('datepicker.buttonbar.padding')}; + 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,