Выпадающий список


Выпадающий список используется для выбора значения в форме из заранее опредённых вариантов.

Выбранный элемент отмечается галочкой.

Пункты меню могут быть отмечены иконкой справа (например, цвет линии метро).

Простой список
  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3
Спецификации
Состояние Параметр Значение
normal
/* Основные свойства наследуются от стандартного поля ввода */
padding: $paddingControlVertical $paddingControlMore $paddingControlVertical $paddingControl;
/* указать отступ от иконки */
/* Выпадающий список */
padding-top / padding-bottom: $paddingMenu;
margin-top: $marginMenu;
box-shadow: $depth2;
/* Строка выпадающего списка */
height: $sizeControlHeight;
padding: $paddingControlVertical $paddingControl;
background-color: $colorBg;
/* Иконка в строке выпадающего списка */
margin-right: $marginIcon;
fill: $colorIcon;
 
0 8px 0 12px
 
 
8px
1px
0 4px 20px 0 rgba(0,0,0,.16)
 
32px
0 12px
#ffffff
 
8px
#333333
hover
/* Основные свойства наследуются от стандартного поля ввода */
/* Строка выпадающего списка */
@include standardHover ($colorBgSecondary);
transition: all 0.15s ease-out; /* показываем серую точку слева от элемента списка по ховеру */
 
 
 
 
active
/* Основные свойства наследуются от стандартного поля ввода */
/* прописать анимацию переворачивания иконки */
/* Строка выпадающего списка */
@include standardActive ($colorBgSecondary);
 
 
 
 
disabled opacity: .48;