From b5107b3f45ba3805dd0c02dd2029feb173a3d58e Mon Sep 17 00:00:00 2001
From: signalwerk <sh@signalwerk.ch>
Date: Sat, 25 Aug 2018 20:16:07 +0200
Subject: [PATCH] Change formatting to local em-sizes

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](https://github.com/gpbl/react-day-picker/blob/master/src/style.css#L88) there was already a `em` format introduced.
---
 src/style.css | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/style.css b/src/style.css
index bdaa4fd483..d9e0580b23 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,12 +2,13 @@
 
 .DayPicker {
   display: inline-block;
+  font-size: 1rem;
 }
 
 .DayPicker-wrapper {
   position: relative;
   user-select: none;
-  padding-bottom: 1rem;
+  padding-bottom: 1em;
   flex-direction: row;
 }
 
@@ -22,8 +23,8 @@
   border-collapse: collapse;
   border-spacing: 0;
   user-select: none;
-  margin: 0 1rem;
-  margin-top: 1rem;
+  margin: 0 1em;
+  margin-top: 1em;
 }
 
 .DayPicker-NavBar {
@@ -32,12 +33,12 @@
 .DayPicker-NavButton {
   position: absolute;
   cursor: pointer;
-  top: 1rem;
-  right: 1.5rem;
+  top: 1em;
+  right: 1.5em;
   margin-top: 2px;
   color: #8b9898;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.25em;
+  height: 1.25em;
   display: inline-block;
   background-size: 50%;
   background-repeat: no-repeat;
@@ -49,7 +50,7 @@
 }
 
 .DayPicker-NavButton--prev {
-  margin-right: 1.5rem;
+  margin-right: 1.5em;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAABGdBTUEAALGPC/xhBQAAAVVJREFUWAnN2G0KgjAYwPHpGfRkaZeqvgQaK+hY3SUHrk1YzNLay/OiEFp92I+/Mp2F2Mh2lLISWnflFjzH263RQjzMZ19wgs73ez0o1WmtW+dgA01VxrE3p6l2GLsnBy1VYQOtVSEH/atCCgqpQgKKqYIOiq2CBkqtggLKqQIKgqgCBjpJ2Y5CdJ+zrT9A7HHSTA1dxUdHgzCqJIEwq0SDsKsEg6iqBIEoq/wEcVRZBXFV+QJxV5mBtlDFB5VjYTaGZ2sf4R9PM7U9ZU+lLuaetPP/5Die3ToO1+u+MKtHs06qODB2zBnI/jBd4MPQm1VkY79Tb18gB+C62FdBFsZR6yeIo1YQiLJWMIiqVjQIu1YSCLNWFgijVjYIuhYYCKoWKAiiFgoopxYaKLUWOii2FgkophYp6F3r42W5A9s9OcgNvva8xQaysKXlFytoqdYmQH6tF3toSUo0INq9AAAAAElFTkSuQmCC');
 }
 
@@ -62,19 +63,19 @@
 }
 
 .DayPicker-Caption {
-  padding: 0 0.5rem;
+  padding: 0 0.5em;
   display: table-caption;
   text-align: left;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.5em;
 }
 
 .DayPicker-Caption > div {
-  font-size: 1.15rem;
+  font-size: 1.15em;
   font-weight: 500;
 }
 
 .DayPicker-Weekdays {
-  margin-top: 1rem;
+  margin-top: 1em;
   display: table-header-group;
 }
 
@@ -84,7 +85,7 @@
 
 .DayPicker-Weekday {
   display: table-cell;
-  padding: 0.5rem;
+  padding: 0.5em;
   font-size: 0.875em;
   text-align: center;
   color: #8b9898;
@@ -105,7 +106,7 @@
 
 .DayPicker-Day {
   display: table-cell;
-  padding: 0.5rem;
+  padding: 0.5em;
   text-align: center;
   cursor: pointer;
   vertical-align: middle;
@@ -114,10 +115,10 @@
 
 .DayPicker-WeekNumber {
   display: table-cell;
-  padding: 0.5rem;
+  padding: 0.5em;
   text-align: right;
   vertical-align: middle;
-  min-width: 1rem;
+  min-width: 1em;
   font-size: 0.75em;
   cursor: pointer;
   color: #8b9898;
@@ -129,7 +130,7 @@
 }
 
 .DayPicker-Footer {
-  padding-top: 0.5rem;
+  padding-top: 0.5em;
 }
 
 .DayPicker-TodayButton {