added some fancy display and interactivity to dots

This commit is contained in:
Bachir Soussi Chiadmi
2017-07-13 10:43:08 +02:00
parent 85a5abce50
commit 49159a03ab
6 changed files with 458 additions and 7 deletions
+48
View File
@@ -83,6 +83,11 @@ h1.part{
margin: 1em 0;
}
// ______
// /_ __/_______ ___
// / / / ___/ _ \/ _ \
// / / / / / __/ __/
// /_/ /_/ \___/\___/
section.enonce{
width:450px;
margin: 1em 0;
@@ -134,6 +139,49 @@ section.enonce{
}
}
// ____ __
// / __ \____ / /______
// / / / / __ \/ __/ ___/
// / /_/ / /_/ / /_(__ )
// /_____/\____/\__/____/
.dot{
cursor: pointer;
position: relative;
transform: translate3d(0,0,0);
transition: transform 0.2s ease-in-out;
span.id{
display: inline-block;
position: absolute;
left:-3.5em;
opacity:0;
// transform: translate3d(0, 0, 0);
transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
}
span.bullet{
}
p.summary{
display: inline-block;
margin: 0 0 0 1em;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
&:hover, &.opened{
transform: translate3d(0.5em, 0, 0);
transition: transform 0.1s ease-in-out;
p.summary{
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
span.id{
opacity: 1;
transform: translate3d(-0.5em, 0, 0);
transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
}
}
}
footer{
position: fixed;
bottom: 0;