formstone
Version:
Library of modular front end components.
488 lines (364 loc) • 9.03 kB
text/less
@fs-lightbox-mobile-max-width: 739px;
@fs-lightbox-duration: 0.25s;
@fs-lightbox-timing: linear;
@fs-lightbox-overlay-bg: fade(#000, 90);
@fs-lightbox-loading-color: #fff;
@fs-lightbox-loading-size: 40px;
@fs-lightbox-loading-spread: 5px;
@fs-lightbox-loading-duration: 0.75s;
@fs-lightbox-item-duration: 0.25s;
@fs-lightbox-item-timing: ease;
@fs-lightbox-details-bg: fade(#000, 60);
@fs-lightbox-details-color: #fff;
@fs-lightbox-details-font: 16px / 1.4 sans-serif;
@fs-lightbox-details-padding: calc(env(safe-area-inset-top, 0px) + 40px) calc(env(safe-area-inset-top, 0px) + 60px) calc(env(safe-area-inset-bottom, 0px) + 40px);
@fs-lightbox-details-gap: 10px;
@fs-lightbox-button-background: fade(#000, 80);
@fs-lightbox-button-color: #fff;
.fs-lightbox {
--fs-lightbox-duration: @fs-lightbox-duration;
--fs-lightbox-timing: @fs-lightbox-timing;
--fs-lightbox-overlay-bg: @fs-lightbox-overlay-bg;
--fs-lightbox-loading-color: @fs-lightbox-loading-color;
--fs-lightbox-loading-size: @fs-lightbox-loading-size;
--fs-lightbox-loading-spread: @fs-lightbox-loading-spread;
--fs-lightbox-loading-duration: @fs-lightbox-loading-duration;
--fs-lightbox-item-duration: @fs-lightbox-item-duration;
--fs-lightbox-item-timing: @fs-lightbox-item-timing;
--fs-lightbox-details-bg: @fs-lightbox-details-bg;
--fs-lightbox-details-color: @fs-lightbox-details-color;
--fs-lightbox-details-font: @fs-lightbox-details-font;
--fs-lightbox-details-padding: @fs-lightbox-details-padding;
--fs-lightbox-details-gap: @fs-lightbox-details-gap;
--fs-lightbox-button-background: @fs-lightbox-button-background;
--fs-lightbox-button-color: @fs-lightbox-button-color;
@media (prefers-reduced-motion) {
& {
--fs-lightbox-duration: 0s;
--fs-lightbox-loading-duration: 0s;
--fs-lightbox-item-duration: 0s;
}
}
//
height: 100vh;
width: 100vw;
z-index: 999;
opacity: 0;
transition: opacity var(--fs-lightbox-duration) var(--fs-lightbox-timing);
&,
& * {
box-sizing: border-box;
}
//
&-open {
opacity: 1;
}
//
&,
&-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&-overlay {
z-index: 0;
background: var(--fs-lightbox-overlay-bg);
}
//
&-sr {
width: 1px ;
height: 1px ;
position: absolute ;
border-width: 0 ;
clip: rect(0, 0, 0, 0) ;
margin: -1px ;
overflow: hidden ;
padding: 0 ;
white-space: nowrap ;
}
//
&-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
user-select: none;
}
&-container&-touching {
cursor: grabbing;
}
//
&-item {
position: absolute;
top: env(safe-area-inset-top, 0px);
right: env(safe-area-inset-right, 0px);
bottom: env(safe-area-inset-bottom, 0px);
left: env(safe-area-inset-left, 0px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
transition:
opacity var(--fs-lightbox-item-duration) var(--fs-lightbox-item-timing),
transform var(--fs-lightbox-item-duration) var(--fs-lightbox-item-timing);
transform: none;
&_previous {
transform: translate(-100%, 0);
}
&_next {
transform: translate(100%, 0);
}
}
&-item&-active&-loaded {
opacity: 1;
}
//
&-rtl &-item {
&_previous {
transform: translate(100%, 0);
}
&_next {
transform: translate(-100%, 0);
}
}
//
// &-item&-zoomed img {
// max-height: none;
// max-width: none;
// }
&-container&-touching &-item {
transition: none;
}
&-wrap {
max-height: 100%;
max-width: 100%;
display: flex;
justify-content: center;
position: relative;
}
//
&-media {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&-media_video {
max-width: 1200px;
flex-grow: 1;
}
&-media_image {
img {
height: auto;
width: auto;
min-width: 200px;
max-height: 100%;
max-width: 100%;
border: none;
display: block;
margin: auto;
user-select: none;
touch-action: none;
}
}
&-video {
position: relative;
width: 100%;
iframe {
aspect-ratio: 16 / 9;
width: 100%;
background: #000;
}
}
&-iframe {
iframe {
height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
background: #000;
}
}
&-iframe &-close {
// background: var(--fs-lightbox-button-background);
// color: var(--fs-lightbox-button-color);
}
&-element {
max-width: 100%;
max-height: 100%;
overflow: auto;
}
//
&-details {
display: grid;
grid-template-columns: 1fr;
gap: var(--fs-lightbox-details-gap);
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background: linear-gradient(to bottom, transparent, var(--fs-lightbox-details-bg));
color: var(--fs-lightbox-details-color);
font: var(--fs-lightbox-details-font);
opacity: 0;
padding: var(--fs-lightbox-details-padding);
transition: opacity 0.001s var(--fs-lightbox-item-timing) 0s;
pointer-events: none;
* {
pointer-events: all;
}
}
&-item&-active &-details {
opacity: 1;
transition-delay: var(--fs-lightbox-item-duration);
transition-duration: var(--fs-lightbox-item-duration);
}
&-container&-touching &-item&-active &-details {
opacity: 0;
transition-delay: 0.001s;
transition-duration: 0s;
}
//
&-close {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
position: absolute;
top: env(safe-area-inset-top, 0px);
right: env(safe-area-inset-right, 0px);
z-index: 2;
appearance: none;
background: var(--fs-lightbox-button-background);
border: none;
color: var(--fs-lightbox-button-color);
cursor: pointer;
padding: 0;
svg {
width: 30px;
}
}
//
&:not(&-gallery) &-control {
display: none;
}
&-control {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
position: absolute;
top: env(safe-area-inset-top, 0px);
bottom: env(safe-area-inset-bottom, 0px);
z-index: 2;
appearance: none;
background: var(--fs-lightbox-button-background);
border: none;
color: var(--fs-lightbox-button-color);
margin: auto;
padding: 0;
opacity: 0.5;
transition: opacity var(--fs-lightbox-duration) var(--fs-lightbox-timing);
@media screen and (max-width: @fs-lightbox-mobile-max-width) {
top: auto;
}
&_previous {
left: 0;
}
&_next {
right: 0;
}
svg {
width: 28px;
}
}
//
&-rtl &-control {
svg {
transform: scale(-1);
}
&_previous {
left: unset;
right: 0;
}
&_next {
right: unset;
left: 0;
}
}
//
&-control:not([disabled]) {
cursor: pointer;
opacity: 1;
}
//
// &-zoom {
// display: flex;
// align-items: center;
// justify-content: center;
// height: 40px;
// width: 40px;
// position: absolute;
// bottom: env(safe-area-inset-bottom, 0px);
// right: env(safe-area-inset-right, 0px);
// z-index: 2;
// appearance: none;
// background: var(--fs-lightbox-button-background);
// border: none;
// color: var(--fs-lightbox-button-color);
// display: none;
// margin: auto;
// padding: 0;
// // opacity: 0.5;
// // transition: opacity var(--fs-lightbox-duration) var(--fs-lightbox-timing);
// &_in {
// right: calc(env(safe-area-inset-right, 0px) + 40px);
// display: block;
// }
// &_out {
// display: block;
// }
// svg {
// width: 28px;
// }
// }
//
&-loading {
display: flex;
justify-content: center;
align-items: center;
height: var(--fs-lightbox-loading-size);
width: var(--fs-lightbox-loading-size);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: fs-lightbox-loading-spin var(--fs-lightbox-loading-duration) linear infinite;
border: var(--fs-lightbox-loading-spread) solid transparent;
border-top-color: var(--fs-lightbox-loading-color);
border-radius: 100%;
margin: auto;
opacity: 0;
transition: opacity var(--fs-lightbox-duration) var(--fs-lightbox-timing);
}
&-loading&-visible {
opacity: 1;
}
}
@keyframes fs-lightbox-loading-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}