diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index c89ef5d..355224a 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/web/themes/custom/reha/css/reha.css @@ -209,22 +209,18 @@ header { padding-right: 1rem; } header div #block-reha-config-pages .config_pages--contact--full { float: right; - display: none; - /* 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 */ - 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%; } + header div #block-reha-config-pages .config_pages--contact--full .field--type-text-long { + display: none; + background-color: white; + width: 400px; + 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 .config_pages--contact--full .field--type-text-long .field__item { + padding: 5% 10% 5% 5%; } header .bouton { align-self: flex-end; width: fit-content; } diff --git a/web/themes/custom/reha/js/reha.js b/web/themes/custom/reha/js/reha.js index 4f9db66..21f79f9 100644 --- a/web/themes/custom/reha/js/reha.js +++ b/web/themes/custom/reha/js/reha.js @@ -25,7 +25,7 @@ jQuery(document).ready(function($){ $(document).ready(function() { $(".bouton-contact").click(function(event) { - $(".config_pages--contact--full").slideToggle(); + $(".field--type-text-long").slideToggle(); }); }); diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss index 2771e35..fea3db8 100644 --- a/web/themes/custom/reha/scss/partials/_header.scss +++ b/web/themes/custom/reha/scss/partials/_header.scss @@ -56,9 +56,7 @@ header{ height: fit-content; .connexion{ float: right; - // display: none; /* Cacher initialement le contenu */ 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%; position: relative; .connexion-full{ @@ -74,26 +72,6 @@ header{ } } - - // .user-login-form{ - // display: none; - // background-color: $white; - // width: 100%; - // height: 100vh; - // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; - // clip-path: inset(0px -10px -10px -10px); - // padding: 5% 10% 5% 5%; - // } - // ul{ - // display: none; - // // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ - // background-color: $white; - // width: 100%; - // height: 100vh; - // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; - // clip-path: inset(0px -10px -10px -10px); - // padding: 5% 10% 5% 5%; - // } } #block-reha-config-pages{ grid-column: 10; @@ -110,24 +88,22 @@ header{ .config_pages--contact--full { float: right; - display: none; /* Cacher initialement le contenu */ 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%; + .field--type-text-long { + display: none; + background-color: $white; + width: 400px; + 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%; + } + } } - .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%; - } - } + } }