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