New tokens for Rating
parent
04c457f3bf
commit
a14ddd9b28
|
@ -5,7 +5,7 @@ const theme = ({ dt }) => `
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.25rem;
|
gap: ${dt('rating.gap')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-rating-option {
|
.p-rating-option {
|
||||||
|
@ -15,19 +15,21 @@ const theme = ({ dt }) => `
|
||||||
outline-color: transparent;
|
outline-color: transparent;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-rating-option.p-focus-visible {
|
.p-rating-option.p-focus-visible {
|
||||||
|
box-shadow: ${dt('focus.ring.shadow')};
|
||||||
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')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-rating-icon {
|
.p-rating-icon {
|
||||||
color: ${dt('rating.icon.color')};
|
color: ${dt('rating.icon.color')};
|
||||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||||
font-size: 1rem;
|
font-size: ${dt('rating.icon.size')};
|
||||||
width: 1rem;
|
width: ${dt('rating.icon.size')};
|
||||||
height: 1rem;
|
height: ${dt('rating.icon.size')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
|
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
|
gap: '0.25rem',
|
||||||
icon: {
|
icon: {
|
||||||
|
size: '1rem',
|
||||||
color: '{text.muted.color}',
|
color: '{text.muted.color}',
|
||||||
hoverColor: '{primary.color}',
|
hoverColor: '{primary.color}',
|
||||||
activeColor: '{primary.color}'
|
activeColor: '{primary.color}'
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
|
gap: '0.25rem',
|
||||||
icon: {
|
icon: {
|
||||||
|
size: '1.25rem',
|
||||||
color: '{text.muted.color}',
|
color: '{text.muted.color}',
|
||||||
hoverColor: '{primary.color}',
|
hoverColor: '{primary.color}',
|
||||||
activeColor: '{primary.color}'
|
activeColor: '{primary.color}'
|
||||||
|
|
Loading…
Reference in New Issue