Browse Source

header dropdown not finnish

ouidade 3 years ago
parent
commit
a7718ef9be

+ 33 - 7
web/themes/custom/eql/css-compiled/styles.css

@@ -302,7 +302,9 @@ a {
       padding-left: 1rem; }
       padding-left: 1rem; }
       .view-display-id-block_2 .node-type-static .field--name-field-accroche p {
       .view-display-id-block_2 .node-type-static .field--name-field-accroche p {
         font-size: 1.5rem;
         font-size: 1.5rem;
-        width: 110%; }
+        width: 110%;
+        margin: 0;
+        padding-bottom: 1rem; }
 
 
 .field--name-field-partenaires {
 .field--name-field-partenaires {
   display: flex;
   display: flex;
@@ -319,6 +321,22 @@ a {
   .field--name-field-partenaires .paragraph--type--partenaire .field--name-field-texte {
   .field--name-field-partenaires .paragraph--type--partenaire .field--name-field-texte {
     width: 70%; }
     width: 70%; }
 
 
+.node-type-actualite {
+  color: #09398b;
+  line-height: 1.5rem;
+  padding: 0.5rem; }
+  .node-type-actualite div:first-child {
+    display: flex;
+    flex-direction: column; }
+    .node-type-actualite div:first-child :nth-child(1) {
+      order: 1; }
+    .node-type-actualite div:first-child :nth-child(4) {
+      order: 2; }
+    .node-type-actualite div:first-child :nth-child(5) {
+      order: 3; }
+    .node-type-actualite div:first-child a {
+      color: #09398b; }
+
 /*partials*/
 /*partials*/
 .layout-container {
 .layout-container {
   position: absolute; }
   position: absolute; }
@@ -329,7 +347,7 @@ header {
   top: 0; }
   top: 0; }
 
 
 #header-top {
 #header-top {
-  height: 7rem;
+  height: fit-content;
   background-color: white;
   background-color: white;
   box-shadow: 1px 0px 8px black;
   box-shadow: 1px 0px 8px black;
   display: flex;
   display: flex;
@@ -354,10 +372,18 @@ header {
         #header-top .region-header-top-left ul li .is-active {
         #header-top .region-header-top-left ul li .is-active {
           color: #009ee3; }
           color: #009ee3; }
       #header-top .region-header-top-left ul .ul2 {
       #header-top .region-header-top-left ul .ul2 {
-        flex-direction: column; }
-    #header-top .region-header-top-left :hover {
-      color: #009ee3; }
-  #header-top li ul {
+        flex-direction: column;
+        display: none; }
+      #header-top .region-header-top-left ul :hover {
+        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 {
+      display: block;
+      position: relative;
+      transition: ease-in-out 2s; }
+  #header-top li .ul1 {
     display: flex;
     display: flex;
     flex-direction: column; }
     flex-direction: column; }
   #header-top #block-burger {
   #header-top #block-burger {
@@ -367,7 +393,7 @@ header {
     color: white;
     color: white;
     display: block;
     display: block;
     width: 7rem;
     width: 7rem;
-    height: 7rem;
+    height: 100%;
     margin-top: 0; }
     margin-top: 0; }
     #header-top #block-burger :hover {
     #header-top #block-burger :hover {
       cursor: pointer; }
       cursor: pointer; }

+ 2 - 8
web/themes/custom/eql/scss/global/_layout.scss

@@ -1,11 +1,7 @@
-// .node-type-static{
-//     display: grid;
-//     grid-template-columns: repeat(6,1fr);
-// }
 
 
 
 
 .layout-container {
 .layout-container {
-    // position: absolute;
+
     font-family: $font-family-default;
     font-family: $font-family-default;
     margin: none;
     margin: none;
     top: 0%;
     top: 0%;
@@ -24,9 +20,7 @@
 .path-node {
 .path-node {
     margin: 0;
     margin: 0;
 }
 }
-// .contextual-region .node-type-static {
-//     grid-template-columns: repeat(6 1fr);
-// }
+
 
 
     .field--name-field-titre{
     .field--name-field-titre{
         .field__item{
         .field__item{

+ 2 - 1
web/themes/custom/eql/scss/global/variables/_colors.scss

@@ -6,4 +6,5 @@ $blue-light: rgb(0,158,227);
 $blue-dark: rgb(9,57,139);
 $blue-dark: rgb(9,57,139);
 $grey-background: rgb(153,147,174);
 $grey-background: rgb(153,147,174);
 $black: rgb(0,0,0);
 $black: rgb(0,0,0);
-$white: rgb(255,255,255);
+$white: rgb(255,255,255);
+$background-actus: rgba(0,158,227, 0.2);

+ 27 - 0
web/themes/custom/eql/scss/pages/_actualites.scss

@@ -0,0 +1,27 @@
+
+// .block-region-content{
+//     background-color: $background-actus; // ça va pas, donne la couleur dans home
+
+// }
+
+
+
+
+
+.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;
+        }        
+    }
+}

+ 2 - 0
web/themes/custom/eql/scss/pages/_home.scss

@@ -160,6 +160,8 @@
             p{
             p{
                 font-size: 1.5rem;
                 font-size: 1.5rem;
                 width: 110%;
                 width: 110%;
+                margin: 0;
+                padding-bottom: 1rem;
             }
             }
 
 
         }
         }

+ 0 - 5
web/themes/custom/eql/scss/partials/_footer.scss

@@ -20,7 +20,6 @@
             
             
             height: 5rem;
             height: 5rem;
             width: auto;
             width: auto;
-
         }
         }
 
 
     }
     }
@@ -62,9 +61,5 @@
             -webkit-filter: grayscale(100%);
             -webkit-filter: grayscale(100%);
         }
         }
     }
     }
-        
-        // .twitter::before {
-        //     font-family: "Font Awesome 5 Brands"; content: "\f099";
-        //   }
 
 
 }
 }

+ 23 - 5
web/themes/custom/eql/scss/partials/_header.scss

@@ -9,7 +9,7 @@ display: block;
 }
 }
 
 
 #header-top {
 #header-top {
-    height: 7rem;
+    height: fit-content;
     background-color: $white;
     background-color: $white;
     box-shadow: 1px 0px 8px $black;
     box-shadow: 1px 0px 8px $black;
     display: flex;
     display: flex;
@@ -28,10 +28,12 @@ display: block;
         font-weight: 800;
         font-weight: 800;
 
 
         ul{
         ul{
+
             list-style: none;
             list-style: none;
             display: flex;
             display: flex;
             flex-direction: row;
             flex-direction: row;
             li {
             li {
+                // background-color: red;
                 padding-right: 1rem;
                 padding-right: 1rem;
                 a {
                 a {
                     color: $black;
                     color: $black;
@@ -42,16 +44,32 @@ display: block;
             } 
             } 
             .ul2{
             .ul2{
                 flex-direction: column;
                 flex-direction: column;
+                display: none;
+            }
+            :hover{
+                color: $blue-light;
             }
             }
         }
         }
-        :hover{
-            color: $blue-light;
+
+        li:not(ul):not(.ul2){
+            display: block;
+            position: relative;
+
+        }
+        :hover {
+            .ul2{
+                display: block;
+                position: relative;
+                transition: ease-in-out 2s;
+            }
         }
         }
+        
     }
     }
 
 
-    li ul {
+    li .ul1 {
         display: flex;
         display: flex;
         flex-direction: column;
         flex-direction: column;
+
     }
     }
 
 
 
 
@@ -62,7 +80,7 @@ display: block;
         color: $white;
         color: $white;
         display: block;
         display: block;
         width: 7rem;
         width: 7rem;
-        height: 7rem;
+        height: 100%;
         margin-top: 0;
         margin-top: 0;
         :hover{
         :hover{
             cursor: pointer;
             cursor: pointer;

+ 1 - 0
web/themes/custom/eql/scss/styles.scss

@@ -20,6 +20,7 @@
 @import "pages/_static";
 @import "pages/_static";
 @import "pages/_home";
 @import "pages/_home";
 @import "pages/_partenaires";
 @import "pages/_partenaires";
+@import "pages/_actualites";
 
 
 
 
 /*partials*/
 /*partials*/