Refactored RadioButton

pull/5677/head
Cagatay Civici 2024-04-07 13:52:43 +03:00
parent f63a1cf6a4
commit 21d8aae910
2 changed files with 7 additions and 7 deletions

View File

@ -4,7 +4,7 @@ const classes = {
root: ({ instance, props }) => [
'p-radiobutton p-component',
{
'p-highlight': instance.checked,
'p-radiobutton-checked': instance.checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'

View File

@ -55,23 +55,23 @@ export default {
border-color: ${dt('radiobutton.hover.border.color')};
}
.p-radiobutton.p-highlight .p-radiobutton-box {
.p-radiobutton.p-radiobutton-checked .p-radiobutton-box {
border-color: ${dt('radiobutton.checked.border.color')};
background: ${dt('radiobutton.checked.background')};
}
.p-radiobutton.p-highlight .p-radiobutton-box .p-radiobutton-icon {
.p-radiobutton.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
background: ${dt('radiobutton.icon.checked.color')};
transform: translateZ(0) scale(1, 1);
visibility: visible;
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box {
border-color: ${dt('radiobutton.checked.hover.border.color')};
background: ${dt('radiobutton.checked.hover.background')};
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
background: ${dt('radiobutton.icon.checked.hover.color')};
}
@ -88,11 +88,11 @@ export default {
background: ${dt('radiobutton.filled.background')};
}
.p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
.p-radiobutton.p-variant-filled.p-radiobutton-checked .p-radiobutton-box {
background: ${dt('radiobutton.checked.background')};
}
.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box {
background: ${dt('radiobutton.checked.hover.background')};
}