84 lines
1.7 KiB
SCSS
84 lines
1.7 KiB
SCSS
|
/**
|
||
|
|
* Project animations
|
||
|
|
**/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* START of 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%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* END of slide out animation for extended toolbar.
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* START of 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%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* END of slide in / out animation for main toolbar.
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* START of 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; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* END of slide in animation for extended toolbar (inner) panel.
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* START of 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; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* END of slide in animation for extended toolbar container
|
||
|
|
**/
|