UNPKG

@cds/core

Version:

Clarity Design System - common components, themes, and utilties

3 lines (2 loc) 5.22 kB
import{css as a}from"lit";var l=a`:host{--panel-width:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 10);--panel-height:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 10);--panel-background:var(--cds-alias-object-interaction-background, var(--cds-global-color-white, white));--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));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-layout-space-sm, calc(12 * 1rem / var(--cds-global-base, 20)))}.private-host{gap:0!important;position:relative;width:var(--panel-width);height:var(--panel-height)}.input,[focusable]{left:initial;margin:0 0 var(--cds-global-layout-space-xs,calc(8 * 1rem / var(--cds-global-base,20))) var(--cds-global-layout-space-xxs,calc(4 * 1rem / var(--cds-global-base,20)));position:absolute;right:var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20)));top:var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20)));z-index:99}::slotted(label){box-shadow:var(--box-shadow);background:var(--panel-background);border:var(--border);border-radius:var(--cds-alias-object-border-radius-100,calc(4 * 1rem / var(--cds-global-base,20)));cursor:pointer;display:flex;margin:0;padding:var(--padding);text-wrap:normal;white-space:normal;word-break:break-word;overflow:hidden;width:var(--panel-width)!important;height:var(--panel-height)}:host([_disabled][_checked]){--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))!important}:host([_disabled]),:host([_disabled][_checked]),:host([_disabled][_checked]) .input{--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([_disabled][_checked]) .input{--border:var(--border)}:host([_disabled]){--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))}:host([status=error]) ::slotted(label){--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));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host(:hover:not([_disabled])) .input,:host(:hover:not([_disabled])) ::slotted(label){--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));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=error]:hover:not([_disabled])) .input,:host([status=error]:hover:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-danger-dark, var(--cds-global-color-red-900, #8f1500));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-danger-dark, var(--cds-global-color-red-900, #8f1500))}:host([_checked]:hover:not([_disabled])) .input{--border:var(--border)}:host([_checked]:not([_disabled])) ::slotted(label){--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));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([size=sm]),:host([size=sm]) ::slotted(label){--panel-width:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 10);--panel-height:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 10)}:host([size=md]),:host([size=md]) ::slotted(label){--panel-width:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 20);--panel-height:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 20)}:host([size=lg]),:host([size=lg]) ::slotted(label){--panel-width:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 20);--panel-height:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 20)}:host([size=xl]),:host([size=xl]) ::slotted(label){--panel-width:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 40);--panel-height:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 40)}`;export{l as default}; //# sourceMappingURL=selection-panel.element.scss.js.map