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.16 kB
import { css } from 'lit'; export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--_toggle-button-border-size: 0.0625rem;font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);font-family:var(--ig-font-family);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part~=toggle]{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;-webkit-box-flex:1;-ms-flex:1;flex:1;border-style:solid;border-width:var(--_toggle-button-border-size);-webkit-box-shadow:none;box-shadow:none;background:rgba(0,0,0,0);color:inherit;max-width:100%;-webkit-transition:all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition:all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);position:relative;z-index:0;gap:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem))}:host [part~=toggle] ::slotted(*){max-width:100%}:host [part~=toggle] ::slotted(:not(igc-icon)){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:disabled),:host([disabled]){cursor:default;pointer-events:none}:host-context(:disabled),:host-context([disabled]){cursor:default;pointer-events:none}:host(:focus-visible){outline:none}[part~=toggle]:focus-visible{outline:none}:host([selected]) [part~=toggle]{z-index:1}:host(:not(:first-child)){-webkit-margin-start:var(--_negative-margin-horizontal, 0);margin-inline-start:var(--_negative-margin-horizontal, 0);-webkit-margin-before:var(--_negative-margin-vertical, 0);margin-block-start:var(--_negative-margin-vertical, 0)}:host(:not(:first-child) :not(:last-child)) [part~=toggle]{border-radius:0}:host(:first-child) [part~=toggle]{border-start-start-radius:var(--vertical-radius, var(--horizontal-radius, 0));border-end-start-radius:var(--horizontal-radius, 0);border-start-end-radius:var(--vertical-radius, 0)}:host(:last-child) [part~=toggle]{border-start-end-radius:var(--horizontal-radius, 0);border-end-end-radius:var(--vertical-radius, var(--horizontal-radius, 0));border-end-start-radius:var(--vertical-radius, 0)}`; //# sourceMappingURL=button.base.css.js.map