diff --git a/src/lib/paginator/paginator.html b/src/lib/paginator/paginator.html
index c8b207b4c426..eac222963d0e 100644
--- a/src/lib/paginator/paginator.html
+++ b/src/lib/paginator/paginator.html
@@ -1,43 +1,47 @@
-
-
- {{_intl.itemsPerPageLabel}}
-
+
+
+
+ {{_intl.itemsPerPageLabel}}
+
-
1"
- class="mat-paginator-page-size-select">
-
-
- {{pageSizeOption}}
-
-
-
+
1"
+ class="mat-paginator-page-size-select">
+
+
+ {{pageSizeOption}}
+
+
+
-
{{pageSize}}
-
+
{{pageSize}}
+
-
- {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
-
+
+
+ {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
+
-
-
+
+
+
+
diff --git a/src/lib/paginator/paginator.scss b/src/lib/paginator/paginator.scss
index 4562996aa8ea..61d0bc760d4a 100644
--- a/src/lib/paginator/paginator.scss
+++ b/src/lib/paginator/paginator.scss
@@ -1,11 +1,15 @@
$mat-paginator-height: 56px;
$mat-paginator-padding: 0 8px;
+$mat-paginator-page-size-margin-right: 8px;
+
$mat-paginator-items-per-page-label-margin: 0 4px;
-$mat-paginator-selector-margin: 0 4px;
+$mat-paginator-selector-margin: 6px 4px 0 4px;
$mat-paginator-selector-trigger-min-width: 56px;
-$mat-paginator-range-label-margin: 0 32px;
+$mat-paginator-range-actions-min-height: 48px;
+
+$mat-paginator-range-label-margin: 0 32px 0 24px;
$mat-paginator-button-margin: 8px;
$mat-paginator-button-icon-height: 8px;
@@ -14,17 +18,19 @@ $mat-paginator-button-icon-width: 8px;
$mat-paginator-button-decrement-icon-margin: 12px;
$mat-paginator-button-increment-icon-margin: 16px;
-.mat-paginator {
+.mat-paginator-container {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: $mat-paginator-height;
padding: $mat-paginator-padding;
+ flex-wrap: wrap-reverse;
}
.mat-paginator-page-size {
display: flex;
- align-items: center;
+ align-items: baseline;
+ margin-right: $mat-paginator-page-size-margin-right;
}
.mat-paginator-page-size-label {
@@ -76,3 +82,9 @@ $mat-paginator-button-increment-icon-margin: 16px;
margin-right: $mat-paginator-button-increment-icon-margin;
}
}
+
+.mat-paginator-range-actions {
+ display: flex;
+ align-items: center;
+ min-height: $mat-paginator-range-actions-min-height;
+}