將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優化。

這個問題被莫名其妙地封爲「太寬泛」。但它仍然獲得票數增加。我請求最高選民投票重新公開。

來源

2014-10-27 Basil Bourque

至於投票關閉，因爲問題是「太寬泛」 - 也許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深入平原放置這些變量的位置以及如何自定義主題。

來源

2017-05-03 12:44:07 JDC

我不明白您在分隔線上方的第一段。如果你只是說在評論中也提到了你的解決方案，那麼不需要解釋（除了僅僅提及評論發佈者的名字）。 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";

來源

2017-11-11 17:27:45

將Valo主題的間距和小部件大小縮小到馴鹿主題的大小

回答

相關問題