bachir/drupal-reha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

position menu déroulants

Browse Source
This commit is contained in:
ouidade
2023-11-24 10:19:35 +01:00
parent 34ab4e50d5
commit 644175c7aa
2 changed files with 36 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/css/reha.css
+10 -7
View File
@@ -157,7 +157,7 @@ header {
header div {
display: inline-grid;
align-items: center;
grid-template-columns: 210px, 210px, repeat(6, 1fr) 210px, 210px; }
grid-template-columns: repeat(10, 1fr); }
header div #block-reha-logoministere {
grid-column: 1;
width: fit-content;
@@ -185,21 +185,21 @@ header {
content: url(../images/noun-contact-2495375.svg);
padding-right: 1rem; }
header div #block-reha-connexionutilisateur .connexion {
float: right;
height: 0;
/* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
width: 100%;
position: relative; }
header div #block-reha-connexionutilisateur .connexion .connexion-full {
display: none;
right: -235px;
top: 36px;
position: absolute;
background-color: white;
width: 400px;
width: 30vw;
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%;
position: relative;
right: -150px; }
padding: 5% 10% 5% 5%; }
header div #block-reha-config-pages {
grid-column: 10;
display: flex;
@@ -217,7 +217,10 @@ header {
header div #block-reha-config-pages .config_pages--contact--full .field--type-text-long {
display: none;
background-color: white;
width: 400px;
position: absolute;
right: 0px;
top: 100%;
width: 30vw;
height: 100vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
clip-path: inset(0px -10px -10px -10px); }
web/themes/custom/reha/scss/partials/_header.scss
+26 -7
View File
@@ -17,7 +17,7 @@ header{
div{
display: inline-grid;
align-items: center;
grid-template-columns: 210px, 210px, repeat(6, 1fr) 210px, 210px;
grid-template-columns: repeat(10, 1fr) ;
#block-reha-logoministere{
grid-column: 1;
@@ -45,7 +45,6 @@ header{
grid-column: 9;
.bouton-connexion{
padding-right: 3rem;
:before{
content: url(../images/noun-contact-2495375.svg);
padding-right: 1rem;
@@ -55,20 +54,24 @@ header{
flex-direction: column;
height: fit-content;
.connexion{
float: right;
// float: right;
height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
width: 100%;
position: relative;
.connexion-full{
display: none;
right:-235px;
top: 36px; // Positionnez-les sous les boutons
// right: 0; // Ou ajustez selon vos besoins
position: absolute;
background-color: $white;
width: 400px;
// width: 400px;
width: 30vw;
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%;
position: relative;
right:-150px;
}
}
@@ -93,7 +96,11 @@ header{
.field--type-text-long {
display: none;
background-color: $white;
width: 400px;
position: absolute;
right:0px;
top: 100%;
// width: 500px;
width: 30vw;
height: 100vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
clip-path: inset(0px -10px -10px -10px);
@@ -122,3 +129,15 @@ header{
// .config_pages--contact--full, .connexion-full {
// position: absolute;
// top: 100%; // Positionnez-les sous les boutons
// right: 0; // Ou ajustez selon vos besoins
// display: none; // Assurez-vous qu'ils ne sont pas visibles par défaut
// // ... (autres styles)
// }
// #block-reha-connexionutilisateur:hover .connexion-full,
// #block-reha-config-pages:hover .config_pages--contact--full {
// display: block; // Affichez-les lorsqu'ils sont survolés
// }