@chayns-components/gallery
Version:
A set of beautiful React components for developing your own applications with chayns.
62 lines (61 loc) • 1.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledMotionMediaItem = exports.StyledMediaItemVideoWrapper = exports.StyledMediaItemVideo = exports.StyledMediaItemPlayIcon = exports.StyledMediaItemImageWrapper = exports.StyledMediaItemImage = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const StyledMotionMediaItem = exports.StyledMotionMediaItem = (0, _styledComponents.default)(_react.motion.div)`
display: flex;
width: 100%;
height: 100%;
`;
const StyledMediaItemVideoWrapper = exports.StyledMediaItemVideoWrapper = _styledComponents.default.div`
display: flex;
width: 100%;
height: 100%;
aspect-ratio: ${({
$ratio
}) => $ratio};
`;
const StyledMediaItemImageWrapper = exports.StyledMediaItemImageWrapper = _styledComponents.default.div`
display: flex;
width: 100%;
height: 100%;
aspect-ratio: ${({
$ratio
}) => $ratio};
`;
const StyledMediaItemImage = exports.StyledMediaItemImage = _styledComponents.default.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;
`;
const StyledMediaItemVideo = exports.StyledMediaItemVideo = _styledComponents.default.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;
`;
const StyledMediaItemPlayIcon = exports.StyledMediaItemPlayIcon = _styledComponents.default.div`
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`;
//# sourceMappingURL=MediaItem.styles.js.map