scss: style pagination

scss/_blog.scss

@@ -189,3 +189,12 @@
     font-style: italic;
   }
 }
+
+.navigation {
+  .pagination {
+    padding-top: 2em;
+    display:flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}

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 {

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,
+.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 > .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; }