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
+27
View File
@@ -824,6 +824,33 @@ section.enonce {
padding-left: 2em;
border-left: 1px solid #999; }
.dot {
cursor: pointer;
position: relative;
transform: translate3d(0, 0, 0);
transition: transform 0.2s ease-in-out; }
.dot span.id {
display: inline-block;
position: absolute;
left: -3.5em;
opacity: 0;
transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out; }
.dot p.summary {
display: inline-block;
margin: 0 0 0 1em;
opacity: 0;
transition: opacity 0.4s ease-in-out; }
.dot:hover, .dot.opened {
transform: translate3d(0.5em, 0, 0);
transition: transform 0.1s ease-in-out; }
.dot:hover p.summary, .dot.opened p.summary {
opacity: 1;
transition: opacity 0.4s ease-in-out; }
.dot:hover span.id, .dot.opened 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; }