From 255c10adf0dcad5731c6dd9175e746f7654afd65 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 15 Jun 2018 22:22:49 +0200 Subject: [PATCH] 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. --- src/lib/paginator/paginator.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/lib/paginator/paginator.scss b/src/lib/paginator/paginator.scss index e604d7158d6..1213698019f 100644 --- 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 {