@chayns-components/gallery
Version:
A set of beautiful React components for developing your own applications with chayns.
55 lines • 1.23 kB
JavaScript
import { motion } from 'motion/react';
import styled from 'styled-components';
export const StyledMotionMediaItem = styled(motion.div)`
display: flex;
width: 100%;
height: 100%;
`;
export const StyledMediaItemVideoWrapper = styled.div`
display: flex;
width: 100%;
height: 100%;
aspect-ratio: ${({
$ratio
}) => $ratio};
`;
export const StyledMediaItemImageWrapper = styled.div`
display: flex;
width: 100%;
height: 100%;
aspect-ratio: ${({
$ratio
}) => $ratio};
`;
export const StyledMediaItemImage = styled.img`
background-color: ${({
theme
}) => theme['101']};
box-shadow: 0 0 0 1px rgba(${({
theme
}) => theme['009-rgb']}, 0.08)
inset;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
`;
export const StyledMediaItemVideo = styled.video`
background-color: ${({
theme
}) => theme['101']};
box-shadow: 0 0 0 1px rgba(${({
theme
}) => theme['009-rgb']}, 0.08)
inset;
width: 100%;
object-fit: cover;
`;
export const StyledMediaItemPlayIcon = styled.div`
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`;
//# sourceMappingURL=MediaItem.styles.js.map