bouton contact

web/themes/custom/reha/css/reha.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*reha*/
 /*global*/
 /* Colors used for REHA */
@@ -9,6 +10,14 @@
   margin-bottom: 1rem;
   background-color: white; }
 
+.bouton {
+  background-color: white !important;
+  border: none !important;
+  cursor: pointer; }
+
+.mailto {
+  text-decoration: underline; }
+
 /*marianne*/
 @font-face {
   font-family: 'Marianne';
@@ -104,8 +113,7 @@
   display: flex;
   flex-flow: row wrap; }
   .layout-container header {
-    flex: 0 0 100%;
-    height: 150px; }
+    flex: 0 0 100%; }
   .layout-container main {
     position: relative; }
   .layout-container footer {
@@ -133,13 +141,14 @@ a {
 /*partials*/
 header {
   display: block;
+  height: 150px;
   background-color: white;
-  position: fixed;
   z-index: 99;
   width: 100vw;
   position: -webkit-sticky;
   position: sticky;
-  top: 0; }
+  top: 0;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
   header div {
     display: flex;
     flex-direction: row;
@@ -151,23 +160,37 @@ header {
     header div #block-reha-connexionutilisateur {
       display: flex;
       flex-direction: column;
-      width: 15%; }
+      width: 15%;
+      height: 150px; }
       header div #block-reha-connexionutilisateur .user-login-form {
         display: none; }
       header div #block-reha-connexionutilisateur ul {
         display: none; }
     header div #block-reha-config-pages {
-      width: 15%;
+      width: 35%;
       display: flex;
-      flex-direction: column; }
+      flex-direction: column;
+      height: 150px; }
+      header div #block-reha-config-pages .bouton {
+        align-self: flex-end;
+        width: 50%; }
       header div #block-reha-config-pages .config_pages--contact--full {
         display: none;
-        /* Cacher initialement le contenu */ }
-      header div #block-reha-config-pages .open {
-        display: block; }
+        /* Cacher initialement le contenu */
+        height: 0;
+        /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
+        width: 100%; }
       header div #block-reha-config-pages .field--type-text-long {
         transition: height 0.5s;
-        /* Animation de 0.5 seconde lors de l'expansion vers le bas */ }
+        /* Animation de 0.5 seconde lors de l'expansion vers le bas */
+        background-color: white;
+        display: block;
+        width: 100%;
+        height: 100vh;
+        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+        clip-path: inset(0px -10px -10px -10px); }
+        header div #block-reha-config-pages .field--type-text-long .field__item {
+          padding: 5% 10% 5% 5%; }
 
 footer {
   background-color: white;

web/themes/custom/reha/js/reha.js

@@ -18,37 +18,49 @@
 } (Drupal));
 
 jQuery(document).ready(function($){
-//     // POPIN Biographies
 
-//     $(".bouton").click(function(event){
-//       console.log(event);
-//       //
-//       var mods = document.querySelectorAll('.config_pages--contact--full');
-//       mods.forEach((m, i) => {
-//         m.classList.remove('open')
-//       });
-//       //
-//       var btn  = event.currentTarget;
-//       console.log('btn', btn);
-//       var mod = btn.parentNode.querySelector('.config_pages--contact--full');
-//       mod.classList.add('open')
+     // POPIN Biographies
 
-//   });
+///////////  bof /////////////////
+
+  // $(".bouton").click(function(event){
+  //   console.log(event);
+  //   //
+  //   var mods = document.querySelectorAll('.config_pages--contact--full');
+  //   mods.forEach((m, i) => {
+  //     m.classList.remove('open')
+  //   });
+  //   //
+  //   var btn  = event.currentTarget;
+  //   console.log('btn', btn);
+  //   var mod = btn.parentNode.querySelector('.config_pages--contact--full');
+  //   mod.classList.add('open')
+
+  // });
+
+  // $(".config_pages--contact--full .mask, .config_pages--contact--full a.close").click(function(event){
+  //   $ (".config_pages--contact--full").removeClass("open");
+  //   return false;
+  // });
 
 
-//   $(".config_pages--contact--full .open").click(function(event){
-//        $ (".config_pages--contact--full").removeClass("open");
-//        return false;
-//   });
+
+//////////////// ok /////////////////
 
   $(document).ready(function() {
-    $(".bouton").click(function() {
-      $(".config_pages--contact--full").slideDown();
+    $(".bouton").click(function(event) {
+      $(".config_pages--contact--full").slideToggle();
     });
   });
 
+  /////////////// ok /////////////////
+
+
+
+
+
   // $(document).ready(function() {
-  //   $("#block-reha-config-pages .bouton").click(function() {
+  //   $(".bouton").click(function() {
   //     // $(".config_pages--contact--full").slideToggle();
   //     var fenetre = document.querySelectorAll('.config_pages--contact--full');
     

web/themes/custom/reha/scss/global/_core.scss

@@ -0,0 +1,3 @@
+.mailto{
+    text-decoration: underline;
+}

web/themes/custom/reha/scss/global/_layout.scss

@@ -1,4 +1,6 @@
 
+$header-height : 150px;
+
 
 .layout-container {
     position: relative;
@@ -17,7 +19,6 @@
     
     header{
         flex: 0 0 100%;
-        height: 150px;
     }
     main{
         position: relative;

web/themes/custom/reha/scss/global/variables/_buttons.scss

@@ -9,5 +9,9 @@
     background-color: white;
 
 }
-
+.bouton{
+    background-color: white !important;
+    border: none !important;
+    cursor: pointer;
+}
 

web/themes/custom/reha/scss/partials/_header.scss

@@ -2,17 +2,18 @@
 
 header{                       
     display: block;
+    height: $header-height;
     background-color: white;
-    position: fixed;
+    // position: fixed;
     z-index: 99;
     width: 100vw;
     position: -webkit-sticky;
     position: sticky;
     top: 0;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     // .sticky{
     //         position: fixed;
     // }
-    // height: 150px;
     div{
         display:flex;
         flex-direction: row;
@@ -34,6 +35,8 @@ header{
             display: flex;
             flex-direction: column;
             width: 15%;
+            height: $header-height;
+
             .user-login-form{
                 display: none;
             }
@@ -43,22 +46,59 @@ header{
             
         }
         #block-reha-config-pages{
-            width: 15%;
+            width:35%;
             display: flex;
             flex-direction: column;
+            height: $header-height;
+            
+            .bouton{
+                align-self: flex-end;
+                width: 50%;
+            }
             .config_pages--contact--full {
                 display: none; /* Cacher initialement le contenu */
-
-            }
-            .open{
-                display: block;
+                height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
+                // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
+                width: 100%;
+                
             }
+            // .open{
+            //     display: block;
+            //     width: 300px;
+            //     background-color: $white;
+            // }
  
             
             .field--type-text-long {
                 transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
+                background-color: $white;
+                display: block;
+                width: 100%;
+                height: 100vh;
+                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+                clip-path: inset(0px -10px -10px -10px);
+                .field__item{
+                  	padding: 5% 10% 5% 5%;
+                  }
+
+
+
             } 
         }
+        // #block-reha-config-pages {
+        //     position: relative;
+        //   }
+      
+        //   .config_pages--contact--full {
+        //     overflow: hidden;
+        //     height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
+        //     transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */
+        //   }
+      
+        //   .field--type-text-long {
+        //     padding: 20px;
+        //     background-color: #f0f0f0;
+        //   }
     
     }
 
@@ -74,7 +114,7 @@ header{
 // .config_pages--contact--full {
 // 	position: fixed;
 // 	z-index: 1;
-// 	top: 0;
+// 	top: $header-height;
 // 	right: 0;
 // 	bottom: 0;
 // 	left: 0;
@@ -92,64 +132,50 @@ header{
 //   // }
 // }
 
-// // #modal .mask{
-// // 	background: none !important;
-// // 	opacity: 1;
-// // 	position: absolute;
-// // 	top: 0;
-// // 	right: 0;
-// // 	bottom: 0;
-// // 	left: 0;
-// //
-// // }
-// // #body .grey {
-// //   opacity: 0.5;
-// // }
-
-// .config_pages--contact--full{
+// .config_pages--contact--full .field--type-text-long{
 // 	position: absolute;
 // 	background: white !important;
 // 	top: 50%;
-// 	left: 45%;
-// 	// transform: translateX(-50%) translateY(-50%);
-// 	width:fit-content;
-// 	height: fit-content;
+// 	left: 50%;
+// 	transform: translateX(-50%) translateY(-50%);
+// 	width: 50%;
+// 	height: content;
 // 	min-height: 50px;
 //   border: solid;
 //   color: black;
 
-// //   .message{
-// //   	padding: 5% 10% 5% 5%;
-// //   }
-
-//   a.close{
-//   	position: absolute;
-//   	right: 5%;
-//   	top:5%;
-//   	color: black;
-//   	font-size: 30px;
+//   .field__item{
+//   	padding: 5% 10% 5% 5%;
 //   }
 
-//   a.close:hover{
-//   	color: black;
-//   }
+// //   a.close{
+// //   	position: absolute;
+// //   	right: 5%;
+// //   	top:5%;
+// //   	color: black;
+// //   	font-size: 30px;
+// //   }
+
+// //   a.close:hover{
+// //   	color: black;
+// //   }
 
 //   @media (max-width: 442px) {
 //     transform: translateX(-50%) translateY(-50%);
 //     width: 85%;
 //     height: 80%;
 //     overflow-y: scroll;
-//     a.close {
-//       font-size: 0.8rem;
-//       position: absolute;
-//       right: 2%;
-//       top:0.8%;
-//     }
+//     // a.close {
+//     //   font-size: 0.8rem;
+//     //   position: absolute;
+//     //   right: 2%;
+//     //   top:0.8%;
+//     // }
 //     p {
 //       font-size: 0.8rem;
 //       margin-top: 0;
 //     }
-//     .message{
+//     .field__item{
 //       padding: 5% 5% 5% 5%;
 //     }
 
@@ -169,13 +195,15 @@ header{
 //       font-size: 0.8rem;
 //       margin-top: 0;
 //     }
-//     .message{
+//     .field__item{
 //       padding: 5% 5% 5% 5%;
 //     }
 
 //   }
 // }
 
+
+
     
 
 

web/themes/custom/reha/scss/reha.scss

@@ -1,10 +1,11 @@
 /*reha*/
 
 /*global*/
+
 @import "global/variables/colors";
 @import "global/variables/typography.scss";
 @import "global/variables/buttons.scss";
-
+@import "global/core";
 @import "global/fonts";
 @import "global/layout";
 @import "global/reset";