@cds/core
Version:
Clarity Design System - common components, themes, and utilties
3 lines (2 loc) • 2.38 kB
JavaScript
import{css as a}from"lit";var r=a`:host{--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border:var(--cds-alias-object-border-width-200, calc(2 * 1rem / var(--cds-global-base, 20))) solid var(--background);--border-radius:var(--cds-alias-object-border-radius-200, calc(12 * 1rem / var(--cds-global-base, 20)));--height:var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20)));--width:calc(var(--cds-global-space-10, calc(32 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-1, calc(1 * 1rem / var(--cds-global-base, 20))));--anchor-background:var(--cds-global-color-construction-50, #f1f6f8);--anchor-border-radius:var(--cds-alias-object-border-radius-200, calc(12 * 1rem / var(--cds-global-base, 20)));--anchor-width:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))));--anchor-height:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))));--toggle-speed:var(--cds-global-animation-duration-quicker, 0.15s)}.input,.input:after{display:inline-block;transition-duration:var(--toggle-speed,.15s);transition-timing-function:ease-in}.input{border-radius:var(--border-radius);border:var(--border);background:var(--background);height:var(--height);width:var(--width);position:relative;cursor:pointer;transition-property:border-color,background-color}.input:after{border-radius:var(--anchor-border-radius);background:var(--anchor-background);height:var(--anchor-height);width:var(--anchor-width);position:absolute;content:"";left:0;top:0;transition-property:transform}:host(:not([cds-motion=ready])){--toggle-speed:0}:host([_checked]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--border:var(--cds-alias-object-border-width-200, calc(2 * 1rem / var(--cds-global-base, 20))) solid var(--background)}:host([_checked]) .input:after{transform:translate(calc(var(--cds-global-space-7,calc(16 * 1rem / var(--cds-global-base,20))) - var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20)))),0)}:host([_disabled]) .input{opacity:.6;cursor:not-allowed}[focusable]{width:var(--width);left:0}`;export{r as default};
//# sourceMappingURL=toggle.element.scss.js.map