carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 3.75 kB
JavaScript
import e,{css as t}from"styled-components";import{padding as i,margin as o}from"styled-system";import n from"../../../icon/icon.component.js";import a from"../../../../style/utils/add-focus-styling.js";const s=(e,t)=>e&&t?"180deg":"0deg",r=t(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);box-sizing:border-box;color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:var(--spacing100) var(--spacing200);width:100%;",' &:hover{background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);text-decoration:none;}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],i,a(!0)),c=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-ffae1a5b-0"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>s(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:o})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],s(e,i),o?0:"0.2s"))),l=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-ffae1a5b-1"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}"]),d=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenuWrapper",componentId:"sc-ffae1a5b-2"})(["box-sizing:border-box;display:flex;justify-content:",";width:100%;",""],(({hasIcon:e,responsive:t})=>e&&t?"flex-end":"flex-start"),(({depth:e,responsive:i})=>1===e&&i&&t(["padding:0 0 0 16px;"]))),p=e.ul.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-ffae1a5b-3"})(["padding:0;",""],(({depth:e,hasIcon:i,responsive:o})=>t(["width:",";margin-left:var(--spacing400);"," li > a{font-weight:",";}"],e<2&&!i?"100%":"88%",o&&t(["margin-left:",";"],i||1===e?"var(--spacing200)":"0"),1===e?"var(--fontWeights400)":"var(--fontWeights500)"))),g=e.li.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuListItem",componentId:"sc-ffae1a5b-4"})(["list-style:none;"," padding:0;"],o),m=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-ffae1a5b-5"})([""," "," "," ",""],r,(({active:e,responsive:i})=>e&&!i&&t(["background-color:var(--colorsGray850);"])),(({depth:e,responsive:i})=>0===e&&i&&t(["color:var(--colorsUtilityYang080);cursor:default;"])),(({depth:e})=>e>=2&&t(['&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);[data-component="icon"]{color:var(--colorsUtilityYang080);}}']))),v=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionLink",componentId:"sc-ffae1a5b-6"})([""," min-height:40px;text-decoration:none;",""],r,(({depth:e,responsive:i})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],i&&e>=3&&t(["margin-left:var(--spacing300);"])))),f=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuActionButton",componentId:"sc-ffae1a5b-7"})([""," min-height:40px;text-decoration:none;",""],r,(({depth:e,responsive:i})=>e>=2&&t(["&&{color:var(--colorsUtilityYang080);font-weight:var(--fontWeights400);","}"],i&&e>=3&&t(["margin-left:var(--spacing300);"]))));export{c as StyledIcon,l as StyledMenuItemContent,p as StyledNestedMenu,d as StyledNestedMenuWrapper,f as StyledResponsiveMenuActionButton,v as StyledResponsiveMenuActionLink,m as StyledResponsiveMenuItem,g as StyledResponsiveMenuListItem};