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 • 3.55 kB
JavaScript
import { css } from 'lit';
export const styles = css `:host{--size: 2rem;--thumb-size: 0.625rem;--border-size: 0.0625rem;--thumb-offset: 0.125rem;--label-gap: 0.5rem}[part~=label]{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom)}[part~=focused] [part~=thumb]:not([part~=checked]){background:var(--focus-fill-color)}[part~=focused][part~=control]{box-shadow:0 0 0 .25rem var(--focus-outline-color);border-color:var(--focus-fill-color)}[part~=control]{border-radius:var(--border-radius-track);width:var(--size);height:1rem;border:var(--border-size) solid var(--border-color);background:var(--track-off-color);transition:all .2s ease-in-out}[part~=control][part~=checked]{background:var(--track-on-color);border-color:var(--border-on-color)}[part~=thumb]{border-radius:var(--border-radius-thumb);width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);margin-inline-start:var(--thumb-offset);background:var(--thumb-off-color)}[part~=thumb][part~=checked]{background:var(--thumb-on-color);margin-inline-start:calc(var(--size) - var(--thumb-size) - var(--thumb-offset) - var(--border-size)*2)}:host(:not([disabled]):hover) [part~=control],:host(:not(:disabled):hover) [part~=control]{border-color:var(--border-hover-color)}:host(:not([disabled]):hover) [part~=control][part~=checked],:host(:not(:disabled):hover) [part~=control][part~=checked]{background:var(--track-on-hover-color);border-color:var(--border-on-hover-color)}:host(:not([disabled]):hover) [part~=thumb],:host(:not(:disabled):hover) [part~=thumb]{background:var(--border-hover-color)}:host(:not([disabled]):hover) [part~=thumb][part~=checked],:host(:not(:disabled):hover) [part~=thumb][part~=checked]{background:var(--thumb-on-color)}:host(:not([disabled]):hover) [part~=focused]:not([part~=checked]) [part~=thumb],:host(:not(:disabled):hover) [part~=focused]:not([part~=checked]) [part~=thumb]{background:var(--focus-fill-hover-color)}:host(:not([disabled]):hover) [part~=focused]:not([part~=checked])[part~=control],:host(:not(:disabled):hover) [part~=focused]:not([part~=checked])[part~=control]{box-shadow:0 0 0 .25rem var(--focus-outline-color);border-color:var(--focus-fill-hover-color)}:host(:not([disabled])[invalid]) [part~=control],:host(:not([disabled])[invalid]) [part~=control][part~=checked],:host(:not(:disabled)[invalid]) [part~=control],:host(:not(:disabled)[invalid]) [part~=control][part~=checked]{border-color:var(--error-color)}:host(:not([disabled])[invalid]) [part~=control][part~=checked],:host(:not([disabled])[invalid]) [part~=thumb]:not([part~=checked]),:host(:not(:disabled)[invalid]) [part~=control][part~=checked],:host(:not(:disabled)[invalid]) [part~=thumb]:not([part~=checked]){background:var(--error-color)}:host(:not([disabled])[invalid]) [part=focused][part~=control],:host(:not([disabled])[invalid]) [part=focused][part~=control][part~=checked],:host(:not(:disabled)[invalid]) [part=focused][part~=control],:host(:not(:disabled)[invalid]) [part=focused][part~=control][part~=checked]{box-shadow:0 0 0 .125rem var(--error-color-hover)}:host([disabled]) [part~=control][part~=checked]{border-color:var(--track-on-disabled-color)}`;
//# sourceMappingURL=switch.bootstrap.css.js.map