291 docs/shakenfade.html
View file
@@ -108,52 +108,251 @@
</div>
</div>
</div>

<style>
.sq-animation-shake {
animation-name: sq-shake;
}
@keyframes sq-shake {
0%,
100% {
transform: translateX(0);
}
10% {
transform: translateX(-9px);
}
20% {
transform: translateX(8px);
}
30% {
transform: translateX(-7px);
}
40% {
transform: translateX(6px);
}
50% {
transform: translateX(-5px);
}
60% {
transform: translateX(4px);
}
70% {
transform: translateX(-3px);
}
80% {
transform: translateX(2px);
}
90% {
transform: translateX(-1px);
}
}
.sq-animation-toggle:not(:hover):not(.sq-hover) [class*='sq-animation-'] {
animation-name: none;}
[class*='sq-animation-'] {
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
</style>
<!-- Fade animation -->
<div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="far fa-address-card"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="sq-text-center far fa-address-book"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="far fa-thumbs-up"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="far fa-thumbs-down"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="far fa-bookmark"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="far fa-comment"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="far fa-star"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="far fa-image"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="fab fa-facebook-square"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="fab fa-skype"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="fab fa-google-plus"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="fab fa-android"></i>
</div>
</div>
</div>
<div class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match" sq-grid>
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-fade">
<i class="fab fa-apple"></i>
</div>
</div>
</div>
</div>
<div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="far fa-address-card"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="sq-text-center far fa-address-book"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="far fa-thumbs-up"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="far fa-thumbs-down"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="far fa-bookmark"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="far fa-comment"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="far fa-star"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="far fa-image"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="fab fa-facebook-square"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="fab fa-skype"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="fab fa-google-plus"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="fab fa-android"></i>
</div>
</div>
</div>
<div
class="sq-child-width-1-2 sq-child-width-1-4@s sq-grid-match"
sq-grid="sq-grid">
<div class="sq-animation-toggle">
<div class="sq-card sq-card-default sq-card-body sq-animation-rotate">
<i class="fab fa-apple"></i>
</div>
</div>
</div>
</div>

</body>
</html>
78 docs/timeline.html
View file
@@ -17,39 +17,53 @@
<link rel="stylesheet" href="../css/test.css">
<!-- CSS end -->
<title>Code library</title>
<body class="body">
<div class="flex-direction-row flex-justify-center">
<!--timeline bar-->
<div class="timeline"></div>
<div class="order2 flex-align-self-center" onclick="toggle_visibility('foo')">
<div class="knapp"></div>
</div>
<!--empty box order 1 keeps the container left.-->
<div class="order1">
<div class="container-timeline-card container-timeline-blank"></div>
</div>
<!--content box order 3 keeps the container Right.-->
<div class="order3">
<div id="showHideDiv" class="container-timeline-card container-timeline-filling">
cåntainer båkks
</div>
</div>
<!--new line in the timeline and repeating.-->
<body class="body">
<div class="flex-direction-row flex-justify-center">
<!--timeline bar-->
<div class="timeline"></div>
<div
class="timeline-box-order2 flex-align-self-center"
onclick="toggle_visibility('foo')">
<div class="timeline-button"></div>
</div>
<!--empty box order 1 keeps the container left.-->

<!--content box order 3 keeps the container Right.-->
<div class="timeline-box-order3">
<div
id="showHideDiv"
class="container-timeline-card container-timeline-filling">
cåntainer båkks
</div>
<div class="flex-direction-row flex-justify-center">
<div class="order2 flex-align-self-center">
<div class="knapp"></div>
</div>
<div class="order3">
<div class="container-timeline-card container-timeline-blank"></div>
</div>
<div class="order1">
<div class="container-timeline-card container-timeline-filling">
cåntainer båkks
</div>
</div>
<!--new line in the timeline and repeating.-->
</div>
<!-- Copy this for timeline box left! -->
<div class="flex-direction-row flex-justify-center">
<div class="timeline-box-order2 flex-align-self-center">
<div class="timeline-button"></div>
</div>
<div class="timeline-box-order1">
<div class="container-timeline-card container-timeline-filling">
cåntainer båkks
</div>
</div>
</div>
<!-- don't copy more -->
<div>
</div>
<!-- Copy this for timeline box right! -->
<div class="flex-direction-row flex-justify-center">
<div class="timeline-box-order2 flex-align-self-center">
<div class="timeline-button"></div>
</div>
<div class="timeline-box-order3">
<div class="container-timeline-card container-timeline-filling">
cåntainer båkks
</div>
</div>

</body>
</head>
</div>
<!-- don't copy more -->
</body>
</head>
</html>