TabSheet selected tab text color customization in SCSS

Flow
1

Hello, I am new to SCSS and I am trying to change text color for the .v-tabsheet-tabitem-selected tab caption but to no avail. I have changed the app focus color to a dark color but tabitem caption text is still using the same color as the focus background and thus making it disappear. Not sure if forcing selected tab text color to white is the best way, or if there is a better solution. Here is my SCSS:

$v-app-loading-text: “Aguarde, carregando…”;
$v-background-color: #fafafa;
$v-app-background-color: #ecf0f5;
$v-panel-background-color: #fff;
$v-focus-color: #337AB7;
$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5);
$v-border-radius: 4px;
$v-textfield-border-radius: 4px;
$v-font-family: “Helvetica Neue”, Helvetica, Arial, ‘lucida grande’, tahoma, verdana, arial, sans-serif;
$v-font-size: 14px;
$v-font-weight: 400;
$v-link-text-decoration: none;
$v-shadow: 0 1px 0 (v-shade 0.2);
$v-bevel: inset 0 0px 0 v-tint;
$v-unit-size: 30px;
$v-gradient: v-linear 0%;
$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
$v-shadow-opacity: 20%;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-selection-item-border-radius: 4px;
$v-luminance-threshold: 180;
$v-animations-enabled: false;

thanks in advance

2

I am not 100% sure what you are trying to do, but when I add this to my styles, my selected Tab’s caption text is blue and font is bold, and non-selected tabs are as usual:

	.v-tabsheet-tabitem-selected > .v-caption {
		color: blue;
		font-weight: bold;	
	}
3

Thanks for the help.

Is there a correct place where I must add this line in my app scss file? Can I add it after the “@include valo;” in my app mixin, or should it be before the include?

4

Your app mixin is the correct place.

5

Ok, I managed to make it work, but I had to add an “!important” rule to the color because it was being overriden by valo, I don’t know why exactly. BTW I am using Vaadn version 7.7.6 (due to client requirement of supporting IE8).

Thanks for the help again!