airbnb.css in flatpickr-3.0.0.0

- old
+ new

@@ -12,16 +12,18 @@
   border: 0;
   font-size: 14px;
   line-height: 24px;
   border-radius: 5px;
   position: absolute;
-  width: 315px;
-  box-sizing: border-box;
+  width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   -ms-touch-action: manipulation;
       touch-action: manipulation;
   background: #fff;
-  box-shadow: 1px 0 0 #eee, -1px 0 0 #eee, 0 1px 0 #eee, 0 -1px 0 #eee, 0 3px 13px rgba(0,0,0,0.08);
+  -webkit-box-shadow: 1px 0 0 #eee, -1px 0 0 #eee, 0 1px 0 #eee, 0 -1px 0 #eee, 0 3px 13px rgba(0,0,0,0.08);
+          box-shadow: 1px 0 0 #eee, -1px 0 0 #eee, 0 1px 0 #eee, 0 -1px 0 #eee, 0 3px 13px rgba(0,0,0,0.08);
 }
 .flatpickr-calendar.open,
 .flatpickr-calendar.inline {
   opacity: 1;
   visibility: visible;
@@ -192,10 +194,11 @@
 .flatpickr-next-month svg {
   width: 14px;
 }
 .flatpickr-prev-month svg path,
 .flatpickr-next-month svg path {
+  -webkit-transition: fill 0.1s;
   transition: fill 0.1s;
   fill: inherit;
 }
 .numInputWrapper {
   position: relative;
@@ -216,11 +219,12 @@
   height: 50%;
   line-height: 50%;
   opacity: 0;
   cursor: pointer;
   border: 1px solid rgba(64,72,72,0.05);
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .numInputWrapper span:hover {
   background: rgba(0,0,0,0.1);
 }
 .numInputWrapper span:active {
@@ -324,11 +328,12 @@
 .flatpickr-current-month .numInputWrapper span.arrowDown:after {
   border-top-color: #3c3f40;
 }
 .flatpickr-current-month input.cur-year {
   background: transparent;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   color: inherit;
   cursor: default;
   padding: 0 0 0 0.5ch;
   margin: 0;
   display: inline-block;
@@ -353,14 +358,16 @@
 }
 .flatpickr-weekdays {
   background: transparent;
   text-align: center;
   overflow: hidden;
-  width: 315px;
+  width: 100%;
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   height: 28px;
 }
@@ -371,10 +378,11 @@
   color: rgba(0,0,0,0.54);
   line-height: 1;
   margin: 0;
   text-align: center;
   display: block;
+  -webkit-box-flex: 1;
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
   font-weight: bolder;
 }
@@ -383,28 +391,31 @@
   padding: 1px 0 0 0;
 }
 .flatpickr-days {
   position: relative;
   overflow: hidden;
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 315px;
+  width: 307.875px;
 }
 .flatpickr-days:focus {
   outline: 0;
 }
 .dayContainer {
   padding: 0;
   outline: 0;
   text-align: left;
-  width: 315px;
-  min-width: 315px;
-  max-width: 315px;
-  box-sizing: border-box;
+  width: 307.875px;
+  min-width: 307.875px;
+  max-width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   display: inline-block;
   display: -ms-flexbox;
+  display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
           flex-wrap: wrap;
   -ms-flex-wrap: wrap;
@@ -440,24 +451,26 @@
 }
 .flatpickr-day {
   background: none;
   border: 1px solid transparent;
   border-radius: 150px;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   color: #404848;
   cursor: pointer;
   font-weight: 400;
   width: 14.2857143%;
   -webkit-flex-basis: 14.2857143%;
       -ms-flex-preferred-size: 14.2857143%;
           flex-basis: 14.2857143%;
-  max-width: 40px;
-  height: 40px;
-  line-height: 40px;
+  max-width: 39px;
+  height: 39px;
+  line-height: 39px;
   margin: 0;
   display: inline-block;
   position: relative;
+  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   text-align: center;
 }
@@ -504,11 +517,12 @@
 .flatpickr-day.endRange.prevMonthDay,
 .flatpickr-day.selected.nextMonthDay,
 .flatpickr-day.startRange.nextMonthDay,
 .flatpickr-day.endRange.nextMonthDay {
   background: #4f99ff;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: #fff;
   border-color: #4f99ff;
 }
 .flatpickr-day.selected.startRange,
 .flatpickr-day.startRange.startRange,
@@ -521,20 +535,22 @@
   border-radius: 0 50px 50px 0;
 }
 .flatpickr-day.selected.startRange + .endRange,
 .flatpickr-day.startRange.startRange + .endRange,
 .flatpickr-day.endRange.startRange + .endRange {
-  box-shadow: -10px 0 0 #4f99ff;
+  -webkit-box-shadow: -10px 0 0 #4f99ff;
+          box-shadow: -10px 0 0 #4f99ff;
 }
 .flatpickr-day.selected.startRange.endRange,
 .flatpickr-day.startRange.startRange.endRange,
 .flatpickr-day.endRange.startRange.endRange {
   border-radius: 50px;
 }
 .flatpickr-day.inRange {
   border-radius: 0;
-  box-shadow: -5px 0 0 #e9e9e9, 5px 0 0 #e9e9e9;
+  -webkit-box-shadow: -5px 0 0 #e9e9e9, 5px 0 0 #e9e9e9;
+          box-shadow: -5px 0 0 #e9e9e9, 5px 0 0 #e9e9e9;
 }
 .flatpickr-day.disabled,
 .flatpickr-day.disabled:hover {
   pointer-events: none;
 }
@@ -550,22 +566,24 @@
   border-color: #e9e9e9;
   cursor: default;
 }
 .flatpickr-day.week.selected {
   border-radius: 0;
-  box-shadow: -5px 0 0 #4f99ff, 5px 0 0 #4f99ff;
+  -webkit-box-shadow: -5px 0 0 #4f99ff, 5px 0 0 #4f99ff;
+          box-shadow: -5px 0 0 #4f99ff, 5px 0 0 #4f99ff;
 }
 .rangeMode .flatpickr-day {
   margin-top: 1px;
 }
 .flatpickr-weekwrapper {
   display: inline-block;
   float: left;
 }
 .flatpickr-weekwrapper .flatpickr-weeks {
   padding: 0 12px;
-  box-shadow: 1px 0 0 #eee;
+  -webkit-box-shadow: 1px 0 0 #eee;
+          box-shadow: 1px 0 0 #eee;
 }
 .flatpickr-weekwrapper .flatpickr-weekday {
   float: none;
   width: 100%;
   line-height: 28px;
@@ -575,40 +593,46 @@
   width: 100%;
   max-width: none;
 }
 .flatpickr-innerContainer {
   display: block;
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   overflow: hidden;
 }
 .flatpickr-rContainer {
   display: inline-block;
   padding: 0;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .flatpickr-time {
   text-align: center;
   outline: 0;
   display: block;
   height: 0;
   line-height: 40px;
   max-height: 40px;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   overflow: hidden;
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 .flatpickr-time:after {
   content: "";
   display: table;
   clear: both;
 }
 .flatpickr-time .numInputWrapper {
+  -webkit-box-flex: 1;
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
   width: 40%;
   height: 40px;
@@ -626,11 +650,12 @@
 .flatpickr-time.time24hr .numInputWrapper {
   width: 49%;
 }
 .flatpickr-time input {
   background: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   border: 0;
   border-radius: 0;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -638,11 +663,12 @@
   line-height: inherit;
   cursor: pointer;
   color: #404848;
   font-size: 14px;
   position: relative;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .flatpickr-time input.flatpickr-hour {
   font-weight: bold;
 }
 .flatpickr-time input.flatpickr-minute,
@@ -666,11 +692,10 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   -webkit-align-self: center;
       -ms-flex-item-align: center;
-              -ms-grid-row-align: center;
           align-self: center;
 }
 .flatpickr-time .flatpickr-am-pm {
   outline: 0;
   width: 18%;
@@ -820,11 +845,11 @@
   to {
     opacity: 1;
   }
 }
 .flatpickr-calendar {
-  width: 315px;
+  width: 307.875px;
 }
 .dayContainer {
   padding: 0;
   border-right: 0;
 }
@@ -887,10 +912,11 @@
 }
 .rangeMode .flatpickr-day {
   margin-top: -1px;
 }
 .flatpickr-weekwrapper .flatpickr-weeks {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .flatpickr-weekwrapper span.flatpickr-day {
   border: 0;
   margin: -1px 0 0 -1px;
 }