Fixing pager styles

src/Web/Pages/Shared/_pagination.cshtml

@@ -5,7 +5,7 @@
 		<article class="esh-pager-wrapper row">
 			<nav>
 				<div class="col-md-2 col-xs-12">
-					<a class="esh-pager-item-left esh-pager-item--navigable @Model.Previous"
+					<a class="esh-pager-item-left esh-pager-item--navigable esh-pager-item @Model.Previous"
 					   id="Previous"
 					   asp-route-pageid="@(Model.ActualPage - 1)"
 					   aria-label="Previous">
@@ -20,7 +20,7 @@
 				</div>
 		        
 				<div class="col-md-2 col-xs-12">
-					<a class="esh-pager-item-right esh-pager-item--navigable @Model.Next"
+					<a class="esh-pager-item-right esh-pager-item--navigable esh-pager-item @Model.Next"
 					   id="Next"
 					   asp-route-pageid="@(Model.ActualPage + 1)"
 					   aria-label="Next">

src/Web/compilerconfig.json

@@ -26,5 +26,9 @@
   {
     "outputFile": "wwwroot/css/_variables.css",
     "inputFile": "wwwroot/css/_variables.scss"
+  },
+  {
+    "outputFile": "wwwroot/css/shared/components/pager/pager.css",
+    "inputFile": "wwwroot/css/shared/components/pager/pager.scss"
   }
 ]

src/Web/wwwroot/css/shared/components/pager/pager.css

@@ -1,35 +1,20 @@
 .esh-pager-wrapper {
   padding-top: 1rem;
-  text-align: center;
-}
+  text-align: center; }
 
 .esh-pager-item {
-  margin: 0 5vw;
-}
-
-.esh-pager-item.is-disabled {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.esh-pager-item--navigable {
+  margin: 0 5vw; }
+  .esh-pager-item.is-disabled {
+    opacity: .5;
+    pointer-events: none; }
+  .esh-pager-item--navigable {
     cursor: pointer;
-  display: inline-block;
-}
-
-.esh-pager-item--navigable:hover {
-  color: #83D01B;
-}
-
-@media screen and (max-width: 1280px) {
+    display: inline-block; }
+    .esh-pager-item--navigable:hover {
+      color: #83D01B; }
+  @media screen and (max-width: 1280px) {
     .esh-pager-item {
-    font-size: 0.85rem;
-  }
-}
-
-@media screen and (max-width: 1024px) {
+      font-size: 0.85rem; } }
+  @media screen and (max-width: 1024px) {
     .esh-pager-item {
-    margin: 0 2.5vw;
-  }
-}
-
+      margin: 0 2.5vw; } }

src/Web/wwwroot/css/shared/components/pager/pager.min.css

@@ -1 +1 @@
-.esh-pager-wrapper{padding-top:1rem;text-align:center;}.esh-pager-item{margin:0 5vw;}.esh-pager-item.is-disabled{opacity:0;pointer-events:none;}.esh-pager-item--navigable{cursor:pointer;display:inline-block;}.esh-pager-item--navigable:hover{color:#83d01b;}@media screen and (max-width:1280px){.esh-pager-item{font-size:.85rem;}}@media screen and (max-width:1024px){.esh-pager-item{margin:0 2.5vw;}}
+.esh-pager-wrapper{padding-top:1rem;text-align:center;}.esh-pager-item{margin:0 5vw;}.esh-pager-item.is-disabled{opacity:.5;pointer-events:none;}.esh-pager-item--navigable{cursor:pointer;display:inline-block;}.esh-pager-item--navigable:hover{color:#83d01b;}@media screen and (max-width:1280px){.esh-pager-item{font-size:.85rem;}}@media screen and (max-width:1024px){.esh-pager-item{margin:0 2.5vw;}}

src/Web/wwwroot/css/shared/components/pager/pager.scss

@@ -12,7 +12,7 @@
         margin: 0 $margin;
 
         &.is-disabled {
-            opacity: 0;
+            opacity: .5;
             pointer-events: none;
         }