Updated chips naming
parent
7fb075a85d
commit
0603df54d9
|
@ -12,15 +12,15 @@ const classes = {
|
|||
}
|
||||
],
|
||||
container: ({ props, instance }) => [
|
||||
'p-chips-list',
|
||||
'p-chips-group',
|
||||
{
|
||||
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
|
||||
}
|
||||
],
|
||||
token: ({ state, index }) => ['p-chips-item', { 'p-focus': state.focusedIndex === index }],
|
||||
label: 'p-chips-item-label',
|
||||
removeTokenIcon: 'p-chips-item-icon',
|
||||
inputToken: 'p-chips-input-item'
|
||||
token: ({ state, index }) => ['p-chips-chip', { 'p-focus': state.focusedIndex === index }],
|
||||
label: 'p-chips-chip-label',
|
||||
removeTokenIcon: 'p-chips-chip-icon',
|
||||
inputToken: 'p-chips-input-chip'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
@ -4,7 +4,7 @@ export default {
|
|||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-list {
|
||||
.p-chips-group {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
@ -25,34 +25,34 @@ export default {
|
|||
box-shadow: ${dt('chips.box.shadow')};
|
||||
}
|
||||
|
||||
.p-chips:not(.p-disabled):hover .p-chips-list {
|
||||
.p-chips:not(.p-disabled):hover .p-chips-group {
|
||||
border-color: ${dt('chips.hover.border.color')};
|
||||
}
|
||||
|
||||
.p-chips:not(.p-disabled).p-focus .p-chips-list {
|
||||
.p-chips:not(.p-disabled).p-focus .p-chips-group {
|
||||
border-color: ${dt('chips.focus.border.color')};
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
.p-chips.p-invalid .p-chips-list {
|
||||
.p-chips.p-invalid .p-chips-group {
|
||||
border-color: ${dt('chips.invalid.border.color')};
|
||||
}
|
||||
|
||||
.p-variant-filled.p-chips-list {
|
||||
.p-variant-filled.p-chips-group {
|
||||
background: ${dt('chips.filled.background')};
|
||||
}
|
||||
|
||||
.p-chips:not(.p-disabled).p-focus .p-variant-filled.p-chips-list {
|
||||
.p-chips:not(.p-disabled).p-focus .p-variant-filled.p-chips-group {
|
||||
background: ${dt('chips.filled.focus.background')};
|
||||
}
|
||||
|
||||
.p-chips.p-disabled .p-chips-list {
|
||||
.p-chips.p-disabled .p-chips-group {
|
||||
opacity: 1;
|
||||
background: ${dt('chips.disabled.background')};
|
||||
color: ${dt('chips.disabled.color')};
|
||||
}
|
||||
|
||||
.p-chips-item {
|
||||
.p-chips-chip {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
@ -63,24 +63,24 @@ export default {
|
|||
border-radius: ${dt('rounded.sm')};
|
||||
}
|
||||
|
||||
.p-chips-item.p-focus {
|
||||
.p-chips-chip.p-focus {
|
||||
background: ${dt('chips.chip.focus.background')};
|
||||
color: ${dt('chips.chip.focus.color')};
|
||||
}
|
||||
|
||||
.p-chips-item-icon {
|
||||
.p-chips-chip-icon {
|
||||
cursor: pointer;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.p-chips-input-item {
|
||||
.p-chips-input-chip {
|
||||
padding: 0.25rem 0;
|
||||
margin-left: 0.5rem;
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-input-item input {
|
||||
.p-chips-input-chip input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
|
@ -97,7 +97,7 @@ export default {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.p-chips-input-item input::placeholder {
|
||||
.p-chips-input-chip input::placeholder {
|
||||
color: ${dt('chips.placeholder.color')};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue