Overriding specific css properties in vue-vuetify project

Question

I am using vuetify in my vuejs project and my scenario is this.

When I use v-card, then I want box-shadow: 3px 3px 30px #95959522; every time, for which I have overridden in my main css file as

.v-card {
    box-shadow: 3px 3px 30px #95959522 ;
}

But if I use the default properties such as v-card flat or v-card raised, then I definitely want the box-shadow which comes along with the specified properties, but currently all the v-card have the box-shadow as defined above, and the flat and raised prop are not available any longer

Cray · Accepted Answer · 2020-06-17 11:23:04Z

1

You can use the :not keyword to exclude flat, raised or any other cases.

.v-sheet.v-card:not(.v-card--raised):not(.v-card--flat) {
  box-shadow: 3px 3px 30px #959595;
}

answered Jun 17, 2020 at 11:23

Cray

2,8468 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Overriding specific css properties in vue-vuetify project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related