Кнопка


Стандартная кнопка

Используется в большинстве ситуаций.

Спецификации
Состояние Параметр Значение
normal
height: $sizeControlHeight;
padding: $paddingControlVertical $paddingControlButton;
background-color: $colorBgSecondary;
border-radius: $sizeBorderRadius;
border: $sizeBorderWidth solid $colorBorder;
box-shadow: $depth-inset;
color: $colorText;
@include: fontControlProductivity;
32px
0 16px
#f0f0f0
2px
1px solid rgba(0,0,0,.12)
0 2px 0 0 rgba(0,0,0,.04)
#333333
 
hover @include standardHover ($colorBgSecondary);
active @include standardActive ($colorBgSecondary);
disabled opacity: .48;

Главная кнопка

Основное действие на экране. Красится в акцентный цвет проекта.

Может быть только одна на экране. Две — только в исключительных случаях и не в формах.

Спецификации
Состояние Параметр Значение
normal
/* Основные свойства наследуются от стандартной кнопки */
color: $colorTextContrast; /* $colorText для Кино */
background: $colorAccent;
 
#ffffff
#005ff9
hover @include standardHover ($colorAccent); /* акцентный цвет проекта */
active @include standardActive ($colorAccent); /* акцентный цвет проекта */
disabled opacity: .48;

Стандартная кнопка (для серого фона)

Используется только на сером фоне, чтобы не сливаться с ним.

Спецификации
Состояние Параметр Значение
normal
/* Основные свойства наследуются от стандартной кнопки */
background: $colorBg;
 
#ffffff
hover @include standardHover ($colorBg);
active @include standardActive ($colorBg);
disabled opacity: .48;

Кнопка с иконкой

В любую кнопку может быть добавлена иконка.

Спецификации
Состояние Параметр Значение
normal
/* Основные свойства наследуются от стандартной кнопки */
padding: $paddingControlVertical $paddingControlButton $paddingControlVertical ($paddingControlButton - $sizeBase);
color: $colorTextContrast; /* $colorText для Кино */
background: $colorAccent;
/* Переменные для иконки */
margin-right: $marginIcon;
0 16px 0 12px
#ffffff
#005ff9
 
0 12px 0 0
hover @include standardHover ($colorAccent); /* акцентный цвет проекта */
active @include standardActive ($colorAccent); /* акцентный цвет проекта */
disabled opacity: .48;

Кнопка-иконка

В зависимости от информационной плотности экрана, может использоваться как стандартная кнопка с фоном и границами, так и без них. В ряду стандартных кнопок нужно использовать первый вариант.

Спецификации:  height: 32px, width: 32px;

Спецификации
Состояние Параметр Значение
normal
/* Основные свойства наследуются от стандартной кнопки */
width: $sizeControlButtonIconWidth;
fill: $colorIcon;
 
32px
#333333
hover @include standardHover($colorBg);
@include standardHover($colorBgSecondary);
active @include standardActive ($colorBg);
@include standardActive ($colorBgSecondary);
disabled opacity: .48;

Кнопка-иконка для панели инструментов

Используется в панели инструментов, когда таких кнопок-иконок много.

Спецификации
Состояние Параметр Значение
normal
width: $sizeControlButtonIconWidth;
fill: $colorIconSecondary;
32px
#c7c7c7
hover fill: mix($colorTrueBlack, $colorIconSecondary, 8%);
active fill: mix($colorTrueBlack, $colorIconSecondary, 12%);
disabled opacity: .48;

Кнопка-иконка с переключением состояния

Принцип работы похож на чекбокс. По клику этот элемент включается, переходя в активное состояние.

Может использоваться самостоятельно (например, флажок в Почте) или быть частью группы (например, способы отправки письма в Почте).

Спецификации
Состояние Параметр Значение
normal
width: $sizeControlButtonIconWidth;
fill: $colorIcon;
32px
#333333
hover opacity: .64;
active fill: $colorAccentSecondary;
disabled opacity: .48;