bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header menus déroulant et burger

Browse Source
This commit is contained in:
ouidade
2021-11-22 13:18:58 +01:00
parent 6995382dcb
commit 1b24bf8167
5 changed files with 238 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/css-compiled/styles.css
+33 -25
View File
@@ -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,<svg width="60" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="translate(-23.815852,-33.316918)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
.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,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="5"/></svg>'); }
.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,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>'); }
content: url('data:image/svg+xml,<svg width="100" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 20,10 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 20,25 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 20,40 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>'); }
#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;
web/themes/custom/eql/scss/pages/_actualites.scss
+18 -19
View File
@@ -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,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="5"/></svg>');
}
}
.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;
// }
// }
// }
web/themes/custom/eql/scss/pages/_home.scss
+5 -33
View File
@@ -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, <svg version="1.1" x="0px" y="0px" viewBox="0 0 52 33" points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2 "
// transform="translate(-23.815852,-33.316918)"/></svg>");
// // display:block;
// width:22px;
// height:10px;
// margin:10px 5px 0 10px;
// display: block;
width: 40%;
content: url('data:image/svg+xml,<svg width="60" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="translate(-23.815852,-33.316918)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
}
}
}
@@ -185,8 +156,9 @@
p{
font-size: 1.5rem;
width: 110%;
margin: 0;
margin-bottom: 2rem;
padding-bottom: 2rem;
margin-block-start: 0;
}
}
web/themes/custom/eql/scss/partials/_header copy.scss
+154
View File
@@ -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,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
}
#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;
}
}
}
web/themes/custom/eql/scss/partials/_header.scss
+28 -41
View File
@@ -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,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
// height: 60px;
content:url('data:image/svg+xml,<svg width="100" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 20,10 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 20,25 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 20,40 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
}
#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;
}