feat(datepicker): make calendar responsive (#3086)

* started working on responsive calendar table

* fix today, selected, hover styles

* fix label positioning

* replace em with px

* fix today cell styling

src/lib/datepicker/_datepicker-theme.scss

@@ -8,23 +8,25 @@
   $background: map-get($theme, background);
 
   .mat-calendar-table-label {
-    color: md-color($foreground, secondary-text);
+    color: mat-color($foreground, secondary-text);
   }
 
   .mat-calendar-table-cell-content {
-    color: md-color($foreground, text);
+    color: mat-color($foreground, text);
+    border-color: transparent;
+  }
 
-    .mat-calendar-table-cell:hover & {
-      background: md-color($background, hover);
-    }
+  .mat-calendar-table-cell-content:hover {
+    background: mat-color($background, hover);
+  }
 
-    .mat-calendar-table-cell &.mat-calendar-table-selected {
-      background: md-color($primary);
-      color: md-color($primary, default-contrast);
-    }
+  .mat-calendar-table-selected,
+  .mat-calendar-table-selected:hover {
+    background: mat-color($primary);
+    color: mat-color($primary, default-contrast);
+  }
 
-    &.mat-calendar-table-today {
-      border-color: md-color($foreground, divider);
-    }
+  .mat-calendar-table-today {
+    border-color: mat-color($foreground, divider);
   }
 }

src/lib/datepicker/calendar-table.scss

@@ -1,40 +1,62 @@
 $mat-calendar-table-font-size: 12px !default;
-$mat-calendar-table-cell-padding: 1px !default;
-$mat-calendar-table-cell-content-size: 32px !default;
+$mat-calendar-table-label-padding-start: 5% !default;
+$mat-calendar-table-label-translation: -6px !default;
+$mat-calendar-table-cell-min-size: 32px !default;
+$mat-calendar-table-cell-size: 100% / 7 !default;
+$mat-calendar-table-cell-content-margin: 5% !default;
 $mat-calendar-table-cell-content-border-width: 1px !default;
-$mat-calendar-table-label-padding-start: 10px !default;
+
+$mat-calendar-table-min-size: 7 * $mat-calendar-table-cell-min-size !default;
+$mat-calendar-table-cell-padding: $mat-calendar-table-cell-size / 2 !default;
+$mat-calendar-table-cell-content-size: 100% - $mat-calendar-table-cell-content-margin * 2 !default;
 
 
 .mat-calendar-table-table {
   border-spacing: 0;
+  border-collapse: collapse;
   font-size: $mat-calendar-table-font-size;
+  min-width: $mat-calendar-table-min-size;
+  width: 100%;
 }
 
 .mat-calendar-table-label {
-  height: $mat-calendar-table-cell-content-size;
-  padding: 0 0 0 $mat-calendar-table-label-padding-start;
+  padding: 0 0 0 $mat-calendar-table-cell-padding;
+  transform: translateX($mat-calendar-table-label-translation);
   text-align: left;
   font-weight: normal;
 }
 
 .mat-calendar-table-cell {
-  padding: $mat-calendar-table-cell-padding;
+  position: relative;
+  width: $mat-calendar-table-cell-size;
+  height: 0;
+  line-height: 0;
+  padding: $mat-calendar-table-cell-padding 0;
+  text-align: center;
 }
 
 .mat-calendar-table-cell-content {
-  display: table-cell;
+  position: absolute;
+  top: $mat-calendar-table-cell-content-margin;
+  left: $mat-calendar-table-cell-content-margin;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   box-sizing: border-box;
   width: $mat-calendar-table-cell-content-size;
   height: $mat-calendar-table-cell-content-size;
-  border: $mat-calendar-table-cell-content-border-width solid transparent;
+
+  border-width: $mat-calendar-table-cell-content-border-width;
+  border-style: solid;
   border-radius: 50%;
-  text-align: center;
-  vertical-align: middle;
 }
 
 [dir='rtl'] {
   .mat-calendar-table-label {
-    padding: 0 $mat-calendar-table-label-padding-start 0 0;
+    padding: 0 $mat-calendar-table-cell-padding 0 0;
+    transform: translateX(-$mat-calendar-table-label-translation);
     text-align: right;
   }
 }