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

问题描述：

新的Valo theme现在是Vaadin 7.3应用程序中的默认值。此主题使用与前一个默认Reindeer主题相比显着更大（更宽和更高）的小部件（按钮，字段等）进行可视化渲染。将Valo主题的间距和小部件大小缩小到驯鹿主题的大小

这种外观现在在Android和iOS 7/8的移动应用程序以及一些网站中非常流行。但是这些背景只是在几分钟的范围内简单使用。相比之下，面向业务的桌面风格的应用程序被人们用来进行更长时间的工作会话，可能整天都是几个小时的开关。面向业务的应用程序以更密集的格式显示更多信息。对于这样的使用，Valo主题的默认呈现是不恰当的。具体而言，字体太薄并晕倒，并且字体太小大小字体和小部件。

Valo的名声在于它的构建方式是可调整的，并且易于变形几行Java和/或CSS代码。有没有人尝试用更改Valo的大小，类似于驯鹿主题？任何源代码或指令共享？

要清楚，我的目标是简单地减小宽度和他们的字体大小的视觉高度&。我不是在问改变设计，只是为了找回一些像素空间而感到高兴。我正在寻找最简单和最安全的方式，让Valo小部件的尺寸与驯鹿主题中对应物的可视尺寸平行。

在短期内，我将继续覆盖使用驯鹿的默认设置，就像这个StackOverflow.com问题所述，Change from “Valo” theme to “Reindeer” in new Vaadin 7.3 app。但长期来看，Vaadin团队对Valo投注很大。最终驯鹿会失宠，所以我想学习如何过渡。

我打开Ticket # 14,909建议提供一个开关，使Valo自动缩小到驯鹿方案。

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

这个问题被莫名其妙地封为“太宽泛”。但它仍然获得票数增加。我请求最高选民投票重新公开。

至于投票关闭，因为问题是“太宽泛” - 也许downvoter不熟悉，一般和Valo的Vaadin主题化特别。 Valo主题是为了定制而设计的，具有改变颜色，字体，角落圆角度，浮肿或平直度，动画，不透明度，边框等等的各种参数。看到这个[wiki教程]（https://vaadin.com/wiki//wiki/Main/Valo+theme+-+Getting+started）。在尝试自己的之前，我问是否有人已经开始构建一组定制代码来近似以前的驯鹿主题的大小和外观。 – 2014-10-27 01:09:20

'$ v-font-size'是你的出发点和下一个'$ v-unit-size'。他们都应该把你带到很远。如果您担心生成的代码的视觉大小或文件系统大小，并且我敢打赌，这个问题可能会重新打开，您也可以删除您的问题中的所有争议并明确说明。 – cfrick 2014-10-28 08:09:15

我会从https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-facebook/_variables.scss开始，将颜色改为灰色并调整字体/字体大小，你离驯鹿不远。毕竟一个人必须跟上时间的潮流...... – cfrick 2014-10-28 15:01:29

答

要使用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）

该部分Book of Vaadin - Valo Theme ex深入平原放置这些变量的位置以及如何自定义主题。

我不明白您在分隔线上方的第一段。如果你只是说在评论中也提到了你的解决方案，那么不需要解释（除了仅仅提及评论发布者的名字）。 Stack Overflow经常提到一个可能的解决方案作为评论，而其他人则采取这种想法，通过添加细节和示例进行充实，并发布答案。 – 2017-05-03 18:09:44

好吧，我只是想澄清一点，我不想“窃取”学分:) – JDC 2017-05-03 18:27:06

然后只需添加一个简短的注释，如“按AliceW的评论”或“如SusanH的评论中所述”。就像现在这样，这个开头的段落是一个令人困惑的分心。 – 2017-05-03 18:59:13

答

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

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

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

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

相关推荐