Files
2020-09-07 20:15:15 +02:00

145 lines
3.1 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: 50%;
height: 1px;
margin: 1px 0 0;
transition: $animate;
transition-duration: 0.3s;
opacity: 1;
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;
}
}
}
}
}
}
&#figureslibres{
&::before, &::after{
bottom: 5px;
}
}
}
}
&.hidden{
opacity: 0;
transition: 0.3s opacity ease;
}
#item_list{
p{
& > a {
cursor: pointer;
&:before,
&:after {
width: 100%;
opacity: 1;
}
&:before,
&:after {
width: 50%;
}
}
}
}
}
.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;
}
&.figureslibres{
background:
url("/user/themes/figureslibres/images/figures_libres.svg") center no-repeat;
background-size: contain;
}
&.publique{
background:
url("/user/themes/figureslibres/images/publique.svg") center no-repeat;
background-size: contain;
}
&.sociale{
background:
url("/user/themes/figureslibres/images/sociale.svg") center no-repeat;
background-size: contain;
}
&.culturelle{
background:
url("/user/themes/figureslibres/images/culturelle.svg") center no-repeat;
background-size: contain;
}
&.commanditaires{
background:
url("/user/themes/figureslibres/images/commanditaires.svg") center no-repeat;
background-size: contain;
}
&.logiciels-libres{
background:
url("/user/themes/figureslibres/images/logiciels_libres.svg") center no-repeat;
background-size: contain;
}
}