Fixing ellipsis issue on pagination. Added <span> element to pager template with 'disabled' class. Added 'hover' to disabled style to prevent unnecessary colour changes.

Author: Jesse Boyd

css/govcms-ui.css

@@ -440,6 +440,11 @@ a {
         background-color: #fff;
         border-color: $grey-border;
         color: $grey;
+        &:hover {
+          background-color: #fff;
+          border-color: $grey-border;
+          color: $grey;
+        }
       }
     }
   }

src/sass/uikit-bootstrap/_elements.scss

@@ -54,7 +54,7 @@
             {% endif %}
             {# Add an ellipsis if there are further previous pages. #}
             {% if ellipses.previous %}
-                <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
+                <li class="pager__item pager__item--ellipsis disabled" role="presentation"><span>&hellip;</span></li>
             {% endif %}
             {# Now generate the actual pager piece. #}
             {% for key, item in items.pages %}
@@ -74,7 +74,7 @@
             {% endfor %}
             {# Add an ellipsis if there are further next pages. #}
             {% if ellipses.next %}
-                <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
+                <li class="pager__item pager__item--ellipsis disabled" role="presentation"><span>&hellip;</span></li>
             {% endif %}
             {# Print next item if we are not on the last page. #}
             {% if items.next %}