Refactored chips and ac

pull/5677/head
Cagatay Civici 2024-04-08 13:49:53 +03:00
parent 694521dbd7
commit f33ac1a5cf
4 changed files with 17 additions and 17 deletions

View File

@ -19,7 +19,7 @@ const classes = {
], ],
input: 'p-autocomplete-input', input: 'p-autocomplete-input',
container: ({ props, instance }) => [ container: ({ props, instance }) => [
'p-autocomplete-chip-group', 'p-autocomplete-input-multiple',
{ {
'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'
} }

View File

@ -12,7 +12,7 @@ const classes = {
} }
], ],
container: ({ props, instance }) => [ container: ({ props, instance }) => [
'p-inputchips-group', 'p-inputchips-input',
{ {
'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'
} }

View File

@ -21,7 +21,7 @@ export default {
} }
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input, .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-chip-group { .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@ -131,7 +131,7 @@ export default {
font-weight: 600; font-weight: 600;
} }
.p-autocomplete-chip-group { .p-autocomplete-input-multiple {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
@ -152,28 +152,28 @@ export default {
box-shadow: ${dt('autocomplete.input.multiple.box.shadow')}; box-shadow: ${dt('autocomplete.input.multiple.box.shadow')};
} }
.p-autocomplete:not(.p-disabled):hover .p-autocomplete-chip-group { .p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.input.multiple.hover.border.color')}; border-color: ${dt('autocomplete.input.multiple.hover.border.color')};
} }
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-chip-group { .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.input.multiple.focus.border.color')}; border-color: ${dt('autocomplete.input.multiple.focus.border.color')};
outline: 0 none; outline: 0 none;
} }
.p-autocomplete.p-invalid .p-autocomplete-chip-group { .p-autocomplete.p-invalid .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.input.multiple.invalid.border.color')}; border-color: ${dt('autocomplete.input.multiple.invalid.border.color')};
} }
.p-variant-filled.p-autocomplete-chip-group { .p-variant-filled.p-autocomplete-input-multiple {
background: ${dt('autocomplete.input.multiple.filled.background')}; background: ${dt('autocomplete.input.multiple.filled.background')};
} }
.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-chip-group { .p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple {
background: ${dt('autocomplete.input.multiple.filled.focus.background')}; background: ${dt('autocomplete.input.multiple.filled.focus.background')};
} }
.p-autocomplete.p-disabled .p-autocomplete-chip-group { .p-autocomplete.p-disabled .p-autocomplete-input-multiple {
opacity: 1; opacity: 1;
background: ${dt('autocomplete.input.multiple.disabled.background')}; background: ${dt('autocomplete.input.multiple.disabled.background')};
color: ${dt('autocomplete.input.multiple.disabled.color')}; color: ${dt('autocomplete.input.multiple.disabled.color')};

View File

@ -4,7 +4,7 @@ export default {
display: inline-flex; display: inline-flex;
} }
.p-inputchips-group { .p-inputchips-input {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
@ -25,28 +25,28 @@ export default {
box-shadow: ${dt('chips.box.shadow')}; box-shadow: ${dt('chips.box.shadow')};
} }
.p-inputchips:not(.p-disabled):hover .p-inputchips-group { .p-inputchips:not(.p-disabled):hover .p-inputchips-input {
border-color: ${dt('chips.hover.border.color')}; border-color: ${dt('chips.hover.border.color')};
} }
.p-inputchips:not(.p-disabled).p-focus .p-inputchips-group { .p-inputchips:not(.p-disabled).p-focus .p-inputchips-input {
border-color: ${dt('chips.focus.border.color')}; border-color: ${dt('chips.focus.border.color')};
outline: 0 none; outline: 0 none;
} }
.p-inputchips.p-invalid .p-inputchips-group { .p-inputchips.p-invalid .p-inputchips-input {
border-color: ${dt('chips.invalid.border.color')}; border-color: ${dt('chips.invalid.border.color')};
} }
.p-variant-filled.p-inputchips-group { .p-variant-filled.p-inputchips-input {
background: ${dt('chips.filled.background')}; background: ${dt('chips.filled.background')};
} }
.p-inputchips:not(.p-disabled).p-focus .p-variant-filled.p-inputchips-group { .p-inputchips:not(.p-disabled).p-focus .p-variant-filled.p-inputchips-input {
background: ${dt('chips.filled.focus.background')}; background: ${dt('chips.filled.focus.background')};
} }
.p-inputchips.p-disabled .p-inputchips-group { .p-inputchips.p-disabled .p-inputchips-input {
opacity: 1; opacity: 1;
background: ${dt('chips.disabled.background')}; background: ${dt('chips.disabled.background')};
color: ${dt('chips.disabled.color')}; color: ${dt('chips.disabled.color')};