Q-Rating and colors
-
So here’s a gitter conversation that I thought may interest other people too:
Hey
for the q-rating component is there anyway of changing the base & active colour like there was previously? i found the defaults of grey unselected and yellow active to suit my layout more however the stylus variables ($rating-grade-color, $rating-active-grade-color) seem to have been removed in 0.14? Thanks!Laurent @spectrolite 12:25
@Plooze a quick look at the source code and styles tells me that q-rating is based on one color only, that you may set through the color property (no need to fiddle with css). The current behavior is to dim the opacity of unselected items. I agree grey would suit even more use cases and provides better contrast, so if you log an issue, ping me and I’ll support it.Laurent @spectrolite 12:34
@Plooze there’s a trick to get to what you want though.<style lang="stylus"> .q-rating i.active filter grayscale(0) -webkit-filter grayscale(0) .q-rating i filter grayscale(100%) -webkit-filter grayscale(100%) </style>This makes unselected stars grey and gives them their color back when selected. Color is controlled from the tag as detailed in beta docs.
btw $rating-grade-color still exists (but it’s easier to just use q-rating’s color property), and $rating-active-grade-color has indeed been dropped (or at least I didn’t find it in sources).
_ -
A simple note: QRating also has a “color” prop in v0.14
