Focus visuals for chips
parent
6d09456b9c
commit
c735e5b3c9
|
@ -178,17 +178,22 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('autocomplete.disabled.color')};
|
||||
}
|
||||
|
||||
.p-autocomplete-input-multiple .p-chip {
|
||||
.p-autocomplete-chip.p-chip {
|
||||
padding-top: calc(${dt('autocomplete.padding.y')} / 2);
|
||||
padding-bottom: calc(${dt('autocomplete.padding.y')} / 2);
|
||||
border-radius: ${dt('autocomplete.chip.border.radius')};
|
||||
}
|
||||
|
||||
.p-autocomplete-input-multiple:has(.p-chip) {
|
||||
.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
|
||||
padding-left: calc(${dt('autocomplete.padding.y')} / 2);
|
||||
padding-right: calc(${dt('autocomplete.padding.y')} / 2);
|
||||
}
|
||||
|
||||
.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
|
||||
background: ${dt('inputchips.chip.focus.background')};
|
||||
color: ${dt('inputchips.chip.focus.color')};
|
||||
}
|
||||
|
||||
.p-autocomplete-input-chip {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
|
|
|
@ -54,19 +54,19 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('inputchips.disabled.color')};
|
||||
}
|
||||
|
||||
.p-inputchips .p-chip {
|
||||
.p-inputchips-chip.p-chip {
|
||||
padding-top: calc(${dt('inputchips.padding.y')} / 2);
|
||||
padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
|
||||
border-radius: ${dt('inputchips.chip.border.radius')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
.p-inputchips-chip-item.p-focus .p-chip {
|
||||
.p-inputchips-chip-item.p-focus .p-inputchips-chip {
|
||||
background: ${dt('inputchips.chip.focus.background')};
|
||||
color: ${dt('inputchips.chip.focus.color')};
|
||||
}
|
||||
|
||||
.p-inputchips-input:has(.p-chip) {
|
||||
.p-inputchips-input:has(.p-inputchips-chip) {
|
||||
padding-left: calc(${dt('inputchips.padding.y')} / 2);
|
||||
padding-right: calc(${dt('inputchips.padding.y')} / 2);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue