Files
Popsu-coloque/web/themes/custom/colloque2024/css/components/header/header.scss
T
2024-04-25 14:38:20 +02:00

209 lines
4.7 KiB
SCSS

header{
max-height: 125px;
.row{
background: white;
max-height: inherit;
justify-content: space-between;
border-bottom: 1px solid black;
padding-left: 40px;
#block-colloque2024-logorepublique, #block-colloque2024-logoepau{
max-height: inherit;
& > div{
max-height: inherit;
a{
display: block;
max-height: inherit;
img{
width: auto;
height: 125px;
// width: 100%;
// max-height: inherit;
// object-fit: contain;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
@media screen and (min-width: 450px) {
width: auto;
}
}
}
}
&.is-active{
z-index: 10000;
}
}
#block-colloque2024-renderedsitesettingsblock-2{
width: 35%;
border-left: 1px solid $color1;
padding: 0;
display: none;
a{
display: flex;
}
@media screen and (min-width: 1200px) {
display: flex;
}
.site_setting_entity{
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 1rem 0 0rem;
h1{
width: 100%;
color: $color2;
padding-right: 1rem;
text-transform: uppercase;
text-align: right;
align-self: stretch;
margin: auto 0;
}
.__info_colloque{
width: 50%;
height: auto;
display: flex;
flex-direction: column;
// justify-content: space-between;
&>div{
height: auto;
&:first-child{
color: $color1;
white-space: nowrap;
border-bottom: 2px solid $color1;
padding-bottom: 0.4rem;
margin-bottom: 0.6rem;
}
&:last-child{
color: $color2;
padding-right: 10px;
width: min-content;
margin-bottom: 0;
}
}
}
}
}
#block-colloque2024-mainnavigation{
width: max-content;
.burger{
padding-top: 0.25rem;
z-index: 9999;
}
.nav-main{
display: none;
@media screen and (min-width: 1200px) {
display: block;
ul{
margin-bottom: 0;
flex-wrap: wrap;
li{
margin: 0 0.5rem;
&:not(:last-child){
&:after{
display: inline-block;
content: "|";
margin-left: 0.5rem;
}
}
}
}
}
&.is-active{
display: block;
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background: white;
z-index: 9999;
@media screen and (min-width: 576px) {
height: auto;
ul{
margin: 130px 0 50px 0;
}
li{
font-size: 1.7rem;
line-height: 3rem;
padding: 0 15px;
}
}
ul{
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
align-items: center;
li{
font-size: 1.5rem;
line-height: 3rem;
padding: 0 15px;
@media screen and (min-width: 360px) {
width: 100%;
&::before{
display: inline-block;
content: " ";
width: 0%;
transition: width 1s ease;
height: 1px;
background: $color2024;
}
&:hover{
&::before{
width: 10%;
transition: all 1s ease;
}
}
}
}
}
}
}
}
}
}
#block-colloque2024-mainnavigation{
border-left: 1px solid black;
display: flex;
align-items: center;
justify-content: flex-end;
.burger{
display: block;
margin: auto;
@media screen and (min-width: 1200px) {
display: none;
}
&.is-active{
z-index: 999;
}
}
.nav-main{
display: none;
height: auto;
@media screen and (min-width: 1200px) {
display: flex;
}
}
}
header.front{
#block-colloque2024-branding{
width: 21rem;
position: relative;
z-index: 9999;
a{
max-height: 8rem!important;
}
&.is-active{
overflow: inherit;
&>div{
max-height: 115px;
}
}
}
#block-renderedsitesettingsblock-2{
display: none;
}
}