From 5ffabe721a1888b3537f561f38721dab9351c4ad Mon Sep 17 00:00:00 2001
From: Kazhnuz <antoine@sortilege.net>
Date: Wed, 24 Oct 2018 15:32:28 +0200
Subject: [PATCH] scss: style pagination

---
 scss/_blog.scss    |  9 +++++++++
 scss/_buttons.scss | 16 ++++++++++++++++
 style.css          | 44 +++++++++++++++++++++++++++++++-------------
 3 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/scss/_blog.scss b/scss/_blog.scss
index 7a88570..bea79c1 100644
--- a/scss/_blog.scss
+++ b/scss/_blog.scss
@@ -189,3 +189,12 @@
     font-style: italic;
   }
 }
+
+.navigation {
+  .pagination {
+    padding-top: 2em;
+    display:flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 17d568a..3138046 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -96,6 +96,22 @@
   outline: none;
 }
 
+.page-numbers {
+  @extend .btn;
+  @extend .btn-grey;
+  padding: 0.5em 1em 0.5em 1em;
+  margin-top: 0.1em;
+  color: #FFF;
+  
+  &.dots {
+    border: none;
+    background-color: transparent!important;
+    box-shadow: none;
+    color: #444;
+    text-shadow: none;
+  }
+}
+
 /* 5.1 - Réseaux sociaux */
 
 .share-buttons {
diff --git a/style.css b/style.css
index 056e4b5..afaf504 100644
--- a/style.css
+++ b/style.css
@@ -826,7 +826,7 @@ a.list-group-item:hover {
  *  This part of the (s)css handle the style of buttons-like and badges.
  *
 */
-.btn {
+.btn, .page-numbers {
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 0px 0px 0px 0px;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
@@ -834,14 +834,14 @@ a.list-group-item:hover {
   background-color: #eeeeec;
   color: #111;
   font-weight: 600; }
-  .btn:hover, .btn:active, .btn:focus, .btn:not(.disabled):not(:disabled):hover, .btn:not(.disabled):not(:disabled):active, .btn:not(.disabled):not(:disabled):focus {
+  .btn:hover, .page-numbers:hover, .btn:active, .page-numbers:active, .btn:focus, .page-numbers:focus, .btn:not(.disabled):not(:disabled):hover, .page-numbers:not(.disabled):not(:disabled):hover, .btn:not(.disabled):not(:disabled):active, .page-numbers:not(.disabled):not(:disabled):active, .btn:not(.disabled):not(:disabled):focus, .page-numbers:not(.disabled):not(:disabled):focus {
     background-color: white;
     color: #111; }
-  .btn:hover {
+  .btn:hover, .page-numbers:hover {
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.3);
     text-decoration: none; }
-  .btn:active {
+  .btn:active, .page-numbers:active {
     box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.3);
     text-decoration: none; }
@@ -930,10 +930,10 @@ a.list-group-item:hover {
     background-color: #bd906b;
     color: #FFF; }
 
-.btn-grey {
+.btn-grey, .page-numbers {
   background-color: #77767b;
   color: #FFF; }
-  .btn-grey:hover, .btn-grey:active, .btn-grey:focus, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active, .btn-grey:not(.disabled):not(:disabled):focus {
+  .btn-grey:hover, .page-numbers:hover, .btn-grey:active, .page-numbers:active, .btn-grey:focus, .page-numbers:focus, .btn-grey:not(.disabled):not(:disabled):hover, .page-numbers:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active, .page-numbers:not(.disabled):not(:disabled):active, .btn-grey:not(.disabled):not(:disabled):focus, .page-numbers:not(.disabled):not(:disabled):focus {
     background-color: #9e9da1;
     color: #FFF; }
 
@@ -982,28 +982,40 @@ a.list-group-item:hover {
 .btn-group {
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); }
 
-.btn-group .btn {
+.btn-group .btn, .btn-group .page-numbers {
   box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
   border-radius: 0px 0px 0px 0px; }
-  .btn-group .btn:not(:first-child) {
+  .btn-group .btn:not(:first-child), .btn-group .page-numbers:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0; }
-  .btn-group .btn:not(:last-child) {
+  .btn-group .btn:not(:last-child), .btn-group .page-numbers:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0; }
 
-.btn-group .btn:hover {
+.btn-group .btn:hover, .btn-group .page-numbers:hover {
   box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
 
-.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
-.show > .btn.dropdown-toggle {
+.btn-group .btn:active, .btn-group .page-numbers:active, .btn:not(:disabled):not(.disabled):active, .page-numbers:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active, .page-numbers:not(:disabled):not(.disabled).active,
+.show > .btn.dropdown-toggle,
+.show > .dropdown-toggle.page-numbers {
   box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2) !important;
   border: 1px solid rgba(0, 0, 0, 0.3); }
 
-.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
+.btn:focus, .page-numbers:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
   outline: none; }
 
+.page-numbers {
+  padding: 0.5em 1em 0.5em 1em;
+  margin-top: 0.1em;
+  color: #FFF; }
+  .page-numbers.dots {
+    border: none;
+    background-color: transparent !important;
+    box-shadow: none;
+    color: #444;
+    text-shadow: none; }
+
 /* 5.1 - Réseaux sociaux */
 .share-buttons {
   margin: 15px; }
@@ -1332,3 +1344,9 @@ a.list-group-item:hover {
     justify-content: space-between; }
   .list-article-content {
     font-style: italic; }
+
+.navigation .pagination {
+  padding-top: 2em;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end; }