From 5e02b53be5d23efb03f29e54f14d6845dea53738 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Tue, 4 Jun 2024 15:57:41 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(footer,=20header):=20r=C3=A9?= =?UTF-8?q?duction=20de=20la=20zone=20de=20clic=20retour=20=C3=A0=20l'accu?= =?UTF-8?q?eil=20[DS-3800]=20(#944)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - sur le header mobile la partie à droite du brand n'est plus cliquable pour éviter les clics manqués sur le burger ou la recherche, et le lien du nom de service n'est plus étendu sur toute la largeur - sur le footer mobile la zone de clic n'est plus étendu sur toute la largeur --- .../footer/style/module/_default.scss | 2 -- src/component/header/style/_scheme.scss | 5 ++++- src/component/header/style/module/_brand.scss | 19 +++++++++++++++---- .../header/style/module/_navbar.scss | 7 +++---- 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/component/footer/style/module/_default.scss b/src/component/footer/style/module/_default.scss index 84ab1e744..8b20af846 100644 --- a/src/component/footer/style/module/_default.scss +++ b/src/component/footer/style/module/_default.scss @@ -24,7 +24,6 @@ */ &__brand { @include display-flex(row, center); - flex-basis: 100%; @include logo(md, lg) { @include margin(-4v); @@ -47,7 +46,6 @@ } @include respond-from(md) { - flex-basis: auto; @include margin-right(4v); &#{ns(enlarge-link)} { diff --git a/src/component/header/style/_scheme.scss b/src/component/header/style/_scheme.scss index cfabdb125..499d3b745 100644 --- a/src/component/header/style/_scheme.scss +++ b/src/component/header/style/_scheme.scss @@ -15,7 +15,10 @@ &__service { @include color.text(title grey, (legacy:$legacy)); - @include color.box-shadow(default grey, (legacy:$legacy), top-1-in); + + @include before { + @include color.background(border default grey, (legacy:$legacy)); + } } @include media-query.respond-from(lg) { diff --git a/src/component/header/style/module/_brand.scss b/src/component/header/style/module/_brand.scss index a8d351043..22d19bec1 100644 --- a/src/component/header/style/module/_brand.scss +++ b/src/component/header/style/module/_brand.scss @@ -4,6 +4,7 @@ //// @use 'module/media-query'; +@use 'module/spacing'; #{ns(header)} { &__brand { @@ -12,6 +13,13 @@ @include size(100%); @include padding-x(1v); + @include after('', block) { + @include relative; + @include z-index(over); + flex: 1; + align-self: stretch; + } + @include media-query.respond-from(lg) { flex-wrap: nowrap; @include size(auto); @@ -70,12 +78,15 @@ @include padding-y(3v); @include margin-x(3v); @include margin-x(0, lg); - @include size(100%); - @include disable-external(); - @include media-query.respond-from(lg) { - width: auto; + @include before("", block) { + @include size(calc(100% - 8v), 1px); + @include absolute; + transform: translateY(spacing.space(-3v)); + @include media-query.respond-from(lg) { + content: none; + } } &-title { diff --git a/src/component/header/style/module/_navbar.scss b/src/component/header/style/module/_navbar.scss index 97fe80c91..987568276 100644 --- a/src/component/header/style/module/_navbar.scss +++ b/src/component/header/style/module/_navbar.scss @@ -7,14 +7,13 @@ #{ns(header)} { &__navbar { - @include display-flex(row,flex-end); + @include display-flex(row, flex-start, flex-end); @include padding(1v); - @include margin-left(auto); @include margin-right(-2v); @include margin-top(1v); order: 3; - flex: 0 0 auto; - align-self: flex-start; + flex: 1; + align-self: stretch; @include elevation.z-index(overlap); @include respond-from(lg) {