[Feature Request] Using coloured badge in <v-bottom-nav>

[Nc32]

New Functionality

Trying to use coloured badge in v-bottom-nav.
But it shows like this: https://codepen.io/nc32/pen/NwevRy

Improvements

https://codepen.io/nc32/pen/pdqaQy
this is just an example, not a solution.AFAIK It doesn't work in shift mode

Bugs or Edge Cases it Helps Avoid

nothing.

[richardtallent]

+1 on this, I was just about to file a report for it. It's due to the selectors used for the greyscale filter and the 0.5 opacity. I was able to work around it for now with similar CSS:

.badge__badge {
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.2em;
}
.bottom-nav .btn:not(.btn--active) {
	filter: none;
	opacity: 1;
}
.bottom-nav .btn:not(.btn--active) .btn__content svg,
.bottom-nav .btn:not(.btn--active) .btn__content > span:not(.badge) {
	filter: grayscale(100%);
	opacity: 0.4;
}

This also tweaks the metrics, since the badges by default don't seem appropriately proportional to the icon. There's a bit in there about SVG because I'm using FA 5 Pro icons rather than Material in my nav.

[seifip]

Any update on this?

[johnleider]

It has a milestone on it...

[johnleider]

I'm going to push this to v1.4 (possibly v1.3) to coincide with the toolbar refactor as it will use it as a baseline in the future.