@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
98 lines (83 loc) • 2.03 kB
CSS
.radio {
display: inline-flex;
position: relative;
vertical-align: text-bottom;
}
.radio__control[type="radio"] {
height: 18px;
min-width: 18px;
width: 18px;
}
.radio--large .radio__control[type="radio"] {
height: 24px;
min-width: 24px;
width: 24px;
}
span.radio__icon {
display: inline-flex;
height: 18px;
outline-offset: 1px;
}
.radio--large span.radio__icon {
height: 24px;
}
span.radio__icon[hidden] {
display: inline-flex;
}
svg.radio__checked {
color: var(--radio-checked-color, var(--color-foreground-primary));
}
svg.radio__unchecked {
color: var(--radio-unchecked-color, var(--color-foreground-primary));
}
input.radio__control[type="radio"] {
font-size: 100%;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
z-index: 1;
}
.radio svg {
display: inline-block;
fill: currentColor;
pointer-events: none;
stroke: currentColor;
stroke-width: 0;
height: 18px;
vertical-align: middle;
width: 18px;
}
.radio--large svg {
height: 24px;
width: 24px;
}
input.radio__control[type="radio"] + span.radio__icon svg.radio__checked {
display: none;
}
input.radio__control[type="radio"] + span.radio__icon svg.radio__unchecked,
input.radio__control[type="radio"]:checked
+ span.radio__icon
svg.radio__checked {
display: inline-block;
}
input.radio__control[type="radio"]:checked
+ span.radio__icon
svg.radio__unchecked {
display: none;
}
input.radio__control[type="radio"][disabled] + span.radio__icon {
opacity: 1;
}
input.radio__control[type="radio"][disabled] + span.radio__icon svg {
fill: var(--radio-disabled-color, var(--color-foreground-disabled));
}
input.radio__control[type="radio"]:focus + span.radio__icon {
outline: 1px auto;
outline-color: var(--radio-outline, var(--color-foreground-secondary));
outline-offset: 2px;
}
input.radio__control[type="radio"]:focus:not(:focus-visible)
+ span.radio__icon {
outline: none;
}