From d5e7c91109db5d85e8de6841c4e1836cfb95f6a9 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 7 Apr 2024 01:44:28 +0300
Subject: [PATCH] Refactored Calendar Styles

---
 components/lib/calendar/Calendar.vue          | 136 +++++++++---------
 .../lib/calendar/style/CalendarStyle.js       |  46 +++---
 .../themes/primeone/base/calendar/index.js    | 105 +++++++-------
 3 files changed, 137 insertions(+), 150 deletions(-)

diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 000c4230e..db5cf0c84 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -69,8 +69,8 @@
                     v-bind="ptm('panel')"
                 >
                     <template v-if="!timeOnly">
-                        <div :class="cx('groupContainer')" v-bind="ptm('groupContainer')">
-                            <div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('group')" v-bind="ptm('group')">
+                        <div :class="cx('group')" v-bind="ptm('group')">
+                            <div v-for="(month, groupIndex) of months" :key="month.month + month.year" :class="cx('calendar')" v-bind="ptm('calendar')">
                                 <div :class="cx('header')" v-bind="ptm('header')">
                                     <slot name="header"></slot>
                                     <button
@@ -169,39 +169,61 @@
                                         </slot>
                                     </button>
                                 </div>
-                                <div v-if="currentView === 'date'" :class="cx('container')" v-bind="ptm('container')">
-                                    <table :class="cx('table')" role="grid" v-bind="ptm('table')">
-                                        <thead v-bind="ptm('tableHeader')">
-                                            <tr v-bind="ptm('tableHeaderRow')">
-                                                <th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tableheadercell">
-                                                    <slot name="weekheaderlabel">
-                                                        <span v-bind="ptm('weekHeaderLabel', { context: { disabled: showWeek } })" data-pc-group-section="tableheadercelllabel">
-                                                            {{ weekHeaderLabel }}
-                                                        </span>
-                                                    </slot>
-                                                </th>
-                                                <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell">
-                                                    <span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel">{{ weekDay }}</span>
-                                                </th>
-                                            </tr>
-                                        </thead>
-                                        <tbody v-bind="ptm('tableBody')">
-                                            <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
-                                                <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')" data-pc-group-section="tablebodycell">
-                                                    <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tablebodycelllabel">
-                                                        <slot name="weeklabel" :weekNumber="month.weekNumbers[i]">
-                                                            <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
-                                                            {{ month.weekNumbers[i] }}
-                                                        </slot>
+                                <table v-if="currentView === 'date'" :class="cx('grid')" role="grid" v-bind="ptm('grid')">
+                                    <thead v-bind="ptm('tableHeader')">
+                                        <tr v-bind="ptm('tableHeaderRow')">
+                                            <th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tableheadercell">
+                                                <slot name="weekheaderlabel">
+                                                    <span v-bind="ptm('weekHeaderLabel', { context: { disabled: showWeek } })" data-pc-group-section="tableheadercelllabel">
+                                                        {{ weekHeaderLabel }}
                                                     </span>
-                                                </td>
-                                                <td
-                                                    v-for="date of week"
-                                                    :key="date.day + '' + date.month"
-                                                    :aria-label="date.day"
-                                                    :class="cx('day', { date })"
+                                                </slot>
+                                            </th>
+                                            <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')" data-pc-group-section="tableheadercell" :class="cx('weekDay')">
+                                                <span v-bind="ptm('weekDay')" data-pc-group-section="tableheadercelllabel" :class="cx('weekDay')">{{ weekDay }}</span>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody v-bind="ptm('tableBody')">
+                                        <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
+                                            <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')" data-pc-group-section="tablebodycell">
+                                                <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek" data-pc-group-section="tablebodycelllabel">
+                                                    <slot name="weeklabel" :weekNumber="month.weekNumbers[i]">
+                                                        <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
+                                                        {{ month.weekNumbers[i] }}
+                                                    </slot>
+                                                </span>
+                                            </td>
+                                            <td
+                                                v-for="date of week"
+                                                :key="date.day + '' + date.month"
+                                                :aria-label="date.day"
+                                                :class="cx('day', { date })"
+                                                v-bind="
+                                                    ptm('day', {
+                                                        context: {
+                                                            date,
+                                                            today: date.today,
+                                                            otherMonth: date.otherMonth,
+                                                            selected: isSelected(date),
+                                                            disabled: !date.selectable
+                                                        }
+                                                    })
+                                                "
+                                                :data-p-today="date.today"
+                                                :data-p-other-month="date.otherMonth"
+                                                data-pc-group-section="tablebodycell"
+                                            >
+                                                <span
+                                                    v-ripple
+                                                    :class="cx('dayLabel', { date })"
+                                                    @click="onDateSelect($event, date)"
+                                                    draggable="false"
+                                                    @keydown="onDateCellKeydown($event, date, groupIndex)"
+                                                    :aria-selected="isSelected(date)"
+                                                    :aria-disabled="!date.selectable"
                                                     v-bind="
-                                                        ptm('day', {
+                                                        ptm('dayLabel', {
                                                             context: {
                                                                 date,
                                                                 today: date.today,
@@ -211,43 +233,19 @@
                                                             }
                                                         })
                                                     "
-                                                    :data-p-today="date.today"
-                                                    :data-p-other-month="date.otherMonth"
-                                                    data-pc-group-section="tablebodycell"
+                                                    :data-p-disabled="!date.selectable"
+                                                    :data-p-highlight="isSelected(date)"
+                                                    data-pc-group-section="tablebodycelllabel"
                                                 >
-                                                    <span
-                                                        v-ripple
-                                                        :class="cx('dayLabel', { date })"
-                                                        @click="onDateSelect($event, date)"
-                                                        draggable="false"
-                                                        @keydown="onDateCellKeydown($event, date, groupIndex)"
-                                                        :aria-selected="isSelected(date)"
-                                                        :aria-disabled="!date.selectable"
-                                                        v-bind="
-                                                            ptm('dayLabel', {
-                                                                context: {
-                                                                    date,
-                                                                    today: date.today,
-                                                                    otherMonth: date.otherMonth,
-                                                                    selected: isSelected(date),
-                                                                    disabled: !date.selectable
-                                                                }
-                                                            })
-                                                        "
-                                                        :data-p-disabled="!date.selectable"
-                                                        :data-p-highlight="isSelected(date)"
-                                                        data-pc-group-section="tablebodycelllabel"
-                                                    >
-                                                        <slot name="date" :date="date">{{ date.day }}</slot>
-                                                    </span>
-                                                    <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
-                                                        {{ date.day }}
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
+                                                    <slot name="date" :date="date">{{ date.day }}</slot>
+                                                </span>
+                                                <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
+                                                    {{ date.day }}
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
                             </div>
                         </div>
                         <div v-if="currentView === 'month'" :class="cx('monthPicker')" v-bind="ptm('monthPicker')">
diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
index 10828072d..d851384ca 100644
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -6,57 +6,51 @@ const inlineStyles = {
 
 const classes = {
     root: ({ props, state }) => [
-        'p-calendar p-component p-inputwrapper',
+        'p-datepicker p-component p-inputwrapper',
         {
-            'p-calendar-w-btn': props.showIcon && props.iconDisplay === 'button',
-            'p-calendar-input-icon-field': props.showIcon && props.iconDisplay === 'input',
-            'p-calendar-timeonly': props.timeOnly,
-            'p-calendar-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': state.focused,
             'p-focus': state.focused || state.overlayVisible
         }
     ],
-    input: 'p-calendar-input',
-    dropdownButton: 'p-datepicker-trigger',
-    inputIcon: 'p-datepicker-trigger-icon p-input-icon',
-    panel: ({ instance, props, state }) => [
-        'p-datepicker p-component',
+    input: 'p-datepicker-input',
+    dropdownButton: 'p-datepicker-dropdown',
+    inputIcon: 'p-datepicker-input-icon',
+    panel: ({ instance, props }) => [
+        'p-datepicker-panel p-component',
         {
             'p-datepicker-mobile': instance.queryMatches,
-            'p-datepicker-inline': props.inline,
+            'p-datepicker-panel-inline': props.inline,
             'p-disabled': props.disabled,
             'p-datepicker-timeonly': props.timeOnly,
-            'p-datepicker-multiple-month': props.numberOfMonths > 1,
-            'p-datepicker-monthpicker': state.currentView === 'month',
-            'p-datepicker-yearpicker': state.currentView === 'year',
             'p-datepicker-touch-ui': props.touchUI,
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    groupContainer: 'p-datepicker-group-container',
-    group: 'p-datepicker-group',
+    group: 'p-datepicker-calendar-container',
+    calendar: 'p-datepicker-calendar',
     header: 'p-datepicker-header',
     previousButton: 'p-datepicker-prev p-link',
     previousIcon: 'p-datepicker-prev-icon',
     title: 'p-datepicker-title',
-    monthTitle: 'p-datepicker-month p-link',
-    yearTitle: 'p-datepicker-year p-link',
+    monthTitle: 'p-datepicker-view-month p-link',
+    yearTitle: 'p-datepicker-view-year p-link',
     decadeTitle: 'p-datepicker-decade',
     nextButton: 'p-datepicker-next p-link',
     nextIcon: 'p-datepicker-next-icon',
-    container: 'p-datepicker-calendar-container',
-    table: 'p-datepicker-calendar',
+    grid: 'p-datepicker-day-view',
     weekHeader: 'p-datepicker-weekheader p-disabled',
     weekNumber: 'p-datepicker-weeknumber',
     weekLabelContainer: 'p-disabled',
-    day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
-    dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
-    monthPicker: 'p-monthpicker',
-    month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
-    yearPicker: 'p-yearpicker',
-    year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
+    weekDay: 'p-datepicker-weekday-cell',
+    weekDayLabel: 'p-date-picker-weekday',
+    day: ({ date }) => ['p-datepicker-day-cell', { 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
+    dayLabel: ({ instance, props, date }) => ['p-datepicker-day', { 'p-datepicker-day-selected': instance.isSelected(date) && date.selectable, 'p-disabled': props.disabled || !date.selectable }],
+    monthPicker: 'p-datepicker-month-view',
+    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',
+    year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
     timePicker: 'p-timepicker',
     hourPicker: 'p-hour-picker',
     incrementButton: 'p-link',
diff --git a/components/lib/themes/primeone/base/calendar/index.js b/components/lib/themes/primeone/base/calendar/index.js
index 1ba44c2af..3fa31778f 100644
--- a/components/lib/themes/primeone/base/calendar/index.js
+++ b/components/lib/themes/primeone/base/calendar/index.js
@@ -1,21 +1,21 @@
 export default {
     css: ({ dt }) => `
-.p-calendar {
+.p-datepicker {
     display: inline-flex;
     max-width: 100%;
 }
 
-.p-calendar .p-inputtext {
+.p-datepicker-input {
     flex: 1 1 auto;
     width: 1%;
 }
 
-.p-calendar-w-btn .p-inputtext {
+.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 
-.p-datepicker-trigger {
+.p-datepicker-dropdown {
     cursor: pointer;
     display: inline-flex;
     cursor: pointer;
@@ -35,32 +35,32 @@ export default {
     outline-color: transparent;
 }
 
-.p-datepicker-trigger:not(:disabled):hover {
+.p-datepicker-dropdown: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 {
+.p-datepicker-dropdown: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')};
+.p-datepicker-dropdown:focus-visible {
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-calendar:has(.p-input-icon) {
+.p-datepicker:has(.p-datepicker-input-icon) {
     position: relative;
 }
 
-.p-calendar:has(.p-input-icon) .p-calendar-input {
+.p-datepicker:has(.p-datepicker-input-icon) .p-datepicker-input {
     padding-right: 2.5rem;
 }
 
-.p-calendar .p-input-icon {
+.p-datepicker-input-icon {
     cursor: pointer;
     position: absolute;
     top: 50%;
@@ -68,19 +68,19 @@ export default {
     margin-top: -.5rem;
 }
 
-.p-fluid .p-calendar {
+.p-fluid .p-datepicker {
     display: flex;
 }
 
-.p-fluid .p-calendar .p-inputtext {
+.p-fluid .p-datepicker-input {
     width: 1%;
 }
 
-.p-calendar .p-datepicker {
+.p-datepicker .p-datepicker-panel {
     min-width: 100%;
 }
 
-.p-datepicker {
+.p-datepicker-panel {
     width: auto;
     padding: 0.75rem;
     background: ${dt('calendar.background')};
@@ -90,7 +90,7 @@ export default {
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
 
-.p-datepicker-inline {
+.p-datepicker-panel-inline {
     display: inline-block;
     overflow-x: auto;
     box-shadow: none;
@@ -142,38 +142,38 @@ export default {
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-datepicker-year,
-.p-datepicker-month {
+.p-datepicker-view-year,
+.p-datepicker-view-month {
     font-weight: 500;
     padding: 0.25rem;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
-.p-datepicker-month {
+.p-datepicker-view-month {
     margin-right: 0.5rem;
     color: ${dt('calendar.month.picker.color')};
 }
 
-.p-datepicker-year {
+.p-datepicker-view-year {
     margin-right: 0.5rem;
     color: ${dt('calendar.year.picker.color')};
 }
 
-.p-datepicker-month:enabled:hover {
+.p-datepicker-view-month:enabled:hover {
     background: ${dt('calendar.month.picker.hover.background')};
     color: ${dt('calendar.month.picker.hover.color')};
 }
 
-.p-datepicker-year:enabled:hover {
+.p-datepicker-view-year:enabled:hover {
     background: ${dt('calendar.year.picker.hover.background')};
     color: ${dt('calendar.year.picker.hover.color')};
 }
 
-.p-datepicker-multiple-month .p-datepicker-group-container {
+.p-datepicker-calendar-container {
     display: flex;
 }
 
-.p-datepicker-multiple-month .p-datepicker-group {
+.p-datepicker-calendar-container .p-datepicker-calendar {
     flex: 1 1 auto;
     border-left: 1px solid ${dt('calendar.group.border.color')};
     padding-right: 0.75rem;
@@ -182,37 +182,35 @@ export default {
     padding-bottom: 0;
 }
 
-.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+.p-datepicker-calendar-container .p-datepicker-calendar:first-child {
     padding-left: 0;
     border-left: 0 none;
 }
 
-.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+.p-datepicker-calendar-container .p-datepicker-calendar:last-child {
     padding-right: 0;
 }
 
-.p-datepicker table {
+.p-datepicker-day-view {
     width: 100%;
     border-collapse: collapse;
     font-size: 1rem;
     margin: 0.5rem 0 0 0;
 }
 
-.p-datepicker table th {
+.p-datepicker-weekday-cell {
     padding: 0.25rem;
+}
+
+.p-datepicker-weekday {
     font-weight: 500;
 }
 
-.p-datepicker table th > span {
-    width: 2rem;
-    height: 2rem;
-}
-
-.p-datepicker table td {
+.p-datepicker-day-cell {
     padding: 0.25rem;
 }
 
-.p-datepicker td > span {
+.p-datepicker-day {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -229,36 +227,36 @@ export default {
     color: ${dt('calendar.date.color')};
 }
 
-.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
     background: ${dt('calendar.date.hover.background')};
     color: ${dt('calendar.date.hover.color')};
 }
 
-.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus-visible {
+.p-datepicker-day:focus-visible {
     outline: 1px solid ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-datepicker table td > span.p-highlight {
+.p-datepicker-day-selected {
     background: ${dt('calendar.date.selected.background')};
     color: ${dt('calendar.date.selected.color')};
 }
 
-.p-datepicker table td.p-datepicker-today > span {
+.p-datepicker-today > .p-datepicker-day {
     background: ${dt('calendar.today.background')};
     color: ${dt('calendar.today.color')};
 }
 
-.p-datepicker table td.p-datepicker-today > span.p-highlight {
+.p-datepicker-today > .p-datepicker-day-selected {
     background: ${dt('calendar.date.selected.background')};
     color: ${dt('calendar.date.selected.color')};
 }
 
-.p-monthpicker {
+.p-datepicker-month-view {
     margin: 0.5rem 0 0 0;
 }
 
-.p-monthpicker-month {
+.p-datepicker-month {
     width: 33.3%;
     display: inline-flex;
     align-items: center;
@@ -273,27 +271,26 @@ export default {
     color: ${dt('calendar.month.color')};
 }
 
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
     color:  ${dt('calendar.month.hover.color')};
     background: ${dt('calendar.month.hover.background')};
 }
 
-.p-monthpicker-month.p-highlight {
+.p-datepicker-month-selected {
     color: ${dt('calendar.month.selected.color')};
     background: ${dt('calendar.month.selected.background')};
 }
 
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus-visible {
+.p-datepicker-month:not(.p-disabled):focus-visible {
     outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
     outline-offset: 0;
 }
 
-/* Year Picker */
-.p-yearpicker {
+.p-datepicker-year-view {
     margin: 0.5rem 0 0 0;
 }
 
-.p-yearpicker-year {
+.p-datepicker-year {
     width: 50%;
     display: inline-flex;
     align-items: center;
@@ -308,17 +305,17 @@ export default {
     color: ${dt('calendar.year.color')};
 }
 
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
     color:  ${dt('calendar.year.hover.color')};
     background: ${dt('calendar.year.hover.background')};
 }
 
-.p-yearpicker-year.p-highlight {
+.p-datepicker-year-selected {
     color: ${dt('calendar.year.selected.color')};
     background: ${dt('calendar.year.selected.background')};
 }
 
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus-visible {
+.p-datepicker-year:not(.p-disabled):focus-visible {
     outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
     outline-offset: 0;
 }
@@ -333,8 +330,6 @@ export default {
 
 .p-datepicker-buttonbar .p-button {
     width: auto;
-    padding: 0.25rem 0.75rem;
-    font-size: 0.875rem;
 }
 
 .p-timepicker {
@@ -345,12 +340,12 @@ export default {
     padding: 0;
 }
 
-.p-datepicker .p-datepicker-group-container+.p-timepicker {
+.p-datepicker-calendar-group + .p-timepicker {
     margin-top: 0.5rem;
     padding-top: 0.5rem;
 }
 
-.p-timepicker>div {
+.p-timepicker > div {
     display: flex;
     align-items: center;
     flex-direction: column;