carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.72 kB
JavaScript
;var e=require("styled-components"),a=require("styled-system"),r=require("../icon/icon.style.js"),o=require("../button/button.component.js"),t=require("../../style/themes/apply-base-theme.js"),l=require("../../style/utils/color.js");function s(e){return e&&e.__esModule?e:{default:e}}var i=s(e);const d=(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 `,n=i.default.div.withConfig({displayName:"badge.style__StyledBadgeWrapper",componentId:"sc-8e1a3aa6-0"})([""," position:relative;display:inline-block;"],a.margin),c=i.default.div.withConfig({displayName:"badge.style__StyledCounter",componentId:"sc-8e1a3aa6-1"})(["font-weight:500;font-size:13px;line-height:150%;"]),g=i.default.span.attrs(t.default).attrs((({onClick:e})=>({as:e?o.default: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);",""],a.margin,(({size:a,variant:o,inverse:t,hasChildren:s,customColor:i,theme:n,onClick:c})=>e.css(["",";background-color:",";border-color:",";color:",";"," "," ",""],(a=>{switch(a){case"small":return e.css(["width:var(--global-size-4-xs,8px);height:var(--global-size-4-xs,8px);"]);case"large":return e.css(["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 e.css(["min-width:var(--global-size-3-xs,16px);height:var(--global-size-2-xs,20px);padding:0 var(--global-space-comp-2-xs,2px);"])}})(a),d(o,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)",s&&e.css(["position:absolute;z-index:2;",";"],(a=>{switch(a){case"small":return e.css(["top:-3px;right:-2px;"]);case"large":return e.css(["top:-12px;right:-8px;"]);default:return e.css(["top:-10px;right:-6px;"])}})(a)),c&&e.css(["min-height:0;:hover,:focus{padding:0;border-color:",";background-color:",";","{margin:0;color:",";}}"],d(o,t),d(o,t),r.default,t?"var(--badge-inverse-label-default, #000)":"var(--badge-label-default, #FFF)"),i&&e.css(["background-color:var(--badge-border-default,#fff);border-color:",";color:",";",""],l.toColor(n,i),l.toColor(n,i),c&&e.css([":hover,:focus{background-color:",";border-color:",";}"],l.toColor(n,i),l.toColor(n,i))))));exports.StyledBadge=g,exports.StyledBadgeWrapper=n,exports.StyledCounter=c;