From 5ffabe721a1888b3537f561f38721dab9351c4ad Mon Sep 17 00:00:00 2001 From: Kazhnuz 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; }