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

This commit is contained in:
Cagatay Civici 2024-04-06 23:08:16 +03:00
parent ac1360664e
commit 84bf4af18a
5 changed files with 23 additions and 23 deletions

View file

@ -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')};
}

View file

@ -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}',