将 Valo 主题的间距和小部件大小缩小到驯鹿主题的间距和小部件大小

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

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

Valo的成名在于,它构建为可调整且易于变形的几行Java和/或CSS代码。有没有人尝试过将Valo改成与驯鹿主题相似的尺寸?是否有任何要共享的源代码或说明?

需要明确的是,我的目标只是减少视觉高度和宽度以及它们的字体大小。我不是在问如何改变设计,我只是希望能找回一些像素空间。我只是在寻找最简单,最安全的方法,让Valo小部件的大小与驯鹿主题中对应物的视觉大小平行。

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

我确实打开了票证#14,909,建议提供一个开关,使Valo自动缩小到驯鹿计划。

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

这个问题被莫名其妙地以“太宽泛”而告终。然而,它继续获得赞成票。我请你们这些向上的选民投票重新开放。


答案 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 Demo Project - Reindeer Theme


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


答案 2

当我从驯鹿主题切换到Valo主题时,我也遇到了同样的问题。在加载主题之前使用小字体大小和家庭解决了我的问题。

$v-font-size: 12px;
$v-font-family: sans-serif;

@import "../valo/valo.scss";

推荐