Refactored datepicker
parent
1a4c249b97
commit
30fa452525
|
@ -231,13 +231,13 @@ export default {
|
||||||
navigatorButtonProps: {
|
navigatorButtonProps: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default() {
|
||||||
return { severity: 'secondary', text: true };
|
return { severity: 'secondary', text: true, rounded: true };
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
timepickerButtonProps: {
|
timepickerButtonProps: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default() {
|
||||||
return { severity: 'secondary', text: true };
|
return { severity: 'secondary', text: true, rounded: true };
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
ariaLabelledby: {
|
ariaLabelledby: {
|
||||||
|
|
|
@ -122,22 +122,22 @@ const theme = ({ dt }) => `
|
||||||
|
|
||||||
.p-datepicker-view-month {
|
.p-datepicker-view-month {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
color: ${dt('datepicker.month.picker.color')};
|
color: ${dt('datepicker.view.month.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-view-year {
|
.p-datepicker-view-year {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
color: ${dt('datepicker.year.picker.color')};
|
color: ${dt('datepicker.view.year.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-view-month:enabled:hover {
|
.p-datepicker-view-month:enabled:hover {
|
||||||
background: ${dt('datepicker.month.picker.hover.background')};
|
background: ${dt('datepicker.view.month.hover.background')};
|
||||||
color: ${dt('datepicker.month.picker.hover.color')};
|
color: ${dt('datepicker.view.month.hover.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-view-year:enabled:hover {
|
.p-datepicker-view-year:enabled:hover {
|
||||||
background: ${dt('datepicker.year.picker.hover.background')};
|
background: ${dt('datepicker.view.year.hover.background')};
|
||||||
color: ${dt('datepicker.year.picker.hover.color')};
|
color: ${dt('datepicker.view.year.hover.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-datepicker-container {
|
.p-datepicker-datepicker-container {
|
||||||
|
@ -239,17 +239,17 @@ const theme = ({ dt }) => `
|
||||||
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')};
|
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')};
|
||||||
border-radius: ${dt('rounded.base')};
|
border-radius: ${dt('rounded.base')};
|
||||||
outline-color: transparent;
|
outline-color: transparent;
|
||||||
color: ${dt('datepicker.month.color')};
|
color: ${dt('datepicker.date.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
|
.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
|
||||||
color: ${dt('datepicker.month.hover.color')};
|
color: ${dt('datepicker.date.hover.color')};
|
||||||
background: ${dt('datepicker.month.hover.background')};
|
background: ${dt('datepicker.date.hover.background')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-month-selected {
|
.p-datepicker-month-selected {
|
||||||
color: ${dt('datepicker.month.selected.color')};
|
color: ${dt('datepicker.date.selected.color')};
|
||||||
background: ${dt('datepicker.month.selected.background')};
|
background: ${dt('datepicker.date.selected.background')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-month:not(.p-disabled):focus-visible {
|
.p-datepicker-month:not(.p-disabled):focus-visible {
|
||||||
|
@ -273,17 +273,17 @@ const theme = ({ dt }) => `
|
||||||
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')};
|
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')};
|
||||||
border-radius: ${dt('rounded.base')};
|
border-radius: ${dt('rounded.base')};
|
||||||
outline-color: transparent;
|
outline-color: transparent;
|
||||||
color: ${dt('datepicker.year.color')};
|
color: ${dt('datepicker.date.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
|
.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
|
||||||
color: ${dt('datepicker.year.hover.color')};
|
color: ${dt('datepicker.date.hover.color')};
|
||||||
background: ${dt('datepicker.year.hover.background')};
|
background: ${dt('datepicker.date.hover.background')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-year-selected {
|
.p-datepicker-year-selected {
|
||||||
color: ${dt('datepicker.year.selected.color')};
|
color: ${dt('datepicker.date.selected.color')};
|
||||||
background: ${dt('datepicker.year.selected.background')};
|
background: ${dt('datepicker.date.selected.background')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-year:not(.p-disabled):focus-visible {
|
.p-datepicker-year:not(.p-disabled):focus-visible {
|
||||||
|
@ -307,11 +307,11 @@ const theme = ({ dt }) => `
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-top: 1px solid ${dt('datepicker.timepicker.border.color')};
|
border-top: 1px solid ${dt('datepicker.time.picker.border.color')};
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-datepicker-datepicker-group + .p-timepicker {
|
.p-datepicker-datepicker-group + .p-datepicker-time-picker {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,138 +1,63 @@
|
||||||
export default {
|
export default {
|
||||||
colorScheme: {
|
|
||||||
light: {
|
|
||||||
root: {
|
root: {
|
||||||
background: '{surface.0}',
|
background: '{content.background}',
|
||||||
borderColor: '{surface.200}',
|
borderColor: '{content.border.color}',
|
||||||
color: '{surface.700}'
|
color: '{content.color}'
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
background: '{surface.0}',
|
background: '{content.background}',
|
||||||
borderColor: '{surface.200}',
|
borderColor: '{content.border.color}',
|
||||||
color: '{surface.700}'
|
color: '{content.color}'
|
||||||
},
|
|
||||||
monthPicker: {
|
|
||||||
hoverBackground: '{surface.100}',
|
|
||||||
color: '{surface.700}',
|
|
||||||
hoverColor: '{surface.800}'
|
|
||||||
},
|
|
||||||
yearPicker: {
|
|
||||||
hoverBackground: '{surface.100}',
|
|
||||||
color: '{surface.700}',
|
|
||||||
hoverColor: '{surface.800}'
|
|
||||||
},
|
|
||||||
group: {
|
|
||||||
borderColor: '{surface.200}'
|
|
||||||
},
|
|
||||||
date: {
|
|
||||||
hoverBackground: '{surface.100}',
|
|
||||||
selectedBackground: '{highlight.background}',
|
|
||||||
color: '{surface.700}',
|
|
||||||
hoverColor: '{surface.800}',
|
|
||||||
selectedColor: '{highlight.color}'
|
|
||||||
},
|
|
||||||
today: {
|
|
||||||
background: '{surface.200}',
|
|
||||||
color: '{surface.900}'
|
|
||||||
},
|
|
||||||
month: {
|
|
||||||
hoverBackground: '{surface.100}',
|
|
||||||
selectedBackground: '{highlight.background}',
|
|
||||||
color: '{surface.700}',
|
|
||||||
hoverColor: '{surface.800}',
|
|
||||||
selectedColor: '{highlight.color}'
|
|
||||||
},
|
|
||||||
year: {
|
|
||||||
hoverBackground: '{surface.100}',
|
|
||||||
selectedBackground: '{highlight.background}',
|
|
||||||
color: '{surface.700}',
|
|
||||||
hoverColor: '{surface.800}',
|
|
||||||
selectedColor: '{highlight.color}'
|
|
||||||
},
|
|
||||||
buttonbar: {
|
|
||||||
borderColor: '{surface.200}'
|
|
||||||
},
|
|
||||||
timepicker: {
|
|
||||||
borderColor: '{surface.200}'
|
|
||||||
},
|
},
|
||||||
dropdown: {
|
dropdown: {
|
||||||
width: '2.5rem',
|
width: '2.5rem',
|
||||||
background: '{surface.100}',
|
|
||||||
hoverBackground: '{surface.200}',
|
|
||||||
activeBackground: '{surface.300}',
|
|
||||||
borderColor: '{form.field.border.color}',
|
borderColor: '{form.field.border.color}',
|
||||||
hoverBorderColor: '{form.field.border.color}',
|
hoverBorderColor: '{form.field.border.color}',
|
||||||
activeBorderColor: '{form.field.border.color}',
|
activeBorderColor: '{form.field.border.color}',
|
||||||
color: '{surface.600}',
|
background: '{button.secondary.background}',
|
||||||
hoverColor: '{surface.700}',
|
hoverBackground: '{button.secondary.hover.background}',
|
||||||
activeColor: '{surface.800}'
|
activeBackground: '{button.secondary.active.background}',
|
||||||
}
|
color: '{button.secondary.color}',
|
||||||
|
hoverColor: '{button.secondary.hover.color}',
|
||||||
|
activeColor: '{button.secondary.active.color}'
|
||||||
},
|
},
|
||||||
dark: {
|
viewMonth: {
|
||||||
root: {
|
hoverBackground: '{content.hover.background}',
|
||||||
background: '{surface.900}',
|
color: '{content.color}',
|
||||||
borderColor: '{surface.700}',
|
hoverColor: '{content.hover.color}'
|
||||||
color: '{surface.0}'
|
|
||||||
},
|
},
|
||||||
header: {
|
viewYear: {
|
||||||
background: '{surface.900}',
|
hoverBackground: '{content.hover.background}',
|
||||||
borderColor: '{surface.700}',
|
color: '{content.color}',
|
||||||
color: '{surface.0}'
|
hoverColor: '{content.hover.color}'
|
||||||
},
|
|
||||||
monthPicker: {
|
|
||||||
hoverBackground: '{surface.800}',
|
|
||||||
color: '{surface.0}',
|
|
||||||
hoverColor: '{surface.0}'
|
|
||||||
},
|
|
||||||
yearPicker: {
|
|
||||||
hoverBackground: '{surface.800}',
|
|
||||||
color: '{surface.0}',
|
|
||||||
hoverColor: '{surface.0}'
|
|
||||||
},
|
},
|
||||||
group: {
|
group: {
|
||||||
borderColor: '{surface.700}'
|
borderColor: '{content.border.color}'
|
||||||
},
|
},
|
||||||
date: {
|
date: {
|
||||||
hoverBackground: '{surface.800}',
|
hoverBackground: '{content.hover.background}',
|
||||||
selectedBackground: '{highlight.background}',
|
selectedBackground: '{highlight.background}',
|
||||||
color: '{surface.0}',
|
color: '{content.color}',
|
||||||
hoverColor: '{surface.0}',
|
hoverColor: '{content.hover.color}',
|
||||||
selectedColor: '{highlight.color}'
|
|
||||||
},
|
|
||||||
today: {
|
|
||||||
background: '{surface.700}',
|
|
||||||
color: '{surface.0}'
|
|
||||||
},
|
|
||||||
month: {
|
|
||||||
hoverBackground: '{surface.800}',
|
|
||||||
selectedBackground: '{highlight.background}',
|
|
||||||
color: '{surface.0}',
|
|
||||||
hoverColor: '{surface.0}',
|
|
||||||
selectedColor: '{highlight.color}'
|
|
||||||
},
|
|
||||||
year: {
|
|
||||||
hoverBackground: '{surface.800}',
|
|
||||||
selectedBackground: '{highlight.background}',
|
|
||||||
color: '{surface.0}',
|
|
||||||
hoverColor: '{surface.0}',
|
|
||||||
selectedColor: '{highlight.color}'
|
selectedColor: '{highlight.color}'
|
||||||
},
|
},
|
||||||
buttonbar: {
|
buttonbar: {
|
||||||
borderColor: '{surface.700}'
|
borderColor: '{content.border.color}'
|
||||||
},
|
},
|
||||||
timepicker: {
|
timePicker: {
|
||||||
borderColor: '{surface.700}'
|
borderColor: '{content.border.color}'
|
||||||
},
|
},
|
||||||
dropdown: {
|
colorScheme: {
|
||||||
background: '{surface.800}',
|
light: {
|
||||||
hoverBackground: '{surface.700}',
|
today: {
|
||||||
activeBackground: '{surface.600}',
|
background: '{surface.200}',
|
||||||
borderColor: '{form.field.border.color}',
|
color: '{surface.900}'
|
||||||
hoverBorderColor: '{form.field.border.color}',
|
}
|
||||||
activeBorderColor: '{form.field.border.color}',
|
},
|
||||||
color: '{surface.300}',
|
dark: {
|
||||||
hoverColor: '{surface.200}',
|
today: {
|
||||||
activeColor: '{surface.100}'
|
background: '{surface.700}',
|
||||||
|
color: '{surface.0}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue