carbon-react/lib/components/tabs/__next__/tabs.style.js

A library of reusable React components for easily building user interfaces.

"use strict";var t=require("styled-components"),e=require("../../../style/utils/add-focus-styling.js");function o(t){return t&&t.__esModule?t:{default:t}}var i=o(t);const d={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},r=i.default.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-8e199877-0"})(["padding:0 6px;"]),a=i.default.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-8e199877-1"})(["display:flex;"," width:100%;height:fit-content;white-space:nowrap;padding:6px;overflow-x:hidden;"],(({orientation:e})=>t.css(["flex-direction:",";",":8px;"],"vertical"===e?"column":"row","horizontal"===e?"margin-bottom":"margin-right"))),n=i.default.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-8e199877-2"})(["display:flex;z-index:6;"]),p=i.default.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-8e199877-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),s=i.default.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-8e199877-4"})(["height:",";width:",";border-radius:0px;border-top-right-radius:8px;border-top-left-radius:8px;border-color:#8b8b8bff;background:white;border:none;border-bottom:2px solid #8b8b8bff;top:6px;position:relative;"],(({size:t})=>"medium"===t?"40px":"48px"),(({size:t})=>"medium"===t?"40px":"48px")),l=i.default.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-8e199877-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({size:t})=>"medium"===t?"40px":"48px"),(({size:t})=>"medium"===t?"40px":"48px")),b=i.default.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-8e199877-6"})(["background-color:transparent;border:none;border-bottom:2px solid #8b8b8bff;border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:8px;color:var(--colorsYin090);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{align-items:center;display:flex;gap:8px;","}:hover{background-color:#00000010;cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({activeTab:e,size:o})=>e&&"large"===o&&t.css(["margin-top:-4px;"])),(({size:e})=>t.css(["font-size:","px;height:","px;padding:","px ","px;"],d[e].fontSize,d[e].height,d[e].paddingY,d[e].paddingX)),(({activeTab:e,error:o,info:i,orientation:r,size:a,warning:n})=>e&&"horizontal"===r&&t.css(["background-color:white;border:2px solid #8b8b8bff;border-bottom:none;padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:2px;min-width:24px;}"],d[a].paddingY-4,d[a].paddingX-2,d[a].paddingY,d[a].paddingX-2,(()=>o?"#db004e":n?"#d64309":i?"#0060a7ff":"black"))),(({activeTab:e,error:o,info:i,orientation:r,size:a,warning:n})=>"vertical"===r?t.css(["border:none;border-right:2px solid #8b8b8bff;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:0px;max-width:","px;min-width:","px;",""],200,200,e&&t.css(["background-color:white;border:2px solid #8b8b8bff;border-right:none;padding-top:","px !important;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}.tab-title-content-wrapper{::after{content:"";position:absolute;right:0;top:20%;height:60%;width:4px;background-color:',";border-radius:2px;min-height:24px;}}"],"medium"===a?d.medium.paddingY-2:4,d[a].paddingX-2,"medium"===a?d.medium.paddingY-2:d.large.paddingY,d[a].paddingX-2,(()=>o?"#db004e":n?"#d64309":i?"#0060a7ff":"black"))):t.css([""])),e.default(),(({orientation:e})=>t.css(["border-top-left-radius:8px;border-top-right-radius:",";border-bottom-left-radius:",";border-bottom-right-radius:0px;"],"horizontal"===e?"8px":"0","horizontal"===e?"0px":"8px"))),c=i.default.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-8e199877-7"})(["display:flex;",""],(({orientation:e})=>t.css(["flex-direction:",";"],"horizontal"===e?"column":"row"))),g=i.default.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-8e199877-8"})(["",""],(({visible:e})=>t.css(["display:",";"],e?"block":"none")));exports.Spacer=p,exports.StyledScrollButton=s,exports.StyledScrollButtonPlaceholder=l,exports.StyledTab=b,exports.StyledTabList=a,exports.StyledTabListWrapper=n,exports.StyledTabPanel=r,exports.StyledTabProvider=g,exports.StyledTabs=c;