Valo. Do default small style for all components

Flow
1

How can i do small, large, tiny for all components by default? Addstyle for single component is painful.

2

Perhaps you could set the default size smaller in the SCSS and use a scale factor > 1 for small and tiny components? Bit hacky but quick for most components.

3

You shoudl use a custom theme and set the $v-font-size and $v-unit-size variable to suitable values.

4

$v-unit-size: 14px;
$v-unit-size: 24px;

Input still 30px;

5

Sorry for the really late reply. Did you ever manage to solve the issue?

Should work if you do this:

$v-font-size: 14px;
$v-unit-size: 24px;

@import "../valo/valo";

.mytheme {
  @include valo;
}
6

We were thinking about transitioning our “enterprise style app” from reindeer to valo and the changes are dramatic.

Is there such a thing as settings that would more closely mirror reindeer in terms of size, etc.? We’d like to migrate to Valo as it seems to be the new thing, but with so many dials to tune, it’s difficult to know where to start. What have others done to migrate from reindeer to valo?

Or will reindeer remain a supported first class theme so I shouldn’t worry?

7

Hi David,

The “Facebook” variation from the Valo theme demo is probably the closest we have today, regarding sizing (http://demo.vaadin.com/valo-theme/ and select the theme from the top right drop down menu).

The following should get you really close to Reindeer sizes:

$v-font-size: 12px;

$v-unit-size: 26px;
$v-unit-size--small: 20px;
$v-unit-size--tiny: 18px;

$v-layout-margin-top: 18px;
$v-layout-margin-right: 18px;
$v-layout-margin-bottom: 18px;
$v-layout-margin-left: 18px;
$v-layout-spacing-vertical: 7px;
$v-layout-spacing-horizontal: 6px;

We’ve had the idea of a Valo based Reindeer replacement, but that hasn’t been prioritiesed in any way yet.

8

Thanks, Jouni. That is much closer so we can avoid having to rework all layouts!