jiti-meet/css/_animations.scss

83 lines
1.6 KiB
SCSS
Raw Normal View History

/**
* Project animations
**/
/**
* Slide in animation for extended toolbar.
*/
@include keyframes(slideInX) {
0% { transform: translateX(-100%); }
100% { transform: translateX(0%); }
}
@include keyframes(slideOutX) {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
@include keyframes(slideInExtX) {
0% { transform: translateX(-500%); }
100% { transform: translateX(0%); }
}
@include keyframes(slideOutExtX) {
0% { transform: translateX(0%); }
100% { transform: translateX(-500%); }
}
/**
* Slide in / out animation for main toolbar.
*/
@include keyframes(slideInY) {
100% { transform: translateY(0%); }
}
@include keyframes(slideOutY) {
0% { transform: translateY(0%); }
100% { transform: translateY(-100%); }
}
/**
* Slide in animation for extended toolbar (inner) panel.
*/
// FIX: Can't use percentage because of breaking animation when width is changed
// (100% of 0 is also zero) Extracted this to config variable.
@include keyframes(slideInExt) {
from { left: -$sidebarWidth; }
to { left: 0; }
}
@include keyframes(slideOutExt) {
from { left: 0; }
to { left: -$sidebarWidth; }
}
/**
* Slide in animation for extended toolbar container
**/
@include keyframes(slideOutExtContainer) {
from { width: $sidebarWidth; }
to { width: 0; }
}
@include keyframes(slideInExtContainer) {
from { width: 0; }
to { width: $sidebarWidth; }
}
/**
* Fade in / out animations
**/
@include keyframes(fadeIn) {
from { opacity: 0; }
to { opacity: 1; }
}
@include keyframes(fadeOut) {
from { opacity: 1; }
to { opacity: 0; }
}