fix non-touch styles

angular · Apr 11, 2017 · a293b81 · a293b81
1 parent 0a75b3e
commit a293b81
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss
@@ -24,6 +24,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 
 .mat-calendar-body {
   padding: $mat-calendar-padding;
+  outline: none;
 }
 
 .mat-calendar-controls {

diff --git a/src/lib/datepicker/datepicker-content.html b/src/lib/datepicker/datepicker-content.html
@@ -1,7 +1,5 @@
 <md-calendar cdkTrapFocus
     [id]="datepicker.id"
-    [class.mat-datepicker-content-touch]="datepicker.touchUi"
-    [class.mat-datepicker-content-non-touch]="!datepicker.touchUi"
     [startAt]="datepicker.startAt"
     [minDate]="datepicker._minDate"
     [maxDate]="datepicker._maxDate"

diff --git a/src/lib/datepicker/datepicker-content.scss b/src/lib/datepicker/datepicker-content.scss
@@ -19,14 +19,14 @@ $md-datepicker-touch-max-width: 778px;
 $md-datepicker-touch-max-height: 800px;
 
 
-.mat-datepicker-content {
+.mat-datepicker-content-touch {
   display: block;
   // make sure the dialog scrolls rather than being cropped on ludicrously small screens
   max-height: 80vh;
   overflow: auto;
 }
 
-.mat-datepicker-content-touch {
+.mat-datepicker-content-touch .mat-calendar {
   width: $md-datepicker-touch-width;
   height: $md-datepicker-touch-height;
   min-width: $md-datepicker-touch-min-width;
@@ -35,11 +35,11 @@ $md-datepicker-touch-max-height: 800px;
   max-height: $md-datepicker-touch-max-height;
 }
 
-.mat-datepicker-content-non-touch {
+.mat-datepicker-content-non-touch .mat-calendar {
   width: $md-datepicker-non-touch-calendar-width;
   @include mat-elevation(8);
 }
 
-.mat-datepicker-content-dialog {
+.mat-datepicker-content-dialog.mat-dialog-container {
   padding: 0;
 }
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
@@ -48,6 +48,8 @@ let datepickerUid = 0;
   styleUrls: ['datepicker-content.css'],
   host: {
     '[class.mat-datepicker-content]': 'true',
+    '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
+    '[class.mat-datepicker-content-non-touch]': '!datepicker.touchUi',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,