Option 1
Option 1
Option 2
Sports
Clothing
.odyssey-dropdown--active
Active dropdown styling
<insert-markup>components.dropdown.multi-0</insert-markup>
Option 1
Option 1
Option 2
Sports
Clothing
.odyssey-dropdown--error
Error dropdown styling
<insert-markup>components.dropdown.multi-1</insert-markup>
Option 1
Option 1
Option 2
Sports
Clothing
.odyssey-dropdown--disabled
Disabled dropdown styling
<insert-markup>components.dropdown.multi-2</insert-markup>
Option 1
Option 1
Option 2
Sports
Clothing
.odyssey-dropdown--small
Small dropdown styling
<insert-markup>components.dropdown.multi-3</insert-markup>
Option 1
Option 1
Option 2
Sports
Clothing
Markup
<div class=" odyssey-multidropdown">
<div class="odyssey-dropdown [modifier class]">
<div class="odyssey-dropdown__dropdown" tabindex="0">
<span style="align-self: center;">Option 1</span>
<i class="odyssey-dropdown__arrow odyssey-dropdown__arrow"></i>
</div>
<div class="odyssey-dropdown__items">
<div class="odyssey-dropdown__item odyssey-dropdown__item--active">
Option 1
</div>
<div class="odyssey-dropdown__item">
Option 2
</div>
</div>
</div>
<div class="odyssey-multidropdown__selected">
<span class="odyssey-multidropdown__item">Sports<i class="odyssey-multidropdown__item-delete"></i></span>
<span class="odyssey-multidropdown__item">Clothing<i class="odyssey-multidropdown__item-delete"></i></span>
</div>
</div>
Source:
src/components/dropdown.less, line 202