Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Active router links in a dark v-navigation-drawer are receiving incorrect styling #2105

Closed
stoked74 opened this issue Oct 9, 2017 · 5 comments

Comments

@stoked74
Copy link

stoked74 commented Oct 9, 2017

Create a dark v-navigation-drawer in an app with the light them specified and click on a router link in the drawer. When the link is active it's inheriting the active css class from the light theme when it should be using the css from the dark component. The link virtually disappears when it's active.

This didn't occur prior to 16.4

Versions

Vuetify 16.4
Chrome
OSX

What is expected ?

The link should remain blue when it's in an active state.

What is actually happening ?

The link turns grey causing it to disappear. I'm not sure if this is a bug or if I need to change or add a prop etc, but the links have always functioned properly in the past.

Reproduction Link

https://codepen.io/smitchell/pen/KXoJrZ

@nekosaur nekosaur added the pending review The issue is still pending disposition label Oct 9, 2017
@jacekkarczmarczyk
Copy link
Member

be3e155

jacekkarczmarczyk added a commit to jacekkarczmarczyk/vuetify that referenced this issue Oct 9, 2017
@johnleider johnleider removed the pending review The issue is still pending disposition label Oct 9, 2017
johnleider pushed a commit that referenced this issue Oct 9, 2017
@bretonio
Copy link

A similar difficulty here. In dark theme list items visited — v-list> followed by v-list-tile — are styled dark blue.

Changing the v-list theme visited or current links are dark blue and the background white but then so are the icons white.

My dropping drawer follows.

    <v-navigation-drawer
      :mini-variant.sync="miniVariant"
      :clipped="clipped"
      v-model="drawer"
      fixed
      app
    >
      <v-list light>
        <v-list-tile
          router
          :to="item.to"
          :key="i"
          v-for="(item, i) in items"
          exact
        >
          <v-list-tile-action>
            <v-icon v-html="item.icon"></v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title v-text="item.title"></v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>

I have rummaged through the .styl files to see where this behavior is defined. Nothing yet.
And I would really like the drawer to fill-height while we are at it.
Bug me if I have not been clear and thanks.

@jacekkarczmarczyk
Copy link
Member

Please create a new issue using issue creator

@bretonio
Copy link

bretonio commented Feb 20, 2018 via email

@lock
Copy link

lock bot commented Apr 14, 2019

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

@lock lock bot locked as resolved and limited conversation to collaborators Apr 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants