Merge pull request #1957 from codidact/0valt/1465/pagination-styles

Make pagination item disabled state clearer

Author: Oaphi

app/assets/stylesheets/application.scss

@@ -84,24 +84,6 @@ a.header--site-name {
   }
 }
 
-/* Copied from Co-Design for compatibility purposes */
-ul.pagination li.active {
-  border-color:#293338;
-  background-color:#3f4e56;
-  box-shadow:2px 3px 2px -2px #344147;
-  color:#fff;
-  font-weight:600
-}
-
-ul.pagination li.active a:hover {
-  background-color:transparent
-}
-
-ul.pagination li.disabled {
-  box-shadow:none
-}
-/* *** */
-
 .notice__dev-mode {
   font-size: 14px;
 }

app/assets/stylesheets/pagination.scss

@@ -0,0 +1,25 @@
+@import 'variables';
+
+ul {
+  &.pagination {
+    li {
+      &.active {
+        border-color: #293338;
+        background-color: #3f4e56;
+        box-shadow: 2px 3px 2px -2px #344147;
+        color: #fff;
+        font-weight: 600;
+
+        a:hover {
+          background-color: transparent;
+        }
+      }
+
+      &.disabled {
+        box-shadow: none;
+        filter: grayscale(1) opacity(0.7);
+        cursor: not-allowed;
+      }
+    }
+  }
+}