@cds/core
Version:
Clarity Design System - common components, themes, and utilties
3 lines (2 loc) • 3.41 kB
JavaScript
import{css as a}from"lit";var s=a` spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--ring-opacity:1;--ring-color:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--fill-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--fill-speed:var(--cds-global-animation-duration-secondary, 0.3s);font-family:inherit;font-size:inherit;color:inherit;display:block;cursor:inherit}.private-host,svg{height:100%;width:100%}svg{display:block}.private-host{display:flex;align-items:center;justify-content:center}.private-host .backstroke{stroke:var(--ring-color);opacity:var(--ring-opacity)}.private-host .arcstroke{stroke:var(--fill-color);transition:stroke-dashoffset var(--fill-speed) var(--cds-global-animation-easing-loop,cubic-bezier(.17,.4,.8,.79))}:host,:host([size=sm]){height:var(--cds-global-space-7,calc(16 * 1rem / var(--cds-global-base,20)));width:var(--cds-global-space-7,calc(16 * 1rem / var(--cds-global-base,20)))}:host([size=md]){height:var(--cds-global-space-9,calc(24 * 1rem / var(--cds-global-base,20)));width:var(--cds-global-space-9,calc(24 * 1rem / var(--cds-global-base,20)))}:host([size=lg]){height:var(--cds-global-space-11,calc(36 * 1rem / var(--cds-global-base,20)));width:var(--cds-global-space-11,calc(36 * 1rem / var(--cds-global-base,20)))}:host([size=xl]){height:var(--cds-global-space-12,calc(48 * 1rem / var(--cds-global-base,20)));width:var(--cds-global-space-12,calc(48 * 1rem / var(--cds-global-base,20)))}:host([size=xxl]){height:calc(var(--cds-global-space-13,calc(64 * 1rem / var(--cds-global-base,20))) - var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20))));width:calc(var(--cds-global-space-13,calc(64 * 1rem / var(--cds-global-base,20))) - var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20))))}:host([value="0"]) .fillstroke,:host([value="100"]) .fillstroke{display:none}:host(:not([value])) .progress-wrapper{animation:spin var(--cds-global-animation-duration-slowest,.8s) var(--cds-global-animation-easing-loop,cubic-bezier(.17,.4,.8,.79)) infinite}:host([status=info]){--ring-color:var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff));--fill-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=success]){--ring-color:var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3));--fill-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning]){--ring-color:var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6));--fill-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e))}:host([status=danger]){--ring-color:var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0));--fill-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=alt]){--ring-color:var(--cds-alias-status-alt-tint, var(--cds-global-color-violet-600, #9b32c8));--fill-color:var(--cds-alias-status-alt, var(--cds-global-color-violet-700, #7c12a5))}:host([inverse]){--ring-color:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--fill-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}`;export{s as default};
//# sourceMappingURL=progress-circle.element.scss.js.map