Вкладки


Бывают двух видов: для открытых пространств (контент не ограничен явно по бокам) и закрытых (есть явные боковые границы — попапы, узкие колонки).

В productivity-сервисах используется только второй вариант.

Вкладки для закрытых пространств

Используются на карточных лэйаутах, преимущественно в productivity-сервисах и мобильном вебе. В медиапроектах — только в попапах и врезках.

Спецификации
Состояние Параметр Значение
normal
height: $sizeControlHeight;
padding: 0 $paddingTab;
margin: 0 $marginTab 0 0;
color: $colorText;
@include: fontBodyProductivity;
/* общее подчёркивание у группы вкладок */
border-bottom: $sizeBorderWidth solid $colorBorderSecondary;
32px
0 0
0 32px 0 0
#333333
 
 
1px solid rgba(0, 0, 0, 0.08)
hover
/* наведение на неактивную вкладку */
box-shadow: inset 0 -$sizeBorderWidthTab 0 0 $colorBorder;
 
inset 0 -2px 0 0 rgba(0,0,0,.12)
active
/* подчёркивание в акцентный цвет у активной вкладки */
box-shadow: inset 0 -$sizeBorderWidthTab 0 0 $colorAccent;
font-weight: $fontTabActive;
 
inset 0 -2px 0 0 #005ff9
700
disabled opacity: .48;