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

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

"use strict";var e=require("styled-components"),a=require("styled-system"),t=require("../../../style/themes/apply-base-theme.js"),r=require("../../typography/typography.component.js");require("react/jsx-runtime"),require("react");var i=require("../../button/button.style.js");function n(e){return e&&e.__esModule?e:{default:e}}var o=n(e);const s={"extra-small":20,small:32,medium:64,large:80},l={"extra-small":2.7,small:2.7,medium:2.7,large:2.7},d={small:"4px",medium:"8px",large:"16px"},c={"extra-small":"8px",small:"8px",medium:"12px",large:"16px"},p=(e,a)=>{const t=a?"rgba(255, 255, 255, 0.08)":"rgba(0, 0, 0, 0.08)";return"ai"===e?{outerBarBackground:t,innerBarBackground:a?"linear-gradient(90deg, var(--mode-color-ai-alt-stop-1, #00D639) 0%, var(--mode-color-ai-alt-stop-2, #00D6DE) 40%, var(--mode-color-ai-alt-stop-3, #9D60FF) 90%)":"linear-gradient(90deg, var(--mode-color-ai-stop-1, #13A038) 0%, var(--mode-color-ai-stop-2, #149197) 40%, var(--mode-color-ai-stop-3, #A87CFB) 90%)"}:{outerBarBackground:t,innerBarBackground:a?"#FFFFFF":"#000000"}},m=e.css(["display:flex;justify-content:center;text-align:center;"]),f=o.default.div.withConfig({displayName:"loader.style__StyledLoaderPlaceholder",componentId:"sc-aaaf19f2-0"})(["display:inline-block;min-width:var(--sizing800);"]),u=o.default.div.attrs(t.default).withConfig({displayName:"loader.style__StyledLoader",componentId:"sc-aaaf19f2-1"})([""," text-align:center;white-space:nowrap;"],a.margin),g=o.default.div.withConfig({displayName:"loader.style__OuterBar",componentId:"sc-aaaf19f2-2"})(["",""],(({size:a,variant:t,inverse:r})=>e.css(["border-radius:var(--borderRadius400);height:",";width:100%;background:",";overflow:hidden;position:relative;"],d[a],p(t,r).outerBarBackground))),x=o.default.div.withConfig({displayName:"loader.style__InnerBar",componentId:"sc-aaaf19f2-3"})(["",""],(({size:a,variant:t,inverse:r,animationTime:i,hasMotion:n})=>e.css(["@keyframes innerBarAnimationOne{0%{left:0%;animation-timing-function:linear;}30%{left:10px;animation-timing-function:cubic-bezier(0.5,0.6,0.4,1);}100%{left:calc(100% - 15px);}}@keyframes innerBarAnimationTwo{0%{width:15px;animation-timing-function:cubic-bezier(0.7,0,0.8,1);}50%{width:35%;}100%{width:15px;}}position:absolute;background:",";width:15px;height:",";border-radius:var(--borderRadius400);animation-name:innerBarAnimationOne,innerBarAnimationTwo;"," animation-iteration-count:",";"],p(t,r).innerBarBackground,d[a],n&&`animation-duration: ${i}s, ${i}s;`,n?"infinite, infinite":"none, none"))),y=o.default.svg.withConfig({displayName:"loader.style__StyledRingCircleSvg",componentId:"sc-aaaf19f2-4"})([""," ",' & circle[data-role="inner-arc"]{stroke:currentColor;}'],(({inverse:a,size:t,hasMotion:r,isTracked:i,isError:n,isSuccess:o,animationTime:d})=>{const c=`${s[t]}px`,p=l[t];return e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",';cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:95px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(-90deg);@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(-90deg);stroke-dashoffset:95;}50%{transform:rotate(90deg);stroke-dashoffset:80;}100%{transform:rotate(270deg);stroke-dashoffset:95;}}animation-name:",";"," animation-timing-function:cubic-bezier(0,0,1,1);animation-iteration-count:",";}"],c,c,p,a?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)",p,(({inverse:e,isSuccess:a,isError:t})=>t?"#DB004E;":a?"#00811F;":e?"#FFF;":"#000000")({inverse:a,isSuccess:o,isError:n}),i?"trackedAnimation":"untrackedAnimation",r&&`animation-duration: ${d}s;`,r?"infinite":"none")}),i.default),h="40px",v=o.default.div.withConfig({displayName:"loader.style__StyledStars",componentId:"sc-aaaf19f2-5"})(["position:relative;width:",";height:",";"],h,h),k={standalone:{small:"4px",medium:"8px",large:"12px"},ring:{"extra-small":"4px",small:"8px",medium:"8px",large:"12px"}},w=o.default.div.withConfig({displayName:"loader.style__StyledStarLoaderWrapper",componentId:"sc-aaaf19f2-6"})(["position:relative;display:flex;align-items:center;justify-content:center;"]),b=o.default(r.Typography).withConfig({displayName:"loader.style__StyledLoaderLabel",componentId:"sc-aaaf19f2-7"})([""," line-height:150%;color:",";"," &{color:currentColor;}",""],m,(({inverse:e})=>e?"rgba(255, 255, 255, 0.55)":"rgba(0, 0, 0, 0.65)"),i.default,(({size:a="medium",loaderType:t,loaderVariant:r})=>"star"===t?e.css(["font-size:16px;font-weight:400;margin-left:12px;width:min-content;"]):"standalone"===t?e.css(["font-size:",";font-weight:500;width:100%;margin-top:",";"],"large"===a?"16px":"14px",k[t][a]):e.css(["font-size:",";font-weight:500;width:",";",";"],"large"===a?"16px":"extra-small"===a?"13px":"14px","inline"===r?"auto":"100%","inline"===r?`margin-left: ${c[a]}`:`margin-top: ${k[t][a]}`))),S=o.default.div.withConfig({displayName:"loader.style__StyledRingLoaderWrapper",componentId:"sc-aaaf19f2-8"})(["",""],(({loaderVariant:a})=>e.css(["display:flex;flex-direction:",";align-items:center;justify-content:center;width:",";"],"inline"===a?"row":"column","inline"===a?"auto":"100%"))),B=o.default.span.withConfig({displayName:"loader.style__StyledLabel",componentId:"sc-aaaf19f2-9"})(["",";"],(({inverse:a})=>e.css(["color:",";"," &{color:currentColor;}"],a?"rgba(255, 255, 255, 0.90)":"rgba(0, 0, 0, 0.90)",i.default)));exports.InnerBar=x,exports.OuterBar=g,exports.StyledLabel=B,exports.StyledLoader=u,exports.StyledLoaderLabel=b,exports.StyledLoaderPlaceholder=f,exports.StyledRingCircleSvg=y,exports.StyledRingLoaderWrapper=S,exports.StyledStarLoaderWrapper=w,exports.StyledStars=v;