UNPKG

@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
.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); }