diff --git a/apps/showcase/doc/checkbox/DisabledDoc.vue b/apps/showcase/doc/checkbox/DisabledDoc.vue index f27f945a3..59fdf040f 100644 --- a/apps/showcase/doc/checkbox/DisabledDoc.vue +++ b/apps/showcase/doc/checkbox/DisabledDoc.vue @@ -2,8 +2,9 @@

When disabled is present, the element cannot be edited and focused.

-
- +
+ +
@@ -12,15 +13,18 @@ export default { data() { return { - checked: false, + checked1: false, + checked2: true, code: { basic: ` - + + `, options: ` @@ -36,8 +40,9 @@ export default { `, composition: ` diff --git a/packages/primevue/src/checkbox/style/CheckboxStyle.js b/packages/primevue/src/checkbox/style/CheckboxStyle.js index ad0eae635..6f4cdb148 100644 --- a/packages/primevue/src/checkbox/style/CheckboxStyle.js +++ b/packages/primevue/src/checkbox/style/CheckboxStyle.js @@ -106,6 +106,7 @@ const theme = ({ dt }) => ` .p-checkbox.p-disabled .p-checkbox-box { background: ${dt('checkbox.disabled.background')}; + border-color: ${dt('checkbox.checked.disabled.border.color')}; } .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { diff --git a/packages/themes/src/presets/aura/checkbox/index.js b/packages/themes/src/presets/aura/checkbox/index.js index 24444d109..92aafc31e 100644 --- a/packages/themes/src/presets/aura/checkbox/index.js +++ b/packages/themes/src/presets/aura/checkbox/index.js @@ -14,6 +14,7 @@ export default { checkedBorderColor: '{primary.color}', checkedHoverBorderColor: '{primary.hover.color}', checkedFocusBorderColor: '{primary.color}', + checkedDisabledBorderColor: '{form.field.border.color}', invalidBorderColor: '{form.field.invalid.border.color}', shadow: '{form.field.shadow}', focusRing: { diff --git a/packages/themes/src/presets/lara/checkbox/index.js b/packages/themes/src/presets/lara/checkbox/index.js index 80ee69df5..c0be95dca 100644 --- a/packages/themes/src/presets/lara/checkbox/index.js +++ b/packages/themes/src/presets/lara/checkbox/index.js @@ -14,6 +14,7 @@ export default { checkedBorderColor: '{primary.color}', checkedHoverBorderColor: '{primary.hover.color}', checkedFocusBorderColor: '{primary.color}', + checkedDisabledBorderColor: '{form.field.border.color}', invalidBorderColor: '{form.field.invalid.border.color}', shadow: '{form.field.shadow}', focusRing: { diff --git a/packages/themes/src/presets/nora/checkbox/index.js b/packages/themes/src/presets/nora/checkbox/index.js index b365bb61d..1f931c42a 100644 --- a/packages/themes/src/presets/nora/checkbox/index.js +++ b/packages/themes/src/presets/nora/checkbox/index.js @@ -14,6 +14,7 @@ export default { checkedBorderColor: '{primary.color}', checkedHoverBorderColor: '{primary.hover.color}', checkedFocusBorderColor: '{primary.color}', + checkedDisabledBorderColor: '{form.field.border.color}', invalidBorderColor: '{form.field.invalid.border.color}', shadow: '{form.field.shadow}', focusRing: {