Dropdown
This styling is connected to the OdysseyDropdown.vue component. Remove the odyssey-dropdown--hide class from the odyssey-dropdown__items container to see the active state.
Option 1
Option 1
Option 2
.odyssey-dropdown--active
Active dropdown styling
<insert-markup>components.dropdown-0</insert-markup>
Option 1
Option 1
Option 2
.odyssey-dropdown--error
Error dropdown styling
<insert-markup>components.dropdown-1</insert-markup>
Option 1
Option 1
Option 2
.odyssey-dropdown--disabled
Disabled dropdown styling
<insert-markup>components.dropdown-2</insert-markup>
Option 1
Option 1
Option 2
.odyssey-dropdown--small
Small dropdown styling
<insert-markup>components.dropdown-3</insert-markup>
Option 1
Option 1
Option 2
Markup
<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>
Source:
src/components/dropdown.less, line 1