[Bug Report] v-alert text prominent incorrect css for icon opacity

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.12 Browsers: Chrome 85.0.4183.83 OS: Mac OS 10.14.6

Steps to reproduce

Using latest vue-cli (4.5.4) and latest vuetify (2.2.11), and creating a new project with defaults or any custom configuration.

<v-alert type="info" text prominent>Bla,bla,bla</v-alert>

Opacity around icon doesn’t appears.

Rule .v-icon.v-icon::after overwrittes .v-alert–prominent .v-alert__icon:after so:

.v-icon.v-icon:after {
    background-color: currentColor;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scale(1.3);
    width: 100%;
    transition: opacity .2s cubic-bezier(.4,0,.6,1);
}

.v-alert--prominent .v-alert__icon:after {
    background: currentColor!important;
    border-radius: 50%;
    bottom: 0;
    content: "";
    left: 0;
    opacity: .16; <-- overwritten
    position: absolute;
    right: 0;
    top: 0;
}

Expected Behavior

With opacity

Actual Behavior

Without opacity

Reproduction Link

https://codepen.io/ndesorden/pen/QWNOoew

Well, codepen is ok because with webpack install or cdn everything is ok. Problem is with vue-cli install

Expected:

Current:

[jblachly]

Instead of opening a new issue, I want to comment that I have the opposite problem:

Expected: No halo

Results: Halo

In the documentation for v-alert[0], there is no halo around the icon. However, when opening this same example in a codepen, the halo is there – just as it is in my vue-cli installed project.

[0] https://vuetifyjs.com/en/components/alerts/#prominent

[johnleider]

This is a CSS specificity issue spawned from ordering when built for production.