valentin_le_moign/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/dist/assets/css/index.css
Vendored
+21 -13
View File
File diff suppressed because one or more lines are too long
web/app/themes/la_mine/dist/assets/css/index.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
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;
}
}
}
}
web/app/themes/la_mine/templates/components/header.twig
+8 -8
View File
@@ -8,20 +8,20 @@
</figure>
</section>
<section class="nav-main row">
<div class="rs col">
<figure id="facebook">
<section class="nav-main col-6 d-flex">
<figure class="rs row">
<div id="facebook">
<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
</a>
</figure>
<figure id="insta">
</div>
<div id="insta">
<a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}">
<img src="{{theme.link}}/dist//assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
</a>
</figure>
</div>
<div class="burger col">
</div>
</figure>
<div class="burger col-1">
<div class="fond_burger">
<button class="hamburger hamburger--slider" type="button">
<span class="hamburger-box">