Refactored chips and ac
parent
694521dbd7
commit
f33ac1a5cf
|
@ -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'
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
}
|
}
|
||||||
|
|
|
@ -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')};
|
||||||
|
|
|
@ -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')};
|
||||||
|
|
Loading…
Reference in New Issue