mirror of
https://github.com/medialab-prado/datamad2017.git
synced 2025-06-08 06:21:29 +02:00
CSS files converted to Sass. Some style fixes. Created file with sponsors.
This commit is contained in:
Oleh Zasadnyy
parent
1a5c529669
commit
a45174a1e4
851 changed files with 19814 additions and 5533 deletions
101
_sass/vendor/animations/flippers/_flip.scss
vendored
Normal file
101
_sass/vendor/animations/flippers/_flip.scss
vendored
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
@if $use-flip == true {
|
||||
|
||||
@-webkit-keyframes flip {
|
||||
0% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateY(0);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective($flipper-perspective) scale(1);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes flip {
|
||||
0% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateY(0);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
-moz-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
-moz-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
|
||||
-moz-animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
|
||||
-moz-animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: perspective($flipper-perspective) scale(1);
|
||||
-moz-animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes flip {
|
||||
0% {
|
||||
-o-transform: perspective($flipper-perspective) rotateY(0);
|
||||
-o-animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
-o-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
|
||||
-o-animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
-o-transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
|
||||
-o-animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
|
||||
-o-animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
-o-transform: perspective($flipper-perspective) scale(1);
|
||||
-o-animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flip {
|
||||
0% {
|
||||
transform: perspective($flipper-perspective) rotateY(0);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
40% {
|
||||
transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(170deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
transform: perspective($flipper-perspective) translateZ($flipper-translate) rotateY(190deg) scale(1);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
transform: perspective($flipper-perspective) rotateY($flipper-degrees-max * 4) scale(0.95);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
100% {
|
||||
transform: perspective($flipper-perspective) scale(1);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.flip {
|
||||
@include animate-prefixer(transform-style, preserve-3d);
|
||||
@include animate-prefixer(backface-visibility, visible !important);
|
||||
@include animate-prefixer(animation-name, flip)
|
||||
}
|
||||
|
||||
}
|
||||
84
_sass/vendor/animations/flippers/_flipInX.scss
vendored
Normal file
84
_sass/vendor/animations/flippers/_flipInX.scss
vendored
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
@if $use-flipInX == true {
|
||||
|
||||
@-webkit-keyframes flipInX {
|
||||
0% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateX($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateX(-$flipper-degrees);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateX($flipper-degrees);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes flipInX {
|
||||
0% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateX($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateX(-$flipper-degrees);
|
||||
}
|
||||
|
||||
70% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateX($flipper-degrees);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-o-keyframes flipInX {
|
||||
0% {
|
||||
-o-transform: perspective($flipper-perspective) rotateX($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-o-transform: perspective($flipper-perspective) rotateX(-$flipper-degrees);
|
||||
}
|
||||
|
||||
70% {
|
||||
-o-transform: perspective($flipper-perspective) rotateX($flipper-degrees);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: perspective($flipper-perspective) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes flipInX {
|
||||
0% {
|
||||
transform: perspective($flipper-perspective) rotateX($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective($flipper-perspective) rotateX(-$flipper-degrees);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: perspective($flipper-perspective) rotateX($flipper-degrees);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective($flipper-perspective) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flipInX {
|
||||
@include animate-prefixer(backface-visibility, visible !important);
|
||||
@include animate-prefixer(animation-name, flipInX);
|
||||
}
|
||||
}
|
||||
87
_sass/vendor/animations/flippers/_flipInY.scss
vendored
Normal file
87
_sass/vendor/animations/flippers/_flipInY.scss
vendored
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
@if $use-flipInY == true {
|
||||
|
||||
@-webkit-keyframes flipInY {
|
||||
0% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateY(-$flipper-degrees);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes flipInY {
|
||||
0% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateY(-$flipper-degrees);
|
||||
}
|
||||
|
||||
70% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes flipInY {
|
||||
0% {
|
||||
-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
-o-transform: perspective($flipper-perspective) rotateY(-$flipper-degrees);
|
||||
}
|
||||
|
||||
70% {
|
||||
-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: perspective($flipper-perspective) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flipInY {
|
||||
0% {
|
||||
transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective($flipper-perspective) rotateY(-$flipper-degrees);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: perspective($flipper-perspective) rotateY($flipper-degrees);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective($flipper-perspective) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flipInY {
|
||||
@include animate-prefixer(backface-visibility, visible !important);
|
||||
@include animate-prefixer(animation-name, flipInY);
|
||||
}
|
||||
}
|
||||
52
_sass/vendor/animations/flippers/_flipOutX.scss
vendored
Normal file
52
_sass/vendor/animations/flippers/_flipOutX.scss
vendored
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
@if $use-flipOutX == true {
|
||||
|
||||
@-webkit-keyframes flipOutX {
|
||||
0% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateX($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes flipOutX {
|
||||
0% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateX($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes flipOutX {
|
||||
0% {
|
||||
-o-transform: perspective($flipper-perspective) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-o-transform: perspective($flipper-perspective) rotateX($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flipOutX {
|
||||
0% {
|
||||
transform: perspective($flipper-perspective) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: perspective($flipper-perspective) rotateX($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipOutX {
|
||||
@include animate-prefixer(animation-name, flipOutX);
|
||||
@include animate-prefixer(backface-visibility, visible !important);
|
||||
}
|
||||
|
||||
}
|
||||
51
_sass/vendor/animations/flippers/_flipOutY.scss
vendored
Normal file
51
_sass/vendor/animations/flippers/_flipOutY.scss
vendored
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
@if $use-flipOutY == true {
|
||||
|
||||
@-webkit-keyframes flipOutY {
|
||||
0% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes flipOutY {
|
||||
0% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes flipOutY {
|
||||
0% {
|
||||
-o-transform: perspective($flipper-perspective) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-o-transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flipOutY {
|
||||
0% {
|
||||
transform: perspective($flipper-perspective) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: perspective($flipper-perspective) rotateY($flipper-degrees-max);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipOutY {
|
||||
@include animate-prefixer(backface-visibility, visible !important);
|
||||
@include animate-prefixer(animation-name, flipOutY);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue