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

Focus visuals for chips

pull/5756/head
Cagatay Civici 2024-05-15 11:48:30 +03:00
parent 6d09456b9c
commit c735e5b3c9
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -178,17 +178,22 @@ const theme = ({ dt }) => `
color: ${dt('autocomplete.disabled.color')}; 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-top: calc(${dt('autocomplete.padding.y')} / 2);
padding-bottom: calc(${dt('autocomplete.padding.y')} / 2); padding-bottom: calc(${dt('autocomplete.padding.y')} / 2);
border-radius: ${dt('autocomplete.chip.border.radius')}; 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-left: calc(${dt('autocomplete.padding.y')} / 2);
padding-right: 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 { .p-autocomplete-input-chip {
flex: 1 1 auto; flex: 1 1 auto;
display: inline-flex; display: inline-flex;

6
components/lib/inputchips/style/InputChipsStyle.js
View File

@ -54,19 +54,19 @@ const theme = ({ dt }) => `
color: ${dt('inputchips.disabled.color')}; color: ${dt('inputchips.disabled.color')};
} }
.p-inputchips .p-chip { .p-inputchips-chip.p-chip {
padding-top: calc(${dt('inputchips.padding.y')} / 2); padding-top: calc(${dt('inputchips.padding.y')} / 2);
padding-bottom: calc(${dt('inputchips.padding.y')} / 2); padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
border-radius: ${dt('inputchips.chip.border.radius')}; border-radius: ${dt('inputchips.chip.border.radius')};
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}; 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')}; background: ${dt('inputchips.chip.focus.background')};
color: ${dt('inputchips.chip.focus.color')}; 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-left: calc(${dt('inputchips.padding.y')} / 2);
padding-right: calc(${dt('inputchips.padding.y')} / 2); padding-right: calc(${dt('inputchips.padding.y')} / 2);
} }