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

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

import t,{css as o}from"styled-components";import a from"../icon-button/icon-button.style.js";import{Portal as e}from"../portal/portal.js";import i from"../../style/themes/apply-base-theme.js";import r from"../icon/icon.style.js";const n=t(e).attrs(i).withConfig({displayName:"toast.style__StyledPortal",componentId:"sc-6f15a9b3-0"})(["",""],(({theme:t,isNotice:a,align:e,alignY:i})=>o(["position:fixed;top:0;z-index:",";"," "," "," "," "," "," ",""],t.zIndex.notification,"left"===e&&o(["left:0;transform:translateX(50%);"]),"center"===e&&o(["margin-left:50%;transform:translateX(-50%);"]),"right"===e&&o(["right:0;transform:translateX(-50%);"]),a&&o(["bottom:0;top:auto;width:100%;"]),"top"===i&&o(["top:0;bottom:auto;"]),"center"===i&&o(["top:50%;transform:translate(",",-50%);"],"left"===e?"50%":"-50%"),"bottom"===i&&o(["bottom:0;top:auto;display:flex;flex-direction:column-reverse;"])))),s=".toast",p=".toast-alternative",l={error:"var(--colorsSemanticNegative500)",info:"var(--colorsSemanticInfo500)",success:"var(--colorsSemanticPositive500)",warning:"var(--colorsSemanticCaution500)",neutral:"var(--colorsSemanticNeutral500)"},c=o(["position:absolute;right:15px;top:50%;transform:translateY(-50%);"]),m=t.div.withConfig({displayName:"toast.style__StyledToast",componentId:"sc-6f15a9b3-1"})([""," :focus{outline:none;}&","-appear,&","-enter{opacity:0;transform:scale(0.5);}&","-appear","-appear-active,&","-enter","-enter-active{opacity:1;transform:",";transition:all 300ms cubic-bezier(0.25,0.25,0,1.5);}&","-exit","-exit-active{opacity:0;",";transition:all 150ms ease-out;}","{","}",""],(({maxWidth:t,align:e,isNotification:i,alignY:r,isNotice:n,variant:s})=>o(["position:relative;display:flex;justify-content:flex-start;align-content:center;border-radius:var(--borderRadius100);overflow:hidden;border:1px solid ",";background-color:var(--colorsUtilityYang100);min-height:38px;:focus{outline:none;}","{","}box-shadow:",";line-height:22px;margin-top:",";margin-bottom:",";max-width:",";position:relative;margin-right:",";margin-left:",";",""],l[s],a,c,"0 10px 30px 0 rgba(0, 20, 29, 0.1), 0 30px 60px 0 rgba(0, 20, 29, 0.1)",n||"center"===r||"bottom"===r?"0":"30px","bottom"!==r||n?"0":"30px",t||"300px","center"===e||"right"===e?"auto":"30px","center"===e||"left"===e?"auto":"30px",i&&o(["border:1px solid var(--colorsSemanticInfo500);"]))),s,s,s,s,s,s,(({align:t})=>"center"===t?" scale(1) translateY(0)":"scale(1)"),s,s,(({alignY:t})=>"bottom"===t?"margin-bottom: -40px":"margin-top: -40px"),a,c,(({isNotice:t,alignY:e})=>t&&o(["background-color:var(--colorsUtilityMajor400);border:none;color:var(--colorsSemanticNeutralYang100);margin-right:0;max-width:100%;","{right:55px;}"," ","{color:var(--colorsSemanticNeutralYang100);}&","-appear,&","-enter{",";opacity:0;}&","-exit{",";opacity:1;}&","-appear","-appear-active,&","-enter","-enter-active{",";opacity:1;transition:all 400ms ease;}&","-exit","-exit-active{",";opacity:0;transition:all 200ms ease;}"],a,a,r,p,p,"top"===e?"top: -40px":"bottom: -40px",p,"top"===e?"top: 0":"bottom: 0",p,p,p,p,"top"===e?"top: 0":"bottom: 0",p,p,"top"===e?"top: -40px":"bottom: -40px"))),d=t.div.withConfig({displayName:"toast.style__StyledToastContent",componentId:"sc-6f15a9b3-2"})(["padding:8px 16px 8px 16px;white-space:pre-wrap;flex:1;"," ",""],(({isNotice:t})=>t&&o(["display:flex;align-items:center;padding:11px 40px;"])),(({isDismiss:t,isNotice:a})=>t&&o(["padding-right:",";"],a?"88px":"48px"))),x=t.div.withConfig({displayName:"toast.style__ToastWrapper",componentId:"sc-6f15a9b3-3"})([""," ",""],(({align:t})=>t&&o(["position:relative;width:auto;height:auto;justify-content:",";display:flex;"],t)),(({isNotice:t})=>t&&o(["display:block;"])));export{n as StyledPortal,m as StyledToast,d as StyledToastContent,x as ToastWrapper};