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; } } }