Стили оформления
Стиль оформления — это описание оформления элементов интерфейса для формирования внешнего вида страницы.
Для каждого контрола создается css-файл, который располагается в самом модуле рядом с контролом.
Для подключения css-стилей необходимо импортировать этот файл через import 'css!...'.
Например:
import 'css!MyModule/Bar/Bar';При работе с библиотеками:
подключать css-стили необходимо так:
import 'css!MyModule/library';Подробнее читайте в статье.
Стандартный набор css-классов
CSS используется для формирования внешнего вида страницы путем определения стилей элементов интерфейса.
При работе с CSS рекомендуется минимизировать написание новых css-стилей, и максимально пользоваться готовыми классами. В редких случах, когда задача не может быть решена при помощи готовых css-классов, разрешается использовать css-переменные.
Перечисленные группы классов можно использовать в Wasaby-контролах без дополнительных подключений зависимостей.
Классы для задания видимости и позиции элементов
На Wasaby-страницах для общего управления положением и видимостью элементов используются ws-классы:
- .ws-absolute
- .ws-fixed
- .ws-ellipsis
Для flex-верстки используются классы .ws-flex**
Классы для цветов и размеров
При реализации интерфейсов рекомендуется не писать свои стили, а использовать список общих css-классов для цветов, размеров текста и т.д.
<!-- WML -->
<div class="Message">
<div class="controls-text-secondary">Демо Демо</div>
<div class="controls-text-unaccented
controls-fontsize-xs">Управление качеством</div>
<div>Ошибки при отправке платежей</div>
<div class="controls-icon controls-icon-primary"></div>
</div>В результате использования css-классов получим: 
Цвета аспектов
Цвета текста
В следующем примере для разных строк задан различный цвет текста.
Цвета фона
В следующем примере для разных строк задан различный цвет фона.
Цветовое многообразие
В случаях, когда необходимо окрасить некий набор однотипных элементов (например, тегов) в разные цвета с одинаковой насыщенностью, используйте готовые палитры цветов. Цвета, входящие в состав палитры, не несут никакой смысловой нагрузки и отличаются только яркостью.
Не рекомендуется:
- Использовать вместе цвета из разных наборов;
- Использовать цвета по одиночке.
Использование палитры на странице
Каждому цвету из набора в стандарте прописано имя, которое соответствует css-переменной. Например, palette_color1_1 соответствует переменной var(--palette_color1_1);
Чтобы переменные появились в вашем контексте, подключите их таким образом:
import 'css!Controls/CustomColors';При появлении в вашем макете набора разноцветных элементов уточните у проектировщика, какую именно палитру он использовал.
Используйте готовые переменные вместо указания констант цветов.
Размеры
В следующем примере для разных строк задан различный размер текста.
Высоты
В следующем примере для разных строк задана различная высота текста.
Отступы
В следующем примере для разных строк заданы различные отступы.
Размер иконки
В следующем примере для иконки заданы различные размеры.
Классы для блочной верстки
Классы .controls__block** используются для "Блочной верстки". Подробнее читайте в статье.
Все прочие классы не рекомендуется использовать на Wasaby страницах. Они лежат в слое совместимости, который со временем пропадет, а вместе с ним могут пропасть и некоторые стили на ваших страницах.
Не используйте классы:
- asLink
- icon-small/medium/large/16/24 - вместо этих классов используются опции iconSize и iconStyle в контролах.
- Классы, которые описаны здесь.