carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 9.47 kB
JavaScript
import o,{css as r}from"styled-components";import t from"../../../icon/icon.style.js";import i from"../../../../__internal__/validations/validation-icon.style.js";const e=o.span.withConfig({displayName:"tab-title.style__StyledTitleContent",componentId:"sc-a4fb41f5-0"})(["outline:none;display:flex;align-items:flex-start;line-height:20px;margin:0;position:relative;",""],(({hasCustomLayout:o,error:t,warning:i,info:e,size:n,isTabSelected:a,hasSiblings:l,borders:d=!1,position:p="top",noLeftBorder:s,noRightBorder:c,hasHref:g,alternateStyling:b,align:x,validationRedesignOptIn:f})=>r(["text-align:",";"," "," "," "," "," "," "," "," "," "," "," "," ",""],x,"left"===p&&r(["display:flex;width:100%;justify-content:",";border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-top-right-radius:var(--borderRadius000);"],"right"===x?"flex-end":"flex-start"),"left"===p&&f&&r(["justify-content:space-between;"]),"top"===p&&r(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);"]),g&&r(['color:var(--colorsActionMinorYin090);display:block;text-decoration:none;[type="link"]{width:16px;margin-left:8px;height:16px;color:inherit;margin-top:-2px;}']),!g&&r(['[data-component="icon"]:not([color]){color:var(--colorsActionMinorYin065);}']),d&&r(["border-top:1px solid var(--colorsActionMinor100);border-left:1px solid var(--colorsActionMinor100);border-right:1px solid var(--colorsActionMinor100);"," "," ",""],"left"===p&&r(["border-bottom:1px solid var(--colorsActionMinor100);",""],!b&&"margin-right: -1px;"),s&&r(["border-left:none;",""],!c&&r(["border-right:1px solid var(--colorsActionMinor100);"])),c&&r(["border-right:none;"])),"large"===n&&"top"===p&&r(["padding:14px 24px;"," font-size:16px;"],d&&"padding-bottom: 9px;"),"large"===n&&"left"===p&&r(["font-size:16px;padding:14px 24px;"]),"default"===n&&r(["padding:10px 16px;",""],d&&"padding-bottom: 9px;"),(i||e)&&r(["outline:1px solid;outline-offset:-1px;z-index:",";"," "," "," "," &:hover{outline:1px solid;outline-offset:-1px;"," "," "," ","}"],f?1:2,e&&!i&&r(["outline-color:var(--colorsSemanticInfo500);"]),i&&r(["outline-color:var(--colorsSemanticCaution500);"]),"top"===p&&r(["border-bottom-color:transparent;"]),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px"),e&&!i&&r(["outline-color:var(--colorsSemanticInfo500);"]),i&&r(["outline-color:var(--colorsSemanticCaution500);"]),"top"===p&&r(["border-bottom-color:transparent;",""],o&&r(["padding-bottom:2px;"])),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px")),t&&r(["outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;z-index:",";"," "," &:hover{outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;"," ","}"],f?1:2,"top"===p&&r(["border-bottom-color:transparent;"]),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px"),"top"===p&&r(["border-bottom-color:transparent;",""],o&&r(["padding-bottom:2px;"])),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px")),l&&!o&&"top"===p&&r(["height:20px;"]),o&&r(["display:flex;"," ",""],"left"===p&&r(["padding:",";"," ",""],"large"===n?"2px":"0px",a&&r(["padding-right:0px;"]),(t||i||e)&&r(["padding-right:",";"],"large"===n?"26px":"18px")),"top"===p&&r(["padding:",";"," ",""],"large"===n?"2px":"0px",a&&r(["padding-bottom:0px;"]),(t||i||e)&&r(["padding-bottom:",";padding-right:",";&:hover{padding-bottom:",";}"],"large"===n?"4px":"2px","large"===n?"18px":"14px","large"===n?"4px":"2px")))))),n=r(["background-color:transparent;display:inline-block;border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);font-weight:500;position:relative;border:none;cursor:pointer;font-size:14px;padding:0px;text-decoration:none;outline-offset:0px;margin:0;",";"," a:visited{color:inherit;}",""],(({position:o})=>"top"===o&&"white-space: nowrap"),(({position:o})=>r(["",""],"left"===o&&r(["border-top-right-radius:var(--borderRadius000);"]))),(({size:o,position:i="top",borders:n=!1,noRightBorder:a,noLeftBorder:l,isTabSelected:d,alternateStyling:p,error:s,warning:c,info:g,isInSidebar:b,validationRedesignOptIn:x})=>r(["height:",";"," "," "," ",' &:focus{outline:4px solid black;top:-2px;z-index:6;> span[data-role="tab-title-content"]{outline:none;',"}",' ::before{content:"";position:absolute;top:0;left 0;bottom:0;right:',";outline:3px solid var(--colorsSemanticFocus500);",' outline-offset:-2px;z-index:5;}> [data-element="tab-selected-indicator"]{z-index:4;',"}}}"," "," & ","{{","}"],"large"===o?"var(--sizing600)":"var(--sizing500)","top"===i&&r(["",""],n&&!(a||l)&&r(["&:nth-of-type(n + 1):not(:first-of-type){margin-left:-1px;}&:first-child{margin-left:0;}"])),"left"===i&&r(["",""],n&&r(["&:nth-of-type(n + 1):not(:first-of-type){margin-top:-1px;}&:first-child{margin-top:0;}"])),!d&&r(["color:var(--colorsActionMinorYin090);"," &:hover{background:var(--colorsActionMinor100);"," color:var(--colorsActionMinorYin090);outline:none;}&:focus{color:var(--colorsActionMinorYin090);outline:none;}"],x&&r(["background:transparent;"]),x&&r(["background:var(--colorsUtilityMajor100);"])),d&&r(["color:var(--colorsActionMajorYin090);background-color:var(--colorsActionMajorYang100);"," &:hover{background-color:var(--colorsActionMajorYang100);border-bottom-color:",";color:var(--colorsActionMajorYin090);cursor:default;}"],(s||c||g)&&r(["padding-bottom:0px;"]),p?"var(--colorsActionMinor100)":"var(--colorsActionMajor500)"),"top"===i&&"top: 2px;",r("top"===i?["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]:["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),"top"===i?"0":"-1px",r("top"===i?["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]:["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),r("top"===i?["bottom:2px;left:2px;right:1px;"]:["bottom:2px;right:1px;"]),"left"===i&&r(["background-color:transparent;border-bottom:0px;"," "," display:flex;height:auto;margin-left:0px;&:first-child{margin-top:0;}&:hover{","}"," "," ",""],!b&&!s&&r(["--border-right-value:",";border-right:"," solid var(--colorsActionMinor100);"],x?"0px":"2px",p?"1px":"var(--border-right-value)"),!n&&r(["","{border-bottom:none;}"],e),p&&"border-right-color: var(--colorsActionMinor100)",(c||g)&&r(["border-right:none;"]),!d&&r(["border-right-color:var(--colorsActionMinor100);"]),d&&r([""," "," background-color:var(--colorsActionMajorYang100);&:hover{"," background-color:var(--colorsActionMajorYang100);","}&:focus{","}"],p&&r(["border-right-color:var(--colorsActionMinor100);"]),!p&&r(["border-right:none;padding-bottom:0px;","{"," border-right:none;}"],e,!(s||c||g)&&!x&&"margin-right: 2px;"),p&&"border-right-color: var(--colorsActionMinor100);",(s||c||g)&&"border-right-color: var(--colorsSemanticNegative500);",(s||c||g)&&"border-right-color: var(--colorsSemanticNegative500);")),p&&r(["&:focus{background-color:var(--colorsActionMinor200);}&:hover{background-color:",";}",""],d?"var(--colorsActionMinor200)":"var(--colorsActionMinor250)",d&&r(["background-color:var(--colorsActionMinor200);"])),t,x?"margin-top: 10px;":"margin-top: 2px;"))),a=o.button.withConfig({displayName:"tab-title.style__StyledTabTitleButton",componentId:"sc-a4fb41f5-1"})(["",""],n),l=o.a.withConfig({displayName:"tab-title.style__StyledTabTitleLink",componentId:"sc-a4fb41f5-2"})(["",""],n),d=o.div.withConfig({displayName:"tab-title.style__StyledLayoutWrapper",componentId:"sc-a4fb41f5-3"})(["",""],(({hasCustomLayout:o,titlePosition:e="before",hasCustomSibling:n,validationRedesignOptIn:a})=>r([""," ",""],o&&r(["flex-grow:2;"]),!o&&r(["display:inline-flex;position:relative;top:-1px;"," "," ","{height:20px;}","{z-index:10;","{height:",";left:-2px;}}"],n&&r(["left:4px;"]),!n&&r(["",""],"before"===e?"left: 8px;":"right: 8px;"),t,i,t,a?"0px":"16px")))),p=o.div.withConfig({displayName:"tab-title.style__StyledVerticalIndicator",componentId:"sc-a4fb41f5-4"})(["position:absolute;top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--colorsActionMinor100);width:2px;z-index:1;"]),s=o.div.withConfig({displayName:"tab-title.style__StyledSelectedIndicator",componentId:"sc-a4fb41f5-5"})(["position:absolute;z-index:1;"," "," &:focus{bottom:3px;left:3px;right:3px;}"],(o=>r(["",""],o&&r(["z-index:2;"]))),(({position:o="top",warning:t,error:i})=>r(["--selected-indicator-color:var(--colorsActionMajor500);"," "," "," ",""],t&&r(["--selected-indicator-color:var(--colorsSemanticCaution500);"]),i&&r(["--selected-indicator-color:var(--colorsSemanticNegative500);"]),"top"===o&&r(["bottom:-1px;left:0px;right:0px;box-shadow:inset 0px calc(-1 * var(--sizing050)) 0px var(--selected-indicator-color);height:var(--sizing050);"]),"left"===o&&r(["top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--selected-indicator-color);width:var(--sizing050);"]))));export{d as StyledLayoutWrapper,s as StyledSelectedIndicator,a as StyledTabTitleButton,l as StyledTabTitleLink,e as StyledTitleContent,p as StyledVerticalIndicator};