carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.39 kB
JavaScript
import t,{css as e}from"styled-components";import i from"../../style/utils/add-focus-styling.js";import o from"../../style/themes/apply-base-theme.js";const a=t.div.withConfig({displayName:"drawer.style__StyledSidebarTitle",componentId:"sc-4497ce5f-0"})(["padding:var(--spacing300);",""],(({stickyHeader:t})=>t&&e(["position:sticky;top:0;border-bottom:var(--sizing010) solid #a0a0a0;"]))),r=t.div.withConfig({displayName:"drawer.style__StyledSidebarFooter",componentId:"sc-4497ce5f-1"})(["padding:var(--spacing300);background-color:var(--colorsUtilityYang100);",""],(({stickyFooter:t})=>t&&e(["position:sticky;bottom:0;"]))),n=t.div.withConfig({displayName:"drawer.style__StyledDrawerSidebar",componentId:"sc-4497ce5f-2"})(["display:flex;flex-direction:column;flex:1 1 0%;overflow-y:auto;outline:none;"]),d=t.aside.withConfig({displayName:"drawer.style__StyledDrawerContent",componentId:"sc-4497ce5f-3"})(["",";"],(({animationDuration:t,backgroundColor:i,expandedWidth:o,isExpanded:d,showControls:s})=>e(['flex-direction:column;height:auto;position:relative;overflow:auto;display:flex;min-width:"288px";width:',';max-width:"760px";'," background-color:",";",""],o,!d&&e(["display:none;width:0;min-width:0;"]),i||"var(--colorsUtilityYang100)",s&&e(["display:flex;overflow:hidden;min-height:40px;transition:all "," ease-in-out;",",",",","{transition:all "," ease-in-out;white-space:nowrap;overflow:hidden;opacity:1;}",""],t,n,a,r,t,!d&&e(["min-width:var(--sizing500);width:var(--sizing500);",",",",","{opacity:0;}"],n,a,r))))),s=t.button.attrs(o).attrs({type:"button"}).withConfig({displayName:"drawer.style__StyledSidebarToggleButton",componentId:"sc-4497ce5f-4"})(["",""],(({isExpanded:t})=>e(["position:absolute;top:var(--spacing300);right:8px;padding:var(--spacing100);width:var(--spacing300);height:var(--spacing300);display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;z-index:1;border-radius:var(--borderRadius050);transform:rotate(0deg);&:focus{","}&:hover{cursor:pointer;}",""],i(),t&&e(["transform:rotate(180deg);"])))),l=t.div.withConfig({displayName:"drawer.style__StyledDrawerWrapper",componentId:"sc-4497ce5f-5"})(["display:flex;",""],(({height:t})=>e(["height:",";"],t)));export{d as StyledDrawerContent,n as StyledDrawerSidebar,l as StyledDrawerWrapper,r as StyledSidebarFooter,a as StyledSidebarTitle,s as StyledSidebarToggleButton};