@cds/core
Version:
Clarity Design System - common components, themes, and utilties
3 lines (2 loc) • 3.23 kB
JavaScript
import{css as a}from"lit";var r=a`:host{--color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--check-color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-radius:var(--cds-alias-object-border-radius-100, calc(4 * 1rem / var(--cds-global-base, 20)));--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--cursor:pointer}.input,.input::before{width:var(--cds-global-space-7,calc(16 * 1rem / var(--cds-global-base,20)));height:var(--cds-global-space-7,calc(16 * 1rem / var(--cds-global-base,20)))}.input{cursor:var(--cursor);position:relative}.input::before{background:var(--background);border:var(--border);border-radius:var(--border-radius);display:inline-block;position:absolute;content:""}.input::after{position:absolute;content:"";display:none;height:calc(var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20))) + var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20))));width:var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20)));left:var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)));border-left:var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))) solid;border-bottom:var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))) solid;border-color:var(--check-color);border-left-color:var(--check-color);border-bottom-color:var(--check-color);border-right-color:var(--check-color);border-top-color:var(--check-color);transform:translateY(var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)))) rotate(-45deg)}:host([_indeterminate]){--color:var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81))}:host([_indeterminate]) .input:after{border-left:none;border-bottom-color:var(--color);display:inline-block;transform:translateY(calc(var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20)))*.15));top:var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)))}:host([_checked]){--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--color);--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_checked]) .input:after{display:inline-block}:host([status=error]:not([_checked])){--color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([_disabled]){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--cursor:not-allowed}`;export{r as default};
//# sourceMappingURL=checkbox.element.scss.js.map