carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 1.91 kB
JavaScript
import r,{css as o}from"styled-components";import t from"../../../../button/button.component.js";const i=r=>{switch(r){case"small":return"8px";case"large":return"16px";default:return"12px"}},e=r.div.withConfig({displayName:"toolbar.style__StyledToolbarWrapper",componentId:"sc-524b490c-0"})(["display:flex;flex-direction:row;gap:8px;background-color:var(--colorsActionMajorYang100);padding:",";border-top-left-radius:",";border-top-right-radius:",";border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:1px solid var(--colorsUtilityMajor200);align-items:center;flex-wrap:wrap;"],(r=>i(r.size)),(({hasHeader:r})=>r?"0":"var(--borderRadius100)"),(({hasHeader:r})=>r?"0":"var(--borderRadius100)")),a=r.div.withConfig({displayName:"toolbar.style__StyledToolbar",componentId:"sc-524b490c-1"})(["display:flex;flex-direction:row;gap:8px;background-color:var(--colorsActionMajorYang100);align-items:center;flex-wrap:wrap;"]),n=r.div.withConfig({displayName:"toolbar.style__CommandButtons",componentId:"sc-524b490c-2"})(["display:flex;flex-direction:row;gap:8px;"]),l=r(t).withConfig({displayName:"toolbar.style__FormattingButton",componentId:"sc-524b490c-3"})(["display:inline-flex;justify-content:center;align-items:center;padding:6px;border-radius:var(--borderRadius100);border:medium;cursor:pointer;&:hover{> span{color:var(--colorsUtilityYang100) !important;}}"," "," > span{","}"],(({size:r})=>{switch(r){case"large":return o(["min-width:48px;min-height:48px;"]);case"small":return o(["min-width:32px;min-height:32px;"]);default:return o(["min-width:40px;min-height:40px;"])}}),(({isActive:r})=>o(["background-color:",";"],r?"var(--colorsActionMajor600)":"transparent")),(({isActive:r})=>o(["color:"," !important;"],r?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin100) ")));export{n as CommandButtons,l as FormattingButton,a as StyledToolbar,e as StyledToolbarWrapper,i as getPaddingForSize};