CODEWITHSUNDEEP
cssvue.jsvuetify.js
BeaST 30
BeaST 30

Reputation: 744

Overriding specific css properties in vue-vuetify project

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

Upvotes: 0

Views: 204

Answers (1)

Cray
Cray

Reputation: 2850

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;
}

Upvotes: 1

Related Questions