skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(paginator): first/last icons being thrown off on IE and Edge; simplify icon setup (#9776)

Browse Source 
* 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.
This commit is contained in:
Kristiyan Kostadinov
2018-03-01 01:00:48 +01:00
committed by tinayuangao
parent 4b528f668c
commit dd082cbdd6
2 changed files with 21 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/paginator/paginator.html
+12 -6
View File
@@ -33,8 +33,9 @@
[matTooltipPosition]="'above'"
[disabled]="!hasPreviousPage()"
*ngIf="showFirstLastButtons">
<div class="mat-paginator-first"></div>
<div class="mat-paginator-decrement"></div>
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
<path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
</svg>
</button>
<button mat-icon-button type="button"
class="mat-paginator-navigation-previous"
@@ -43,7 +44,9 @@
[matTooltip]="_intl.previousPageLabel"
[matTooltipPosition]="'above'"
[disabled]="!hasPreviousPage()">
<div class="mat-paginator-decrement"></div>
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg>
</button>
<button mat-icon-button type="button"
class="mat-paginator-navigation-next"
@@ -52,7 +55,9 @@
[matTooltip]="_intl.nextPageLabel"
[matTooltipPosition]="'above'"
[disabled]="!hasNextPage()">
<div class="mat-paginator-increment"></div>
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</svg>
</button>
<button mat-icon-button type="button"
class="mat-paginator-navigation-last"
@@ -62,8 +67,9 @@
[matTooltipPosition]="'above'"
[disabled]="!hasNextPage()"
*ngIf="showFirstLastButtons">
<div class="mat-paginator-increment"></div>
<div class="mat-paginator-last"></div>
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
<path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
</svg>
</button>
</div>
</div>
src/lib/paginator/paginator.scss
+9 -65
View File
@@ -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-increment {
margin-left: $mat-paginator-button-increment-icon-margin;
[dir='rtl'] & {
margin-right: $mat-paginator-button-increment-icon-margin;
}
}
.mat-paginator-decrement {
margin-left: $mat-paginator-button-decrement-icon-margin;
[dir='rtl'] & {
margin-right: $mat-paginator-button-decrement-icon-margin;
}
}
.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;
}
.mat-paginator-icon {
width: $mat-paginator-height / 2;
fill: currentColor;
[dir='rtl'] & {
transform: rotate(180deg);
}
}