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 Report][2.6.6] Css errors skeleton-loader, button, chip and expansion panel #15320

agreedSkiing opened this issue Jun 20, 2022 · 0 comments
sass T: bug Functionality that does not work as intended/expected


Copy link


Vuetify Version: 2.6.6
Vue Version: 2.6.14
Browsers: Google Chrome
OS: Linux

Steps to reproduce

Whilst validating our vue application using vuetify 2.6.6 we found multiple css errors created by the generated sass from vuetify on a page where we use v-chip, v-expansion-panels, v-skeleton-loader and a single button.

Expected Behavior

No css validation error should occur, and don't really know since the css is broken so this might impact current styling.

Actual Behavior

Style are not applied

Reproduction Link

Other comments

The generated code looks like this

  1. .v-btn--block has max-width auto

    .v-btn--block {
        display: flex;
        flex: 1 0 auto;
        min-width: 100% !important;
        max-width: auto;

    And the cause of this error seems to be in

  2. .v-chip--pill .v-chip__filter has a incorrect assigned margin-right

    .v-chip--pill .v-chip__filter {
        margin-right: 0 16px 0 0;

    And the origin of this error is in the file

  3. .v-skeleton-loader__image has ::first-child and ::last-child not :first-child and :last-child

    .v-skeleton-loader__image::first-child, .v-skeleton-loader__image::last-child {
        border-radius: inherit;

    Which I guess was a mistak in

  4. .v-expansion-panel-header has the incorrect state :hover--active

    .theme--light.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active:hover::before, .theme--light.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active::before {
        opacity: 0.12;
    .theme--light.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active:focus::before {
        opacity: 0.16;
    .theme--dark.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active:hover::before, .theme--dark.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active::before {
        opacity: 0.24;
    .theme--dark.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active:focus::before {
        opacity: 0.32;

    which is seems to be a mixin problem when and interact

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected sass and removed S: triage labels Jun 20, 2022
@KaelWD KaelWD added this to the v2.6.x milestone Jun 20, 2022
@KaelWD KaelWD self-assigned this Jun 29, 2022
@KaelWD KaelWD closed this as completed in 621f273 Jun 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
sass T: bug Functionality that does not work as intended/expected
None yet

No branches or pull requests

2 participants