Q-Tabs to use Bold font

[keechan]

Hi guys,

I am trying to make the active tab to have bold font (and/or customized background color).

For simplicity, I first tried to use text-weight-bold for q-tabs and style="font-weight: bold !important" for q-tab. But it doesn’t make the font bold.

<q-tabs
        v-model="tab"
        class="bg-orange text-white shadow-2 text-weight-bold"
      >
        <q-tab name="mails" label="Mails" style="font-weight: bold !important"></q-tab>
        <q-tab name="alarms" label="Alarms"></q-tab>
        <q-tab name="movies" label="Movies"></q-tab>
</q-tabs>

Any idea how to make it bold? Then I will just handle making it bold when active.

Fiddle:
https://codepen.io/keechan/pen/WNxywOO

Thanks!!

[metalsadman]

@keechan inpect element and target the class .q-tab__label ie.

.bold-tabs
  .q-tab__label
    font-weight: bold