@cds/core
Version:
Clarity Design System - common components, themes, and utilties
3 lines (2 loc) • 2.44 kB
JavaScript
import{css as a}from"lit";var c=a`:host{--track-background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--track-fill-background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--track-height:var(--cds-alias-object-border-width-400, calc(4 * 1rem / var(--cds-global-base, 20)));--track-width:50%;--thumb-background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--thumb-width:calc(var(--cds-alias-object-border-width-400, calc(4 * 1rem / var(--cds-global-base, 20))) + calc(var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-1, calc(1 * 1rem / var(--cds-global-base, 20)))));--thumb-height:calc(var(--cds-alias-object-border-width-400, calc(4 * 1rem / var(--cds-global-base, 20))) + calc(var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-1, calc(1 * 1rem / var(--cds-global-base, 20)))));display:block;width:100%}.input-container{position:relative}::slotted(input){-webkit-appearance:none;width:100%;height:var(--track-height);margin:var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20))) 0 var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20))) 0;position:relative;padding:0!important;padding:var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20))) 0;cursor:pointer}.input-track{position:absolute;top:var(--cds-global-space-6,calc(12 * 1rem / var(--cds-global-base,20)));left:0;width:var(--track-width);height:var(--track-height);background:var(--track-fill-background);border-radius:var(--border-radius,var(--cds-alias-object-border-radius-100,calc(4 * 1rem / var(--cds-global-base,20))));pointer-events:none;z-index:999}:host([_disabled]){--track-background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--track-fill-background:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc));--thumb-background:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([_disabled]) .input,:host([_disabled]) ::slotted(input){cursor:not-allowed}.rtl .input-track{left:initial;right:0}.input-container{padding:var(--cds-global-space-6,calc(12 * 1rem / var(--cds-global-base,20))) 0 var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20))) 0}`;export{c as default};
//# sourceMappingURL=range.element.scss.js.map