How can I remove shadow from expansion panel (Vuetify)?

Question

I want to remove the shadow from a Vuetify expansion panel. Currently, it looks like this:

My code looks like this:

  <v-layout wrap justify-space-between>
    <v-flex xs12 pb-1>
      <v-card>
        <v-container pa-2>
          <v-expansion-panel expand pa-0>
            <v-expansion-panel-content>
              <template v-slot:header>
                <div>
                  {{ $t("var1") }}
                </div>
              </template>
              <v-layout row wrap>
                <v-flex xs12>
                  <v-text-field
                    class="right-input"
                    :label="$t('var2')"
                    value="600.00"
                    suffix="$"
                    disabled
                    flat
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-container>
      </v-card>
    </v-flex>
  </v-layout>

It is possible to remove the shadow from the expansion panel? I tried adding "flat" to the tag but it didn't solve it. My goal is that, while expanded, it looks like a flat card. Thanks! :)

Answer 1

You can set elevation-0 class on v-expansion-panel.

Here is working example: https://codepen.io/anon/pen/oKjRpm?editors=1010

I'd rather avoid changing CSS, because it will remove all borders and shadows, on all expansion panels on all pages.