carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.27 kB
JavaScript
import o,{css as i}from"styled-components";import{margin as t,space as n}from"styled-system";import r from"../icon/icon.component.js";import a from"../../style/themes/apply-base-theme.js";import e from"../../__internal__/validations/validation-icon.style.js";import s from"../../style/utils/add-focus-styling.js";const c=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionGroup",componentId:"sc-f1b48a4b-0"})(["",""],t),d=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionContainer",componentId:"sc-f1b48a4b-1"})([""," display:flex;",";justify-content:center;flex-direction:column;box-sizing:border-box;width:",";color:var(--colorsUtilityYin090);background-color:",";border:1px solid var(--colorsUtilityMajor100);"," "," ",""],n,(({variant:o})=>o&&i(["align-items:stretch;"])),(({width:o})=>o||"100%"),(({variant:o})=>"subtle"!==o?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajorTransparent)"),(({borders:o})=>"default"===o&&i(["border-left:none;border-right:none;"])),(({borders:o})=>"none"===o&&i(["border:none;"])),(({variant:o})=>"subtle"!==o&&i(["& + &{margin-top:-1px;border-top:1px solid var(--colorsUtilityMajor100);border-bottom:1px solid var(--colorsUtilityMajor100);}"]))),l=o.h3.withConfig({displayName:"accordion.style__StyledAccordionTitle",componentId:"sc-f1b48a4b-2"})(["font-size:",";font-weight:500;line-height:1;user-select:none;margin:0;"],(({size:o,variant:i})=>"small"===o||"subtle"===i?"var(--fontSizes200)":"var(--fontSizes400)")),p=o.span.withConfig({displayName:"accordion.style__StyledAccordionSubTitle",componentId:"sc-f1b48a4b-3"})(["margin-top:8px;"]),g=o(r).withConfig({displayName:"accordion.style__StyledAccordionIcon",componentId:"sc-f1b48a4b-4"})(["transition:transform 0.3s;transform:rotate(0deg);margin-right:",";"," color:var(--colorsActionMinor500);"],(({iconAlign:o})=>"left"===o?"var(--spacing200)":"var(--spacing000)"),(({isExpanded:o,iconAlign:i})=>o&&("right"===i?"transform: rotate(180deg);":"transform: rotate(-180deg);"))),m=o.div.withConfig({displayName:"accordion.style__StyledAccordionHeadingsContainer",componentId:"sc-f1b48a4b-5"})(["padding-right:var(--sizing300);",""],(({hasValidationIcon:o})=>i(["display:grid;"," "," ","{height:20px;position:relative;top:2px;}"],o&&i(["grid-template-columns:min-content auto;","{grid-column:span 3;}"],p),!o&&i(["grid-template-rows:auto auto;"]),e))),f=o.div.attrs(a).withConfig({displayName:"accordion.style__StyledAccordionTitleContainer",componentId:"sc-f1b48a4b-6"})(["",""],(({iconAlign:o,size:t,isExpanded:r,variant:a})=>i(["padding:",";"," display:flex;align-items:center;justify-content:space-between;"," cursor:pointer;z-index:1;&:focus{","}"," ",""],"small"===t?"var(--spacing200)":"var(--spacing300)",n,"left"===o&&i(["justify-content:flex-end;flex-direction:row-reverse;"]),s(),"subtle"===a&&i(["color:var(--colorsActionMajor500);padding:var(--spacing025);margin-bottom:",";width:fit-content;","{color:var(--colorsActionMajor500);",";}:hover{color:var(--colorsActionMajor600);","{color:var(--colorsActionMajor600);}}"],r&&"var(--spacing200)",g,"left"===o&&"margin-right: var(--spacing050)",g),"subtle"!==a&&i(["&:hover{background-color:var(--colorsUtilityMajor050);}"])))),v=o.div.withConfig({displayName:"accordion.style__StyledAccordionContentContainer",componentId:"sc-f1b48a4b-7"})(["flex-grow:1;box-sizing:border-box;overflow:hidden;transition:all 0.3s;",""],(({maxHeight:o,isExpanded:t})=>i(["max-height:",";height:",";",""],t?`${o}px`:"0px",t?`${o}px`:"0px",!t&&"\n visibility: hidden;\n "))),y=o.div.withConfig({displayName:"accordion.style__StyledAccordionContent",componentId:"sc-f1b48a4b-8"})(["padding:var(--spacing300);padding-top:var(--spacing100);overflow:hidden;"," ",""],(({variant:o})=>"subtle"===o&&i(["margin-left:var(--spacing150);padding:var(--spacing100) var(--spacing200) var(--spacing300);border-left:2px solid var(--colorsUtilityMajor100);"])),(({disableContentPadding:o})=>o&&i(["padding:0;"])));export{d as StyledAccordionContainer,y as StyledAccordionContent,v as StyledAccordionContentContainer,c as StyledAccordionGroup,m as StyledAccordionHeadingsContainer,g as StyledAccordionIcon,p as StyledAccordionSubTitle,l as StyledAccordionTitle,f as StyledAccordionTitleContainer};