From cbfee69e4b875dc0e6174fea0942de488541ca3d Mon Sep 17 00:00:00 2001 From: chankalan Date: Wed, 16 Feb 2022 23:42:17 +0100 Subject: [PATCH] =?UTF-8?q?remise=20en=20forme=20de=20l'ent=C3=AAte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- formulaires/abomailman_mini_une_liste.html | 4 +- squelettes/header/dist.html | 6 +- squelettes/scss/styles/_perso.scss | 223 +++++++++++---------- 3 files changed, 127 insertions(+), 106 deletions(-) diff --git a/formulaires/abomailman_mini_une_liste.html b/formulaires/abomailman_mini_une_liste.html index 930323e..45ecd6a 100644 --- a/formulaires/abomailman_mini_une_liste.html +++ b/formulaires/abomailman_mini_une_liste.html @@ -1,4 +1,3 @@ -#CACHE{0}
[
(#ENV*{message_ok})
] @@ -32,6 +31,9 @@ $(function() { $(this).siblings('#email').toggleClass('vu'); $(this).parent().siblings('button').toggleClass('vu'); }); + $('.reponse_formulaire').on('click', function(){ + $(this).addClass('masquer'); + }); }); \ No newline at end of file diff --git a/squelettes/header/dist.html b/squelettes/header/dist.html index 658669b..9e0adfd 100644 --- a/squelettes/header/dist.html +++ b/squelettes/header/dist.html @@ -9,7 +9,9 @@
[
(#FORMULAIRE_ABOMAILMAN_MINI_UNE_LISTE{2})
] - S'abonner au podcast - +
+ + S'abonner au podcast +
diff --git a/squelettes/scss/styles/_perso.scss b/squelettes/scss/styles/_perso.scss index 07b3beb..e3320da 100644 --- a/squelettes/scss/styles/_perso.scss +++ b/squelettes/scss/styles/_perso.scss @@ -10,12 +10,6 @@ color: $couleurPrincipale !important; } } -.liens .btn { - padding: 0.7em 1em; -} -.btn.blanc { -/* border-radius: 0.7em; */ -} span.btn { cursor: text; } @@ -41,7 +35,8 @@ span.btn { } .header_title { min-width: 150px; - background: white; + padding: 0.5rem 0 0.2rem; +/* background: white; */ } .header_menu { flex-grow: 2; @@ -69,10 +64,50 @@ span.btn { } } } - .liens { - text-align: right; - margin-top: 1.2rem; + margin-top: 3rem; + @include flex(); + flex-direction: row-reverse; + align-items: end; + .btn { + padding: 0.7em 1em; + } + .sociaux_podcast { + margin: 0 0 0; + @include flex(); + align-items: center; + } + .sociaux { + display: inline-block; + font-size: 1.1rem; + margin: 0 1rem 0 0; + .socicon { + background: none !important; + color: $blancTransparent; + &:hover, &:focus { + color: $couleurPrincipaleOn; + } + } + } + .formulaire_spip.formulaire_abomailman_mini_une_liste { + width: 207px; + min-height: 2.5rem; + position: relative; + margin: 0 0 0 1rem; + text-align: left; + .reponse_formulaire { + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 300px; + z-index: 999; + transition: transform 0.15s ease-in-out; + &.masquer { + transform: scale(0); + } + } + } .abonnement { position: relative; label { @@ -80,6 +115,7 @@ span.btn { font-size: 1rem; padding-right: 2rem; font-weight: 400; + width: 100%; &:after { @include triangle(right, white, 8px); position: absolute; @@ -93,9 +129,10 @@ span.btn { } #email { position: absolute; - top: 4.19em; + top: 110%; width: 260px; right: 0; + z-index: 1; .js & { transform: scale(0); } @@ -113,7 +150,7 @@ span.btn { } .formulaire_spip .abonnement button { bottom: auto; - top: 4.8em; + top: 132%; height: 2rem; transition: transform 0.15s ease-in-out; .js & { @@ -124,8 +161,7 @@ span.btn { } } .btn { - float: right; - margin-top: 1.55rem; + font-size: 1rem; .fas:before { font-size: 1rem; } @@ -138,35 +174,6 @@ span.btn { } } - .sociaux { - float: right; - display: inline-block; - font-size: 0.8rem; - margin: 1.8rem 1.5rem 0 0; - .socicon { - background: none !important; - color: $blancTransparent; - &:hover, &:focus { - color: $couleurPrincipaleOn; - } - } - } - .formulaire_spip.formulaire_abomailman_mini_une_liste { - min-width: 185px; - min-height: 1rem; - float: right; - position: relative; - margin: 0 0 0 1rem; - text-align: left; - .reponse_formulaire { - position: absolute; - top: 100%; - right: 0; - margin: 0; - width: 300px; - z-index: 999; - } - } } } > .page_container .nav > ul .loupe a { @@ -193,7 +200,6 @@ span.btn { @include visuallyhidden; } - .encart { float: right; text-align: right; @@ -248,17 +254,17 @@ html .formulaire_spip input[type="text"] { margin-bottom:0; padding-right:2rem; } - background-color:white; + background-color: white; .main { - padding-bottom:1rem; + padding-bottom: 1rem; } @include media($bp-medium-up) { .flex2 > .main { - max-width:60%; + max-width: 60%; } .flex2 > .aside { - max-width:40%; - padding-left:4rem; + max-width: 40%; + padding-left: 4rem; @include media($bp-medium) { padding-left:2rem; } @@ -275,10 +281,10 @@ html .formulaire_spip input[type="text"] { .article-resume { background-color: white; - padding:1rem; + padding: 1rem; } .article__texte { - margin-bottom:3rem; + margin-bottom: 3rem; } .article__interactivite { > div { @@ -293,7 +299,7 @@ html .formulaire_spip input[type="text"] { } .page_main { - overflow:hidden; + overflow: hidden; } .page_main_content { align-items: start; @@ -403,12 +409,9 @@ html .formulaire_spip input[type="text"] { } } .page_extra { - background:white; + background: white; } - - - h2 { font-weight:900; } @@ -776,6 +779,7 @@ div.rating-cancel a { .sociaux { .socicon { display: inline-block; + padding: .35em; } a.spip_out { border:0; @@ -1330,22 +1334,22 @@ a.spip_out { @media (max-width:940px) { .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; + position: absolute; + width: 100%; + top: 36px; + left: -100%; + z-index: 10; + justify-content: space-around; &.ouvert{ left:0; } .loupe { .formulaire_recherche.vu { - right:50%; + right: 50%; margin-right: -160px; max-width: 320px; form { @@ -1360,7 +1364,7 @@ a.spip_out { } } .btn-nav { - display:block; + display: block; } .header_initiatives { .btn-initiatives { @@ -1380,47 +1384,22 @@ a.spip_out { } } } + + .page_header .header_menu .liens { + flex-direction: column; + margin-top: 2.5rem; + .formulaire_spip.formulaire_abomailman_mini_une_liste { + margin: 0 0 0.3rem; + } + } } -@include media(min-width:941px) { +@media (min-width:941px) { .page_header > .page_container .nav { position: relative; } } -@media (max-width:804px) { - .page_header .header_menu .liens { - margin-top:0; - } - .page_header .header_menu .liens .sociaux { - margin-top: 0.8rem; - } -} -@media (max-width:650px) { - - .page_header .header_menu .liens .btn { - margin-top: 0.5rem; - } -} -@media (max-width:580px) { - .page_header > .page_container .nav { - padding-top: 0; - } - .page_header .header_menu { - padding:0.3rem 1rem; - } - .page_header .header_menu .liens .sociaux { - 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; - } - .page_header .header_title { - min-width: 100px; - } -} + @media($bp-medium) { .page_header > .page_container { .nav { @@ -1436,7 +1415,7 @@ a.spip_out { justify-content: space-around; flex-wrap: wrap; padding: 0; - &.ouvert{ + &.ouvert { left: 0; } a { @@ -1467,3 +1446,41 @@ a.spip_out { } } } + +@include media($bp-small) { + .page_header > .page_container .nav { + padding-top: 0; + } + .article-resume > :last-child.telecharger { + margin-bottom:1rem; + } + + .page_header .header_menu .liens { + margin-top: 1.5rem; + .formulaire_spip.formulaire_abomailman_mini_une_liste { + width: 188px; + } + .abonnement label.btn { + font-size: 0.9rem; + float: right; + } + .sociaux { + margin-top: 0; + } + .sociaux_podcast { + flex-direction: column-reverse; + .sociaux { + margin: 0; + display: block; + width: 100%; + text-align: right; + } + } + .btn { + font-size: 0.9rem; + } + } + .page_header .header_title { + min-width: 100px; + } +} \ No newline at end of file