ptut-vhost/webpack/scss/container.scss

91 lines
1.6 KiB
SCSS
Raw Normal View History

2018-02-28 12:00:51 +00:00
@import 'constants';
#CONTAINER{
display: block;
position: absolute;
top: $header-height;
left: $menu-width;
height: calc( 100% - #{$header-height} );
width: calc( 100% - #{$menu-width} );
2018-02-28 12:00:51 +00:00
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
---------------------------------*/
2018-03-14 16:43:44 +00:00
@import 'container/list';
2018-03-14 16:43:44 +00:00
/* [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; }
// }
}