How do I customize the font size in mytheme?

Flow
1

So far, I have been reasonably successful at modifying various theme css values. I find the appropriate class via Chrome’s inspector, parse out the .mytheme in the front, add an entry to mytheme.scss, and it overwrites the property I wish to overload. For example, for the button I found the following entry in the inspector:

.mytheme .v-button { xxx }

I wanted to globally adjust the height, so I just added this entry to mytheme.scss:

.v-button {
height: 30px;
}

… and everything worked smoothly. That is, until I wanted to change the font size of v-app. Here, the inspector shows the following class:

.mytheme.v-app, .mytheme.v-app-loading { xxx }

The problem here is that there is no space between the two classes, and thus when I try overloading said class, it doesn’t work. It creates an entry in the css file, but its a duplicate entry with a space between mytheme and v-app, and the original is still there and being used by the browser.

So, what do I do? How do I overload these particular property?

And, while we’re on the subject, is there a way to directly update the theme.css file and tell Vaadin not to rebuild it? This would make my life significantly easier.

Thanks

2

Are you using Valo? If so, take a look at the Valo parameters:
https://vaadin.com/book/vaadin7/-/page/themes.valo.html
.

If you’re trying to override .mytheme.v-app in your theme’s SCSS file (which would then in this case be mytheme.scss), you can do the following:

&.v-app {
  ...
}

To clarify, that block should be inside your theme’s mixin.