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

Refactor datepicker styles

pull/5677/head
Cagatay Civici 2024-04-08 18:30:31 +03:00
parent c2c7c9362d
commit 29aca170c1
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/lib/calendar/style/CalendarStyle.js
View File

@ -29,14 +29,12 @@ const classes = {
group: 'p-datepicker-calendar-container', group: 'p-datepicker-calendar-container',
calendar: 'p-datepicker-calendar', calendar: 'p-datepicker-calendar',
header: 'p-datepicker-header', header: 'p-datepicker-header',
previousButton: 'p-datepicker-navigator p-datepicker-prev p-link', previousButton: 'p-datepicker-navigator p-datepicker-prev',
previousIcon: 'p-datepicker-prev-icon',
title: 'p-datepicker-title', title: 'p-datepicker-title',
monthTitle: 'p-datepicker-view-month p-link', monthTitle: 'p-datepicker-view-month p-link',
yearTitle: 'p-datepicker-view-year p-link', yearTitle: 'p-datepicker-view-year p-link',
decadeTitle: 'p-datepicker-decade', decadeTitle: 'p-datepicker-decade',
nextButton: 'p-datepicker-navigator p-datepicker-next p-link', nextButton: 'p-datepicker-navigator p-datepicker-next',
nextIcon: 'p-datepicker-next-icon',
grid: 'p-datepicker-day-view', grid: 'p-datepicker-day-view',
weekHeader: 'p-datepicker-weekheader p-disabled', weekHeader: 'p-datepicker-weekheader p-disabled',
weekNumber: 'p-datepicker-weeknumber', weekNumber: 'p-datepicker-weeknumber',
@ -49,17 +47,17 @@ const classes = {
month: ({ instance, props, month, index }) => ['p-datepicker-month', { 'p-datepicker-month-selected': instance.isMonthSelected(index), 'p-disabled': props.disabled || !month.selectable }], month: ({ instance, props, month, index }) => ['p-datepicker-month', { 'p-datepicker-month-selected': instance.isMonthSelected(index), 'p-disabled': props.disabled || !month.selectable }],
yearPicker: 'p-datepicker-year-view', yearPicker: 'p-datepicker-year-view',
year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }], year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
timePicker: 'p-timepicker', timePicker: 'p-datepicker-time-picker',
hourPicker: 'p-hour-picker', hourPicker: 'p-datepicker-hour-picker',
incrementButton: 'p-link', incrementButton: 'p-datepicker-increment-button',
decrementButton: 'p-link', decrementButton: 'p-datepicker-decrement-button',
separatorContainer: 'p-separator', separatorContainer: 'p-datepicker-separator',
minutePicker: 'p-minute-picker', minutePicker: 'p-minute-picker',
secondPicker: 'p-second-picker', secondPicker: 'p-second-picker',
ampmPicker: 'p-ampm-picker', ampmPicker: 'p-ampm-picker',
buttonbar: 'p-datepicker-buttonbar', buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-buttonbar-button', todayButton: 'p-datepicker-today-button',
clearButton: 'p-buttonbar-button' clearButton: 'p-datepicker-clear-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

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

@ -302,7 +302,7 @@ export default {
width: auto; width: auto;
} }
.p-timepicker { .p-datepicker-time-picker {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -315,22 +315,22 @@ export default {
padding-top: 0.5rem; padding-top: 0.5rem;
} }
.p-timepicker > div { .p-datepicker-time-picker > div {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.p-timepicker button:last-child { .p-datepicker-time-picker button:last-child {
margin-top: 0.2em; margin-top: 0.2em;
} }
.p-timepicker span { .p-datepicker-time-picker span {
font-size: 1rem; font-size: 1rem;
} }
.p-datepicker-timeonly .p-timepicker { .p-datepicker-timeonly .p-datepicker-time-picker {
border-top: 0 none; border-top: 0 none;
} }
` `