carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.46 kB
JavaScript
import o,{css as i}from"styled-components";import e from"../../button/button.component.js";import t from"../../../style/utils/add-focus-styling.js";const n=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledBackdrop",componentId:"sc-fef5633f-0"})(["position:fixed;inset:0;"]),a=o.div.withConfig({displayName:"responsive-vertical-menu.style__ModalContainer",componentId:"sc-fef5633f-1"})(["position:fixed;top:0;",""],(({width:o})=>i(["width:",";"],o))),r=o(e).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-fef5633f-2"})(["border-radius:0;background-color:var( ",' );[data-component="icon"]{color:var(--colorsUtilityYang100);}&:focus{appearance:none;-webkit-appearance:none;-webkit-box-shadow:',";box-shadow:",";border:1px solid black;outline:transparent 3px solid;}"],(({active:o})=>o?"--colorsActionMinorGray700":"--colorsUtilityYin100"),t(!0),t(!0)),s=o(e).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-fef5633f-3"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),l=o.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-fef5633f-4"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),d=o.ul.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-fef5633f-5"})(["margin:0;padding:0;align-items:stretch;background-color:var(--colorsUtilityYin100);box-sizing:border-box;display:flex;flex-direction:column;height:",";justify-content:flex-start;overflow-y:auto;padding-bottom:var(--spacing100);",";padding-top:var(--spacing100);position:fixed;width:",";max-width:375px;z-index:1000;border-right:",";"," "," ",""],(({height:o})=>o||"100%"),(({responsive:o})=>!o&&i(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({width:o})=>o||"100%"),(({childOpen:o,menu:i})=>"secondary"===i||!o&&"primary"===i?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({top:o})=>i(["top:",";max-height:calc(100% - ",");"],o,"auto"===o?"40px":o)),(({childOpen:o})=>o&&i(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:e,menu:t})=>"secondary"===t&&i(["left:",";height:",";"],e,o)));export{a as ModalContainer,n as StyledBackdrop,r as StyledButton,s as StyledCloseButton,l as StyledGlobalVerticalMenuWrapper,d as StyledResponsiveMenu};