@patreon/studio
Version:
Patreon Studio Design System
73 lines (70 loc) • 2.82 kB
CSS
.radio {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
cursor: pointer;
display: inline-block;
height: var(--global-space-x24);
min-height: var(--global-space-x24);
min-width: var(--global-space-x24);
position: relative;
width: var(--global-space-x24);
}.radio::before,.radio::after {
border-radius: var(--global-radius-circle);
content: "";
position: absolute;
z-index: 1;
}.radio::before {
background-color: var(--RadioInput-bg-default);
border: 1px solid var(--RadioInput-border-default);
box-sizing: border-box;
height: 100%;
width: 100%;
}.radio::after {
background-color: var(--RadioInput-dot);
height: var(--global-space-x8);
left: 50%;
margin: calc(var(--global-space-x4) * -1);
top: 50%;
transition: opacity var(--global-transition-regular-duration) var(--global-transition-regular-easing);
width: var(--global-space-x8);
z-index: 2;
}.radio:focus-visible {
outline: 0;
}.radio:focus-visible::before {
/* Firefox default outline color */
/* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Used for firefox */
outline: solid Highlight;
/* Chrome/Safari default outline color */
/* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Used for safari */
outline: -webkit-focus-ring-color auto;
outline-offset: var(--global-space-x4);
}.radio.isChecked {
cursor: default;
--RadioInput-bg-default: var(--global-control-surface-default);
--RadioInput-bg-hover: var(--global-control-surface-hover);
--RadioInput-bg-pressed: var(--global-control-surface-pressed);
--RadioInput-border-default: transparent;
--RadioInput-border-hover: transparent;
--RadioInput-border-pressed: transparent;
--RadioInput-dot: var(--global-control-action-default);
}.radio.isUnchecked {
--RadioInput-bg-default: var(--global-bg-base-default);
--RadioInput-bg-hover: var(--global-bg-base-hover);
--RadioInput-bg-pressed: var(--global-bg-base-pressed);
--RadioInput-border-default: var(--global-border-strong-default);
--RadioInput-border-hover: var(--global-border-strong-hover);
--RadioInput-border-pressed: var(--global-border-strong-pressed);
--RadioInput-dot: transparent;
}:is(.radio.isEnabled:hover,.radio.isEnabled:focus)::before {
background-color: var(--RadioInput-bg-hover);
border-color: var(--RadioInput-border-hover);
}.radio.isEnabled:active::before {
background-color: var(--RadioInput-bg-pressed);
border-color: var(--RadioInput-border-pressed);
}.radio.isDisabled {
cursor: not-allowed ;
opacity: var(--global-opacity-disabled);
}