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 • 1.43 kB
JavaScript
import { css } from 'lit';
export const styles = css `:host [part~=toggle]{min-height:max(var(--is-large, 1)*max(2.375rem, -1 * 2.375rem),var(--is-medium, 1)*max(2rem, -1 * 2rem),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem));border-width:.0625rem}:host [part="toggle focused"]{background:var(--item-background)}:host [part="toggle focused"]::after{content:"";position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem;pointer-events:none;width:calc(100% - 0.125rem*2);height:calc(100% - 0.125rem*2);-webkit-box-shadow:0 0 0 .0625rem var(--item-focused-border-color);box-shadow:0 0 0 .0625rem var(--item-focused-border-color)}:host(:hover) [part="toggle focused"]{background:var(--item-hover-background)}[part~=toggle]:active{background:var(--item-focused-background)}[part="toggle focused"]:active{background:var(--item-focused-background)}:host([selected]:hover) [part~=toggle]{background:var(--item-selected-background)}:host([selected]:hover) [part~=toggle]::before{content:"";position:absolute;pointer-events:none;width:100%;height:100%;z-index:-1;background:var(--item-selected-hover-background)}:host([selected]) [part~=toggle]:active{background:var(--item-selected-focus-background)}:host([selected]) [part="toggle focused"]{background:var(--item-selected-background)}:host([selected]) [part="toggle focused"]:active{background:var(--item-selected-focus-background)}`;
//# sourceMappingURL=button.fluent.css.js.map