Customize pagination template

app/assets/stylesheets/main_style.css

@@ -154,6 +154,84 @@ blockquote cite {
     font-weight: 400;
 }
 
+/* ----------- 3.Elements -------------
+--------------------------------------*/
+/* Pagination & Pager */
+.pagination {
+    margin: 0 0 50px;
+}
+
+@media (min-width: 768px) {
+    .pagination {
+        margin-bottom: 60px;
+    }
+}
+
+.pagination > li > a,
+.pagination > li > span {
+    border: 1px solid transparent;
+    border-radius: 50% !important;
+    transition: all .3s;
+    padding: 0px 3px;
+    margin: 0 6px 0 0;
+    min-width: 36px;
+    height: 36px;
+    line-height: 36px;
+    color: #717179;
+    font-weight: 500;
+    font-size: 16px;
+    text-transform: uppercase;
+    background: transparent;
+    text-align: center;
+}
+
+@media (min-width: 768px) {
+    .pagination > li > a,
+    .pagination > li > span {
+        margin-right: 12px;
+    }
+}
+
+.pagination > li > a i,
+.pagination > li > span i {
+    line-height: inherit;
+    font-weight: 500;
+}
+
+.pagination > li > a:hover, .pagination > li > a:focus,
+.pagination > li > span:hover,
+.pagination > li > span:focus {
+    color: #dc9831;
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.pagination > li:first-child:not(.active) > a,
+.pagination > li:first-child:not(.active) > span {
+    min-width: 0;
+    padding-left: 0;
+}
+
+.pagination > li.dots > span {
+    min-width: 0;
+    padding: 0;
+}
+
+.pagination > .active > a,
+.pagination > .active > span {
+    color: #262634;
+    border-color: #dc9831;
+}
+
+.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover,
+.pagination > .active > span,
+.pagination > .active > span:focus,
+.pagination > .active > span:hover {
+    background-color: transparent;
+    color: #262634;
+    border-color: #dc9831;
+}
+
 /* ----------- 7.Category --------------
 --------------------------------------*/
 .category-header {

app/views/kaminari/_first_page.html.erb

@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="first">
+<li class="first">
   <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote %>
-</span>
+</li>

app/views/kaminari/_gap.html.erb

@@ -5,4 +5,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="page gap"><%= t('views.pagination.truncate').html_safe %></span>
+<li class="dots">
+  <a href="#"><%= t('views.pagination.truncate').html_safe %></a>
+</li>

app/views/kaminari/_last_page.html.erb

@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="last">
+<li class="last">
   <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote %>
-</span>
+</li>

app/views/kaminari/_next_page.html.erb

@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="next">
+<li class="next">
   <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %>
-</span>
+</li>

app/views/kaminari/_page.html.erb

@@ -7,6 +7,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="page<%= ' current' if page.current? %>">
-  <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel} %>
-</span>
+<li class="page<%= ' active' if page.current? %>">
+  <%= link_to page, url, opts = {:remote => remote, :class => 'page-link', :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
+</li>

app/views/kaminari/_paginator.html.erb

@@ -7,19 +7,21 @@
     paginator:     the paginator that renders the pagination tags inside
 -%>
 <%= paginator.render do -%>
-  <nav class="pagination">
-    <%= first_page_tag unless current_page.first? %>
-    <%= prev_page_tag unless current_page.first? %>
-    <% each_page do |page| -%>
-      <% if page.display_tag? -%>
-        <%= page_tag page %>
-      <% elsif !page.was_truncated? -%>
-        <%= gap_tag %>
+  <nav aria-label="Page Navigation">
+    <ul class="pagination">
+      <%= first_page_tag unless current_page.first? %>
+      <%= prev_page_tag unless current_page.first? %>
+      <% each_page do |page| -%>
+        <% if page.display_tag? -%>
+          <%= page_tag page %>
+        <% elsif !page.was_truncated? -%>
+          <%= gap_tag %>
+        <% end -%>
       <% end -%>
-    <% end -%>
-    <% unless current_page.out_of_range? %>
-      <%= next_page_tag unless current_page.last? %>
-      <%= last_page_tag unless current_page.last? %>
-    <% end %>
+      <% unless current_page.out_of_range? %>
+        <%= next_page_tag unless current_page.last? %>
+        <%= last_page_tag unless current_page.last? %>
+      <% end %>
+    </ul>
   </nav>
 <% end -%>

app/views/kaminari/_prev_page.html.erb

@@ -6,6 +6,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="prev">
+<li class="prev">
   <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote %>
-</span>
+</li>