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

79 lines (64 loc) 1.89 kB
// src/components/radio/radio.custom.styles.ts import { css } from "lit"; var radio_custom_styles_default = css` :host(:focus-visible) .radio__control { outline: var(--syn-focus-ring); outline-offset: var(--syn-focus-ring-width); } /** #429: Use token for opacity */ .radio--disabled { opacity: var(--syn-input-disabled-opacity); } /* Checked + hover */ .radio.radio--checked:not(.radio--disabled):hover .radio__control { background-color: var(--syn-color-primary-950); border-color: var(--syn-color-primary-950); } /* Hover */ .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control { border-color: var(--syn-color-primary-900); } /* Fix#456: Multi line radio fixes */ .radio__label { margin-inline-start: var(--syn-spacing-x-small); position: relative; } .radio--small .radio__label { font: var(--syn-body-small-regular); top: -3px; } .radio--medium .radio__label { font: var(--syn-body-medium-regular); top: -3px; } .radio--large .radio__label { font: var(--syn-body-large-regular); top: -2px; } /** * #920: The new icons are instances in figma. * The width of the system icon is 12px x 12px, so there is no inner padding. * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before. */ .radio__checked-icon { scale: 0.5; } /* /Fix#456 */ /* Size modifiers */ .radio--small { --toggle-size: var(--syn-input-font-size-small); } .radio--medium { --toggle-size: var(--syn-font-size-medium); } .radio--large { --toggle-size: var(--syn-spacing-large); } .radio--small .radio__label, .radio--large .radio__label { margin-inline-start: var(--syn-spacing-x-small); } `; export { radio_custom_styles_default }; //# sourceMappingURL=chunk.GKA5WPFF.js.map