Refactor pagination: use btn--action

app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco

@@ -6,15 +6,6 @@
     <% if @edit: %>
       <div class="btn btn--action" data-type="settings"><%- @T('Options') %></div>
     <% end %>
-    <!--
-    <ul class="pagination">
-    <% for item in @view_modes: %>
-      <li class="<%= item.class %>">
-        <a class="centered" href="#" data-type="viewmode" data-mode="<%= item.type %>"><%= item.name %></a>
-      </li>
-    <% end %>
-    </ul>
-    -->
   </div>
 </div>
 

app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco

@@ -1,21 +1,19 @@
 <div class="pagination-counter" title="<%- @Ti(@title) %>">
   <span class="pagination-item-current"><%= @current_position %></span>/<span class="pagination-total-items"><%= @total_count %></span>
 </div>
-<ul class="pagination">
-  <li <% if !@previous: %>class="disabled"<% end %> title="<%- @Ti( 'Previous in overview' ) %>">
-    <a class="centered previous" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>" <% if @previous: %>data-id="<%- @previous.id %>"<% end %>>
-      <% if @previous: %>
-        <%- @Icon('arrow-left') %>
-      <% else: %>
-        <%- @Icon('arrow-left', 'arrow--disabled') %>
-      <% end %>
-    </a>
-  <li <% if !@next: %>class="disabled"<% end %> title="<%- @Ti( 'Next in overview' ) %>">
-    <a class="centered next" href="<% if @next: %><%- @next.uiUrl() %><% end %>" <% if @next: %>data-id="<%- @next.id %>"<% end %>>
-      <% if @next: %>
-        <%- @Icon('arrow-right') %>
-      <% else: %>
-        <%- @Icon('arrow-right', 'arrow--disabled') %>
-      <% end %>
-    </a>
-</ul>
+<div class="pagination horizontal">
+  <a class="btn btn--action btn--split--first<%= ' is-disabled' if !@previous %>" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>"<% if @previous: %> data-id="<%- @previous.id %>"<% end %> title="<%- @Ti( 'Previous in overview' ) %>">
+    <% if @previous: %>
+      <%- @Icon('arrow-left') %>
+    <% else: %>
+      <%- @Icon('arrow-left', 'arrow--disabled') %>
+    <% end %>
+  </a>
+  <a class="btn btn--action btn--split--last<%= ' is-disabled' if !@next %>" href="<% if @next: %><%- @next.uiUrl() %><% end %>"<% if @next: %> data-id="<%- @next.id %>"<% end %> title="<%- @Ti( 'Next in overview' ) %>">
+    <% if @next: %>
+      <%- @Icon('arrow-right') %>
+    <% else: %>
+      <%- @Icon('arrow-right', 'arrow--disabled') %>
+    <% end %>
+  </a>
+</div>

app/assets/stylesheets/bootstrap.css

@@ -3058,99 +3058,6 @@ fieldset[disabled] .navbar-inverse .btn-link:hover,
 fieldset[disabled] .navbar-inverse .btn-link:focus {
   color: #444;
 }
-.pagination {
-  display: inline-block;
-  padding: 0;
-  margin: 20px 0;
-  border-radius: 4px;
-}
-.pagination > li {
-  display: inline;
-}
-.pagination > li > a,
-.pagination > li > span {
-  position: relative;
-  float: left;
-  padding: 6px 12px;
-  margin-left: -1px;
-  line-height: 1.42857143;
-  color: #337ab7;
-  text-decoration: none;
-  background-color: #fff;
-  border: 1px solid #ddd;
-}
-.pagination > li:first-child > a,
-.pagination > li:first-child > span {
-  margin-left: 0;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.pagination > li:last-child > a,
-.pagination > li:last-child > span {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.pagination > li > a:hover,
-.pagination > li > span:hover,
-.pagination > li > a:focus,
-.pagination > li > span:focus {
-  color: #23527c;
-  background-color: #eee;
-  border-color: #ddd;
-}
-.pagination > .active > a,
-.pagination > .active > span,
-.pagination > .active > a:hover,
-.pagination > .active > span:hover,
-.pagination > .active > a:focus,
-.pagination > .active > span:focus {
-  z-index: 2;
-  color: #fff;
-  cursor: default;
-  background-color: #337ab7;
-  border-color: #337ab7;
-}
-.pagination > .disabled > span,
-.pagination > .disabled > span:hover,
-.pagination > .disabled > span:focus,
-.pagination > .disabled > a,
-.pagination > .disabled > a:hover,
-.pagination > .disabled > a:focus {
-  color: #777;
-  cursor: not-allowed;
-  background-color: #fff;
-  border-color: #ddd;
-}
-.pagination-lg > li > a,
-.pagination-lg > li > span {
-  padding: 10px 16px;
-  font-size: 18px;
-}
-.pagination-lg > li:first-child > a,
-.pagination-lg > li:first-child > span {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-.pagination-lg > li:last-child > a,
-.pagination-lg > li:last-child > span {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-.pagination-sm > li > a,
-.pagination-sm > li > span {
-  padding: 5px 10px;
-  font-size: 12px;
-}
-.pagination-sm > li:first-child > a,
-.pagination-sm > li:first-child > span {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-.pagination-sm > li:last-child > a,
-.pagination-sm > li:last-child > span {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
 .pager {
   padding-left: 0;
   margin: 20px 0;

app/assets/stylesheets/zammad.scss

@@ -2880,64 +2880,18 @@ kbd {
 .pagination {
   margin: 0 0 0 19px;
 
-  @includ rtl(margin, 0 19px 0 0);
+  @include rtl(margin, 0 19px 0 0);
 
   display: flex;
 }
 
-.pagination > li > a,
-.pagination > li > span {
-  padding: 0;
-  width: 31px;
-  height: 31px;
-  border-color: #e5e5e5;
-
-  @include bidi-style(margin-left, -1px, margin-right, 0);
-}
-
-.pagination > li:first-child > a,
-.pagination > li:first-child > span {
-  @include bidi-style(border-top-left-radius, 4px, border-top-right-radius, 0);
-  @include bidi-style(
-    border-bottom-left-radius,
-    4px,
-    border-bottom-right-radius,
-    0
-  );
-}
-
-.pagination > li:last-child > a,
-.pagination > li:last-child > span {
-  @include bidi-style(border-top-right-radius, 4px, border-top-left-radius, 0);
-  @include bidi-style(
-    border-bottom-right-radius,
-    4px,
-    border-bottom-left-radius,
-    0
-  );
-}
-
-.pagination > .active > a,
-.pagination > .active > span,
-.pagination > .active > a:hover,
-.pagination > .active > span:hover,
-.pagination > .active > a:focus,
-.pagination > .active > span:focus {
-  background: #0f94d6;
-  border-color: #0f94d6;
-}
-
 .pagination-counter {
   margin: 0 0 0 19px;
 
   @include rtl(margin, 0 19px 0 0);
 
   line-height: 33px;
-  color: #9c9c9b;
-}
-
-.pagination-items-range {
-  color: #706f6f;
+  color: var(--text-muted);
 }
 
 .page-header {