carbon-react/esm/components/pod/pod.style.js

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

import o,{css as r}from"styled-components";import{margin as t}from"styled-system";import i from"../../style/themes/apply-base-theme.js";import{StyledContent as e}from"../link/link.style.js";import n from"../icon-button/icon-button.component.js";import a from"../icon/icon.style.js";const l=o.div.attrs(i).withConfig({displayName:"pod.style__StyledPod",componentId:"sc-b71164e0-0"})([""," display:flex;align-items:flex-start;width:100%;",";",";&:focus{outline:none;}"],t,(({internalEditButton:o})=>o&&"position: relative"),(({height:o})=>o&&`height: ${o}`)),s={primary:"var(--colorsUtilityYang100)",secondary:"var(--colorsUtilityMajor025)",tertiary:"var(--colorsUtilityMajor040)",transparent:"var(--colorsUtilityMajorTransparent)",tile:"var(--colorsUtilityYang100)"},d=o.div.withConfig({displayName:"pod.style__StyledBlock",componentId:"sc-b71164e0-1"})(["",""],(({variant:o,softDelete:t,noBorder:i,hasButtons:e,contentTriggersEdit:n,fullWidth:a,internalEditButton:l,isHovered:d,isFocused:c})=>r(["box-sizing:border-box;border-radius:var(--borderRadius100);display:flex;flex-direction:column;background-color:",";width:100%;height:100%;",";",";",";",";"," "," ",";"],s[o],"tile"===o&&"box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)",i?"border: none":"border: 1px solid var(--colorsUtilityMajor100)",e&&!(a||l)&&"width: auto;",n&&"cursor: pointer",(d||c)&&r(["background-color:var(--colorsUtilityMajor075);"," ",""],l&&"tile"===o&&"background-color: var(--colorsUtilityMajorTransparent);",n&&r(["background-color:var(--colorsActionMajor600);*{color:var(--colorsUtilityYang100);}"])),(!l||n)&&(c?r(["outline:3px solid var(--colorsSemanticFocus500);border:none;padding:","px;"],i?0:1):r(["outline:none;"])),t&&r(["border:none;background-color:var(--colorsActionDisabled500);& > *{color:var(--colorsUtilityYin065);}"])))),c={"extra-small":"8px",small:"8px",medium:"16px",large:"32px 24px","extra-large":"40px"},p=o.div.withConfig({displayName:"pod.style__StyledContent",componentId:"sc-b71164e0-2"})(["text-align:left;padding:",";flex-grow:1;"],(({size:o})=>c[o])),x={"extra-small":"8px",small:"8px",medium:"8px 16px",large:"16px 24px","extra-large":"24px 40px"},g=o.div.withConfig({displayName:"pod.style__StyledFooter",componentId:"sc-b71164e0-3"})(["",""],(({variant:o,size:t,softDelete:i})=>r(["background-color:var(--colorsUtilityMajor025);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);box-shadow:inset 0px 1px 1px 0 rgba(0,0,0,0.1);color:var(--colorsUtilityYin090);padding:",";",";",";"],x[t],i&&"color: var(--colorsUtilityYin055)","tile"===o&&"border-top: 1px solid var(--colorsUtilityMajor100)"))),b=o.div.withConfig({displayName:"pod.style__StyledActionsContainer",componentId:"sc-b71164e0-4"})(["display:flex;flex-direction:column;",""],(({internalEditButton:o})=>o&&r(["position:absolute;right:2px;top:2px;z-index:10;"]))),m={"extra-small":34,small:34,medium:50,large:50,"extra-large":50},u={primary:"var(--colorsActionMajorYang100)",secondary:"var(--colorsActionMinor050)",tertiary:"var(--colorsActionMinor100)",transparent:"var(--colorsActionMajorTransparent)",tile:"var(--colorsActionMajorYang100)"},y=o(n).withConfig({displayName:"pod.style__StyledEditAction",componentId:"sc-b71164e0-5"})(["&&{",";}","{clip:rect(1px,1px,1px,1px);position:absolute;}"],(({displayOnlyOnHover:o,isHovered:t,isFocused:i,variant:e,size:n,internalEditButton:l,noBorder:s})=>r(["cursor:pointer;background-color:",";border:1px solid var(--colorsActionMinor200);margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";display:flex;align-items:center;justify-content:center;border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsActionMajor500);}"," "," "," "," ",";"],u[e],`${m[n]}px`,`${m[n]}px`,a,o&&!(t||i)&&"display: none",s&&"border: none;",l&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(t||i)&&!l&&r(["background-color:var(--colorsActionMajor600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),i&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"]))),e),v=o(n).withConfig({displayName:"pod.style__StyledDeleteButton",componentId:"sc-b71164e0-6"})(["&&{","}"],(({noBorder:o,internalEditButton:t,isHovered:i,isFocused:e,variant:n,size:l})=>r(["cursor:pointer;background-color:",";border:",";margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsSemanticNegative500);}"," "," ",";"],u[n],o?"none":"1px solid var(--colorsActionMinor200)",`${m[l]}px`,`${m[l]}px`,a,t&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(i||e)&&!t&&r(["background-color:var(--colorsSemanticNegative600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),e&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"])))),h=o(n).withConfig({displayName:"pod.style__StyledUndoButton",componentId:"sc-b71164e0-7"})(["&&{","}"],(({isHovered:o,isFocused:t,variant:i,size:e,noBorder:n,internalEditButton:l})=>r(["cursor:pointer;background-color:",";border:1px solid var(--colorsActionMinor200);margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsActionMajor500);}"," "," "," ",";"],u[i],`${m[e]}px`,`${m[e]}px`,a,n&&"border: none;",l&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(o||t)&&!l&&r(["background-color:var(--colorsActionMajor600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),t&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"])))),f={"extra-small":20,small:25,medium:30,large:30,"extra-large":30},j=o.div.withConfig({displayName:"pod.style__StyledHeader",componentId:"sc-b71164e0-8"})(["",""],(({alignTitle:o,internalEditButton:t,size:i})=>r(["margin-bottom:24px;text-align:",";",";"],o,"right"===o&&t&&r(["margin-right:","px;"],f[i])))),M=o.h5.withConfig({displayName:"pod.style__StyledSubtitle",componentId:"sc-b71164e0-9"})(["margin-top:8px;font-size:14px;font-weight:normal;"]),w=o.h4.withConfig({displayName:"pod.style__StyledTitle",componentId:"sc-b71164e0-10"})(["display:inline;font-size:18px;font-weight:500;"]);export{b as StyledActionsContainer,d as StyledBlock,p as StyledContent,v as StyledDeleteButton,y as StyledEditAction,g as StyledFooter,j as StyledHeader,l as StyledPod,M as StyledSubtitle,w as StyledTitle,h as StyledUndoButton};