@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
JavaScript
// 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