SCSS
To override some properties you can import the scss
file and modify the default properties
@import 'vue3-date-time-picker/src/Vue3DatePicker/styles/main.scss';
1
Available properties are:
Default Font family of the datepicker
- $dp__font_family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !default
Default border-radius, apples to the radius of the input, menu, elements in the menu
- $dp__border_radius:
4px !default
Default cell padding in the menu, changing this value will affect the size of the datepicker
- $dp__cell_padding:
5px !default
Default radius for the cells in the calendar, inherited from the default border-radius
- $dp__cell_border_radius:
$dp__border_radius !default
Font control, 3 options are set separately, general, for date preview and for time boxes
- $dp__font_size:
1rem !default
- $dp__preview_font_size:
0.8rem !default
- $dp__time_font_size:
2rem !default
Sizing of the cell square, width and height
- $dp__cell_size:
30px !default
Common padding used in buttons, overlay selections and action row
- $dp__common_padding:
10px !default