💄(Style): IE 11 comptability - removed grid

Author: mathieustan

dist/vue-datepicker.esm.js

@@ -296,22 +296,14 @@ export default  {
   @import './styles/abstracts/_index.scss';
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr;
-
-    @include mq('md') {
-      grid-template-columns: 180px 1fr;
-    }
-  }
-
-  .header {
-    grid-column: 1 / 3;
+    display: flex;
+    flex: 1 1 auto;
   }
 
   .content {
     display: flex;
     max-width: 1000px;
-    margin: 0 auto;
+    margin: 80px auto;
     width: 100vw;
     font-size: 1em;
     line-height: 1.62;

dist/vue-datepicker.min.css

@@ -57,14 +57,14 @@ export default {
   @import '../styles/abstracts/_index.scss';
 
   .header {
-    position: sticky;
+    position: fixed;
     top: 0;
     left: 0;
+    right: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 80px;
-    width: 100%;
     background-color: color(other, blue);
     color: #fff;
     padding: $gutter*2;

dist/vue-datepicker.min.js

@@ -34,12 +34,13 @@ export default {
   @import '../styles/abstracts/_index.scss';
 
   nav {
-    position: sticky;
+    position: fixed;
     display: none;
     left: 0;
+    top: 0;
+    margin-top: 80px;
     width: 180px;
     height: calc(100vh - 80px);
-    top: 80px;
     background-color: white;
     border-right: 1px solid #3b454e;
     overflow-y: scroll; /* has to be scroll, not auto */

dist/vue-datepicker.umd.js

@@ -26,7 +26,7 @@
   }
 
   &--bottomsheet {
-    @include mq($to: phone) {
+    @include mq($to: 481px) {
       width: 100%;
 
       .vd-picker__header {

doc-src/src/App.vue

@@ -5,12 +5,14 @@
   position: relative;
   display: flex;
   height: get-size(mobile, controls);
+  min-height: get-size(mobile, controls);
   text-align: center;
   position: relative;
   width: 100%;
 
   @include mq(tablet) {
     height: get-size(desktop, controls);
+    min-height: get-size(desktop, controls);
   }
 
   &-wrapper {
@@ -19,31 +21,55 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    flex: 1;
+    flex: 1 1 auto;
   }
 
   &-month,
   &-year {
     position: relative;
     display: flex;
-    flex: 1;
+    flex: 1 1 auto;
     align-items: center;
   }
 
   &-month {
     justify-content: flex-end;
+
+    .vd-picker__controls-label {
+      right: 0;
+
+      .vd-picker--rtl & {
+        right: auto;
+        left: 0;
+      }
+    }
   }
 
   &-year {
     justify-content: flex-start;
 
+    .vd-picker__controls-label {
+      left: 0;
+
+      .vd-picker--rtl & {
+        left: auto;
+        right: 0;
+      }
+    }
+
     &.vd-picker__controls-year--center {
-      justify-content: center;
+      .vd-picker__controls-label {
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
     }
   }
 
   &-label {
     padding: $gutter $gutter/2;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
 
     button {
       @extend %reset-button;
@@ -74,6 +100,7 @@
     position: relative;
     flex: 0 0 40px;
     height: get-size(mobile, controls);
+    min-height: get-size(mobile, controls);
     width: get-size(mobile, controls);
     padding: 0 0 0 $gutter*3;
     border: none;
@@ -86,6 +113,7 @@
     @include mq(tablet) {
       padding: 0 $gutter 0 $gutter;
       height: get-size(desktop, controls);
+      min-height: get-size(desktop, controls);
       width: get-size(desktop, controls);
     }
 

doc-src/src/components/Header.vue

@@ -8,7 +8,7 @@
   bottom: 0;
   background-color: transparentize(black, .5);
 
-  @include mq(phone) {
+  @include mq(481px) {
     display: none;
   }
 }