mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-12-02 15:48:00 +01:00
39 lines
770 B
SCSS
39 lines
770 B
SCSS
|
@mixin transform-n-animation($type, $dur, $delta) {
|
||
|
|
transform: $delta;
|
||
|
|
animation: $type $dur ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
#burger.open {
|
||
|
|
display: block !important;
|
||
|
|
@include transform-n-animation(slidein, 0.4s, translate(0, 0));
|
||
|
|
}
|
||
|
|
|
||
|
|
#burger.close {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// content sliding open
|
||
|
|
#container.open {
|
||
|
|
@include transform-n-animation(open, 0.4s, translate(210px, 0));
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes open {
|
||
|
|
0.00% { transform: translate(0, 0); }
|
||
|
|
100% { transform: translate(210px, 0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
// content closing
|
||
|
|
#container.close {
|
||
|
|
animation: close 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes close {
|
||
|
|
0.00% { transform: translate(210px, 0); }
|
||
|
|
100% { transform: translate(0, 0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slidein {
|
||
|
|
0.00% { transform: translate(-200px, 0); }
|
||
|
|
100% { transform: translate(0, 0); }
|
||
|
|
}
|