carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 6.95 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),n=require("styled-system"),t=require("../menu.config.js"),e=require("../../link/link.component.js"),a=require("../../button/button.style.js"),r=require("../../icon-button/icon-button.style.js"),c=require("../../icon/icon.style.js"),i=require("../../link/link.style.js"),s=require("../../../style/themes/apply-base-theme.js"),u=require("../../../style/utils/add-focus-styling.js");function d(o){return o&&o.__esModule?o:{default:o}}const l=o=>{var n,t;const{paddingRight:e}=o,a=null===(t=String(e))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===e||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(e){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:e};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:e};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:e};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:e};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:e};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:e};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:e};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:e};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},p=d(o).default.a.attrs(s.default).attrs({as:e.Link}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-919c9426-0"})([""," &&&{> a,> button{","}}"],(({menuType:e,selected:s,hasSubmenu:d,isOpen:p,menuItemVariant:g,showDropdownArrow:b,href:h,clickToOpen:f,maxWidth:m,inFullscreenView:v,overrideColor:x,asPassiveItem:k,asDiv:y,hasFocusableChild:S,hasInput:w,inSubmenu:C})=>o.css(["display:flex;align-items:center;font-size:14px;font-weight:500;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;}a:focus,button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],u.default(!0),i.StyledContent,!x&&o.css(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],t.default[e].background),x&&o.css(["&&&&{background-color:",";}"],"alternate"===g?t.default[e].alternate:t.default[e].submenuItemBackground),!v&&o.css(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],C?"":"justify-content: center;",t.default[e].background,t.default[e].color,m&&o.css(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),a.default,!y&&!k&&o.css(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&o.css(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!v&&o.css(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],a.default,i.StyledContent,a.default),r.default,t.default[e].color),!S&&!v&&o.css(["",""],d||m?o.css(["> a,> button{padding:11px 16px ",";}"],d&&m?"12px":"10px"):o.css(["> a,> button{padding:11px 16px;}"])),i.StyledLink,i.StyledLink,v&&o.css(["height:auto;white-space:normal;","{top:-2px;}"],c.default),i.StyledLink,i.StyledLink,i.StyledLink,!w&&`color: ${t.default[e].color};`,!v&&o.css(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c.default,c.default),s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],t.default[e].selected,t.default[e].selected),"alternate"===g&&!v&&o.css(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],t.default[e].alternate,t.default[e].alternate,!w&&o.css(["&&& a:hover,&&& button:hover{background-color:",";}"],t.default[e].alternateHover)),p&&o.css(["a,button{background-color:",";color:",";}"],t.default[e].submenuItemBackground,t.default[e].color),d&&o.css(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],t.default[e].submenuBackground,t.default[e].submenuBackground,t.default[e].color,t.default[e].color,f&&p&&o.css(["background-color:",";"],t.default[e].submenuOpenedBackground),t.default[e].submenuOpenedBackground,!(h||f)&&o.css(["cursor:default;background-color:",";color:",";"],t.default[e].submenuItemBackground,t.default[e].color),t.default[e].color,s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],t.default[e].submenuSelected,t.default[e].submenuSelected),b&&o.css(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],r.default,(o=>l(n.padding(o)).padding),(o=>l(n.padding(o)).iconSpacing))),v&&o.css([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&o.css(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],t.default[e].title,t.default[e].title),!k&&o.css(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!w&&o.css(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),n.padding);exports.default=p;