Как стилизовать предупреждающий знак

Question

Я хотел бы иметь стиль предупреждающей этикетки, подобный стилям отказа и успеха (как requested here).

Я попытался установить иконку в коде, но результат был этот (левая: стиль неудачи, правильно: моя попытка):

Я хотел бы иметь оранжевую границу и оранжевый значок предупреждения.

Редактировать: Показать код, указанный в комментариях.

label1.setStyleName(ValoTheme.LABEL_FAILURE); // left 
label2.setIcon(FontAwesome.WARNING); // right 

Answer 1

И успех/провал метки определяется here (Вало Тема для Vaadin 7.5). Таким образом, вы можете создать свой собственный на основе этого кода. Добавьте следующее в теме приложения:

$warning-color: orange; 

.v-label-warning { 
    background: $v-textfield-background-color; 
    color: valo-font-color($v-textfield-background-color); 
    border: 2px solid $warning-color; 
    border-radius: $v-border-radius; 
    padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size); 
    font-weight: $v-font-weight + 100; 
    font-size: round($v-font-size * 0.95); 

    &:before { 
    font-family: FontAwesome; 
    content: "\f071"; 
    margin-right: .5em; 
    margin-left: round($v-unit-size/-2); 
    color: $warning-color; 
    } 
} 

Обратите внимание, что это делает в основном только две вещи: ввести новый вар для цвета в начале (который затем используется для значка и границы) и использует лигатуры от bundled FontAwesome.

Название стиля в отношении метки: warning. Так сделайте setStyleName("warning") на этикетке.

Это испытание против Ваадина 7.5.5. Если ваша версия отличается, вы можете проверить файлы, указанные выше, чтобы убедиться, что вы копируете оттуда и принимаете. Если вы хотите больше, чем только этот, я предлагаю создать @mixin, чтобы уменьшить (даже больше) копию и вставить код.