elzar
Version:
resmio glamourous style guide in sass mode
64 lines (59 loc) • 1.7 kB
HTML
<h1><u>Dropdowns</u></h1>
<div class="dropdown">
<button id="dLabel"
class="dropdown_btn"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span>Dropdown</span>
<svg viewBox="0 0 100 100" class="icon arrows_icon dropdown_icon">
<use xlink:href="#symbol-arrow-down"></use>
</svg>
</button>
<ul class="dropdown_list" aria-labelledby="dLabel">
<li class="dropdown_item">
<a class="dropdown_link" href="#">1</a>
</li>
<li class="dropdown_item">
<a class="dropdown_link" href="#">2</a>
</li>
<li class="dropdown_item">
<a class="dropdown_link" href="#">3</a>
</li>
<li class="dropdown_item">
<a class="dropdown_link" href="#">4</a>
</li>
</ul>
</div>
<hr/>
<div class="dropdown_colored">
<button id="dLabel"
class="dropdown_btn"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span>Filter by something</span>
<svg viewBox="0 0 100 100" class="icon arrows_icon dropdown_icon">
<use xlink:href="#symbol-arrow-down"></use>
</svg>
</button>
<ul class="dropdown_list" aria-labelledby="dLabel">
<li class="dropdown_item">
<a class="dropdown_link" href="#">Something 1</a>
</li>
<li class="dropdown_item">
<a class="dropdown_link" href="#">Something 2</a>
</li>
<li class="dropdown_item">
<a class="dropdown_link" href="#">Something 3</a>
</li>
<li class="dropdown_item">
<a class="dropdown_link" href="#">Something 4</a>
</li>
</ul>
</div>
<hr class="styleguide-separator"/>