Refactored Rating
parent
21d8aae910
commit
69325de4e8
|
@ -16,14 +16,14 @@ const classes = {
|
||||||
],
|
],
|
||||||
cancelIcon: 'p-rating-icon p-rating-cancel',
|
cancelIcon: 'p-rating-icon p-rating-cancel',
|
||||||
item: ({ instance, props, value }) => [
|
item: ({ instance, props, value }) => [
|
||||||
'p-rating-item',
|
'p-rating-option',
|
||||||
{
|
{
|
||||||
'p-rating-item-active': value <= props.modelValue,
|
'p-rating-option-active': value <= props.modelValue,
|
||||||
'p-focus-visible': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
|
'p-focus-visible': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
onIcon: 'p-rating-icon',
|
onIcon: 'p-rating-icon p-rating-on-icon',
|
||||||
offIcon: 'p-rating-icon'
|
offIcon: 'p-rating-icon p-rating-off-icon'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
|
|
|
@ -7,7 +7,7 @@ export default {
|
||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-rating-item {
|
.p-rating-option {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -16,7 +16,7 @@ export default {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-rating-item.p-focus-visible {
|
.p-rating-option.p-focus-visible {
|
||||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||||
outline-offset: ${dt('focus.ring.offset')};
|
outline-offset: ${dt('focus.ring.offset')};
|
||||||
}
|
}
|
||||||
|
@ -29,11 +29,11 @@ export default {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
|
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
|
||||||
color: ${dt('rating.icon.hover.color')};
|
color: ${dt('rating.icon.hover.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-rating-item-active .p-rating-icon {
|
.p-rating-option-active .p-rating-icon {
|
||||||
color: ${dt('rating.icon.active.color')};
|
color: ${dt('rating.icon.active.color')};
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
Loading…
Reference in New Issue