fix(paginator): page size selections being truncated with outline and…

… fill appearances (#11722) Fixes the page size selector value being truncated if the default form field appearance is set to `outline` or `fill`. Fixes #11681.
angular · Jun 15, 2018 · 255c10a · 255c10a
1 parent e349fe4
commit 255c10a
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/src/lib/paginator/paginator.scss b/src/lib/paginator/paginator.scss
@@ -5,7 +5,12 @@ $mat-paginator-page-size-margin-right: 8px;
 
 $mat-paginator-items-per-page-label-margin: 0 4px;
 $mat-paginator-selector-margin: 6px 4px 0 4px;
-$mat-paginator-selector-trigger-min-width: 56px;
+$mat-paginator-selector-trigger-width: 56px;
+$mat-paginator-selector-trigger-outline-width: 64px;
+$mat-paginator-selector-trigger-fill-width: 64px;
+
+/** @deprecated Use `$mat-paginator-selector-trigger-width` instead. @deletion-target 8.0.0 */
+$mat-paginator-selector-trigger-min-width: $mat-paginator-selector-trigger-width;
 
 $mat-paginator-range-actions-min-height: 48px;
 
@@ -58,7 +63,15 @@ $mat-paginator-button-last-increment-icon-margin: 9px;
 
 .mat-paginator-page-size-select {
   margin: $mat-paginator-selector-margin;
-  width: $mat-paginator-selector-trigger-min-width;
+  width: $mat-paginator-selector-trigger-width;
+
+  &.mat-form-field-appearance-outline {
+    width: $mat-paginator-selector-trigger-outline-width;
+  }
+
+  &.mat-form-field-appearance-fill {
+    width: $mat-paginator-selector-trigger-fill-width;
+  }
 }
 
 .mat-paginator-range-label {