Хелперы

Краеугольным камнем нашей системы является 4dp — так называемый «супер-пиксель», на нём строится вся система размерностей. Мы мыслим исключительно цифрами, кратными 4-м. В шрифтовой части возможны отступления, связанные с рендерингом шрифтов в Windows (размеры 13, 15 и 17), со временем будут устранены.

Высота и ширина

Назначение / Название Значение
Высота элемента управления$sizeControlHeight 32dpx8
Высота элемента управления для 1024$sizeControlHeightResponsive 32dpx8
Минимальная ширина кнопки (по ширине кнопки «Отменить»)$sizeControlButtonWidthMin 86dp-
Ширина кнопки-иконки$sizeControlButtonIconWidth 32dpx8
Высота ползунка в слайдере$sizeControlButtonSliderHeight 24dpx6
Ширина ползунка в слайдере$sizeControlButtonSliderWidth 12dpx3
Ширина ползунка с указателем в слайдере$sizeControlButtonSliderWidthPointer 16dpx4
Стандартная ширина поля ввода$sizeControlFieldWidthMin 380dp-
Ширина названия элемента управления при размещении слева$sizeControlLabelWidth 184dp-
Высота чекбокса и радиокнопки$sizeControlCheckHeight 16dpx4
Ширина чекбокса и радиокнопки$sizeControlCheckWidth 16dpx4
Толщина полосы прогресса и полосы прокрутки$sizeProgress 4dpx1
Ширина «безопасной» области для прокрутки$sizeProgressScroll 12dpx3
Радиус индикатора ненумерованного списка$sizeDotBullet 4dpx1
Радиус индикатора для пошаговых помощников$sizeDotIndicate 8dpx2
Радиус индикатора карусели (переключение слайдов, экранов промо-сайта)$sizeDotClickable 12dpx3
Ширина компактного попапа$sizePopupSmall 420dp-
Ширина обычного попапа$sizePopupMedium 680dp-
Ширина попапа с развёрнутым контентом$sizePopupLarge 880dp-

Отступы внутри элементов управления

Назначение / Название Значение
Горизонтальный отступ внутри элемента управления$paddingControlHorizontal 12dpx3
Вертикальный отступ внутри элемента управления$paddingControlVertical 0x0
Горизонтальный отступ внутри элемента управления с саджестом$paddingControlMore 8dpx2
Отступ от текста в выпадающем списке до иконки. Нужен ли он отдельно?$paddingControlMoreIcon 8dpx2
Горизонтальный отступ внутри кнопки$paddingControlButton 16dpx4
Горизонтальный отступ внутри кнопки с иконкой$paddingControlButtonIcon 12dpx3
Отступ сверху и снизу у разделителя внутри поля ввода$paddingControlDiv 4dpx1
Отступ сверху и снизу выпадающего списка$paddingMenu 8dpx2
Отступ внутри тега или операнда$paddingTag 8dpx2
Отступ внутри вкладки$paddingTab 0x0
Горизонтальный отступ внутри таблицы$paddingTableHorizontal 16dpx4
Вертикальный отступ внутри таблицы$paddingTableVertical 16dpx4

Отступы между элементами управления

Назначение / Название Значение
Отступ между элементами управления$marginControl 8dpx2
Отступ между элементами управления в группе$marginControlGroup -1dp-x025
Отступ от названия элемента управления до элемента (расположение слева)$marginFormLabelHorizontal 16dpx4
Отступ от названия элемента управления до элемента (расположение сверху)$marginFormLabelVertical 4dpx1
Отступ от элемента управления до подсказки к нему или ошибки$marginFormTip 4dpx1
Отступ между элементами формы (расположение слева)$marginFormFieldHorizontal 16dpx4
Отступ между элементами формы (расположение сверху)$marginFormFieldVertical 20dpx5
Отступ между группами элементов формы$marginFormFieldSet 32dpx8
Отступ от иконки до её названия$marginIcon 12dpx3
Отступ от радио-кнопки или чекбокса до названия/* в примерах элементов возможна ошибка вызова */$marginChoice 8dp-x2
Отступ меню от элемента управления, который его вызвал$marginMenu 1dpx025
Отступ между тегами или операндами$marginTag 4dpx1
Отступ между вкладками$marginTab 32dpx8
Отступ от индикатора ненумерованного списка до текста$marginBullet 12dpx3
Отступ от атрибута до названия объекта (например, дата у новости)$marginAttribute 4dpx1

Отступы внутри контейнеров

Назначение / Название Значение
Отступ внутри «оболочки» попапа, карточки$paddingBase 20dpx5
Вертикальные отступы между блоками в попапах$sizeGrid 20dpx5