112 lines
2.4 KiB
SCSS
112 lines
2.4 KiB
SCSS
$animate: all 0.2s ease-in-out;
|
|
|
|
#text_figli{
|
|
z-index: 999;
|
|
opacity: 1;
|
|
p{
|
|
& > a{
|
|
z-index: 999;
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -1px;
|
|
width: 0px;
|
|
height: 1px;
|
|
margin: 1px 0 0;
|
|
transition: $animate;
|
|
transition-duration: 0.3s;
|
|
opacity: 0;
|
|
background-color: black;
|
|
}
|
|
&::before{
|
|
left: 50%;
|
|
}
|
|
&:after{
|
|
right: 50%;
|
|
}
|
|
&:hover {
|
|
cursor: pointer;
|
|
&:before,
|
|
&:after {
|
|
width: 100%;
|
|
opacity: 1;
|
|
}
|
|
&:before,
|
|
&:after {
|
|
width: 50%;
|
|
}
|
|
}
|
|
#icone_list{
|
|
transition: 1s 0.5s margin-left,0.8s 0.3s opacity;
|
|
.hamburger{
|
|
&.hamburger--slider{
|
|
.hamburger-inner{
|
|
transform: translate3d(0,5px,0) rotate(0deg);
|
|
transition: 0s 0.2s transform;
|
|
&:after{
|
|
transform: translate3d(0,-10px,0) rotate(0deg);
|
|
transition: 0.2s 0.2s transform;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.open{
|
|
#icone_list{
|
|
transition: 0.5s margin-left, 0.5s opacity;
|
|
.hamburger{
|
|
&.hamburger--slider{
|
|
.hamburger-inner{
|
|
transform: translate3d(0,5px,0) rotate(45deg);
|
|
transition: 0.8s 0.2s transform;
|
|
&:after{
|
|
transform: translate3d(0,-10px,0) rotate(90deg);
|
|
transition: 1s 0.2s transform;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.hidden{
|
|
opacity: 0;
|
|
transition: 0.3s opacity ease;
|
|
}
|
|
}
|
|
|
|
.circle_hover{
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 0;
|
|
transition: height .2s, width .2s;
|
|
&.open{
|
|
width: 200px;
|
|
height: 200px;
|
|
transition: height .5s, width .5s;
|
|
}
|
|
&.publique{
|
|
background:
|
|
url("/user/themes/figureslibres/images/forme2.svg") center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&.sociale{
|
|
background: $color_sociale;
|
|
border-radius: 100px;
|
|
}
|
|
&.culturelle{
|
|
background:
|
|
url("/user/themes/figureslibres/images/forme3.svg") center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&.commanditaires{
|
|
background:
|
|
url("/user/themes/figureslibres/images/forme4.svg") center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|