72 lines
1.5 KiB
SCSS
72 lines
1.5 KiB
SCSS
|
@import "vars";
|
||
|
|
@import "mixins";
|
||
|
|
|
||
|
|
|
||
|
|
#files-empty,
|
||
|
|
#favorites-empty {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: table;
|
||
|
|
pointer-events: none;
|
||
|
|
color: $medium;
|
||
|
|
> div {
|
||
|
|
display: table-cell;
|
||
|
|
vertical-align: middle;
|
||
|
|
text-align: center;
|
||
|
|
padding: 20px;
|
||
|
|
.btn {
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.files-wrapper {
|
||
|
|
overflow: hidden;
|
||
|
|
position: absolute;
|
||
|
|
top: 120px;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.in-from-left,
|
||
|
|
.in-from-right,
|
||
|
|
.out-to-left,
|
||
|
|
.out-to-right {
|
||
|
|
|
||
|
|
@include backface-visibility(hidden);
|
||
|
|
|
||
|
|
@include animation-duration(0.225s);
|
||
|
|
@include animation-iteration-count(1);
|
||
|
|
@include animation-timing-function(ease-out);
|
||
|
|
@include animation-fill-mode(forwards);
|
||
|
|
// overflow: hidden !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.in-from-left { @include animation-name(in-from-left); }
|
||
|
|
.in-from-right { @include animation-name(in-from-right); }
|
||
|
|
.out-to-left { @include animation-name(out-to-left); }
|
||
|
|
.out-to-right { @include animation-name(out-to-right); }
|
||
|
|
|
||
|
|
@-webkit-keyframes in-from-left {
|
||
|
|
from { @include translateX (-100%); opacity: 0;}
|
||
|
|
to { @include translateX (0%); opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes in-from-right {
|
||
|
|
from { @include translateX (100%); opacity: 0; }
|
||
|
|
to { @include translateX (0%); opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes out-to-left {
|
||
|
|
from { @include translateX (0%); opacity: 1; }
|
||
|
|
to { @include translateX (-100%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes out-to-right {
|
||
|
|
from { @include translateX (0%); opacity: 1; }
|
||
|
|
to { @include translateX (100%); opacity: 0; }
|
||
|
|
}
|