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

Cleared styled from action icons from datepicker to use Prime buttons

pull/5677/head
Cagatay Civici 2024-04-08 12:42:06 +03:00
parent 008eb93ddc
commit 3dbad6fd73
4 changed files with 4 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/calendar/BaseCalendar.vue
View File

@ -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: {

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

@ -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',

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

@ -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;
}
`
};

20
components/lib/themes/primeone/presets/aura/calendar/index.js
View File

@ -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}',