vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Temporarily use emerald as main color for testing, refactored Checkbox styles.

pull/5677/head
Cagatay Civici 2024-04-06 23:08:16 +03:00
parent ac1360664e
commit 84bf4af18a
5 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/checkbox/style/CheckboxStyle.js
View File

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

14
components/lib/themes/primeone/base/checkbox/index.js
View File

@ -52,21 +52,21 @@ export default {
border-color: ${dt('checkbox.hover.border.color')}; 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')}; border-color: ${dt('checkbox.checked.border.color')};
background: ${dt('checkbox.checked.background')}; 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')}; 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')}; background: ${dt('checkbox.checked.hover.background')};
border-color: ${dt('checkbox.checked.hover.border.color')}; 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')}; color: ${dt('checkbox.icon.checked.hover.color')};
} }
@ -80,14 +80,14 @@ export default {
} }
.p-checkbox.p-variant-filled .p-checkbox-box { .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')}; 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')}; background: ${dt('checkbox.checked.hover.background')};
} }

2
components/lib/themes/primeone/presets/aura/checkbox/index.js
View File

@ -9,7 +9,7 @@ export default {
disabledBackground: '{form.field.disabled.background}', disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}', filledBackground: '{form.field.filled.background}',
borderColor: '{form.field.border.color}', borderColor: '{form.field.border.color}',
hoverBordercolor: '{form.field.hover.border.color}', hoverBorderColor: '{form.field.hover.border.color}',
checkedBorderColor: '{primary.color}', checkedBorderColor: '{primary.color}',
checkedHoverBorderColor: '{primary.hover.color}', checkedHoverBorderColor: '{primary.hover.color}',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',

2
doc/checkbox/IndeterminateDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>When <i>indeterminate</i> is present, the checkbox state specified as indeterminate.</p> <p>When <i>indeterminate</i> is present, the checkbox masks the actual value visually.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Checkbox v-model="checked" indeterminate binary /> <Checkbox v-model="checked" indeterminate binary />

26
themes/app-theme.js
View File

@ -5,18 +5,18 @@ import Aura from 'primevue/themes/primeone/aura';
const Noir = definePreset(Aura, { const Noir = definePreset(Aura, {
semantic: { semantic: {
primary: { primary: {
50: '{zinc.50}', 50: '{emerald.50}',
100: '{zinc.100}', 100: '{emerald.100}',
200: '{zinc.200}', 200: '{emerald.200}',
300: '{zinc.300}', 300: '{emerald.300}',
400: '{zinc.400}', 400: '{emerald.400}',
500: '{zinc.500}', 500: '{emerald.500}',
600: '{zinc.600}', 600: '{emerald.600}',
700: '{zinc.700}', 700: '{emerald.700}',
800: '{zinc.800}', 800: '{emerald.800}',
900: '{zinc.900}', 900: '{emerald.900}',
950: '{zinc.950}' 950: '{emerald.950}'
}, } /*,
colorScheme: { colorScheme: {
light: { light: {
primary: { primary: {
@ -46,7 +46,7 @@ const Noir = definePreset(Aura, {
focusColor: 'rgba(255,255,255,.87)' focusColor: 'rgba(255,255,255,.87)'
} }
} }
} }*/
} }
}); });