From e4f9cbb8f768f1ba0df55db3439e96dd8f4fc918 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 10 Feb 2017 17:28:22 -0800
Subject: [PATCH 1/5] started working on responsive calendar table

---
 src/lib/datepicker/_datepicker-theme.scss | 12 ++++++------
 src/lib/datepicker/calendar-table.html    |  6 +++---
 src/lib/datepicker/calendar-table.scss    | 17 +++++++----------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
index af66d645fa60..03afd7753361 100644
--- a/src/lib/datepicker/_datepicker-theme.scss
+++ b/src/lib/datepicker/_datepicker-theme.scss
@@ -8,23 +8,23 @@
   $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);
 
     .mat-calendar-table-cell:hover & {
-      background: md-color($background, hover);
+      background: mat-color($background, hover);
     }
 
     .mat-calendar-table-cell &.mat-calendar-table-selected {
-      background: md-color($primary);
-      color: md-color($primary, default-contrast);
+      background: mat-color($primary);
+      color: mat-color($primary, default-contrast);
     }
 
     &.mat-calendar-table-today {
-      border-color: md-color($foreground, divider);
+      border-color: mat-color($foreground, divider);
     }
   }
 }
diff --git a/src/lib/datepicker/calendar-table.html b/src/lib/datepicker/calendar-table.html
index 6df7a677b4e4..82aa03c9ece8 100644
--- a/src/lib/datepicker/calendar-table.html
+++ b/src/lib/datepicker/calendar-table.html
@@ -13,10 +13,10 @@
     </td>
     <td *ngFor="let item of row"
         class="mat-calendar-table-cell"
+        [class.mat-calendar-table-selected]="selectedValue === item.value"
+        [class.mat-calendar-table-today]="todayValue === item.value"
         (click)="_cellClicked(item.value)">
-      <div class="mat-calendar-table-cell-content"
-           [class.mat-calendar-table-selected]="selectedValue === item.value"
-           [class.mat-calendar-table-today]="todayValue === item.value">
+      <div class="mat-calendar-table-cell-content">
         {{item.displayValue}}
       </div>
     </td>
diff --git a/src/lib/datepicker/calendar-table.scss b/src/lib/datepicker/calendar-table.scss
index 2b3503ef0227..b1478370e48a 100644
--- a/src/lib/datepicker/calendar-table.scss
+++ b/src/lib/datepicker/calendar-table.scss
@@ -1,5 +1,4 @@
 $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-cell-content-border-width: 1px !default;
 $mat-calendar-table-label-padding-start: 10px !default;
@@ -7,6 +6,7 @@ $mat-calendar-table-label-padding-start: 10px !default;
 
 .mat-calendar-table-table {
   border-spacing: 0;
+  border-collapse: collapse;
   font-size: $mat-calendar-table-font-size;
 }
 
@@ -18,18 +18,15 @@ $mat-calendar-table-label-padding-start: 10px !default;
 }
 
 .mat-calendar-table-cell {
-  padding: $mat-calendar-table-cell-padding;
+  width: (100% / 7);
+  height: 0;
+  line-height: 0;
+  padding: (100% / 7 / 2) 0;
+  text-align: center;
 }
 
 .mat-calendar-table-cell-content {
-  display: table-cell;
-  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-radius: 50%;
-  text-align: center;
-  vertical-align: middle;
+  //height: 0;
 }
 
 [dir='rtl'] {

From 9906a1f4672e2bbf9bbacf868007ba8802d4e55d Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Mon, 13 Feb 2017 12:25:32 -0800
Subject: [PATCH 2/5] fix today, selected, hover styles

---
 src/lib/datepicker/_datepicker-theme.scss |  5 ++--
 src/lib/datepicker/calendar-table.scss    | 30 ++++++++++++++++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
index 03afd7753361..93f4a5435938 100644
--- a/src/lib/datepicker/_datepicker-theme.scss
+++ b/src/lib/datepicker/_datepicker-theme.scss
@@ -18,12 +18,13 @@
       background: mat-color($background, hover);
     }
 
-    .mat-calendar-table-cell &.mat-calendar-table-selected {
+    .mat-calendar-table-selected &,
+    .mat-calendar-table-selected:hover & {
       background: mat-color($primary);
       color: mat-color($primary, default-contrast);
     }
 
-    &.mat-calendar-table-today {
+    .mat-calendar-table-today & {
       border-color: mat-color($foreground, divider);
     }
   }
diff --git a/src/lib/datepicker/calendar-table.scss b/src/lib/datepicker/calendar-table.scss
index b1478370e48a..49b2a93427fc 100644
--- a/src/lib/datepicker/calendar-table.scss
+++ b/src/lib/datepicker/calendar-table.scss
@@ -1,32 +1,50 @@
 $mat-calendar-table-font-size: 12px !default;
-$mat-calendar-table-cell-content-size: 32px !default;
+$mat-calendar-table-label-padding-start: 5% !default;
+$mat-calendar-table-cell-min-size: 32px !default;
+$mat-calendar-table-min-size: 7 * $mat-calendar-table-cell-min-size !default;
+$mat-calendar-table-cell-size: 100% / 7 !default;
+$mat-calendar-table-cell-content-margin: 5% !default;
+$mat-calendar-table-cell-content-size: 100% - $mat-calendar-table-cell-content-margin * 2 !default;
 $mat-calendar-table-cell-content-border-width: 1px !default;
-$mat-calendar-table-label-padding-start: 10px !default;
 
 
 .mat-calendar-table-table {
+  min-width: $mat-calendar-table-min-size;
   border-spacing: 0;
   border-collapse: collapse;
   font-size: $mat-calendar-table-font-size;
 }
 
 .mat-calendar-table-label {
-  height: $mat-calendar-table-cell-content-size;
   padding: 0 0 0 $mat-calendar-table-label-padding-start;
   text-align: left;
   font-weight: normal;
 }
 
 .mat-calendar-table-cell {
-  width: (100% / 7);
+  position: relative;
+  width: $mat-calendar-table-cell-size;
   height: 0;
   line-height: 0;
-  padding: (100% / 7 / 2) 0;
+  padding: ($mat-calendar-table-cell-size / 2) 0;
   text-align: center;
 }
 
 .mat-calendar-table-cell-content {
-  //height: 0;
+  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-radius: 50%;
 }
 
 [dir='rtl'] {

From 6e281cb9be37497eb4aa91af5b9b13c9294c4556 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Mon, 13 Feb 2017 14:46:04 -0800
Subject: [PATCH 3/5] fix label positioning

---
 src/lib/datepicker/_datepicker-theme.scss | 22 +++++++++++-----------
 src/lib/datepicker/calendar-table.html    |  6 +++---
 src/lib/datepicker/calendar-table.scss    | 18 ++++++++++++------
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
index 93f4a5435938..0a23983c4137 100644
--- a/src/lib/datepicker/_datepicker-theme.scss
+++ b/src/lib/datepicker/_datepicker-theme.scss
@@ -13,19 +13,19 @@
 
   .mat-calendar-table-cell-content {
     color: mat-color($foreground, text);
+  }
 
-    .mat-calendar-table-cell:hover & {
-      background: mat-color($background, hover);
-    }
+  .mat-calendar-table-cell-content:hover {
+    background: mat-color($background, hover);
+  }
 
-    .mat-calendar-table-selected &,
-    .mat-calendar-table-selected:hover & {
-      background: mat-color($primary);
-      color: mat-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: mat-color($foreground, divider);
-    }
+  .mat-calendar-table-today {
+    border-color: mat-color($foreground, divider);
   }
 }
diff --git a/src/lib/datepicker/calendar-table.html b/src/lib/datepicker/calendar-table.html
index 82aa03c9ece8..6df7a677b4e4 100644
--- a/src/lib/datepicker/calendar-table.html
+++ b/src/lib/datepicker/calendar-table.html
@@ -13,10 +13,10 @@
     </td>
     <td *ngFor="let item of row"
         class="mat-calendar-table-cell"
-        [class.mat-calendar-table-selected]="selectedValue === item.value"
-        [class.mat-calendar-table-today]="todayValue === item.value"
         (click)="_cellClicked(item.value)">
-      <div class="mat-calendar-table-cell-content">
+      <div class="mat-calendar-table-cell-content"
+           [class.mat-calendar-table-selected]="selectedValue === item.value"
+           [class.mat-calendar-table-today]="todayValue === item.value">
         {{item.displayValue}}
       </div>
     </td>
diff --git a/src/lib/datepicker/calendar-table.scss b/src/lib/datepicker/calendar-table.scss
index 49b2a93427fc..6c625a1887dd 100644
--- a/src/lib/datepicker/calendar-table.scss
+++ b/src/lib/datepicker/calendar-table.scss
@@ -1,22 +1,27 @@
 $mat-calendar-table-font-size: 12px !default;
 $mat-calendar-table-label-padding-start: 5% !default;
+$mat-calendar-table-label-translation: -.5em;
 $mat-calendar-table-cell-min-size: 32px !default;
-$mat-calendar-table-min-size: 7 * $mat-calendar-table-cell-min-size !default;
 $mat-calendar-table-cell-size: 100% / 7 !default;
 $mat-calendar-table-cell-content-margin: 5% !default;
-$mat-calendar-table-cell-content-size: 100% - $mat-calendar-table-cell-content-margin * 2 !default;
 $mat-calendar-table-cell-content-border-width: 1px !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 {
-  min-width: $mat-calendar-table-min-size;
   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 {
-  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;
 }
@@ -26,7 +31,7 @@ $mat-calendar-table-cell-content-border-width: 1px !default;
   width: $mat-calendar-table-cell-size;
   height: 0;
   line-height: 0;
-  padding: ($mat-calendar-table-cell-size / 2) 0;
+  padding: $mat-calendar-table-cell-padding 0;
   text-align: center;
 }
 
@@ -49,7 +54,8 @@ $mat-calendar-table-cell-content-border-width: 1px !default;
 
 [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;
   }
 }

From 4627dfbb39d243d350c373da7705f999eba38528 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 14 Feb 2017 12:53:16 -0800
Subject: [PATCH 4/5] replace em with px

---
 src/lib/datepicker/calendar-table.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/datepicker/calendar-table.scss b/src/lib/datepicker/calendar-table.scss
index 6c625a1887dd..b222310a15ea 100644
--- a/src/lib/datepicker/calendar-table.scss
+++ b/src/lib/datepicker/calendar-table.scss
@@ -1,6 +1,6 @@
 $mat-calendar-table-font-size: 12px !default;
 $mat-calendar-table-label-padding-start: 5% !default;
-$mat-calendar-table-label-translation: -.5em;
+$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;

From d750b9d86b08df858b2e8fe0f25d14a25914d5bd Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 14 Feb 2017 13:02:26 -0800
Subject: [PATCH 5/5] fix today cell styling

---
 src/lib/datepicker/_datepicker-theme.scss | 1 +
 src/lib/datepicker/calendar-table.scss    | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
index 0a23983c4137..693eb77337fd 100644
--- a/src/lib/datepicker/_datepicker-theme.scss
+++ b/src/lib/datepicker/_datepicker-theme.scss
@@ -13,6 +13,7 @@
 
   .mat-calendar-table-cell-content {
     color: mat-color($foreground, text);
+    border-color: transparent;
   }
 
   .mat-calendar-table-cell-content:hover {
diff --git a/src/lib/datepicker/calendar-table.scss b/src/lib/datepicker/calendar-table.scss
index b222310a15ea..16466a7dac90 100644
--- a/src/lib/datepicker/calendar-table.scss
+++ b/src/lib/datepicker/calendar-table.scss
@@ -48,7 +48,8 @@ $mat-calendar-table-cell-content-size: 100% - $mat-calendar-table-cell-content-m
   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%;
 }