UNPKG

igniteui-webcomponents

Version:

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

3 lines 4.33 kB
import { css } from 'lit'; export const styles = css `[part=splitter-bar]{background:hsla(from var(--bar-color) h s l/68%);transition:all .15s cubic-bezier(0.25, 0.46, 0.45, 0.94)}[part=splitter-bar] [part=drag-handle]{background:var(--handle-color);border-radius:var(--border-radius);opacity:.68}[part=splitter-bar] [part*=collapse-btn],[part=splitter-bar] [part*=expand-btn]{opacity:.68;transition:opacity .15s ease}[part=splitter-bar]:focus-visible{outline:none;box-shadow:0 0 0 .125rem var(--focus-color);transition:box-shadow .15s cubic-bezier(0.25, 0.46, 0.45, 0.94);z-index:99}:host(:not([disable-resize])) [part=splitter-bar]:hover,:host(:not([disable-resize])) [part=splitter-bar]:focus-visible:hover{background:var(--bar-color);transition:all .15s ease-out}:host(:not([disable-resize])) [part=splitter-bar]:hover [part=drag-handle],:host(:not([disable-resize])) [part=splitter-bar]:hover [part*=collapse-btn],:host(:not([disable-resize])) [part=splitter-bar]:hover [part*=expand-btn],:host(:not([disable-resize])) [part=splitter-bar]:focus-visible:hover [part=drag-handle],:host(:not([disable-resize])) [part=splitter-bar]:focus-visible:hover [part*=collapse-btn],:host(:not([disable-resize])) [part=splitter-bar]:focus-visible:hover [part*=expand-btn]{opacity:1}:host(:not([disable-resize])) [part=splitter-bar]:focus-visible:active,:host(:not([disable-resize])) [part=splitter-bar]:active{background:var(--bar-color-active)}:host(:not([disable-resize])) [part=splitter-bar]:focus-visible:active [part=drag-handle],:host(:not([disable-resize])) [part=splitter-bar]:active [part=drag-handle]{background:var(--handle-color-active)}:host([disable-resize]) [part=splitter-bar]:hover [part*=collapse-btn],:host([disable-resize]) [part=splitter-bar]:hover [part*=expand-btn],:host([disable-resize]) [part=splitter-bar]:focus-visible:hover [part*=collapse-btn],:host([disable-resize]) [part=splitter-bar]:focus-visible:hover [part*=expand-btn]{opacity:1}:host([orientation=horizontal]) [part=splitter-bar]{width:var(--size);padding-inline:.0625rem}:host([orientation=horizontal]) [part=splitter-bar]:active [part=start-expand-btn],:host([orientation=horizontal]) [part=splitter-bar]:active [part=end-collapse-btn]{border-inline-start:var(--size) solid var(--expander-color-active)}:host([orientation=horizontal]) [part=splitter-bar]:active [part=start-collapse-btn],:host([orientation=horizontal]) [part=splitter-bar]:active [part=end-expand-btn]{border-inline-end:var(--size) solid var(--expander-color-active)}:host([orientation=horizontal]) [part=drag-handle]{width:var(--size)}:host([orientation=horizontal]) [part*=collapse-btn],:host([orientation=horizontal]) [part*=expand-btn]{border-block-start:var(--size) solid rgba(0,0,0,0);border-block-end:var(--size) solid rgba(0,0,0,0)}:host([orientation=horizontal]) [part=start-expand-btn],:host([orientation=horizontal]) [part=end-collapse-btn]{border-inline-start:var(--size) solid var(--expander-color)}:host([orientation=horizontal]) [part=start-collapse-btn],:host([orientation=horizontal]) [part=end-expand-btn]{border-inline-end:var(--size) solid var(--expander-color)}:host([orientation=vertical]) [part=splitter-bar]{height:var(--size);padding-block:.0625rem}:host([orientation=vertical]) [part=splitter-bar]:active [part=start-expand-btn],:host([orientation=vertical]) [part=splitter-bar]:active [part=end-collapse-btn]{border-block-start:var(--size) solid var(--expander-color-active)}:host([orientation=vertical]) [part=splitter-bar]:active [part=start-collapse-btn],:host([orientation=vertical]) [part=splitter-bar]:active [part=end-expand-btn]{border-block-end:var(--size) solid var(--expander-color-active)}:host([orientation=vertical]) [part=drag-handle]{height:var(--size)}:host([orientation=vertical]) [part*=collapse-btn],:host([orientation=vertical]) [part*=expand-btn]{border-inline-start:var(--size) solid rgba(0,0,0,0);border-inline-end:var(--size) solid rgba(0,0,0,0)}:host([orientation=vertical]) [part=start-expand-btn],:host([orientation=vertical]) [part=end-collapse-btn]{border-block-start:var(--size) solid var(--expander-color)}:host([orientation=vertical]) [part=start-collapse-btn],:host([orientation=vertical]) [part=end-expand-btn]{border-block-end:var(--size) solid var(--expander-color)}`; //# sourceMappingURL=splitter.common.css.js.map