91 lines
1.6 KiB
SCSS
91 lines
1.6 KiB
SCSS
@import 'constants';
|
|
|
|
|
|
#CONTAINER{
|
|
|
|
display: block;
|
|
position: absolute;
|
|
top: $header-height;
|
|
left: $menu-width;
|
|
height: calc( 100% - #{$header-height} );
|
|
width: calc( 100% - #{$menu-width} );
|
|
|
|
|
|
background-color: $bg-color;
|
|
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
|
|
z-index: 100;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bg-fade{
|
|
to{ background-color: lighten($bg-color, 5%); }
|
|
}
|
|
|
|
// bounce
|
|
@keyframes bounce-up{
|
|
from{ transform: scale(.95); }
|
|
to{ transform: scale(1); }
|
|
}
|
|
|
|
// animation for incoming element
|
|
@keyframes incoming{
|
|
from{ transform: translateY(-2em); opacity: 0; }
|
|
to{ transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
// animation for outgoing element
|
|
@keyframes outgoing{
|
|
from{ transform: translateY(0); opacity: 1; }
|
|
to{ transform: translateY(2em); opacity: 0; }
|
|
}
|
|
|
|
|
|
/* [1] List style
|
|
---------------------------------*/
|
|
@import 'container/list';
|
|
|
|
|
|
/* [2] Card style
|
|
---------------------------------*/
|
|
@import 'container/card';
|
|
|
|
|
|
|
|
|
|
|
|
// animation for navigation -> each card-list element
|
|
#CONTAINER > div.container{
|
|
|
|
& > section:not([data-anim='0']),
|
|
& > input:not([data-anim='0']),
|
|
& > h1:not([data-anim='0']),
|
|
& > button:not([data-anim='0']){
|
|
animation: bounce-up .2s ease-out;
|
|
}
|
|
|
|
|
|
&[data-anim-outgoing='1']{
|
|
& > section,
|
|
& > input,
|
|
& > h1,
|
|
& > button{ animation: outgoing .4s ease-in-out forwards; }
|
|
}
|
|
&[data-anim-incoming='1']{
|
|
& > section,
|
|
& > input,
|
|
& > h1,
|
|
& > button{ animation: incoming .4s ease-in-out; }
|
|
}
|
|
// &[data-anim-bounce='1']{
|
|
// & > section,
|
|
// & > input,
|
|
// & > h1,
|
|
// & > button{ animation: bounce-up .6s ease-in-out reverse forwards; }
|
|
// }
|
|
|
|
} |