UNPKG

@cds/core

Version:

Clarity Design System - common components, themes, and utilties

3 lines (2 loc) 4.22 kB
import{css as a}from"lit";var t=a`:host{--min-height:var(--column-height, var(--cds-alias-object-interaction-touch-target, calc(36 * 1rem / var(--cds-global-base, 20))));--min-width:fit-content;--justify-content:var(--column-justify-content, start);--padding-block:var(--cds-global-space-3, calc(4 * 1rem / var(--cds-global-base, 20)));--padding-inline-start:var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20)));--padding-inline-end:var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20)));--background:var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));top:0;z-index:998;position:sticky;min-height:var(--min-height);min-width:var(--min-width);outline:0!important}.private-host{min-height:var(--min-height);justify-content:var(--justify-content);background:var(--background);padding-inline-start:var(--padding-inline-start);padding-inline-end:var(--padding-inline-end);padding-block:var(--padding-block);text-align:left;border:0;font-weight:500;color:var(--cds-global-typography-color-500,var(--cds-global-color-black,#000));white-space:nowrap;overflow:visible;text-overflow:ellipsis;font-size:var(--cds-global-typography-font-size-3,calc(13 * 1rem / var(--cds-global-base,20)));line-height:1em;margin:0;display:flex;gap:var(--cds-global-layout-space-sm,calc(12 * 1rem / var(--cds-global-base,20)));align-items:center;height:100%;position:sticky!important;box-shadow:0 var(--cds-alias-object-border-width-100,calc(1 * 1rem / var(--cds-global-base,20))) 0 var(--cds-alias-object-border-color,var(--cds-global-color-construction-200,#cbd4d8))}:host([type=action]){--padding-block:0;--padding-inline-start:0;--padding-inline-end:0}:host([type=action]) .private-host{justify-content:center}::slotted([cds-button-action]),[cds-button-action]{--outline-offset:calc(var(--cds-global-space-3, calc(4 * 1rem / var(--cds-global-base, 20))) * -1)}:host([position=fixed]),:host([position=sticky]){z-index:999}::slotted([cds-button-action]),::slotted([cds-layout="align:right"]){margin-inline-start:auto}cds-internal-split-handle{--height:var(--cds-global-layout-space-lg, calc(24 * 1rem / var(--cds-global-base, 20)));--min-height:var(--cds-global-layout-space-lg, calc(24 * 1rem / var(--cds-global-base, 20)));--secondary-line-display:none;position:absolute;right:var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20)))}:host([draggable-hidden]) cds-internal-split-handle{display:none}.line{top:var(--min-height);width:var(--cds-global-space-1,calc(1 * 1rem / var(--cds-global-base,20)));bottom:0;right:0;height:100vh;position:absolute}[_focused]+.line{right:0;border-right:var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))) solid var(--cds-alias-object-interaction-background-highlight,var(--cds-global-color-blue-700,#0079ad))}:host([cds-draggable*=target]) .line{left:var(--cds-global-space-0,calc(0 * 1rem / var(--cds-global-base,20)));border-left:var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20))) solid var(--cds-alias-object-interaction-background-highlight,var(--cds-global-color-blue-700,#0079ad))}:host([cds-draggable*=active]) .private-host{box-shadow:0 var(--cds-alias-object-border-width-200,calc(2 * 1rem / var(--cds-global-base,20))) 0 var(--cds-alias-object-interaction-background-highlight,var(--cds-global-color-blue-700,#0079ad))}[focusable]{outline-offset:calc(var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20)))*-1)!important}:host([type=action]:focus-within) [focusable]{outline:var(--cds-alias-object-interaction-outline,Highlight solid 2px)!important;outline-offset:calc(var(--cds-global-space-2,calc(2 * 1rem / var(--cds-global-base,20)))*-1)!important}@media (-webkit-min-device-pixel-ratio:0){:host([type=action]:focus-within) [focusable]{outline:var(--cds-alias-object-interaction-outline-webkit,5px auto -webkit-focus-ring-color)!important}}:host([type=action]:focus-within) ::slotted([cds-button-action]),:host([type=action]:focus-within) ::slotted([cds-control]){--cds-alias-object-interaction-outline-webkit:none!important;--cds-alias-object-interaction-outline:none!important}`;export{t as default}; //# sourceMappingURL=grid-column.element.scss.js.map