UNPKG

formstone

Version:

Library of modular front end components.

488 lines (364 loc) 9.03 kB
@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 !important; height: 1px !important; position: absolute !important; border-width: 0 !important; clip: rect(0, 0, 0, 0) !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; white-space: nowrap !important; } // &-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); } }