UNPKG

@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

94 lines (80 loc) 2.15 kB
// src/components/option/option.styles.ts import { css } from "lit"; var option_styles_default = css` /* stylelint-disable */ :host { display: block; user-select: none; -webkit-user-select: none; } :host(:focus) { outline: none; } .option { position: relative; display: flex; align-items: center; font-family: var(--syn-font-sans); font-size: var(--syn-font-size-medium); font-weight: var(--syn-font-weight-normal); line-height: var(--syn-line-height-normal); letter-spacing: var(--syn-letter-spacing-normal); color: var(--syn-color-neutral-700); padding: var(--syn-spacing-x-small) var(--syn-spacing-medium) var(--syn-spacing-x-small) var(--syn-spacing-x-small); transition: var(--syn-transition-fast) fill; cursor: pointer; } .option--hover:not(.option--current):not(.option--disabled) { background-color: var(--syn-color-neutral-100); color: var(--syn-color-neutral-1000); } .option--current, .option--current.option--disabled { background-color: var(--syn-color-primary-600); color: var(--syn-color-neutral-0); opacity: 1; } .option--disabled { outline: none; opacity: 0.5; cursor: not-allowed; } .option__label { flex: 1 1 auto; display: inline-block; line-height: var(--syn-line-height-dense); } .option .option__check { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; visibility: hidden; padding-inline-end: var(--syn-spacing-2x-small); } .option--selected .option__check { visibility: visible; } .option__prefix, .option__suffix { flex: 0 0 auto; display: flex; align-items: center; } .option__prefix::slotted(*) { margin-inline-end: var(--syn-spacing-x-small); } .option__suffix::slotted(*) { margin-inline-start: var(--syn-spacing-x-small); } @media (forced-colors: active) { :host(:hover:not([aria-disabled='true'])) .option { outline: dashed 1px SelectedItem; outline-offset: -1px; } } `; export { option_styles_default }; //# sourceMappingURL=chunk.IVM3BGRH.js.map