From ea976d6d041c8db1779d18543699958ef9bc2446 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Thu, 31 Dec 2020 08:45:00 +0100 Subject: [PATCH] fix: refactoring des boutons --- components/posts-list.php | 4 +- functions.php | 12 +- scss/_drawing.scss | 38 ------- scss/components/_buttons.scss | 19 ++-- single.php | 15 ++- style.css | 205 ++++++---------------------------- 6 files changed, 67 insertions(+), 226 deletions(-) diff --git a/components/posts-list.php b/components/posts-list.php index aa018f0..23ec310 100644 --- a/components/posts-list.php +++ b/components/posts-list.php @@ -4,12 +4,12 @@
term_id ) ) . "' class='article-category'>" . $category[0]->cat_name . ""; ?> + echo" " . $category[0]->cat_name . ""; ?>
-

Lire l'article

+

Lire l'article

diff --git a/functions.php b/functions.php index 0cc07cc..0f942fc 100644 --- a/functions.php +++ b/functions.php @@ -86,13 +86,13 @@ function mypost_social_sharing_buttons($content) { // Add sharing button at the end of page/page content $content .= ''; $content .= ''; return $content; diff --git a/scss/_drawing.scss b/scss/_drawing.scss index 7d08895..3c4f08b 100644 --- a/scss/_drawing.scss +++ b/scss/_drawing.scss @@ -17,20 +17,6 @@ padding-bottom: 1.5rem; } -.article-category-link { - @include button($button_small); - padding-left: $button_small; - padding-right: $button_small; - @include button-color($color-info, $color-button-light); - &:hover, &:active { - @include borders(); - } - - p &:last-child { - margin-bottom:0; - } -} - strong.btn-fake { @include button($button_large); @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1)); @@ -50,30 +36,6 @@ a.article-nav-link-wrap { @include button-color($color-info, $color-button-light); } -.article-more-link { - text-align: center; - a { - @include button($button_large); - padding-left: $button_large; - padding-right: $button_large; - &:hover, &:active { - @include borders(); - } - - p &:last-child { - margin-bottom:0; - } - @include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary); - } -} - -.btn-navbar { - @include button($button_large); - padding-left: $button_small; - padding-right: $button_small; - @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light); -} - .pigimg, .mb { padding-bottom:1.5rem; } diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss index 6435356..0139e51 100644 --- a/scss/components/_buttons.scss +++ b/scss/components/_buttons.scss @@ -81,11 +81,11 @@ $button_small: $lineheight_quarter; } } -.label, label.label, a.label, .chip, a.chip { - @include biseau($button_small); - padding-left: $button_small; - padding-right: $button_small; - text-decoration:none; +.btn-small { + @include button($button_small); + padding-left: $button_small; + padding-right: $button_small; + text-decoration:none; } .menu-label { @@ -96,12 +96,14 @@ $button_small: $lineheight_quarter; // NAVBAR SPECIAL BUTTONS -.navbar .btn-link { - @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light); +.btn-navbar { + @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light); + padding-left: $button_small; + padding-right: $button_small; } .btn-readmore { - @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-primary); + @include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary); } // BUTTONS GROUPS @@ -186,6 +188,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb { .share-buttons { margin-top: $lineheight; + padding-bottom: $lineheight; } .reagir { diff --git a/single.php b/single.php index bdf1322..e20ea62 100644 --- a/single.php +++ b/single.php @@ -17,10 +17,19 @@ Le
+
term_id ) ) . "' class=''>" . $category->cat_name . ""; - } ?> + foreach( $categories as $category ) { + echo " " . $category->cat_name . ""; + } ?> + term_id ) ) . "' class='btn-small btn-primary'> " . $tag->name . ""; + } + } ?> + +
diff --git a/style.css b/style.css index 9cf9812..e9d4b21 100644 --- a/style.css +++ b/style.css @@ -1352,14 +1352,35 @@ ul.card-list, .card > ul { p .btn:last-child { margin-bottom: 0; } -.label, label.label, a.label, .chip, a.chip { +.btn-small { + padding: 0.375rem; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + margin: 0.1875rem; + margin-top: 0.125rem; + margin-bottom: 1.5rem; + line-height: 1.5rem; + height: auto; + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 0px 0px 0px 0px; + font-weight: 400; + background-color: transparent; position: relative; z-index: 1; overflow: visible; padding-left: 0.375rem; padding-right: 0.375rem; text-decoration: none; } - .label:before, label.label:before, a.label:before, .chip:before, a.chip:before { + .btn-small:hover, .btn-small:active, .btn-small:focus, a:hover > .btn-small, a:active > .btn-small, a:focus > .btn-small { + text-decoration: none; + background-color: transparent; } + .btn-small:focus { + outline: none; + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); } + .btn-small:focus:before { + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3); + outline: none; } + .btn-small:before { content: " "; position: absolute; top: 0; @@ -1387,18 +1408,20 @@ ul.card-list, .card > ul { transform: skewX(-15deg); transition: background-color 0.3s; } -.navbar .btn-link { - color: #fdf6e3; } - .navbar .btn-link:before { +.btn-navbar { + color: #fdf6e3; + padding-left: 0.375rem; + padding-right: 0.375rem; } + .btn-navbar:before { background-color: transparent; } - .navbar .btn-link:visited { + .btn-navbar:visited { color: #fdf6e3; } - .navbar .btn-link:visited:before { + .btn-navbar:visited:before { background-color: transparent; } - .navbar .btn-link:hover, .navbar .btn-link:active, .navbar .btn-link:focus, a:hover > .navbar .btn-link, a:active > .navbar .btn-link, a:focus > .navbar .btn-link, .navbar .btn-link:visited:hover, .navbar .btn-link:visited:active, .navbar .btn-link:visited:focus, a:hover > .navbar .btn-link:visited, a:active > .navbar .btn-link:visited, a:focus > .navbar .btn-link:visited, .navbar .btn-link:not(.disabled):not(:disabled):hover, .navbar .btn-link:not(.disabled):not(:disabled):active, .navbar .btn-link:not(.disabled):not(:disabled):focus, a:hover > .navbar .btn-link:not(.disabled):not(:disabled), a:active > .navbar .btn-link:not(.disabled):not(:disabled), a:focus > .navbar .btn-link:not(.disabled):not(:disabled) { + .btn-navbar:hover, .btn-navbar:active, .btn-navbar:focus, a:hover > .btn-navbar, a:active > .btn-navbar, a:focus > .btn-navbar, .btn-navbar:visited:hover, .btn-navbar:visited:active, .btn-navbar:visited:focus, a:hover > .btn-navbar:visited, a:active > .btn-navbar:visited, a:focus > .btn-navbar:visited, .btn-navbar:not(.disabled):not(:disabled):hover, .btn-navbar:not(.disabled):not(:disabled):active, .btn-navbar:not(.disabled):not(:disabled):focus, a:hover > .btn-navbar:not(.disabled):not(:disabled), a:active > .btn-navbar:not(.disabled):not(:disabled), a:focus > .btn-navbar:not(.disabled):not(:disabled) { color: #fffefb; } - .navbar .btn-link:hover:before, .navbar .btn-link:active:before, .navbar .btn-link:focus:before, a:hover > .navbar .btn-link:before, a:active > .navbar .btn-link:before, a:focus > .navbar .btn-link:before, .navbar .btn-link:visited:hover:before, .navbar .btn-link:visited:active:before, .navbar .btn-link:visited:focus:before, a:hover > .navbar .btn-link:visited:before, a:active > .navbar .btn-link:visited:before, a:focus > .navbar .btn-link:visited:before, .navbar .btn-link:not(.disabled):not(:disabled):hover:before, .navbar .btn-link:not(.disabled):not(:disabled):active:before, .navbar .btn-link:not(.disabled):not(:disabled):focus:before, a:hover > .navbar .btn-link:not(.disabled):not(:disabled):before, a:active > .navbar .btn-link:not(.disabled):not(:disabled):before, a:focus > .navbar .btn-link:not(.disabled):not(:disabled):before { - background-color: rgba(0, 0, 0, 0.2); } + .btn-navbar:hover:before, .btn-navbar:active:before, .btn-navbar:focus:before, a:hover > .btn-navbar:before, a:active > .btn-navbar:before, a:focus > .btn-navbar:before, .btn-navbar:visited:hover:before, .btn-navbar:visited:active:before, .btn-navbar:visited:focus:before, a:hover > .btn-navbar:visited:before, a:active > .btn-navbar:visited:before, a:focus > .btn-navbar:visited:before, .btn-navbar:not(.disabled):not(:disabled):hover:before, .btn-navbar:not(.disabled):not(:disabled):active:before, .btn-navbar:not(.disabled):not(:disabled):focus:before, a:hover > .btn-navbar:not(.disabled):not(:disabled):before, a:active > .btn-navbar:not(.disabled):not(:disabled):before, a:focus > .btn-navbar:not(.disabled):not(:disabled):before { + background-color: rgba(0, 0, 0, 0.1); } .btn-readmore { color: #d33682; } @@ -1411,7 +1434,7 @@ ul.card-list, .card > ul { .btn-readmore:hover, .btn-readmore:active, .btn-readmore:focus, a:hover > .btn-readmore, a:active > .btn-readmore, a:focus > .btn-readmore, .btn-readmore:visited:hover, .btn-readmore:visited:active, .btn-readmore:visited:focus, a:hover > .btn-readmore:visited, a:active > .btn-readmore:visited, a:focus > .btn-readmore:visited, .btn-readmore:not(.disabled):not(:disabled):hover, .btn-readmore:not(.disabled):not(:disabled):active, .btn-readmore:not(.disabled):not(:disabled):focus, a:hover > .btn-readmore:not(.disabled):not(:disabled), a:active > .btn-readmore:not(.disabled):not(:disabled), a:focus > .btn-readmore:not(.disabled):not(:disabled) { color: #d84b8f; } .btn-readmore:hover:before, .btn-readmore:active:before, .btn-readmore:focus:before, a:hover > .btn-readmore:before, a:active > .btn-readmore:before, a:focus > .btn-readmore:before, .btn-readmore:visited:hover:before, .btn-readmore:visited:active:before, .btn-readmore:visited:focus:before, a:hover > .btn-readmore:visited:before, a:active > .btn-readmore:visited:before, a:focus > .btn-readmore:visited:before, .btn-readmore:not(.disabled):not(:disabled):hover:before, .btn-readmore:not(.disabled):not(:disabled):active:before, .btn-readmore:not(.disabled):not(:disabled):focus:before, a:hover > .btn-readmore:not(.disabled):not(:disabled):before, a:active > .btn-readmore:not(.disabled):not(:disabled):before, a:focus > .btn-readmore:not(.disabled):not(:disabled):before { - background-color: rgba(0, 0, 0, 0.2); } + background-color: rgba(0, 0, 0, 0.05); } .btn-toolbar { padding: 0 1.5rem; } @@ -1761,7 +1784,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb { /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */ .share-buttons { - margin-top: 1.5rem; } + margin-top: 1.5rem; + padding-bottom: 1.5rem; } .reagir { text-align: right; } @@ -2088,59 +2112,6 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb { justify-content: space-between; padding-bottom: 1.5rem; } -.article-category-link { - padding: 0.375rem; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - margin: 0.1875rem; - margin-top: 0.125rem; - margin-bottom: 1.5rem; - line-height: 1.5rem; - height: auto; - border: 0px solid rgba(0, 0, 0, 0.3); - border-radius: 0px 0px 0px 0px; - font-weight: 400; - background-color: transparent; - position: relative; - z-index: 1; - overflow: visible; - padding-left: 0.375rem; - padding-right: 0.375rem; - color: #fdf6e3; } - .article-category-link:hover, .article-category-link:active, .article-category-link:focus, a:hover > .article-category-link, a:active > .article-category-link, a:focus > .article-category-link { - text-decoration: none; - background-color: transparent; } - .article-category-link:focus { - outline: none; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); } - .article-category-link:focus:before { - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3); - outline: none; } - .article-category-link:before { - content: " "; - position: absolute; - top: 0; - left: -0.1875rem; - right: -0.1875rem; - bottom: 0; - z-index: -1; - transform: skewX(-15deg); - transition: background-color 0.3s; } - .article-category-link:before { - background-color: #2aa198; } - .article-category-link:visited { - color: #fdf6e3; } - .article-category-link:visited:before { - background-color: #2aa198; } - .article-category-link:hover, .article-category-link:active, .article-category-link:focus, a:hover > .article-category-link, a:active > .article-category-link, a:focus > .article-category-link, .article-category-link:visited:hover, .article-category-link:visited:active, .article-category-link:visited:focus, a:hover > .article-category-link:visited, a:active > .article-category-link:visited, a:focus > .article-category-link:visited, .article-category-link:not(.disabled):not(:disabled):hover, .article-category-link:not(.disabled):not(:disabled):active, .article-category-link:not(.disabled):not(:disabled):focus, a:hover > .article-category-link:not(.disabled):not(:disabled), a:active > .article-category-link:not(.disabled):not(:disabled), a:focus > .article-category-link:not(.disabled):not(:disabled) { - color: #fffefb; } - .article-category-link:hover:before, .article-category-link:active:before, .article-category-link:focus:before, a:hover > .article-category-link:before, a:active > .article-category-link:before, a:focus > .article-category-link:before, .article-category-link:visited:hover:before, .article-category-link:visited:active:before, .article-category-link:visited:focus:before, a:hover > .article-category-link:visited:before, a:active > .article-category-link:visited:before, a:focus > .article-category-link:visited:before, .article-category-link:not(.disabled):not(:disabled):hover:before, .article-category-link:not(.disabled):not(:disabled):active:before, .article-category-link:not(.disabled):not(:disabled):focus:before, a:hover > .article-category-link:not(.disabled):not(:disabled):before, a:active > .article-category-link:not(.disabled):not(:disabled):before, a:focus > .article-category-link:not(.disabled):not(:disabled):before { - background-color: #22837b; } - .article-category-link:hover, .article-category-link:active { - border: 0px solid rgba(0, 0, 0, 0.3); } - p .article-category-link:last-child { - margin-bottom: 0; } - strong.btn-fake { padding: 1.5rem; padding-top: 0.5rem; @@ -2241,110 +2212,6 @@ a.article-nav-link-wrap { a.article-nav-link-wrap:hover:before, a.article-nav-link-wrap:active:before, a.article-nav-link-wrap:focus:before, a:hover > a.article-nav-link-wrap:before, a:active > a.article-nav-link-wrap:before, a:focus > a.article-nav-link-wrap:before, a.article-nav-link-wrap:visited:hover:before, a.article-nav-link-wrap:visited:active:before, a.article-nav-link-wrap:visited:focus:before, a:hover > a.article-nav-link-wrap:visited:before, a:active > a.article-nav-link-wrap:visited:before, a:focus > a.article-nav-link-wrap:visited:before, a.article-nav-link-wrap:not(.disabled):not(:disabled):hover:before, a.article-nav-link-wrap:not(.disabled):not(:disabled):active:before, a.article-nav-link-wrap:not(.disabled):not(:disabled):focus:before, a:hover > a.article-nav-link-wrap:not(.disabled):not(:disabled):before, a:active > a.article-nav-link-wrap:not(.disabled):not(:disabled):before, a:focus > a.article-nav-link-wrap:not(.disabled):not(:disabled):before { background-color: #22837b; } -.article-more-link { - text-align: center; } - .article-more-link a { - padding: 1.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - margin: 0.75rem; - margin-top: 0.5rem; - margin-bottom: 1.5rem; - line-height: 1.5rem; - height: auto; - border: 0px solid rgba(0, 0, 0, 0.3); - border-radius: 0px 0px 0px 0px; - font-weight: 400; - background-color: transparent; - position: relative; - z-index: 1; - overflow: visible; - padding-left: 1.5rem; - padding-right: 1.5rem; - color: #d33682; } - .article-more-link a:hover, .article-more-link a:active, .article-more-link a:focus, a:hover > .article-more-link a, a:active > .article-more-link a, a:focus > .article-more-link a { - text-decoration: none; - background-color: transparent; } - .article-more-link a:focus { - outline: none; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); } - .article-more-link a:focus:before { - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3); - outline: none; } - .article-more-link a:before { - content: " "; - position: absolute; - top: 0; - left: -0.75rem; - right: -0.75rem; - bottom: 0; - z-index: -1; - transform: skewX(-15deg); - transition: background-color 0.3s; } - .article-more-link a:hover, .article-more-link a:active { - border: 0px solid rgba(0, 0, 0, 0.3); } - p .article-more-link a:last-child { - margin-bottom: 0; } - .article-more-link a:before { - background-color: transparent; } - .article-more-link a:visited { - color: #d33682; } - .article-more-link a:visited:before { - background-color: transparent; } - .article-more-link a:hover, .article-more-link a:active, .article-more-link a:focus, a:hover > .article-more-link a, a:active > .article-more-link a, a:focus > .article-more-link a, .article-more-link a:visited:hover, .article-more-link a:visited:active, .article-more-link a:visited:focus, a:hover > .article-more-link a:visited, a:active > .article-more-link a:visited, a:focus > .article-more-link a:visited, .article-more-link a:not(.disabled):not(:disabled):hover, .article-more-link a:not(.disabled):not(:disabled):active, .article-more-link a:not(.disabled):not(:disabled):focus, a:hover > .article-more-link a:not(.disabled):not(:disabled), a:active > .article-more-link a:not(.disabled):not(:disabled), a:focus > .article-more-link a:not(.disabled):not(:disabled) { - color: #d84b8f; } - .article-more-link a:hover:before, .article-more-link a:active:before, .article-more-link a:focus:before, a:hover > .article-more-link a:before, a:active > .article-more-link a:before, a:focus > .article-more-link a:before, .article-more-link a:visited:hover:before, .article-more-link a:visited:active:before, .article-more-link a:visited:focus:before, a:hover > .article-more-link a:visited:before, a:active > .article-more-link a:visited:before, a:focus > .article-more-link a:visited:before, .article-more-link a:not(.disabled):not(:disabled):hover:before, .article-more-link a:not(.disabled):not(:disabled):active:before, .article-more-link a:not(.disabled):not(:disabled):focus:before, a:hover > .article-more-link a:not(.disabled):not(:disabled):before, a:active > .article-more-link a:not(.disabled):not(:disabled):before, a:focus > .article-more-link a:not(.disabled):not(:disabled):before { - background-color: rgba(0, 0, 0, 0.05); } - -.btn-navbar { - padding: 1.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - margin: 0.75rem; - margin-top: 0.5rem; - margin-bottom: 1.5rem; - line-height: 1.5rem; - height: auto; - border: 0px solid rgba(0, 0, 0, 0.3); - border-radius: 0px 0px 0px 0px; - font-weight: 400; - background-color: transparent; - position: relative; - z-index: 1; - overflow: visible; - padding-left: 0.375rem; - padding-right: 0.375rem; - color: #fdf6e3; } - .btn-navbar:hover, .btn-navbar:active, .btn-navbar:focus, a:hover > .btn-navbar, a:active > .btn-navbar, a:focus > .btn-navbar { - text-decoration: none; - background-color: transparent; } - .btn-navbar:focus { - outline: none; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); } - .btn-navbar:focus:before { - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3); - outline: none; } - .btn-navbar:before { - content: " "; - position: absolute; - top: 0; - left: -0.75rem; - right: -0.75rem; - bottom: 0; - z-index: -1; - transform: skewX(-15deg); - transition: background-color 0.3s; } - .btn-navbar:before { - background-color: transparent; } - .btn-navbar:visited { - color: #fdf6e3; } - .btn-navbar:visited:before { - background-color: transparent; } - .btn-navbar:hover, .btn-navbar:active, .btn-navbar:focus, a:hover > .btn-navbar, a:active > .btn-navbar, a:focus > .btn-navbar, .btn-navbar:visited:hover, .btn-navbar:visited:active, .btn-navbar:visited:focus, a:hover > .btn-navbar:visited, a:active > .btn-navbar:visited, a:focus > .btn-navbar:visited, .btn-navbar:not(.disabled):not(:disabled):hover, .btn-navbar:not(.disabled):not(:disabled):active, .btn-navbar:not(.disabled):not(:disabled):focus, a:hover > .btn-navbar:not(.disabled):not(:disabled), a:active > .btn-navbar:not(.disabled):not(:disabled), a:focus > .btn-navbar:not(.disabled):not(:disabled) { - color: #fffefb; } - .btn-navbar:hover:before, .btn-navbar:active:before, .btn-navbar:focus:before, a:hover > .btn-navbar:before, a:active > .btn-navbar:before, a:focus > .btn-navbar:before, .btn-navbar:visited:hover:before, .btn-navbar:visited:active:before, .btn-navbar:visited:focus:before, a:hover > .btn-navbar:visited:before, a:active > .btn-navbar:visited:before, a:focus > .btn-navbar:visited:before, .btn-navbar:not(.disabled):not(:disabled):hover:before, .btn-navbar:not(.disabled):not(:disabled):active:before, .btn-navbar:not(.disabled):not(:disabled):focus:before, a:hover > .btn-navbar:not(.disabled):not(:disabled):before, a:active > .btn-navbar:not(.disabled):not(:disabled):before, a:focus > .btn-navbar:not(.disabled):not(:disabled):before { - background-color: rgba(0, 0, 0, 0.1); } - .pigimg, .mb { padding-bottom: 1.5rem; }