@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.17 kB
JavaScript
import{styled as e,Box as t}from"@mui/material";const o={sm:120,lg:200},a=e(t,{shouldForwardProp:e=>"loading"!==e&&"disabled"!==e})(({theme:e,size:t,loading:a,disabled:s})=>({position:"relative",cursor:a?"auto":s?"default":"pointer",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",color:e.custom.palette.icon.disabled,borderRadius:e.r.lg,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:s?e.custom.palette.interaction.disabled:e.custom.palette.surface.sunken,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},...!s&&{"&:hover":{"&:before":{opacity:1,backgroundColor:e.custom.palette.interaction.hover},".AssetItem__Menu":{opacity:1}},"&:active":{"&:before":{backgroundColor:e.custom.palette.interaction.press}}},width:o[t]}));export{a as AssetItemContainer};