From f3ae5ab9f021cfb2937762334704aef4139c8052 Mon Sep 17 00:00:00 2001 From: chankalan Date: Tue, 15 Feb 2022 22:20:11 +0100 Subject: [PATCH] =?UTF-8?q?lisibilit=C3=A9=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- squelettes/scss/styles/_perso.scss | 490 ++++++++++++++--------------- 1 file changed, 245 insertions(+), 245 deletions(-) diff --git a/squelettes/scss/styles/_perso.scss b/squelettes/scss/styles/_perso.scss index c58146e..7f19048 100644 --- a/squelettes/scss/styles/_perso.scss +++ b/squelettes/scss/styles/_perso.scss @@ -6,8 +6,8 @@ font-weight: 500; border-radius:0; &:hover { - background:$couleurPrincipaleOn; - color:$couleurPrincipale !important; + background: $couleurPrincipaleOn; + color: $couleurPrincipale !important; } } .liens .btn { @@ -17,11 +17,11 @@ /* border-radius: 0.7em; */ } span.btn { - cursor:text; + cursor: text; } .flex { - width:100%; - clear:both; + width: 100%; + clear: both; } .page_wrapper { @@ -36,12 +36,12 @@ span.btn { > .page_container { background-color:$couleurSecondaire; @include flex(); - align-items:stretch; + align-items: stretch; } .header_title { min-width: 150px; - background:white; + background: white; } .header_menu { flex-grow: 2; @@ -50,9 +50,9 @@ span.btn { padding-top:0; .nav-list { @include flex(); - justify-content:end; - align-items:stretch; - background:$couleurPrincipale; + justify-content: end; + align-items: stretch; + background: $couleurPrincipale; } li { margin:0; @@ -63,49 +63,49 @@ span.btn { background:$couleurPrincipale !important; border:0; &:hover, &:active, &:focus, &.on { - color:$couleurPrincipale !important; - background:$couleurPrincipaleOn !important; + color: $couleurPrincipale !important; + background: $couleurPrincipaleOn !important; border:0; } } } .liens { - text-align:right; - margin-top:1.2rem; + text-align: right; + margin-top: 1.2rem; .btn { - float:right; - margin-top:1.55rem; + float: right; + margin-top: 1.55rem; .fas:before { font-size:1rem; } &:hover, &:focus { - background:$couleurPrincipaleOn; - color:$couleurPrincipale !important; + background: $couleurPrincipaleOn; + color: $couleurPrincipale !important; .fas:before { - color:$couleurPrincipale !important; + color: $couleurPrincipale !important; } } } .sociaux { - float:right; - display:inline-block; - font-size:0.8rem; - margin:1.8rem 1.5rem 0 0; + float: right; + display: inline-block; + font-size: 0.8rem; + margin: 1.8rem 1.5rem 0 0; .socicon { - background:none !important; - color:$blancTransparent; + background: none !important; + color: $blancTransparent; &:hover, &:focus { - color:$couleurPrincipaleOn; + color: $couleurPrincipaleOn; } } } .formulaire_spip.formulaire_abomailman_mini_une_liste { - width:230px; - float:right; - position:relative; - margin:0 0 0 1rem; - text-align:left; + width: 230px; + float: right; + position: relative; + margin: 0 0 0 1rem; + text-align: left; .reponse_formulaire { position: absolute; top: 100%; @@ -117,16 +117,16 @@ span.btn { > .page_container .nav > ul .loupe a { padding:0; i.fa-search { - padding:1.25rem 1.1rem 1.2rem; - background-color:$couleurPrincipale; + padding: 1.25rem 1.1rem 1.2rem; + background-color: $couleurPrincipale; /* font-size:0.8rem; */ - border-radius:0; + border-radius: 0; /* color:white; */ } &:focus i.fa-search, &:active i.fa-search, &:hover i.fa-search { - background-color:$couleurPrincipaleOn; - color:$couleurPrincipale; + background-color: $couleurPrincipaleOn; + color: $couleurPrincipale; } } } @@ -140,31 +140,31 @@ span.btn { .encart { - float:right; - text-align:right; + float: right; + text-align: right; font-size:1.1rem; margin-left:2rem; span { - font-size:115%; + font-size: 115%; &.btn { background:$couleurSecondaire; - color:white !important; - font-weight:900; - margin:0.6rem 0 0.3rem; - padding:1.3rem 2rem; + color: white !important; + font-weight: 900; + margin: 0.6rem 0 0.3rem; + padding: 1.3rem 2rem; &:first-letter { - text-transform:uppercase; + text-transform: uppercase; } } } @include media($bp-xxsmall) { - float:none; + float: none; } } .bientot { - display:inline-block; - color:$couleurSecondaire; - font-weight:900; + display: inline-block; + color: $couleurSecondaire; + font-weight: 900; } //---------------------------------------- @@ -219,7 +219,7 @@ html .formulaire_spip input[type="text"] { .article-resume { - background-color:white; + background-color: white; padding:1rem; } .article__texte { @@ -244,9 +244,9 @@ html .formulaire_spip input[type="text"] { align-items: start; @include media($bp-medium-up) { .page_article:not(.article_chronique) & { - background:white; + background: white; .page_aside { - margin-left:0; + margin-left: 0; } } } @@ -276,11 +276,11 @@ html .formulaire_spip input[type="text"] { padding:0; } &.btn { - background:$couleurSecondaire; - color:white !important; + background: $couleurSecondaire; + color: white !important; &:hover { - background:$couleurPrincipaleOn; - color:white !important; + background: $couleurPrincipaleOn; + color: white !important; } } } @@ -289,7 +289,7 @@ html .formulaire_spip input[type="text"] { @include media($bp-medium) { padding:2rem 2rem 1rem; } - background-color:white; + background-color: white; h1 { margin:0; } @@ -303,15 +303,15 @@ html .formulaire_spip input[type="text"] { margin-top: 6rem; position: relative; .emissions > h2, .emissions > a { - position:absolute; - margin-top:-2.6rem; + position: absolute; + margin-top: -2.6rem; } .article_blog & { margin-top:0; padding:1rem 2rem; - background-color:white; + background-color: white; .pagination .pagination-items a, .pagination .lien_pagination a { - color:$couleurPrincipale; + color: $couleurPrincipale; } } } @@ -325,7 +325,7 @@ html .formulaire_spip input[type="text"] { /* background-color:#fff; */ } .rubrique_chroniques & .liste.articles { - margin-top:3rem; + margin-top: 3rem; } @include media($bp-medium-up) { > * { @@ -337,7 +337,7 @@ html .formulaire_spip input[type="text"] { } } .page_aside { - background:white; + background: white; > ul .article-resume { padding:0; } @@ -359,11 +359,11 @@ h2 { } .fl { - border-top:2em solid $couleurPrincipale; - border-bottom:2em solid $couleurPrincipale; - margin:0 -1000px; - padding:2em 1000px; - background:white; + border-top: 2em solid $couleurPrincipale; + border-bottom: 2em solid $couleurPrincipale; + margin: 0 -1000px; + padding: 2em 1000px; + background: white; } .fb { padding:2em 0; @@ -376,17 +376,17 @@ h2 { margin-bottom:1em; } .galeriephotos { - float:right; + float: right; font-size:1.2rem; line-height: 1.8; } .galerie_photoapril figure { @include media($bp-large-up) { &:first-child { - text-align:left; + text-align: left; } &:last-child { - text-align:right; + text-align: right; } } } @@ -410,8 +410,8 @@ ul.spip { .btn.blanc { - color:$couleurPrincipale !important; - background:white; + color: $couleurPrincipale !important; + background: white; border:1px solid rgba($couleurPrincipale,0.2); border-radius:0; &:hover { @@ -424,18 +424,18 @@ ul.spip { .article__infos { - position:relative; - height:auto; + position: relative; + height: auto; width: auto; white-space: inherit; clip: unset; clip-path: unset; font-size:1em; - margin:-2rem 0 1rem -4rem; + margin: -2rem 0 1rem -4rem; display: flex; align-items: center; @include media($bp-medium) { - margin:-2rem -200px 0 -2rem; + margin: -2rem -200px 0 -2rem; line-height:1.2; .emission_heroine & { @include flex(); @@ -448,21 +448,21 @@ ul.spip { } } @include media($bp-small) { - margin:-2rem 0 0 -2rem; + margin: -2rem 0 0 -2rem; } @include media($bp-xxsmall) { flex-wrap: wrap; .article__date, .btn { - margin:0.3rem 0 0 1rem; + margin: 0.3rem 0 0 1rem; } } - overflow:visible; + overflow: visible; .composition_blog & { margin:0; } } .num_emission { - display:inline-block; + display: inline-block; width:150px; padding:0.5rem; margin-right:1.5rem; @@ -471,7 +471,7 @@ ul.spip { } font-weight:700; font-size:2.8rem; - text-align:center; + text-align: center; color:$couleurSecondaire; background:$couleurBackgroundTexte; font-family:$typo-titre; @@ -483,7 +483,7 @@ ul.spip { .composition_emissions, .composition_emission, .emissions, .derniere_emission, .prochaine_emission { .article__date { - display:inline; + display: inline; font-size:1.5rem; color:$couleurSecondaire; font-weight:700; @@ -505,8 +505,8 @@ ul.spip { } } .liste.articles.blog { - background-color:white; - margin:-2rem 0; + background-color: white; + margin: -2rem 0; .liste-items { list-style:none; margin:0 0 2rem; @@ -524,7 +524,7 @@ ul.spip { } .lecteur { @include flex; - align-items:center; + align-items: center; margin-bottom:3rem; > .podlove_wrapper { width:76%; @@ -548,7 +548,7 @@ ul.spip { .texte_aside { width:200px; padding:0 0 1rem 2rem; - text-align:center; + text-align: center; @include media($bp-small) { padding:0 0 1rem; margin:0 auto; @@ -557,7 +557,7 @@ ul.spip { .telecharger { list-style:none; margin:0 0 0.5rem; - text-align:left; + text-align: left; @include media($bp-small) { padding:0 0 1rem; margin: 0 auto; @@ -571,7 +571,7 @@ ul.spip { padding-left:2.2rem; padding-bottom:0.3rem; font-size:1.15rem; - text-transform:none; + text-transform: none; &:before { left:0.8rem; } @@ -582,21 +582,21 @@ ul.spip { } .btn.podcast { - padding:0 0.5em 0.1em 1rem; - position:relative; - text-align:left; + padding: 0 0.5em 0.1em 1rem; + position: relative; + text-align: left; border-width:0.25em; - border-color:$couleurSecondaire; - color:$couleurSecondaire !important; - font-weight:900; - font-size:0.6rem; - text-transform:uppercase; + border-color: $couleurSecondaire; + color: $couleurSecondaire !important; + font-weight: 900; + font-size: 0.6rem; + text-transform: uppercase; &:not(.mini):before { @include triangle(right, $couleurSecondaire, 0.5em); position: absolute; left: 0.4rem; top: 50%; - margin-top:-0.45em; + margin-top: -0.45em; } small { font-size:0.7em; @@ -618,34 +618,34 @@ ul.spip { } } &.mini { - background-color:white; - background-position:top !important; + background-color: white; + background-position: top !important; background-size:100% !important; - border:0 !important; - transition:none !important; - height:11px; - width:33px; - padding:0; + border: 0 !important; + transition: none !important; + height: 11px; + width: 33px; + padding: 0; &:before { - display:none; + display: none; } &:hover { - background-color:white !important; - background-position:bottom !important; - background-size:100% !important; + background-color: white !important; + background-position: bottom !important; + background-size: 100% !important; } &.ogg { - background-image:url('img/ogg.png'); + background-image: url('img/ogg.png'); margin-left:1rem; &:hover { - background-image:url('img/ogg.png') !important; + background-image: url('img/ogg.png') !important; } } &.mp3 { - background-image:url('img/mp3.png'); + background-image: url('img/mp3.png'); margin-left:0.5rem; &:hover { - background-image:url('img/mp3.png') !important; + background-image: url('img/mp3.png') !important; } } } @@ -661,7 +661,7 @@ ul.spip { margin:2rem -2rem -2rem; } &.flex { - width:auto; + width: auto; } > ul { @include flex; @@ -685,7 +685,7 @@ ul.spip { // pour insertion dans le texte/chapo avant d'avoir le podcast .chapo & { margin-bottom: -2rem; - clear:both; + clear: both; font-size:1rem; > * { font-size:1.2rem; @@ -696,25 +696,25 @@ ul.spip { @include media($bp-medium) { margin:0 -2rem; } - width:auto; + width: auto; } } /* notation */ .formulaire_notation .notation_note { - display:inline-block; + display: inline-block; } .formulaire_jaime_jaimepas { .note, .reponse_formulaire { - float:left; + float: left; } } div.star-rating, div.star-rating a { - background-image:url('img/star.png'); + background-image: url('img/star.png'); } div.rating-cancel a { - background-image:url('img/delete.png'); + background-image: url('img/delete.png'); } /**/ @@ -727,27 +727,27 @@ div.rating-cancel a { } } a:hover .fab, a:hover .fas { - color:$couleurPrincipaleOn; + color: $couleurPrincipaleOn; } /* bloc connex */ .page_connex { - margin:3rem 0 0; - padding:0 0 1rem; + margin: 3rem 0 0; + padding: 0 0 1rem; /* background:$couleurPrincipale; */ } .page_connex_content { - color:white; + color: white; .liste h2 { - color:white; - font-size:1rem; + color: white; + font-size: 1rem; } ul { - list-style:none; - margin-left:0; + list-style: none; + margin-left: 0; li { - margin:0 0 0.5rem; + margin: 0 0 0.5rem; } } a { @@ -755,12 +755,12 @@ a:hover .fab, a:hover .fas { } } .article_forum { - background:white; - color:$couleurPrincipale; - margin:0 0 4rem; - padding:1rem 4rem; + background: white; + color: $couleurPrincipale; + margin: 0 0 4rem; + padding: 1rem 4rem; @include media($bp-medium) { - padding:1rem 2rem; + padding: 1rem 2rem; } } @@ -769,16 +769,16 @@ a:hover .fab, a:hover .fas { .article { @include media($bp-small-up) { @include flex; - justify-content:space-between; + justify-content: space-between; > * { width: calc(50% - 1rem); } } .article__texte, .article__chapo { margin-bottom:2rem; - font-weight:400; + font-weight: 400; strong, i, .btn { - font-size:115%; + font-size: 115%; } } } @@ -800,15 +800,15 @@ a:hover .fab, a:hover .fas { } } .emission-resume.article-resume { - align-items:center; + align-items: center; padding: 0 1rem 0 4rem; margin:0; @include media($bp-medium) { - padding:0 1rem 0 2rem; + padding: 0 1rem 0 2rem; } h1 { small { - display:inline-block; + display: inline-block; } } } @@ -816,16 +816,16 @@ a:hover .fab, a:hover .fas { .derniere_emission, .liste.emissions { padding-bottom:0; > h2 { - color:white; + color: white; .page_recherche & { - padding:0 4rem; + padding: 0 4rem; } } .article__infos { margin-top:0; .num_emission { - font-size:2rem; - padding:0.1rem 1rem; + font-size: 2rem; + padding: 0.1rem 1rem; width: auto; } .article__date { @@ -848,12 +848,12 @@ a:hover .fab, a:hover .fas { } } .derniere_emission.emission_heroine { - position:relative; - margin-top:-2rem; - padding:0; - padding-left:0 !important; - padding-right:0 !important; - background:white; + position: relative; + margin-top: -2rem; + padding: 0; + padding-left: 0 !important; + padding-right: 0 !important; + background: white; > h2 { color:$couleurPrincipale; /* margin-top:-3.6rem; */ @@ -867,52 +867,52 @@ a:hover .fab, a:hover .fas { } } html:not(.composition_chroniques) & .article__infos { - margin-top:0; + margin-top: 0; } } .prochaine_emission.emission_heroine { .page_content > article& { - margin-bottom:4rem; + margin-bottom: 4rem; } } .texte_content { flex:1; - padding-bottom:1rem; + padding-bottom: 1rem; min-height: 240px; h1 { - font-size:1.6rem; + font-size: 1.6rem; } h2 { - font-size:1.2rem; + font-size: 1.2rem; } p.flex { - margin:1rem 0; - padding-right:2rem; - align-items:center; + margin: 1rem 0; + padding-right: 2rem; + align-items: center; .podcast { - font-size:110%; - text-transform:none; - padding-left:1.6rem; + font-size: 110%; + text-transform: none; + padding-left: 1.6rem; } } } .liste.emissions { .cartouche { - margin:0; + margin: 0; } > h2 { - margin-bottom:0.6rem; + margin-bottom: 0.6rem; } > ul { - list-style:none; + list-style: none; padding:0; margin:0 -4rem; .page_recherche & { - margin:0; + margin: 0; } @include media($bp-medium) { - margin:0 -2rem; + margin: 0 -2rem; } > li { margin-bottom:2px; @@ -922,29 +922,29 @@ a:hover .fab, a:hover .fas { line-height: 1.3; margin-bottom: 0.5rem; > small { - display:inline-block; - margin-left:0.5rem; + display: inline-block; + margin-left: 0.5rem; } } .pagination .pagination-items a, .pagination .pagination-items span, .pagination .lien_pagination, .pagination .lien_pagination span { color:white; &.on, &:hover { - background:transparent !important; - color:$couleurPrincipaleOn !important; - color:$couleurPrincipale; + background: transparent !important; + color: $couleurPrincipaleOn !important; + color: $couleurPrincipale; } } .sujet_autre { margin: 1rem -1rem -1rem; - padding:1rem; - width:auto; + padding: 1rem; + width: auto; } } .liste.emissions.chroniques { > ul > li { - background-color:white; - margin-bottom:1rem; + background-color: white; + margin-bottom: 1rem; } .emission-resume.article-resume { /* align-items:start; */ @@ -961,7 +961,7 @@ a:hover .fab, a:hover .fas { } } .article__date { - display:inline-block; + display: inline-block; margin-right:1rem; font-size:1rem; color:$couleurPrincipale; @@ -973,22 +973,22 @@ a:hover .fab, a:hover .fas { .radiolive { clear: right; text-align: center; - max-width:100%; + max-width: 100%; margin: 0 0 1rem; h4 { - text-align:center; + text-align: center; } iframe { - min-height:300px; + min-height: 300px; } } @include media($bp-medium) { h1, .chapo, .sujet_principal { - clear:both; + clear: both; } .encart, .radiolive { - clear:both; - margin:0 0 1rem; + clear: both; + margin: 0 0 1rem; } } @include media($bp-small) { @@ -1002,39 +1002,39 @@ a:hover .fab, a:hover .fas { .radiolive { @include clearfix(); p { - line-height:1.1; + line-height: 1.1; } iframe { - min-height:300px; + min-height: 300px; } audio { @include media($bp-medium) { - margin:0.5rem -4rem; - width:100%; + margin: 0.5rem -4rem; + width: 100%; } } .live_audio { @include media($bp-medium-up) { @include flex(); - align-items:center; - justify-content:space-between; + align-items: center; + justify-content: space-between; > * { width:33%; &:first-child { - text-align:left; + text-align: left; } &:last-child { - text-align:right; + text-align: right; } } } - padding:1rem; - background:$couleurSecondaire; - color:white; - text-align:center; + padding: 1rem; + background: $couleurSecondaire; + color: white; + text-align: center; h4 { margin:0; - color:white; + color: white; } } } @@ -1044,7 +1044,7 @@ a:hover .fab, a:hover .fas { } .pagination .pagination-items a, .pagination .pagination-items span, .pagination .lien_pagination a /* spip 3 et 4 */ { - color:white; + color: white; .composition_blog & { color:$couleurPrincipale; } @@ -1054,7 +1054,7 @@ a:hover .fab, a:hover .fas { .header_initiatives, .header_initiatives .nav, .btn-nav, .header_initiatives .btn-initiatives { @include gradient-4(#02375b,#02375b,#02375b,#00263e); .inclure_blocs { /* pour un var_mode=inclure sans encombre */ - display:none; + display: none; } } @@ -1066,13 +1066,13 @@ a:hover .fab, a:hover .fas { .page_recherche, .page_plan { .page_content .formulaire_spip.formulaire_recherche { - float:right; - padding-left:0 !important; - padding-right:2rem; - width:250px; + float: right; + padding-left: 0 !important; + padding-right: 2rem; + width: 250px; } .page_content { - background:white; + background: white; } } @@ -1105,21 +1105,21 @@ h2 { }*/ - /*! Sur le menu j'ai augmenté la hauteur du bouton RSS et le champ recherche. Pour le menu avec le hover je propose de modifier le design, car le bouton bleu cyan au rollover est trop prégnant. Je convertis en filets simlple 2pt. Par contre j'ai basculé le padding sur le "li" sinon le filet sous le "a" débordait de chaque côté (voir copie-écran de la retouche css de la bannière) +/*! Sur le menu j'ai augmenté la hauteur du bouton RSS et le champ recherche. Pour le menu avec le hover je propose de modifier le design, car le bouton bleu cyan au rollover est trop prégnant. Je convertis en filets simlple 2pt. Par contre j'ai basculé le padding sur le "li" sinon le filet sous le "a" débordait de chaque côté (voir copie-écran de la retouche css de la bannière) Sur le menu, je vais voir s'il est possible de faire des filets de rollover composés de tirets et de points avec les fonctions css border-image. Ce qui ferrait un rappel du design.*/ /*! cyan ausurvol*/ .page_header .nav a:hover, .page_header .nav a.on, .page_header .nav a.active { color: white !important; background-color: transparent !important; - border-bottom:3px solid #00c4f5; + border-bottom: 3px solid #00c4f5; } .header_initiatives .menu-entree.sousinitiatives > ul.ouvert li { background:#02375b; } /*! bleu charte ensuite */ .page_header .nav a.on, .page_header .nav a.active { - border-bottom:3px solid #2E5281; + border-bottom: 3px solid #2E5281; } @@ -1142,11 +1142,11 @@ Sur le menu, je vais voir s'il est possible de faire des filets de rollover comp padding: 0.3em 0em 0.2em; color: white !important; background-color: inherit; - border-radius:0; - border-bottom:3px solid transparent; + border-radius: 0; + border-bottom: 3px solid transparent; } - /*! couleurs des liens sortants selon la maquette */ +/*! couleurs des liens sortants selon la maquette */ .formulaire_spip .abonnement button::after { @@ -1167,10 +1167,10 @@ Sur le menu, je vais voir s'il est possible de faire des filets de rollover comp font-size: 0.8rem; font-weight: 200; a, a.spip_out { - display:inline; - font-weight:400; - color:white; - border-bottom-width:1px; + display: inline; + font-weight: 400; + color: white; + border-bottom-width: 1px; } } @@ -1291,12 +1291,12 @@ a.spip_out { .loupe { .formulaire_recherche.vu { right:50%; - margin-right:-160px; - max-width:320px; + margin-right: -160px; + max-width: 320px; form { padding:0.5rem; &:before { - display:none; + display: none; } } } @@ -1309,10 +1309,10 @@ a.spip_out { } .header_initiatives { .btn-initiatives { - display:block; + display: block; } .nav { - position:absolute; + position: absolute; width:100%; top:36px; left:-100%; @@ -1321,7 +1321,7 @@ a.spip_out { left:0; } ul, .initiatives { - display:inline; + display: inline; } } } @@ -1329,7 +1329,7 @@ a.spip_out { @include media(min-width:941px) { .page_header > .page_container .nav { - position:relative; + position: relative; } } @media (max-width:804px) { @@ -1337,30 +1337,30 @@ a.spip_out { margin-top:0; } .page_header .header_menu .liens .sociaux { - margin-top:0.8rem; + margin-top: 0.8rem; } } @media (max-width:650px) { .page_header .header_menu .liens .btn { - margin-top:0.5rem; + margin-top: 0.5rem; } } @media (max-width:580px) { .page_header > .page_container .nav { - padding-top:0; + padding-top: 0; } .page_header .header_menu { padding:0.3rem 1rem; } .page_header .header_menu .liens .sociaux { - margin-top:0; + margin-top: 0; } .article-resume > :last-child.telecharger { margin-bottom:1rem; } .page_header .header_menu .liens .formulaire_spip.formulaire_abomailman_mini_une_liste { - width:160px; + width: 160px; } .page_header .header_title { min-width: 100px; @@ -1369,41 +1369,41 @@ a.spip_out { @media($bp-medium) { .page_header > .page_container { .nav { - font-size:0.95rem; - z-index:7; - position:static; + font-size: 0.95rem; + z-index: 7; + position: static; > .nav-list { - position:absolute; - width:100%; - top:36px; - left:-100%; - z-index:10; - justify-content:space-around; - flex-wrap:wrap; - padding:0; + position: absolute; + width: 100%; + top: 36px; + left: -100%; + z-index: 10; + justify-content: space-around; + flex-wrap: wrap; + padding: 0; &.ouvert{ - left:0; + left: 0; } a { - padding:1.1rem 1rem 1rem; - margin:0; - background:$couleurPrincipale !important; + padding: 1.1rem 1rem 1rem; + margin: 0; + background: $couleurPrincipale !important; border:0; &:hover, &:active, &:focus, &.on { - color:$couleurPrincipale !important; - background:$couleurPrincipaleOn !important; - border:0; + color: $couleurPrincipale !important; + background: $couleurPrincipaleOn !important; + border: 0; } } .loupe { .formulaire_recherche.vu { - right:50%; - margin-right:-160px; - max-width:320px; + right: 50%; + margin-right: -160px; + max-width: 320px; form { padding:0.5rem; &:before { - display:none; + display: none; } } }