[Date-picker] Components specs #158
Description
Design Specifications
| Property | Value |
|---|---|
| Margin | 10px |
| Height (default) | 34px |
| Height (selected) | 51px |
| Height (selected + auxiliar text) | 74px |
| Min widht | 230px |
| Border thickness | 1px/2px |
| Font size (with text) | 16px |
| Font weight | Regular |
| Icon size | 18x18px |
| Distance between text and underline | 7px |
icon size [image]: 20x20px
Min width [image]: 230px
Height (default) [image]: 34px
Margin [implementation]: 36px
Height (default) [implementation]: 37.8px
Height (selected) [implementation]: 41.8px
Height (selected + auxiliar text) [implementation]: 71.3px
Distance between text and underline [implementation]: 8px
Min width [implementation]: 240px
Calendar Pop-up Specifications
| Property | Value |
|---|---|
| Padding | 20px |
| Height (default) | 354px |
| Width (default) | 296px |
| Circle size | 28x28px |
| Circle thickness | 1px |
| Font weight | Regular |
| Font size | 13px |
Padding [image]: 16px
height [image]: 354px
width [image]: 296px
Padding [implementation]: 16px
height [implementation]: 331px
width [implementation]: 299px
Use of 'Roboto, "Helvetica Neue", sans-serif' in the Calender pop-up for the 'Month and Year' Name both in Angular and react.