[ELMA4] Отступы

Общая информация

Многие компоненты теперь имеют собственные отступы.
Отступы должны быть кратными 2/4/16/24/32px.
Не следует задавать отступы вручную с помощью inline стилей. Если отступ нужен, то используйте классы отступов или less переменные.

Классы отступов

Добавляют по 8px – стандартный отступ между элементами:

base-element-margin-top
base-element-margin-right
base-element-margin-bottom
base-element-margin-left

Пример добавления отступа с помощью классов

Для информационной панели будет добавлен отступ снизу в 8px.

//  bad
<div style="padding-bottom: 8px;">
    @Html.InfoPanel(...)
</div>
//  good
<div class="base-element-margin-bottom">
    @Html.InfoPanel(...)
</div>

Less переменные

Less переменные, которые следует использовать, расположены в Variables.less:

//  Стандартные отступы
@base-element-size: 32px;
@base-element-size--3-4: 24px;
@base-element-size--1-2: 16px;
@base-element-size--1-4: 8px;
@base-element-size--1-8: 4px;

//  Базовый отступ для компонентов (например, вкладки, панели)
@base-component-padding: 16px;

Пример добавления отступа с помощью переменных

//  bad
.some-style-class {
    padding-top: 8px;
    padding-bottom: 16px;
}
//  good
.some-style-class {
    padding-top: @base-element-size--1-4;
    padding-bottom: @base-element-size--1-2;
}

Обновление с ELMA3 на ELMA4

Многие компоненты теперь имеют собственные отступы. Необходимо убрать лишние отступы, которые были заданы для компонентов. Если отступ все-таки нужен, то заменить их на классы отступов или использовать переменные из Variables.less.