2
0
Fork 0
Vmeda.Online/src/theme/components/ion-radio.scss

81 lines
1.7 KiB
SCSS
Raw Normal View History

// Radio.
ion-radio,
input[type=radio],
.select-alert .alert-radio-icon {
--border-radius: 50%;
--border-width: 2px;
--outer-border-width: 2px;
--border-style: solid;
--size: 20px;
&:not(.ion-color) {
--color: var(--text-color);
--color-checked: var(--color);
}
}
.ios ion-radio,
.ios input[type=radio],
.select-alert.ios .alert-radio-icon {
--border-width: 1px;
--outer-border-width: 1px;
}
ion-radio::part(label) {
white-space: normal;
}
.ios ion-radio {
&::part(container) {
width: var(--size);
height: var(--size);
margin: 0px;
border-radius: var(--border-radius);
border-width: var(--outer-border-width);
border-style: var(--border-style);
border-color: var(--color);
}
&::part(mark) {
border-radius: 50%;
width: calc(50% + var(--outer-border-width));
height: calc(50% + var(--outer-border-width));
transform: scale3d(0, 0, 0);
transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
background: var(--contrast-background);
border: 0 !important;
}
&.radio-checked {
&::part(container) {
border-color: var(--color);
background: var(--color);
}
&::part(mark) {
transform: scale3d(1, 1, 1);
}
}
}
ion-radio {
&.radio-disabled {
@include pointer-events-on-buttons();
&.md::part(label),
&.ios {
opacity: var(--mdl-input-disabled-opacity);
}
&::part(container) {
opacity: var(--mdl-input-disabled-opacity);
}
}
}
input[type=radio][disabled] {
opacity: var(--mdl-input-disabled-opacity);
}