Чекбокс

Выбранный чекбокс красится в акцентный цвет проекта.

Спецификации
Состояние Параметр Значение
normal
height: $sizeControlCheckHeight;
width: $sizeControlCheckWidth;
margin: 0 $marginIcon 0 0;
background-color: $colorBg;
border-radius: $sizeBorderRadius;
border: $sizeBorderWidth solid $colorBorder;
box-shadow: $depth-inset;
color: $colorText;
@include: fontControlProductivity;
/* Галочка */
fill: $colorBgIcon;
opacity: 0; /* галочка не показывается */
16px
16px
0 8px 0 0
#ffffff
2px
1px solid rgba(0,0,0,.12)
0 2px 0 0 rgba(0,0,0,.04)
#333333
 
 
#333333
 
hover
/* Поле чекбокса */
@include standardHover ($colorBgSecondary);
/* Галочка */
opacity: .48; /* по наведению на поле чекбокса проявляется галочка */
 
 
 
 
active
/* Поле чекбокса */
background-color: $colorAccent;
/* Галочка */
fill: $colorIconContrast; /* $colorIcon для Кино */
opacity: 1; /* галочка становится видимой полностью */
 
 
 
#ffffff
 
disabled opacity: .48;