将Valo主题的间距和小部件大小缩小为Reindeer主题的大小

Question

新的Valo主题现在是Vaadin 7.3应用程序的默认主题.此主题在视觉上呈现小部件(按钮,字段等),这些小部件比以前的默认驯鹿主题大得多(更宽和更高).

这种外观现在在Android和iOS 7/8以及一些网站的移动应用程序中很受欢迎.但这些情况只需几分钟即可短暂使用.相比之下,面向商业的桌面式应用程序被人们用于更长时间的工作会话,可能一整天都是连续几个小时.面向业务的应用程序以更密集的格式呈现更多信息.对于此类用途,Valo主题的默认呈现是不合适的.具体来说,字体太薄而且模糊,而且字体和小部件的大小太大.

Valo声名鹊起的原因在于它可以调整并且很容易变形几行Java和/或CSS代码.有没有人尝试改变Valo的大小,类似于驯鹿主题？要分享的任何源代码或说明？

为了清楚起见,我的目标只是减少视觉高度和宽度以及字体大小.我不是要求改变设计,我会很感激回到一些像素空间.我正在寻找最简单,最安全的方法,让Valo小部件的大小与Reindeer主题中同行的视觉大小相同.

在短期内,我将继续覆盖使用Reindeer的默认值,如此StackOverflow.com问题所述,在新的Vaadin 7.3应用程序中从"Valo"主题更改为"Reindeer".但从长远来看,Vaadin团队对Valo的投注很大.最终驯鹿将失宠,所以我想学习如何过渡.

我确实打开了Ticket#14,909建议提供一个开关,让Valo自动缩小到Reindeer方案.

有些人误读了这篇文章:我们不是在谈论磁盘上的存储大小.我们在这里讨论像素,而不是比特.视觉大小,而不是文件大小.图形布局,而不是widgetset优化.

这个问题被莫名其妙地关闭为"过于宽泛".然而它继续获得投票.我问你上选民投票重新开放.

Answer 1

要使用valo 主题替代驯鹿主题，您可以配置用于 valo 的主题变量，如下所示：

$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;

（来源：Valo 演示项目 - 驯鹿主题）

Vaadin 之书 - Valo 主题部分深入解释了这些变量的放置位置以及如何自定义主题。