@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
67 lines (57 loc) • 1.75 kB
JavaScript
// src/components/optgroup/optgroup.styles.ts
import { css } from "lit";
var optgroup_styles_default = css`
:host {
--display-divider: block;
}
.optgroup__divider {
--spacing: var(--syn-spacing-x-small);
display: var(--display-divider);
}
.optgroup__label-container {
align-items: center;
border: solid transparent;
border-width: 0 var(--option-inset-border-vertical);
box-sizing: border-box;
color: var(--syn-input-color);
display: flex;
gap: var(--syn-spacing-small);
min-height: var(--option-min-height, var(--syn-input-height-medium));
}
/**
* Only show the label container when there is a label at all
*/
.optgroup--has-prefix .optgroup__label-container,
.optgroup--has-label .optgroup__label-container,
.optgroup--has-suffix .optgroup__label-container {
padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
}
/**
* Format main label.
* Make sure this works for props and slotted content
*/
.optgroup__label-content,
.optgroup__label::slotted(*) {
flex: 1;
font-family: var(--syn-font-sans);
font-size: var(--option-font-size, var(--syn-font-size-medium));
font-weight: var(--syn-font-weight-semibold);
line-height: var(--syn-line-height-normal);
}
/* Disabled Label */
.optgroup--is-disabled .optgroup__label-container {
opacity: var(--syn-input-disabled-opacity);
}
.optgroup__prefix,
.optgroup__suffix {
color: var(--syn-option-icon-color, var(--syn-color-neutral-800));
font-size: var(--syn-spacing-large);
}
.optgroup__options ::slotted(syn-option[hidden]) {
display: none;
}
`;
export {
optgroup_styles_default
};
//# sourceMappingURL=chunk.M7U5QI74.js.map