Vuetify: icon color in active list item in drawer menu differs from text color

Created on 29 Aug 2017 · 7Comments · Source: vuetifyjs/vuetify

Steps to reproduce

Create router menu and set route or hover on link

Versions

Vuetify 0.15.0-beta.4
Vue 2.4.2

What is expected ?

Icon should be blue (same color as text)

What is actually happening ?

Icon has default color

Reproduction Link

https://codepen.io/wernerm/pen/LjggoV

Edit: shouldn't be blue if the icon is inside the button
https://codepen.io/anon/pen/YxRPvR

enhancement

Source

jacekkarczmarczyk

Most helpful comment

At the moment I'm getting around this by adding two simple CSS rules to the component where a v-list is used:

.list__tile--active .list__tile__action,
.list__tile--active .list__tile__action .icon {
  color: inherit;
}

Maybe it would be nice if this behaviour was configurable via a new v-list prop?

wernerm on 30 Aug 2017

👍3

All 7 comments

This is something that is not covered in spec and currently is just my interpretation. I think this is something we should discuss to come up with the best handling of color for the various situations that are possible.

johnleider on 30 Aug 2017

At the moment I'm getting around this by adding two simple CSS rules to the component where a v-list is used:

.list__tile--active .list__tile__action,
.list__tile--active .list__tile__action .icon {
  color: inherit;
}

Maybe it would be nice if this behaviour was configurable via a new v-list prop?

wernerm on 30 Aug 2017

👍3

TIL that comments can break the child chain in stylus. I had added a comment and it essentially removed a ton of specific styles.

johnleider on 11 Sep 2017

👍1

I also have dark-blue links and icons in a dark-themed drawer — my project is based on vue init vuetifyjs/webpack o-meu-projeto &mdash and have tried overriding styles for v-list-tile and its parents and offspring. No joy.

I was able to disable the feature in a layout template based on your Dark — or perhaps that project lacks that active state feature in the side navigation. The settings in nuxt.config.js are standard issue. Let me try something.

<template>
  <v-app dark>
    <v-navigation-drawer
      :mini-variant.sync="miniVariant"
      clipped
      v-model="drawer"
      fixed
      app
    >

The only difference with my code is the activation of the mini-variant in my troublesome version.

So okay I will start projects with the default layout for now instead of vue init. Thanks.

bretonio on 23 Mar 2018

Please do not comment on old closed tickets @bretonio

johnleider on 23 Mar 2018

Sorry John

bretonio on 26 Mar 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord