diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js index b9f0f9c29..124efa728 100644 --- a/components/lib/checkbox/style/CheckboxStyle.js +++ b/components/lib/checkbox/style/CheckboxStyle.js @@ -4,7 +4,7 @@ const classes = { root: ({ instance, props }) => [ 'p-checkbox p-component', { - 'p-highlight': instance.checked, + 'p-checkbox-checked': instance.checked, 'p-disabled': props.disabled, 'p-invalid': props.invalid, 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' diff --git a/components/lib/themes/primeone/base/checkbox/index.js b/components/lib/themes/primeone/base/checkbox/index.js index be953d6bb..c552a52a0 100644 --- a/components/lib/themes/primeone/base/checkbox/index.js +++ b/components/lib/themes/primeone/base/checkbox/index.js @@ -52,21 +52,21 @@ export default { border-color: ${dt('checkbox.hover.border.color')}; } -.p-checkbox.p-highlight .p-checkbox-box { +.p-checkbox-checked .p-checkbox-box { border-color: ${dt('checkbox.checked.border.color')}; background: ${dt('checkbox.checked.background')}; } -.p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon { +.p-checkbox-checked .p-checkbox-icon { color: ${dt('checkbox.icon.checked.color')}; } -.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { +.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background: ${dt('checkbox.checked.hover.background')}; border-color: ${dt('checkbox.checked.hover.border.color')}; } -.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box .p-checkbox-icon { +.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon { color: ${dt('checkbox.icon.checked.hover.color')}; } @@ -80,14 +80,14 @@ export default { } .p-checkbox.p-variant-filled .p-checkbox-box { - background: ${dt('checkbox.checked.filled.background')}; + background: ${dt('checkbox.filled.background')}; } -.p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { +.p-checkbox-checked.p-variant-filled .p-checkbox-box { background: ${dt('checkbox.checked.background')}; } -.p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { +.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background: ${dt('checkbox.checked.hover.background')}; } diff --git a/components/lib/themes/primeone/presets/aura/checkbox/index.js b/components/lib/themes/primeone/presets/aura/checkbox/index.js index 932808c1e..15ccb8e37 100644 --- a/components/lib/themes/primeone/presets/aura/checkbox/index.js +++ b/components/lib/themes/primeone/presets/aura/checkbox/index.js @@ -9,7 +9,7 @@ export default { disabledBackground: '{form.field.disabled.background}', filledBackground: '{form.field.filled.background}', borderColor: '{form.field.border.color}', - hoverBordercolor: '{form.field.hover.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', checkedBorderColor: '{primary.color}', checkedHoverBorderColor: '{primary.hover.color}', invalidBorderColor: '{form.field.invalid.border.color}', diff --git a/doc/checkbox/IndeterminateDoc.vue b/doc/checkbox/IndeterminateDoc.vue index 63182ea3d..61989ae87 100644 --- a/doc/checkbox/IndeterminateDoc.vue +++ b/doc/checkbox/IndeterminateDoc.vue @@ -1,6 +1,6 @@