@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.12 kB
JavaScript
;var e=require("@mui/material");const t={sm:120,lg:200},o=e.styled(e.Box,{shouldForwardProp:e=>"loading"!=e})(({theme:e,size:o,loading:s})=>({position:"relative",cursor:s?"auto":"pointer",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",color:e.custom.palette.icon.disabled,borderRadius:e.spacing(e.custom.radius.sm),backgroundColor:e.custom.palette.surface.sunken,boxShadow:`${e.custom.elevation.raised}`,overflow:"hidden","&:before":{content:'""',transition:"all 0.3s ease",position:"absolute",inset:0,backgroundColor:e.custom.palette.surface.sunken,opacity:0,zIndex:1},"& .cover-type-wrapper":{position:"absolute",bottom:e.spacing(e.custom.margin.sm),left:"50%",transform:"translateX(-50%)"},"& .asset-item-menu":{position:"absolute",top:e.spacing(e.custom.margin.xs),right:e.spacing(e.custom.margin.xs)},"& .overlay-item":{zIndex:2},"&:hover":{"&:before":{opacity:1,backgroundColor:e.custom.palette.interaction.hover},".AssetItem__Menu":{opacity:1}},"&:active":{"&:before":{backgroundColor:e.custom.palette.interaction.press}},width:t[o]}));exports.AssetItemContainer=o;