From c1f11461e6b6ff12c93583327e5cb73c05efcb4c Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 4 Feb 2018 16:01:28 +0100 Subject: [PATCH] fix(paginator): first/last icons being thrown off on IE and Edge; simplify icon setup * Fixes the paginator icons being thrown off on IE and Edge. * Simplifies the paginator's icon setup by using the SVG icons, rather than trying to construct them through CSS. Using SVGs has the advantage of requiring a lot less code, being more consistent across browsers and being easier to center vertically. --- src/lib/paginator/paginator.html | 18 +++++--- src/lib/paginator/paginator.scss | 72 ++++---------------------------- 2 files changed, 20 insertions(+), 70 deletions(-) diff --git a/src/lib/paginator/paginator.html b/src/lib/paginator/paginator.html index 4d28fb721d43..ac9352633827 100644 --- a/src/lib/paginator/paginator.html +++ b/src/lib/paginator/paginator.html @@ -33,8 +33,9 @@ [matTooltipPosition]="'above'" [disabled]="!hasPreviousPage()" *ngIf="showFirstLastButtons"> -
-
+ + + diff --git a/src/lib/paginator/paginator.scss b/src/lib/paginator/paginator.scss index 11a9bcc0556d..6cafb8d9578b 100644 --- a/src/lib/paginator/paginator.scss +++ b/src/lib/paginator/paginator.scss @@ -60,73 +60,17 @@ $mat-paginator-button-last-increment-icon-margin: 9px; margin: $mat-paginator-range-label-margin; } -.mat-paginator-decrement-button + .mat-paginator-decrement-button { - margin: 0 0 0 $mat-paginator-button-margin; - - [dir='rtl'] & { - margin: 0 $mat-paginator-button-margin 0 0; - } -} - -.mat-paginator-decrement, -.mat-paginator-increment { - width: $mat-paginator-button-icon-width; - height: $mat-paginator-button-icon-height; -} - -.mat-paginator-increment, -[dir='rtl'] .mat-paginator-decrement { - transform: rotate(45deg); -} -.mat-paginator-decrement, -[dir='rtl'] .mat-paginator-increment { - transform: rotate(225deg); +.mat-paginator-range-actions { + display: flex; + align-items: center; + min-height: $mat-paginator-range-actions-min-height; } -.mat-paginator-increment { - margin-left: $mat-paginator-button-increment-icon-margin; - [dir='rtl'] & { - margin-right: $mat-paginator-button-increment-icon-margin; - } -} +.mat-paginator-icon { + width: $mat-paginator-height / 2; + fill: currentColor; -.mat-paginator-decrement { - margin-left: $mat-paginator-button-decrement-icon-margin; [dir='rtl'] & { - margin-right: $mat-paginator-button-decrement-icon-margin; + transform: rotate(180deg); } } - -.mat-paginator-first { - transform: rotate(90deg); - width: $mat-paginator-button-first-last-icon-width; - height: $mat-paginator-button-icon-height; - float:left; - margin-left: $mat-paginator-button-first-icon-margin; -} - -.mat-paginator-navigation-first { - .mat-paginator-decrement { - margin-left: $mat-paginator-button-first-decrement-icon-margin; - } -} - -.mat-paginator-navigation-last { - .mat-paginator-increment { - float: left; - margin-left: $mat-paginator-button-last-increment-icon-margin; - } -} - -.mat-paginator-last { - transform: rotate(90deg); - width: $mat-paginator-button-first-last-icon-width; - height: $mat-paginator-button-icon-height; - margin-left: $mat-paginator-button-last-icon-margin; -} - -.mat-paginator-range-actions { - display: flex; - align-items: center; - min-height: $mat-paginator-range-actions-min-height; -}