Sha256: 0ccb965943d83fd1c5780fcc2fca7dafab481836380757ec91544b1c56edb42c
Contents?: true
Size: 1.98 KB
Versions: 62
Compression:
Stored size: 1.98 KB
Contents
/*------------------------------------*\
#TAKEOVER
\*------------------------------------*/
$takeover-bg-color: $background-color !default;
$takeover-content-top-offset: $global-header-height + ($spacing-unit * 4) !default;
$takeover-content-horizontal-offset: ($spacing-unit * 2) !default;
$takeover-content-width: calc(100vw - #{$takeover-content-horizontal-offset * 2}) !default;
@keyframes takeover-fade-in-from-bottom {
0% {
opacity: 0;
transform: translateY(300px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes takeover-fade-out-from-bottom {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(300px);
}
}
@keyframes takeover-fade-in-from-top {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes takeover-fade-out-from-top {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
.takeover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: index($components, takeover);
background: $takeover-bg-color;
animation: takeover-fade-in-from-bottom $global-transition-speed;
}
.takeover--removing {
animation: takeover-fade-out-from-bottom $global-transition-speed;
}
.takeover--from-top {
animation: takeover-fade-in-from-top $global-transition-speed;
&.takeover--removing {
animation: takeover-fade-out-from-top $global-transition-speed;
}
}
.takeover__content {
position: absolute;
top: $takeover-content-top-offset;
right: $takeover-content-horizontal-offset;
bottom: 0;
left: $takeover-content-horizontal-offset;
padding-bottom: $spacing-unit * 10;
width: $takeover-content-width;
overflow: auto;
}
Version data entries
62 entries across 62 versions & 1 rubygems