New pagination style

Augusto dos Anjos Almeida
1 parent ffa79326
Showing 2 changed files with 35 additions and 20 deletions Show diff stats
js/main.js
sass/_proposal_detail.scss
@@ -169,8 +169,8 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
                 items: data.pagination.total,
                 itemsOnPage: data.pagination.per_page,
                 currentPage: data.pagination.page,
-                prevText: 'Anterior',
-                nextText: 'Próximo',
+                prevText: '«',
+                nextText: '»',
                 cssStyle: 'compact-theme',
                 onPageClick: function(page, e) {
                   Main.loadRanking($resultsContainer, topic_id, page);
@@ -202,35 +202,50 @@
             ul {
               list-style: none;
               padding: 0;
-              display: table;
+              display: block;
               margin: 0 auto;
+              text-align: center;
               li {
                 list-style: none;
+                display: inline;
                 padding: 0;
-                margin: 0;
-                float: left;
+                margin: 0 10px;
+                float: none;
+                &.active {
+                  .next, .prev {
+                    opacity: 0.5;
+                  }
+                }
                 a, span {
-                  float: left;
-                  color: white;
+                  background: transparent;
+                  border: 0;
+                  border-bottom: 1px solid #000;
+                  color: #000;
+                  display: inline-block;
+                  // float: left;
                   font-size: 14px;
-                  line-height: 24px;
                   font-weight: normal;
+                  line-height: 1.2;
+                  margin: 0;
+                  min-width: 0;
+                  padding: 0;
                   text-align: center;
-                  min-width: 14px;
-                  padding: 0 7px;
-                  background: $color;
-                  width: 100%;
                   text-transform: none;
-                }
-                .prev {
-                  border-radius: 3px 0 0 3px;
-                }
-                .next {
-                  border-right: 1px solid #AAA;
-                  border-radius: 0 3px 3px 0;
+                  width: auto;
+                  vertical-align: middle;
                 }
                 .current {
-                  opacity: 0.5;
+                  padding: 10px;
+                  background-color: #ccc;
+                  border-bottom-color: #ccc;
+                  border-radius: 6px;
+                }
+                .next, .prev {
+                  background-color: $color;
+                  border-bottom: 3px solid darken($color, 15%);
+                  border-radius: 6px;
+                  color: #fff;
+                  padding: 10px 15px;
                 }
               }
             }