elzar/src/views/components/dropdowns.html

resmio glamourous style guide in sass mode

<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"/>