bachir/lamine_wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rs header

Browse Source
This commit is contained in:
kevin
2020-09-08 17:41:38 +02:00
parent 52cc7bdf74
commit d496228b31
4 changed files with 82 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/themes/la_mine/src/assets/scss/components/_header.scss
+52 -37
View File
@@ -1,50 +1,65 @@
header{
section{
position: relative;
figure{
a{
position: relative;
display: block;
width: max-content;
height: calc( #{$heightLogo} / 2 ) ;
transition: 0.5s all ease;
@media screen and (min-width: 576px) {
height: $heightLogo;
}
img{
z-index: 3;
&.logo{
position: relative;
figure{
a{
position: relative;
}
span{
display: block;
}
#lumiR_logo{
@include logoLamine(1, calc(#{$heightLogo} / 5 ), calc(#{$heightLogo} / 5), $colorYellow, 25px, 35px);
@media screen and (min-width: 576px) {
@include logoLamine(1, calc(#{$heightLogo} / 3), calc(#{$heightLogo} / 3), $colorYellow, 50px, 70px);
}
}
#fond_logo{
@include logoLamine(0, calc(#{$heightLogo}), calc(#{$heightLogo}), $colorWhite, -70%, 30%);
@media screen and (min-width: 576px) {
@include logoLamine(0, calc(#{$heightLogo} * 2 ), calc(#{$heightLogo} * 2 ), $colorWhite, -70%, 30%);
}
}
&:hover{
height: $heightLogoHover;
width: max-content;
height: calc( #{$heightLogo} / 2 ) ;
transition: 0.5s all ease;
@media screen and (min-width: 576px) {
height: $heightLogo;
}
img{
z-index: 3;
position: relative;
}
span{
display: block;
}
#lumiR_logo{
@include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px);
@include logoLamine(1, calc(#{$heightLogo} / 5 ), calc(#{$heightLogo} / 5), $colorYellow, 25px, 35px);
@media screen and (min-width: 576px) {
@include logoLamine(1, calc(#{$heightLogo} / 3), calc(#{$heightLogo} / 3), $colorYellow, 50px, 70px);
}
}
#fond_logo{
@include logoLamineHover(calc(#{$heightLogoHover} + 75px), calc(#{$heightLogoHover} + 75px), -50%, 50%);
}
@include logoLamine(0, calc(#{$heightLogo}), calc(#{$heightLogo}), $colorWhite, -70%, 30%);
@media screen and (min-width: 576px) {
@include logoLamine(0, calc(#{$heightLogo} * 2 ), calc(#{$heightLogo} * 2 ), $colorWhite, -70%, 30%);
}
}
&:hover{
height: $heightLogoHover;
transition: 0.5s all ease;
#lumiR_logo{
@include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px);
}
#fond_logo{
@include logoLamineHover(calc(#{$heightLogoHover} + 75px), calc(#{$heightLogoHover} + 75px), -50%, 50%);
}
}
}
}
}
&.nav-main{
justify-content: end;
figure{
& > div{
width: 30px;
height: 100%;
&:first-child{
margin-right: 0.5rem;
}
}
}
nav{
display: none;
}
}
}
}