From 1b24bf8167d6f9c76aa82bf0ceca9e7368aa2843 Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 22 Nov 2021 13:18:58 +0100 Subject: [PATCH] =?UTF-8?q?header=20menus=20d=C3=A9roulant=20et=20burger?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/themes/custom/eql/css-compiled/styles.css | 58 ++++--- .../custom/eql/scss/pages/_actualites.scss | 37 ++--- web/themes/custom/eql/scss/pages/_home.scss | 38 +---- .../eql/scss/partials/_header copy.scss | 154 ++++++++++++++++++ .../custom/eql/scss/partials/_header.scss | 69 ++++---- 5 files changed, 238 insertions(+), 118 deletions(-) create mode 100644 web/themes/custom/eql/scss/partials/_header copy.scss diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index e6d4225..ca36690 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -303,8 +303,8 @@ a { font-weight: 700; color: #009ee3; } .view-display-id-block_2 .node-type-static .inline.links a:after { - display: block; - width: 40px; } + width: 40%; + content: url('data:image/svg+xml,'); } .view-display-id-block_2 .node-type-static .field--name-field-images .field__item img { width: 15rem; height: auto; } @@ -316,8 +316,9 @@ a { .view-display-id-block_2 .node-type-static .field--name-field-accroche p { font-size: 1.5rem; width: 110%; - margin: 0; - padding-bottom: 2rem; } + margin-bottom: 2rem; + padding-bottom: 2rem; + margin-block-start: 0; } .field--name-field-partenaires { padding-top: 3rem; } @@ -353,6 +354,8 @@ a { margin: auto; } .path-actualites .block-region-content .block-views:nth-of-type(1) { grid-column: 2; } + .path-actualites .block-region-content .block-views .view-display-id-block_2 { + padding-top: 0; } .path-actualites .block-region-content .block-views .node-type-actualite { color: #09398b; line-height: 1.5rem; @@ -368,6 +371,16 @@ a { order: 3; } .path-actualites .block-region-content .block-views .node-type-actualite div:first-child a { color: #09398b; } + .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-images .field__item img { + width: 100%; + height: fit-content; } + .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-images::after { + display: block; + content: url('data:image/svg+xml, '); } + .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field:not(.field--name-field-images) { + width: 80%; } + .path-actualites .block-region-content .block-views .node-type-actualite div:first-child h2 { + margin: 0; } /*partials*/ .layout-container { @@ -399,31 +412,27 @@ header { height: 100%; align-items: center; } #header-top .region-header-top-left ul { - position: absolute; list-style: none; display: flex; flex-direction: row; } - #header-top .region-header-top-left ul li { - padding-right: 1rem; } - #header-top .region-header-top-left ul li a { - color: black; } - #header-top .region-header-top-left ul li .is-active { - color: #009ee3; } - #header-top .region-header-top-left ul .ul2 { + #header-top .region-header-top-left ul :is(.sous-liste) { + display: flex; flex-direction: column; - display: none; } - #header-top .region-header-top-left ul :hover { + padding: 1rem; } + #header-top .region-header-top-left ul .ul1.sous-liste { + padding-right: 2rem; } + #header-top .region-header-top-left ul li a { + color: black; } + #header-top .region-header-top-left ul li .is-active { color: #009ee3; } - #header-top .region-header-top-left li:not(ul):not(.ul2) { - display: block; - position: relative; } - #header-top .region-header-top-left :hover .ul2 { + #header-top .region-header-top-left ul li :hover { + color: #009ee3; } + #header-top .region-header-top-left ul:is(.ul1 .sous-liste .ul2) { + display: none; } + #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) { display: block; background-color: white; padding: 1rem; } - #header-top li .ul1 { - display: flex; - flex-direction: column; } #header-top #block-burger { z-index: 1; background-color: #009ee3; @@ -440,20 +449,19 @@ header { #header-top #block-burger h2:after { display: block; margin: auto; - height: 60px; - content: url('data:image/svg+xml, '); } + content: url('data:image/svg+xml, '); } #header-top #block-burger #block-burger-menu { display: block; margin: 0; align-self: center; - text-align: center; - height: 7rem; } + text-align: center; } #header-top #block-burger .ul1:not(.sous-liste) { width: 300%; position: relative; right: 260px; margin: 0; padding-top: 2rem; + padding-bottom: 2rem; z-index: 99; } #header-top #block-burger ul { display: none; diff --git a/web/themes/custom/eql/scss/pages/_actualites.scss b/web/themes/custom/eql/scss/pages/_actualites.scss index 9df37eb..daa3389 100644 --- a/web/themes/custom/eql/scss/pages/_actualites.scss +++ b/web/themes/custom/eql/scss/pages/_actualites.scss @@ -13,7 +13,9 @@ grid-column: 2; } .block-views{ - + .view-display-id-block_2{ + padding-top: 0; + } .node-type-actualite{ color: $blue-dark; @@ -28,7 +30,21 @@ :nth-child(5) { order: 3; } a{ color: $blue-dark; - } + } + .field--name-field-images { + .field__item img{ + width: 100%; + height: fit-content; + } + &::after{ + display: block; + content:url('data:image/svg+xml, '); + } + } + .field:not(.field--name-field-images){ + width: 80%; + } + h2{ margin:0; } } } } @@ -36,20 +52,3 @@ } } -// .node-type-actualite{ - -// color: $blue-dark; -// line-height: 1.5rem; -// padding: 0.5rem; -// div:first-child{ -// display: flex; -// flex-direction: column; - -// :nth-child(1) { order: 1; } -// :nth-child(4) { order: 2; } -// :nth-child(5) { order: 3; } -// a{ -// color: $blue-dark; -// } -// } -// } \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index c1cb533..f04942b 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -1,9 +1,4 @@ -// .node-type-static { -// display: grid; -// grid-template-columns: 2fr 2fr 2fr 2fr 2fr; -// } - .field--type-entity-reference-revisions{ .paragraph-summary{ @@ -29,8 +24,6 @@ .block-views-blockactus-blocks-pages-block-1{ background-color: $blue-dark; - // padding: 1rem; - .view-content{ @@ -71,15 +64,6 @@ } -// actu dans bandeau - -// .node-type-actualite div:first-child{ -// display: flex; -// flex-direction: column; -// :nth-child(1) { order: 1; } -// :nth-child(4) { order: 2; } -// :nth-child(5) { order: 3; } -// } // bouton voir toutes actus du bandeau bleu .layout--onecol{ @@ -127,16 +111,12 @@ width: 70%; margin: auto; div:first-child:not(.field__item):not(.field){ - // display: grid; - // grid-template-columns: 1fr repeat(8, 2fr) 1fr; display: flex; flex-direction: row; } .inline.links{ align-self: flex-end; - // grid-column: 9; - // grid-row: 2; width: fit-content; height: fit-content; padding: 0.4rem 1rem; @@ -145,24 +125,15 @@ background-color: $white; border: 2px solid $blue-light; list-style: none; - a{ text-transform: uppercase; font-weight: 700; color: $blue-light; &:after{ - display: block; - // content: url("../images/pictos/noun_Arrow_3771902.svg"); - width: 40px; - // background-image: ; - - // content: url("data:image/svg+xml; utf8, "); - // // display:block; - // width:22px; - // height:10px; - // margin:10px 5px 0 10px; + // display: block; + width: 40%; + content: url('data:image/svg+xml,'); } } } @@ -185,8 +156,9 @@ p{ font-size: 1.5rem; width: 110%; - margin: 0; + margin-bottom: 2rem; padding-bottom: 2rem; + margin-block-start: 0; } } diff --git a/web/themes/custom/eql/scss/partials/_header copy.scss b/web/themes/custom/eql/scss/partials/_header copy.scss new file mode 100644 index 0000000..21282c4 --- /dev/null +++ b/web/themes/custom/eql/scss/partials/_header copy.scss @@ -0,0 +1,154 @@ + +.layout-container{ + position: relative; +} +header{ + display: block; + position: sticky; // sticky marche pas :( + +} + +#header-top { + height: 7rem; + background-color: $white; + box-shadow: 1px 0px 8px $black; + display: flex; + flex-direction: row; + justify-content: space-between; + color: $black; + position: sticky; + top:0%; + + + .region-header-top-left { // logo + menu déroulant + display:flex; + flex-direction: row; + padding: 1rem; + align-items:start; + color: $black; + font-weight: 800; + + #block-logogouv{ + display: flex; + height: 100%; + align-items: center; + } + + ul{ + // position: absolute; + list-style: none; + display: flex; + flex-direction: column; + li { + padding-right: 1rem; + + a { + color: $black; + // font-weight: 800; + + } + .is-active { + color: $blue-light; + } + + } + .ul2{ + flex-direction: column; + display: none; + } + :hover{ + color: $blue-light; + } + } + + li:not(ul):not(.ul2){ + display: block; + position: relative; + } + + // .ul:not(:-moz-first-node){ + // display: none; + // } + :hover { + .ul2{ + display: block; + background-color: $white; + padding: 1rem; + } + } + + } + + li .ul1 { + display: flex; + flex-direction: column; + + } + + + #block-burger { // menu burger à droite + z-index: 1; + background-color: $blue-light; + font-size: 0.7rem; + color: $white; + display: block; + width: 7rem; + height: 100%; + margin-top: 0; + :hover{ + cursor: pointer; + } + h2{ + padding-top: 1rem; + } + h2:after{ + display: block; + margin:auto; + height: 60px; + content:url('data:image/svg+xml, '); + } + + #block-burger-menu{ + display: block; + margin: 0; + align-self: center; + text-align: center; + height:7rem; + } + + .ul1:not(.sous-liste){ + width: 300%; + position: relative; + right: 260px; + margin: 0; + padding-top: 2rem; + z-index: 99; + + } + ul { + display: none; + background-color: $blue-light; + line-height: 2rem; + list-style: none; + + .ul1 .sous-liste{ + a{ + opacity: 1; + } + } + a{ + opacity: 0.6; + color: $white; + font-weight: 800; + font-size: 1rem; + } + } + &.opened ul { + display: block; + + } + } + + +} + diff --git a/web/themes/custom/eql/scss/partials/_header.scss b/web/themes/custom/eql/scss/partials/_header.scss index ca16913..2ff60ed 100644 --- a/web/themes/custom/eql/scss/partials/_header.scss +++ b/web/themes/custom/eql/scss/partials/_header.scss @@ -20,7 +20,7 @@ header{ top:0%; - .region-header-top-left { // logo + menu déroulant + .region-header-top-left { // logo + menu déroulant display:flex; flex-direction: row; padding: 1rem; @@ -35,60 +35,43 @@ header{ } ul{ - position: absolute; list-style: none; display: flex; flex-direction: row; - li { - padding-right: 1rem; + :is(.sous-liste){ + display: flex; + flex-direction: column; + padding: 1rem; + } + .ul1.sous-liste{ + padding-right: 2rem; + } + li{ + a { color: $black; - // font-weight: 800; - } - .is-active { + .is-active{ + color:$blue-light; + } + :hover{ color: $blue-light; } - } - .ul2{ - flex-direction: column; - display: none; - - } - :hover{ - color: $blue-light; } } - - li:not(ul):not(.ul2){ - display: block; - position: relative; - + ul:is(.ul1 .sous-liste .ul2){ + display: none; } :hover { - .ul2{ + ul:is(.ul1 .sous-liste .ul2){ display: block; background-color: $white; padding: 1rem; - // a{ - // color: $white; - // } - - // position: relative; - // transition: ease-in-out 2s; } } - - } + } - li .ul1 { - display: flex; - flex-direction: column; - - } - - - #block-burger { // menu burger à droite + #block-burger { // menu burger à droite z-index: 1; background-color: $blue-light; font-size: 0.7rem; @@ -106,8 +89,8 @@ header{ h2:after{ display: block; margin:auto; - height: 60px; - content:url('data:image/svg+xml, '); + // height: 60px; + content:url('data:image/svg+xml, '); } #block-burger-menu{ @@ -115,15 +98,19 @@ header{ margin: 0; align-self: center; text-align: center; - height:7rem; + // height:7rem; } - .ul1:not(.sous-liste){ + + // block menu open fond bleu + + .ul1:not(.sous-liste){ width: 300%; position: relative; right: 260px; margin: 0; padding-top: 2rem; + padding-bottom: 2rem; z-index: 99; }