Change formatting to local em-sizes

[signalwerk]

Problem: I think the component-styling looks great. But if I need to place it smaller or bigger in my design I have to change all the default stylings.

Suggested solution: if the styling is on the root-level set by rem (line: 5) and in the component by em I just need to change .DayPicker { font-size: 2rem; } and the whole calendar will scale in proportion to it.

Compatibility: This change should not break any existing styling. People who did manual styling will not be affected, since they reset the default styling. And people who made no changes will not notice, since it's visually equal to the existing codebase.

Sidenote: on Line 88 there was already a em format introduced.

[codecov]

Codecov Report

Merging #777 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #777   +/-   ##
=======================================
  Coverage   99.84%   99.84%           
=======================================
  Files          15       15           
  Lines         646      646           
  Branches      142      142           
=======================================
  Hits          645      645           
  Misses          1        1

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d616361...42ebe72. Read the comment docs.

[gpbl]

Good idea, thanks! I think we should switch completely to em (so, even the root element) in the next major release – what do you think?

[signalwerk]

@gpbl that sounds good to me. I just thought I will not rock the boat too heavy 🤓 and keep it compatible with the existing codebase. but I guess it's also great to change the root to em. Feels actually better with em. Then it can be wrapped in an element with defined font-size and no need to overwrite the .DayPicker. Sounds good to me!