Vuetify: [Feature Request] [VTabsSlider] Add prop to override default tabs-slider-height

[JeremyWalters]

Problem to solve

The ability to adjust VTabsSlider height/thickness

Proposed solution

Add prop to VTabsSlider that would override tabs-slider-height.

[jacekkarczmarczyk]

There's a $tabs-slider-height SASS variable available in 2.0, not sure if we want a prop for this

[MatthewAry]

@jacekkarczmarczyk Where can a master list of variables like these be found?

[jacekkarczmarczyk]

Some variables are defined in src/styles/settings/*.scss and some in component's folder, for example src/components/VTabs/_variables.scss

[MatthewAry]

I've been unsuccessful in overriding the sass variables after following the directions listed here. https://vuetifyjs.com/en/customization/sass-variables#setup-vue-config-js I'm getting errors about missing semicolons in the style files in the vuetify package.

Is this because of #7795 and https://github.com/vuejs/vue-cli/issues/4116 ?

[MatthewAry]

So I've taken steps to change the variable as suggested. See below.

// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';

$tabs-slider-height: 3px;

Yet, doing this does not adjust the tab slider height.

<div class="v-tabs-slider-wrapper" style="height: 2px; left: 885px; width: 214px;">
   <div data-v-0e4e1fa4="" class="v-tabs-slider primary"></div>
</div>

Because the v-tabs-slider-wrapper div has a style applied to it directly, it ends up clipping the slider height.