carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.27 kB
JavaScript
import e,{css as t}from"styled-components";import{margin as o}from"styled-system";import a from"../../style/themes/apply-base-theme.js";const s={error:"#CD384B",info:"#0060A7",success:"#00811F ",warning:"#D64309",neutral:"var(--colorsSemanticNeutral500)",ai:"var(--colorsUtilityYin100)",callout:"var(--colorsUtilityYin100)"},i={error:"#FDECEB",info:"#EAEEF6",success:"#E9F2E8 ",warning:"#FFEDE5",ai:"#EFEFEF",callout:"#E6FAE2"},n=e.div.attrs(a).withConfig({displayName:"message.style__MessageStyle",componentId:"sc-2430d97-0"})(["position:relative;display:flex;border-radius:var(--borderRadius100);overflow:hidden;border:1px solid ",";background-color:var(--colorsUtilityYang100);max-width:720px;:focus{outline:none;}"," "," "," ",""],(({variant:e})=>s[e]),(({isSubtle:e,variant:o})=>e&&t(["border:none;background-color:",";"],i[o])),(({transparent:e})=>e&&t(["border:none;background:transparent;"])),(({width:e})=>e&&`width: ${e};`),o),r=e.div.withConfig({displayName:"message.style__MessageWrapper",componentId:"sc-2430d97-1"})(["display:flex;justify-content:space-between;align-items:flex-start;width:100%;"]),l=e.div.withConfig({displayName:"message.style__MessageContent",componentId:"sc-2430d97-2"})(["display:flex;box-sizing:border-box;width:100%;height:100%;padding:12px;",""],(({size:e,isSubtle:o})=>t([""," ",""],"large"===e&&t(["padding:20px;"]),o&&t(["gap:",";"],"large"===e?"16px":"8px")))),d=e.div.withConfig({displayName:"message.style__MessageContentWrapper",componentId:"sc-2430d97-3"})(["display:flex;flex-direction:column;justify-content:center;width:100%;gap:2px;font-size:14px;",""],(({size:e})=>"large"===e&&t(["gap:4px;font-size:16px;"]))),p=e.div.withConfig({displayName:"message.style__TypeIconStyle",componentId:"sc-2430d97-4"})(["",""],(({transparent:e,isSubtle:o,variant:a})=>t(["display:flex;background-color:",";"," span{width:20px;height:20px;&:before{color:var(--colorsUtilityYang100);}}"," ",""],s[a],!o&&t(["justify-content:center;align-items:center;width:32px;"]),o&&t(["padding-top:2px;background-color:transparent;span{&:before{color:",";}}"],s[a]),e&&t(["background-color:transparent;span{&:before{color:",";}}"],s[a]))));export{l as MessageContent,d as MessageContentWrapper,n as MessageStyle,r as MessageWrapper,p as TypeIconStyle};