Apply new design to paginationstyle-pagination

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

4 files changed, 43 insertions, 10 deletions

diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index bfef5f78f83..7378d404008 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -65,20 +65,20 @@ $legend-color:                   $text-color;
 //
 //##
 
-$pagination-color:                     #fff;
-$pagination-bg:                        $brand-success;
+$pagination-color:                     $gl-gray;
+$pagination-bg:                        $background-color;
 $pagination-border:                    transparent;
 
 $pagination-hover-color:               #fff;
-$pagination-hover-bg:                  darken($brand-success, 15%);
+$pagination-hover-bg:                  $brand-info;
 $pagination-hover-border:              transparent;
 
 $pagination-active-color:              #fff;
-$pagination-active-bg:                 darken($brand-success, 15%);
+$pagination-active-bg:                 $brand-info;
 $pagination-active-border:             transparent;
 
-$pagination-disabled-color:            #b4bcc2;
-$pagination-disabled-bg:               lighten($brand-success, 15%);
+$pagination-disabled-color:            #fff;
+$pagination-disabled-bg:               lighten($brand-info, 15%);
 $pagination-disabled-border:           transparent;
 
 
diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss
index ce024272a30..6ce34b5c3e8 100644
--- a/app/assets/stylesheets/generic/blocks.scss
+++ b/app/assets/stylesheets/generic/blocks.scss
@@ -20,11 +20,11 @@
 
 .gray-content-block {
   margin: -$gl-padding;
-  background-color: #f8fafc;
+  background-color: $background-color;
   padding: $gl-padding;
   margin-bottom: 0px;
-  border-top: 1px solid #e7e9ed;
-  border-bottom: 1px solid #e7e9ed;
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
   color: $gl-gray;
 
   &.top-block {
@@ -48,6 +48,7 @@
 
   &.footer-block {
     margin-top: 0;
+    border-bottom: none;
     margin-bottom: -$gl-padding;
   }
 
diff --git a/app/assets/stylesheets/generic/pagination.scss b/app/assets/stylesheets/generic/pagination.scss
new file mode 100644
index 00000000000..a937677ebdc
--- /dev/null
+++ b/app/assets/stylesheets/generic/pagination.scss
@@ -0,0 +1,32 @@
+.gl-pagination {
+  border-top: 1px solid $border-color;
+  background-color: $background-color;
+  margin: -$gl-padding;
+  margin-top: 0;
+
+  .pagination {
+    padding: 0;
+    margin: 0;
+    display: block;
+
+    li.next,
+    li.prev {
+      > a {
+        color: $link-color;
+
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+
+    li > a,
+    li > span {
+      border: none;
+      margin: 0;
+      @include border-radius(0 !important);
+      padding: 13px 19px;
+      border-right: 1px solid $border-color;
+    }
+  }
+}
diff --git a/app/views/kaminari/gitlab/_paginator.html.haml b/app/views/kaminari/gitlab/_paginator.html.haml
index 4f7996e4996..b8d419b5894 100644
--- a/app/views/kaminari/gitlab/_paginator.html.haml
+++ b/app/views/kaminari/gitlab/_paginator.html.haml
@@ -7,7 +7,7 @@
 -#    paginator:     the paginator that renders the pagination tags inside
 = paginator.render do
   %div.gl-pagination
-    %ul.pagination
+    %ul.pagination.clearfix
       = prev_page_tag unless current_page.first?
       - each_page do |page|
         - if page.left_outer? || page.right_outer? || page.inside_window?