UNPKG

formstone

Version:

Library of modular front end components.

111 lines (82 loc) 1.55 kB
@fs-background-duration: 0.15s; .fs-background { --fs-background-duration: @fs-background-duration; @media (prefers-reduced-motion) { & { --fs-background-duration: 0s; } } // position: relative; &, &-container, &-media { transition: none; } // Container &-container { display: grid; grid-template-areas: 'fs-background-stack'; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; } // Media &-media { grid-area: fs-background-stack; min-height: 0; min-width: 0; z-index: 1; background-position: center; background-size: cover; opacity: 0; transition: opacity var(--fs-background-duration) linear; img, video, iframe { width: 100%; height: 100%; display: block; -webkit-user-drag: none; } video { object-fit: cover; object-position: center; } iframe { z-index: 0; } } &-image, &-video { width: 100%; height: 100%; } &-image {} &-video {} &-embed { aspect-ratio: 16 / 9; align-self: center; justify-self: center; // min-height: calc(100% + 120px); // Hiding youtube info requires extra zoom min-height: 100%; min-width: 100%; &:after { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ''; } } }