Как установить большие значки в меню в Vaadin7?

Question

Я играю с этим Valo theme. В нем, когда экран браузера широко открыт, я вижу пункты меню как маленькую иконку, следующую за текстом в отдельной строке. ОК. Когда я делаю экран браузера более узким, элемент меню меняется. Теперь я вижу более крупную иконку с строкой текста под ней. Как я могу видеть такой взгляд из происхождения? похоже, такое поведение связано с так называемым «отзывчивым» дизайном. это действительно здорово, но в этом конкретном случае я хотел бы обработать его более точно.

Заранее спасибо.

Answer 1

Кажется, я мог узнать, как реализовать то, что мне нужно. На самом деле это были сериалы с селектором w/css. В моем случае я должен был сделать следующее:

.v-ui[width-range~="551px-"] 
{ 
    .valo-menu-item 
    { 

    .valo-menu-item-wrap 
    { 
     .v-icon 
     { 
     display: block; 
     /* 
      Add anything u need... 
     */ 
     } 

     .valo-menu-item-caption 
     { 
     display: block; 
     /* 
      Add anything u need... 
     */ 
     } 
    } 
    } 
} 

Answer 2

Самый простой способ - изменить стили через CSS в своей теме, которая импортирует тему Valo. Значки в меню - значки шрифтов, поэтому вы можете просто увеличить font-size через CSS. Осматривая стили темы дем Valo с Firefox, я определил следующий CSS для отзывчивым расширения иконы:

.tests-valo .v-ui.valo-menu-responsive[width-range~="801px-1100px"] .valo-menu-part .valo-menu-item { 
    font-size: 26px; 
    ... 
} 

Более подробной информации о отзывчивости можно найти в Vaadin docs.

EDIT в соответствии с комментарием: Новая линия подписи осуществляется в display стиле.

.tests-valo .v-ui.valo-menu-responsive[width-range~="801px-1100px"] .valo-menu-part .valo-menu-item [class*="caption"] { 
    display: block; 
    ... 
}