fix(paginator): fix select baseline; support mobile (#7610)

* fix(paginator): fix select baseline; support mobile

* use margin variable

* Update paginator.html

Author: andrewseguin

src/lib/paginator/paginator.html

@@ -1,43 +1,47 @@
-<div class="mat-paginator-page-size">
-  <div class="mat-paginator-page-size-label">
-    {{_intl.itemsPerPageLabel}}
-  </div>
+<div class="mat-paginator-container">
+  <div class="mat-paginator-page-size">
+    <div class="mat-paginator-page-size-label">
+      {{_intl.itemsPerPageLabel}}
+    </div>
 
-  <mat-form-field
-    *ngIf="_displayedPageSizeOptions.length > 1"
-    class="mat-paginator-page-size-select">
-    <mat-select
-      [value]="pageSize"
-      [aria-label]="_intl.itemsPerPageLabel"
-      (change)="_changePageSize($event.value)">
-      <mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
-        {{pageSizeOption}}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+    <mat-form-field
+      *ngIf="_displayedPageSizeOptions.length > 1"
+      class="mat-paginator-page-size-select">
+      <mat-select
+        [value]="pageSize"
+        [aria-label]="_intl.itemsPerPageLabel"
+        (change)="_changePageSize($event.value)">
+        <mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
+          {{pageSizeOption}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
 
-  <div *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div>
-</div>
+    <div *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div>
+  </div>
 
-<div class="mat-paginator-range-label">
-  {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
-</div>
+  <div class="mat-paginator-range-actions">
+    <div class="mat-paginator-range-label">
+      {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
+    </div>
 
-<button mat-icon-button type="button"
-        class="mat-paginator-navigation-previous"
-        (click)="previousPage()"
-        [attr.aria-label]="_intl.previousPageLabel"
-        [matTooltip]="_intl.previousPageLabel"
-        [matTooltipPosition]="'above'"
-        [disabled]="!hasPreviousPage()">
-  <div class="mat-paginator-increment"></div>
-</button>
-<button mat-icon-button type="button"
-        class="mat-paginator-navigation-next"
-        (click)="nextPage()"
-        [attr.aria-label]="_intl.nextPageLabel"
-        [matTooltip]="_intl.nextPageLabel"
-        [matTooltipPosition]="'above'"
-        [disabled]="!hasNextPage()">
-  <div class="mat-paginator-decrement"></div>
-</button>
+    <button mat-icon-button type="button"
+            class="mat-paginator-navigation-previous"
+            (click)="previousPage()"
+            [attr.aria-label]="_intl.previousPageLabel"
+            [matTooltip]="_intl.previousPageLabel"
+            [matTooltipPosition]="'above'"
+            [disabled]="!hasPreviousPage()">
+      <div class="mat-paginator-increment"></div>
+    </button>
+    <button mat-icon-button type="button"
+            class="mat-paginator-navigation-next"
+            (click)="nextPage()"
+            [attr.aria-label]="_intl.nextPageLabel"
+            [matTooltip]="_intl.nextPageLabel"
+            [matTooltipPosition]="'above'"
+            [disabled]="!hasNextPage()">
+      <div class="mat-paginator-decrement"></div>
+    </button>
+  </div>
+</div>

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;
+}