vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Custom style for ranges

Browse source
This commit is contained in:
Cagatay Civici 2024-06-13 01:16:03 +03:00
parent 2614bafa74
commit a0fb228dc1
4 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/primevue/src/datepicker/style/DatePickerStyle.js
View file

@ -226,6 +226,11 @@ const theme = ({ dt }) => `
color: ${dt('datepicker.date.selected.color')}; color: ${dt('datepicker.date.selected.color')};
} }
.p-datepicker-day-selected-range {
background: ${dt('datepicker.date.range.selected.background')};
color: ${dt('datepicker.date.range.selected.color')};
}
.p-datepicker-today > .p-datepicker-day { .p-datepicker-today > .p-datepicker-day {
background: ${dt('datepicker.today.background')}; background: ${dt('datepicker.today.background')};
color: ${dt('datepicker.today.color')}; color: ${dt('datepicker.today.color')};
@ -236,6 +241,11 @@ const theme = ({ dt }) => `
color: ${dt('datepicker.date.selected.color')}; color: ${dt('datepicker.date.selected.color')};
} }
.p-datepicker-today > .p-datepicker-day-selected-range {
background: ${dt('datepicker.date.range.selected.background')};
color: ${dt('datepicker.date.range.selected.color')};
}
.p-datepicker-weeknumber { .p-datepicker-weeknumber {
text-align: center text-align: center
} }

6
packages/themes/src/presets/aura/datepicker/index.js
View file

@ -67,10 +67,12 @@ export default {
}, },
date: { date: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}', selectedBackground: '{primary.color}',
rangeSelectedBackground: '{highlight.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}', selectedColor: '{primary.contrast.color}',
rangeSelectedColor: '{highlight.color}',
width: '2rem', width: '2rem',
height: '2rem', height: '2rem',
borderRadius: '50%', borderRadius: '50%',

6
packages/themes/src/presets/lara/datepicker/index.js
View file

@ -65,10 +65,12 @@ export default {
}, },
date: { date: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}', selectedBackground: '{primary.color}',
rangeSelectedBackground: '{highlight.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}', selectedColor: '{primary.contrast.color}',
rangeSelectedColor: '{highlight.color}',
width: '2.5rem', width: '2.5rem',
height: '2.5rem', height: '2.5rem',
borderRadius: '50%', borderRadius: '50%',

6
packages/themes/src/presets/nora/datepicker/index.js
View file

@ -69,10 +69,12 @@ export default {
}, },
date: { date: {
hoverBackground: '{content.hover.background}', hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}', selectedBackground: '{primary.color}',
rangeSelectedBackground: '{highlight.background}',
color: '{content.color}', color: '{content.color}',
hoverColor: '{content.hover.color}', hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}', selectedColor: '{primary.contrast.color}',
rangeSelectedColor: '{highlight.color}',
width: '2rem', width: '2rem',
height: '2rem', height: '2rem',
borderRadius: '50%', borderRadius: '50%',