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

header collapse

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-08 15:43:50 +02:00
parent 017d6c5739
commit 749c29bbb4
4 changed files with 97 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

42
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -224,12 +224,13 @@ svg.ext {
header {
display: flex;
flex-direction: row;
height: 320px;
height: 100vh;
width: 100%;
z-index: 99;
max-width: 100vw;
position: fixed;
top: 0;
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
transition: none;
/* Classes for scroll effect */
}
@media (max-width: 810px) {
@ -241,10 +242,10 @@ header .contextual-region {
width: max-content;
}
header .header_left_container {
flex: 0 0 60%;
flex: 0 0 100%;
display: flex;
flex-direction: row;
transition: transform 0.3s, height 0.3s; /* Add transition for smooth sliding and resizing */
transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
background-color: rgb(255, 255, 255);
}
@media (max-width: 660px) {
@ -337,7 +338,7 @@ header .header_right_container .language-switcher-language-url ul .is-active {
font-weight: 600;
}
header .header_nav_container {
flex: 0 0 30%;
flex: 0 0 0%;
width: 100%;
background: rgb(7, 50, 194);
text-align: center;
@ -408,6 +409,37 @@ header .header:hover + .header_nav_container {
transform: translateX(0);
}
/* Taille définitive du header après l'animation */
.header--collapsed {
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 50%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
transition: all 1s ease-in-out;
}
.header--collapsed .header_left_container {
flex: 0 0 60%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
}
.header--collapsed .header_nav_container {
flex: 0 0 30%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
}
.header--collapsed-already {
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 50%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
transition: all 0s ease-in-out;
}
.header--collapsed-already .header_left_container {
flex: 0 0 60%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
}
.header--collapsed-already .header_nav_container {
flex: 0 0 30%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
}
footer {
z-index: 100;
}