Update pager layout

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss

@@ -6,7 +6,7 @@ $color-brand-bright: lighten($color-brand, 10%);
 $color-brand-brighter: lighten($color-brand, 20%);
 
 $color-secondary: #83D01B;
-$color-secondary-dark: darken($color-secondary, 10%);
+$color-secondary-dark: darken($color-secondary, 5%);
 $color-secondary-darker: darken($color-secondary, 20%);
 $color-secondary-bright: lighten($color-secondary, 10%);
 $color-secondary-brighter: lighten($color-secondary, 20%);

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html

@@ -21,7 +21,7 @@
 </section>
 
 <div class="container">
-    <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+    <esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
 
     <div class="esh-catalog-items row">
         <div class="esh-catalog-item col-md-4"
@@ -41,6 +41,6 @@
         </div>
     </div>
 
-    <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
+    <esh-pager class="esh-pager" [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
 </div>
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html

@@ -1,31 +1,25 @@
-<div class="row pager">
-    <div class="col-xs-4">
+<div class="container">
+    <article class="esh-pager-wrapper row">
         <nav>
-            <ul>
-                <li class="page-item">
-                    <span class="pager-text pager-previous" id="Previous"
-                       [hidden]="buttonStates?.previousDisabled"
-                       (click)="onPreviousCliked($event)"
-                       aria-label="Previous">
-                        Previous
-                    </span>
-                </li>
-            </ul>
+            <span class="esh-pager-item esh-pager-item--navigable"
+                  id="Previous"
+                  [hidden]="buttonStates?.previousDisabled"
+                  (click)="onPreviousCliked($event)"
+                  aria-label="Previous">
+                Previous
+            </span>
+
+            <span class="esh-pager-item">
+                Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}
+            </span>
+
+            <span class="esh-pager-item esh-pager-item--navigable"
+                  id="Next"
+                  [hidden]="buttonStates?.nextDisabled"
+                  (click)="onNextClicked($event)"
+                  aria-label="Next">
+                Next
+            </span>
         </nav>
-    </div>
-    <div class="col-xs-4 u-align-center"><span>Showing {{model?.items}} of {{model?.totalItems}} products - Page {{model?.actualPage + 1}} - {{model?.totalPages}}</span></div>
-    <div class="col-xs-4">
-        <nav>
-            <ul>
-                <li class="page-item">
-                    <span class="pager-text pager-next" id="Next"
-                       [hidden]="buttonStates?.nextDisabled"
-                       (click)="onNextClicked($event)"
-                       aria-label="Next">
-                        Next
-                    </span>
-                </li>
-            </ul>
-        </nav>
-    </div>
+    </article>
 </div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.scss

@@ -1,30 +1,30 @@
-.pager {
-    margin-bottom: 20px;
-    margin-top: 20px;
-    margin-left: 0px;
-    margin-right: -30px;
+@import "../../../variables";
 
-    &-previous {
-        position: absolute;
-        left: 0;
-        top: 0;
-        cursor: pointer;
-    }
+.esh-pager {
 
-    &-text {
-        color: #83d01b;
+    &-wrapper {
+        padding-top: 1rem;
+        text-align: center;
     }
 
-    &-next {
-        position: absolute;
-        right: 15px;
-        top: 0;
-        cursor: pointer;
-    }
+    &-item {
+        $margin: 8vw;
+        margin: 0 $margin;
+
+        &--navigable {
+            cursor: pointer;
+
+            &:hover {
+                color: $color-secondary;
+            }
+        }
+
+        @media screen and (max-width: $media-screen-l) {
+            font-size: $font-size-s;
+        }
 
-    &-isDisabled {
-        cursor: not-allowed;
-        opacity: .5;
-        pointer-events: none;
+        @media screen and (max-width: $media-screen-m) {
+            margin: 0 $margin / 2;
+        }
     }
-}
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, OnChanges, Output, Input, EventEmitter } from '@angu
 import { IPager } from '../../models/pager.model';
 
 @Component({
-    selector: 'esh-pager',
+    selector: 'esh-pager .esh-pager',
     templateUrl: './pager.html',
     styleUrls: ['./pager.scss']
 })