@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.51 kB
JavaScript
import{styled as o,Box as e}from"@mui/material";const t=o(e,{shouldForwardProp:o=>!["isActive","isHovered"].includes(o)})(({theme:o,isActive:e,isHovered:t})=>({backgroundColor:o.custom.palette.surface.default,border:"1px solid transparent",borderRadius:o.spacing(o.custom.radius.md),display:"flex",flexDirection:"column",gap:o.spacing(o.custom.padding.sm),overflow:"hidden",padding:o.spacing(o.custom.padding.md),position:"relative",transition:"all 200ms ease","&::before":{pointerEvents:"none",backgroundColor:"transparent",content:'""',inset:0,position:"absolute",transition:"all 200ms ease",zIndex:1},"&:focus:before":{backgroundColor:o.custom.palette.interaction.hover},"&:active:before":{backgroundColor:o.custom.palette.interaction.press},"&:hover":{boxShadow:o.custom.elevation.float,cursor:"pointer",borderColor:o.custom.palette.interaction.hover,"&:before":{backgroundColor:o.custom.palette.interaction.hover}},...t&&{boxShadow:o.custom.elevation.float,cursor:"pointer",borderColor:o.custom.palette.interaction.hover,"&:before":{backgroundColor:o.custom.palette.interaction.hover}},...e&&{backgroundColor:o.custom.palette.blue[0],borderColor:o.custom.palette.blue[300],boxShadow:o.custom.elevation.raised,"&:hover":{borderColor:o.custom.palette.blue[300],boxShadow:o.custom.elevation.float,cursor:"pointer","&:before":{backgroundColor:o.custom.palette.interaction.hover}}}})),r=o(e)(({theme:o})=>({display:"flex",gap:o.spacing(o.custom.padding.xs)}));export{r as CommentActions,t as CommentCardContainer};