@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
48 lines (46 loc) • 1.75 kB
CSS
.mt-radio-group-indicator__input[data-v-610a4a5e] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mt-radio-group-indicator__control[data-v-610a4a5e] {
width: var(--scale-size-16);
height: var(--scale-size-16);
border-radius: var(--border-radius-round);
border: 1px solid var(--color-border-primary-default);
background: var(--color-background-primary-default);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition:
border-color 0.2s ease,
background-color 0.2s ease;
}
.mt-radio-group-indicator__control[data-v-610a4a5e]::after {
content: "";
width: var(--scale-size-8);
height: var(--scale-size-8);
border-radius: var(--border-radius-round);
background: var(--color-static-white);
transform: scale(0);
transition: transform 0.15s ease-out;
}
.mt-radio-group-indicator__input:focus-visible + .mt-radio-group-indicator__control[data-v-610a4a5e] {
outline: 2px solid var(--color-border-brand-default);
outline-offset: 2px;
}
.mt-radio-group-indicator__input:checked + .mt-radio-group-indicator__control[data-v-610a4a5e] {
border-color: var(--color-interaction-primary-default);
background: var(--color-interaction-primary-default);
}
.mt-radio-group-indicator__input:checked + .mt-radio-group-indicator__control[data-v-610a4a5e]::after {
transform: scale(1);
}
.mt-radio-group-indicator__input:disabled + .mt-radio-group-indicator__control[data-v-610a4a5e] {
background: var(--color-background-tertiary-default);
border-color: var(--color-border-primary-default);
}
.mt-radio-group-indicator__input:checked:disabled + .mt-radio-group-indicator__control[data-v-610a4a5e]::after {
background: var(--color-icon-primary-disabled);
}