mirror of
https://github.com/medialab-prado/datamad2017.git
synced 2024-12-27 05:01:23 +01:00
52 lines
2.1 KiB
SCSS
52 lines
2.1 KiB
SCSS
|
///////////////////////////////////////////////////////////////////
|
||
|
|
// Sass Mixins which will be used by the modules //
|
||
|
|
///////////////////////////////////////////////////////////////////
|
||
|
|
|
||
|
|
//===============================================================//
|
||
|
|
// Automatically add vendor prefixes in one hit //
|
||
|
|
//===============================================================//
|
||
|
|
// .fadeIn { //
|
||
|
|
// @include animate-prefixer(animation, fadeIn); //
|
||
|
|
// } //
|
||
|
|
//===============================================================//
|
||
|
|
// //
|
||
|
|
//===============================================================//
|
||
|
|
@mixin animate-prefixer($property, $value...) {
|
||
|
|
-webkit-#{$property}:$value;
|
||
|
|
-moz-#{$property}:$value;
|
||
|
|
-o-#{$property}:$value;
|
||
|
|
#{$property}:$value;
|
||
|
|
}
|
||
|
|
|
||
|
|
//===============================================================//
|
||
|
|
// Generate keyframes animations with vendor prefixes in one hit //
|
||
|
|
//===============================================================//
|
||
|
|
// .fadeIn { //
|
||
|
|
// @include animate-prefixer(animation, fadeIn); //
|
||
|
|
// } //
|
||
|
|
// @include animate-keyframe(fadeIn) { //
|
||
|
|
// 0% {opacity: 0;} //
|
||
|
|
// 100% {opacity: 1;} //
|
||
|
|
// } //
|
||
|
|
//===============================================================//
|
||
|
|
// Courtesy of @integralist: (twitter.com) //
|
||
|
|
//===============================================================//
|
||
|
|
|
||
|
|
@mixin animate-keyframe($animation-name) {
|
||
|
|
@-webkit-keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|