Sha256: 28180868c8edeab7ceade09c0e683f27d745738d6307000f6e5bb2b443556e1c
Contents?: true
Size: 1.74 KB
Versions: 4
Compression:
Stored size: 1.74 KB
Contents
@use "variables" as *;
.kpop--container {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
align-items: center;
z-index: 100;
pointer-events: none;
> * {
pointer-events: auto;
}
}
.kpop--frame {
--opening-animation: slide-in-up;
--closing-animation: slide-out-down;
position: relative;
display: grid;
overflow: hidden;
margin: 0 auto;
--min-width: #{$min-width};
--max-width: #{$max-width};
--min-height: #{$min-height};
--max-height: #{$max-height};
min-width: var(--min-width);
max-width: var(--max-width);
min-height: var(--min-height);
max-height: var(--max-height);
grid-template-columns: min(var(--max-width), max(var(--min-width), 100%));
grid-template-rows: min(var(--max-height), max(var(--min-height), 100%));
}
@media (max-width: $mobile-width), (max-height: $mobile-height) {
.kpop--frame {
--min-width: 100dvw;
--max-width: 100dvw;
--min-height: 30dvh;
--max-height: calc(100dvh - 1.5rem);
}
}
.scrim[data-scrim-open-value="false"] + .kpop--container .kpop--frame {
display: none;
}
.scrim[data-hide-animating]
+ .kpop--container
.kpop--frame[data-kpop--frame-open-value="true"] {
animation: var(--closing-animation);
animation-duration: $duration;
animation-fill-mode: forwards;
}
.scrim[data-show-animating] + .kpop--container .kpop--frame {
animation: var(--opening-animation);
animation-duration: $duration;
animation-fill-mode: forwards;
}
@keyframes slide-in-up {
0% {
transform: translateY(10%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
@keyframes slide-out-down {
0% {
transform: translateY(0%);
opacity: 1;
}
100% {
transform: translateY(10%);
opacity: 0;
}
}
Version data entries
4 entries across 4 versions & 1 rubygems