103 lines
1.8 KiB
SCSS
103 lines
1.8 KiB
SCSS
body{
|
|
display: inline-flex;
|
|
}
|
|
|
|
#header{
|
|
z-index: 1;
|
|
width: $header-width;
|
|
height: 100%;
|
|
padding-top: 1.5rem;
|
|
padding-left: 30px;
|
|
position: fixed;
|
|
background: white;
|
|
|
|
#logo{
|
|
padding-bottom: 15px;
|
|
}
|
|
#navbar{
|
|
padding-left: 15px;
|
|
|
|
.sous-menu{
|
|
height: $fonth2;
|
|
transition: all 0.3s ease-in-out;
|
|
transition-delay: 0.5s;
|
|
& > ol{
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: visibility 0.5s, opacity 0.5s linear;
|
|
margin-left: 30px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
&:hover{
|
|
height: 100px;
|
|
transition: all 0.3s ease-in-out;
|
|
& > a {
|
|
text-decoration: underline;
|
|
&::after {
|
|
@include background-nav-sm('../images/trait.svg');
|
|
}
|
|
}
|
|
& > ol{
|
|
visibility: visible;
|
|
transition: all 0.5s linear;
|
|
transition-delay: 0.2s;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.underline{
|
|
&::before{
|
|
@include background-nav('../images/point_b.svg');
|
|
}
|
|
}
|
|
.block{
|
|
height: 100px;
|
|
transition: all 0.3s ease-in-out;
|
|
&::before{
|
|
@include background-nav('../images/point_b.svg');
|
|
}
|
|
& > a::after {
|
|
@include background-nav-sm('../images/trait.svg');
|
|
}
|
|
ol{
|
|
visibility: visible;
|
|
transition: visibility 0.5s, opacity 0.5s linear;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
ul > li, ol{
|
|
&::before{
|
|
@include background-nav-content-b;
|
|
@include background-nav-b('../images/point.svg');
|
|
}
|
|
.underline{
|
|
&::before{
|
|
@include background-nav('../images/point_b.svg');
|
|
}
|
|
}
|
|
&:hover{
|
|
&::before{
|
|
@include background-nav('../images/point_b.svg');
|
|
}
|
|
&> a{
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.separation{
|
|
position: absolute;
|
|
left: 100%;
|
|
width: 1px;
|
|
height: 100%;
|
|
top: 1.5rem;
|
|
background: black;
|
|
&::before{
|
|
@include background-nav-content-s;
|
|
@include background-nav('../images/point_b.svg');
|
|
}
|
|
}
|
|
}
|