Cleared styled from action icons from datepicker to use Prime buttons

components/lib/calendar/BaseCalendar.vue

@@ -223,13 +223,13 @@ export default {
         todayButtonProps: {
             type: Object,
             default() {
-                return { severity: 'secondary', text: true };
+                return { severity: 'secondary', text: true, size: 'small' };
             }
         },
         clearButtonProps: {
             type: Object,
             default() {
-                return { severity: 'secondary', text: true };
+                return { severity: 'secondary', text: true, size: 'small' };
             }
         },
         ariaLabelledby: {

components/lib/calendar/style/CalendarStyle.js

@@ -20,24 +20,22 @@ const classes = {
     panel: ({ instance, props }) => [
         'p-datepicker-panel p-component',
         {
-            'p-datepicker-mobile': instance.queryMatches,
             'p-datepicker-panel-inline': props.inline,
             'p-disabled': props.disabled,
             'p-datepicker-timeonly': props.timeOnly,
-            'p-datepicker-touch-ui': props.touchUI,
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     group: 'p-datepicker-calendar-container',
     calendar: 'p-datepicker-calendar',
     header: 'p-datepicker-header',
-    previousButton: 'p-datepicker-prev p-link',
+    previousButton: 'p-datepicker-navigator p-datepicker-prev p-link',
     previousIcon: 'p-datepicker-prev-icon',
     title: 'p-datepicker-title',
     monthTitle: 'p-datepicker-view-month p-link',
     yearTitle: 'p-datepicker-view-year p-link',
     decadeTitle: 'p-datepicker-decade',
-    nextButton: 'p-datepicker-next p-link',
+    nextButton: 'p-datepicker-navigator p-datepicker-next p-link',
     nextIcon: 'p-datepicker-next-icon',
     grid: 'p-datepicker-day-view',
     weekHeader: 'p-datepicker-weekheader p-disabled',

components/lib/themes/primeone/base/calendar/index.js

@@ -112,36 +112,6 @@ export default {
     line-height: 1.75rem;
 }
 
-.p-datepicker-prev,
-.p-datepicker-next {
-    cursor: pointer;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    position: relative;
-    width: 1.75rem;
-    height: 1.75rem;
-    color: ${dt('calendar.navigator.color')};
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    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')};
-    outline-color: transparent;
-}
-
-.p-datepicker-prev:enabled:hover,
-.p-datepicker-next:enabled:hover {
-    background: ${dt('calendar.navigator.hover.background')};
-    color: ${dt('calendar.navigator.hover.color')};
-}
-
-.p-datepicker-prev:focus-visible,
-.p-datepicker-next:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
-}
-
 .p-datepicker-view-year,
 .p-datepicker-view-month {
     font-weight: 500;
@@ -352,33 +322,6 @@ export default {
     padding: 0 0.5rem;
 }
 
-.p-timepicker button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-    width: 1.75rem;
-    height: 1.75rem;
-    color: ${dt('calendar.timepicker.spin.color')};
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    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')};
-    outline-color: transparent;
-}
-
-.p-timepicker button:enabled:hover {
-    background: ${dt('calendar.timepicker.spin.hover.background')};
-    color: ${dt('calendar.timepicker.spin.hover.color')};
-}
-
-.p-timepicker button:focus-visible {
-    outline: 1px solid ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
-}
-
 .p-timepicker button:last-child {
     margin-top: 0.2em;
 }
@@ -390,16 +333,5 @@ export default {
 .p-datepicker-timeonly .p-timepicker {
     border-top: 0 none;
 }
-
-/* Touch UI */
-.p-datepicker-touch-ui,
-.p-calendar .p-datepicker-touch-ui {
-    min-width: 80vw;
-}
-
-.p-datepicker.p-datepicker-mobile table th,
-.p-datepicker.p-datepicker-mobile table td {
-    padding: 0.25rem;
-}
 `
 };

components/lib/themes/primeone/presets/aura/calendar/index.js

@@ -11,11 +11,6 @@ export default {
                 borderColor: '{surface.200}',
                 color: '{surface.700}'
             },
-            navigator: {
-                hoverBackground: '{surface.100}',
-                color: '{surface.500}',
-                hoverColor: '{surface.600}'
-            },
             monthPicker: {
                 hoverBackground: '{surface.100}',
                 color: '{surface.700}',
@@ -60,11 +55,6 @@ export default {
             timepicker: {
                 borderColor: '{surface.200}'
             },
-            timepickerSpin: {
-                hoverBackground: '{surface.100}',
-                color: '{surface.500}',
-                hoverColor: '{surface.600}'
-            },
             dropdown: {
                 width: '2.5rem',
                 background: '{surface.100}',
@@ -89,11 +79,6 @@ export default {
                 borderColor: '{surface.700}',
                 color: '{surface.0}'
             },
-            navigator: {
-                hoverBackground: '{surface.800}',
-                color: '{surface.400}',
-                hoverColor: '{surface.300}'
-            },
             monthPicker: {
                 hoverBackground: '{surface.800}',
                 color: '{surface.0}',
@@ -138,11 +123,6 @@ export default {
             timepicker: {
                 borderColor: '{surface.700}'
             },
-            timepickerSpin: {
-                hoverBackground: '{surface.800}',
-                color: '{surface.400}',
-                hoverColor: '{surface.300}'
-            },
             dropdown: {
                 background: '{surface.800}',
                 hoverBackground: '{surface.700}',