carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.54 kB
JavaScript
import e,{css as a}from"styled-components";import{margin as r}from"styled-system";import o from"../icon/icon.style.js";import t from"../button/button.component.js";import l from"../../style/themes/apply-base-theme.js";import{toColor as i}from"../../style/utils/color.js";const s=(e,a)=>"subtle"===e?`\n ${a?"var(--badge-inverse-bg-alt, #007FD9)":"var(--badge-bg-alt, #0071C3)"};\n `:`\n ${a?"var(--badge-inverse-bg-default, #F50059)":"var(--badge-bg-default, #DB004E)"};\n `,d=e.div.withConfig({displayName:"badge.style__StyledBadgeWrapper",componentId:"sc-8e1a3aa6-0"})([""," position:relative;display:inline-block;"],r),n=e.div.withConfig({displayName:"badge.style__StyledCounter",componentId:"sc-8e1a3aa6-1"})(["font-weight:500;font-size:13px;line-height:150%;"]),b=e.span.attrs(l).attrs((({onClick:e})=>({as:e?t:void 0}))).withConfig({displayName:"badge.style__StyledBadge",componentId:"sc-8e1a3aa6-2"})([""," box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--global-radius-container-circle,999px);border:solid var(--global-borderwidth-s,2px);",""],r,(({size:e,variant:r,inverse:t,hasChildren:l,customColor:d,theme:n,onClick:b})=>a(["",";background-color:",";border-color:",";color:",";"," "," ",""],(e=>{switch(e){case"small":return a(["width:var(--global-size-4-xs,8px);height:var(--global-size-4-xs,8px);"]);case"large":return a(["min-width:var(--global-size-2-xs,20px);height:var(--global-size-xs,24px);padding:0 var(--global-space-comp-2-xs,2px);"]);default:return a(["min-width:var(--global-size-3-xs,16px);height:var(--global-size-2-xs,20px);padding:0 var(--global-space-comp-2-xs,2px);"])}})(e),s(r,t),t?"var(--badge-inverse-border-default, #000)":"var(--badge-border-default, #FFF)",t?"var(--badge-inverse-label-default, #000)":"var(--badge-label-default, #FFF)",l&&a(["position:absolute;z-index:2;",";"],(e=>{switch(e){case"small":return a(["top:-3px;right:-2px;"]);case"large":return a(["top:-12px;right:-8px;"]);default:return a(["top:-10px;right:-6px;"])}})(e)),b&&a(["min-height:0;:hover,:focus{padding:0;border-color:",";background-color:",";","{margin:0;color:",";}}"],s(r,t),s(r,t),o,t?"var(--badge-inverse-label-default, #000)":"var(--badge-label-default, #FFF)"),d&&a(["background-color:var(--badge-border-default,#fff);border-color:",";color:",";",""],i(n,d),i(n,d),b&&a([":hover,:focus{background-color:",";border-color:",";}"],i(n,d),i(n,d))))));export{b as StyledBadge,d as StyledBadgeWrapper,n as StyledCounter};