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 • 2.6 kB
JavaScript
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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}[part~=tab-header]{display:flex;scroll-snap-align:var(--_ig-tab-snap);flex-direction:column;align-items:center;flex-shrink:0;text-align:center;justify-content:center;pointer-events:all;height:100%;max-width:var(--tab-max-width--justify, 22.5rem);min-width:5.625rem;cursor:pointer;position:relative;z-index:1;grid-row:1;overflow-wrap:anywhere;transition:background-color .3s cubic-bezier(0.35, 0, 0.25, 1),color .3s cubic-bezier(0.35, 0, 0.25, 1)}[part~=tab-header] ::slotted(igc-icon){transition:color .3s cubic-bezier(0.35, 0, 0.25, 1)}[part~=tab-header]:focus-within{outline-color:rgba(0,0,0,0)}[part=base]{display:flex;grid-row:var(--header-bottom, 1);align-items:center;justify-content:center;gap:.5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none}[part~=content]{display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;outline-style:none;gap:.5rem;flex:1}[part~=content] ::slotted(*){display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}[part~=content] ::slotted(igc-icon){display:flex}[part~=tab-body]{display:none;position:sticky;inset-inline-start:0;width:100%;height:100%;grid-row:3;grid-column:1/-1;max-width:var(--_ig-tabs-width);transition:transform 250ms ease-in-out}:host([selected]) [part~=tab-body]{display:block;transform:translateX(0)}:host([disabled]) [part=tab-header]{pointer-events:none;cursor:initial}`;
//# sourceMappingURL=tab.base.css.js.map