elzar/src/views/components/button-status.html

resmio glamourous style guide in sass mode

<h1><u>Status buttons</u></h1>


<div class="status_container">
  <ul>
    <li class="space_between">
        <div class="status">
          <button id="dLabel"
                  class="btn_status"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
          >
          <svg viewBox="0 0 100 100" class="icon status_icon">
            <use xlink:href="#symbol-scheduled"></use>
          </svg>
          <svg viewBox="0 0 100 100" class="icon arrow_icon">
            <use xlink:href="#symbol-arrow-down"></use>
          </svg>
        </button>
        <ul class="status_list" aria-labelledby="dLabel">
          <li class="status_item status_item--selected">
            <svg viewBox="0 0 100 100" class="icon status_list_icon">
              <use xlink:href="#symbol-scheduled"></use>
            </svg>
            <a class="status_link" href="#">Scheduled</a>
          </li>
          <li class="status_item">
            <svg viewBox="0 0 100 100" class="icon status_list_icon">
              <use xlink:href="#symbol-arrived"></use>
            </svg>
            <a class="status_link" href="#">Arrived</a>
          </li>
          <li class="status_item">
            <svg viewBox="0 0 100 100" class="icon status_list_icon">
              <use xlink:href="#symbol-seated"></use>
            </svg>
            <a class="status_link" href="#">Seated</a>
          </li>
          <li class="status_item">
            <svg viewBox="0 0 100 100" class="icon status_list_icon">
              <use xlink:href="#symbol-finished"></use>
            </svg>
            <a class="status_link" href="#">Finished</a>
          </li>
          <li class="status_item">
            <svg viewBox="0 0 100 100" class="icon status_list_icon">
              <use xlink:href="#symbol-close"></use>
            </svg>
            <a class="status_link" href="#">Cancelled</a>
          </li>
          <li class="status_item">
            <svg viewBox="0 0 100 100" class="icon status_list_icon">
              <use xlink:href="#symbol-no-show"></use>
            </svg>
            <a class="status_link" href="#">No Show</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
  <ul>
    <li class="space_between">
      <div class="status">
      <button id="dLabel"
              class="btn_status status--active"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
      >
        <svg viewBox="0 0 100 100" class="icon status_icon">
          <use xlink:href="#symbol-arrived"></use>
        </svg>
        <svg viewBox="0 0 100 100" class="icon arrow_icon">
          <use xlink:href="#symbol-arrow-down"></use>
        </svg>
      </button>
      <ul class="status_list" aria-labelledby="dLabel">
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-scheduled"></use>
          </svg>
          <a class="status_link" href="#">Scheduled</a>
        </li>
        <li class="status_item status_item--selected">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-arrived"></use>
          </svg>
          <a class="status_link" href="#">Arrived</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-seated"></use>
          </svg>
          <a class="status_link" href="#">Seated</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-finished"></use>
          </svg>
          <a class="status_link" href="#">Finished</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-close"></use>
          </svg>
          <a class="status_link" href="#">Cancelled</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-no-show"></use>
          </svg>
          <a class="status_link" href="#">No Show</a>
        </li>
      </ul>
    </div>
    </li>
  </ul>
  <ul>
    <li class="space_between">
      <div class="status">
      <button id="dLabel"
              class="btn_status status--active"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
      >
        <svg viewBox="0 0 100 100" class="icon status_icon">
          <use xlink:href="#symbol-seated"></use>
        </svg>
        <svg viewBox="0 0 100 100" class="icon arrow_icon">
          <use xlink:href="#symbol-arrow-down"></use>
        </svg>
      </button>
      <ul class="status_list" aria-labelledby="dLabel">
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-scheduled"></use>
          </svg>
          <a class="status_link" href="#">Scheduled</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-arrived"></use>
          </svg>
          <a class="status_link" href="#">Arrived</a>
        </li>
        <li class="status_item status_item--selected">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-seated"></use>
          </svg>
          <a class="status_link" href="#">Seated</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-finished"></use>
          </svg>
          <a class="status_link" href="#">Finished</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-close"></use>
          </svg>
          <a class="status_link" href="#">Cancelled</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-no-show"></use>
          </svg>
          <a class="status_link" href="#">No Show</a>
        </li>
      </ul>
    </div>
    </li>
  </ul>
  <ul>
    <li class="space_between">
      <div class="status">
      <button id="dLabel"
              class="btn_status"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
      >
        <svg viewBox="0 0 100 100" class="icon status_icon">
          <use xlink:href="#symbol-finished"></use>
        </svg>
        <svg viewBox="0 0 100 100" class="icon arrow_icon">
          <use xlink:href="#symbol-arrow-down"></use>
        </svg>
      </button>
      <ul class="status_list" aria-labelledby="dLabel">
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-scheduled"></use>
          </svg>
          <a class="status_link" href="#">Scheduled</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-arrived"></use>
          </svg>
          <a class="status_link" href="#">Arrived</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-seated"></use>
          </svg>
          <a class="status_link" href="#">Seated</a>
        </li>
        <li class="status_item status_item--selected">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-finished"></use>
          </svg>
          <a class="status_link" href="#">Finished</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-close"></use>
          </svg>
          <a class="status_link" href="#">Cancelled</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-no-show"></use>
          </svg>
          <a class="status_link" href="#">No Show</a>
        </li>
      </ul>
    </div>
    </li>
  </ul>
  <ul>
    <li class="space_between">
      <div class="status">
      <button id="dLabel"
              class="btn_status status--cancelled"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
      >
        <svg viewBox="0 0 100 100" class="icon status_icon">
          <use xlink:href="#symbol-close"></use>
        </svg>
        <svg viewBox="0 0 100 100" class="icon arrow_icon">
          <use xlink:href="#symbol-arrow-down"></use>
        </svg>
      </button>
      <ul class="status_list" aria-labelledby="dLabel">
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-scheduled"></use>
          </svg>
          <a class="status_link" href="#">Scheduled</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-arrived"></use>
          </svg>
          <a class="status_link" href="#">Arrived</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-seated"></use>
          </svg>
          <a class="status_link" href="#">Seated</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-finished"></use>
          </svg>
          <a class="status_link" href="#">Finished</a>
        </li>
        <li class="status_item status_item--selected">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-close"></use>
          </svg>
          <a class="status_link" href="#">Cancelled</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-no-show"></use>
          </svg>
          <a class="status_link" href="#">No Show</a>
        </li>
      </ul>
    </div>
    </li>
  </ul>
  <ul>
    <li class="space_between">
      <div class="status">
      <button id="dLabel"
              class="btn_status status--no-show"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
      >
        <svg viewBox="0 0 100 100" class="icon status_icon">
          <use xlink:href="#symbol-no-show"></use>
        </svg>
        <svg viewBox="0 0 100 100" class="icon arrow_icon">
          <use xlink:href="#symbol-arrow-down"></use>
        </svg>
      </button>
      <ul class="status_list" aria-labelledby="dLabel">
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-scheduled"></use>
          </svg>
          <a class="status_link" href="#">Scheduled</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-arrived"></use>
          </svg>
          <a class="status_link" href="#">Arrived</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-seated"></use>
          </svg>
          <a class="status_link" href="#">Seated</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-finished"></use>
          </svg>
          <a class="status_link" href="#">Finished</a>
        </li>
        <li class="status_item">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-close"></use>
          </svg>
          <a class="status_link" href="#">Cancelled</a>
        </li>
        <li class="status_item status_item--selected">
          <svg viewBox="0 0 100 100" class="icon status_list_icon">
            <use xlink:href="#symbol-no-show"></use>
          </svg>
          <a class="status_link" href="#">No Show</a>
        </li>
      </ul>
    </div>
    </li>
  </ul>
</div>
<hr class="styleguide-separator2"/>