Omnimaga
/
bugs



123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Filters</title>
  <meta name="description" content="Filters can be used to enable the user to view a single set of data in a different lens">

  <link rel="stylesheet" href="../tabs.css">

  <!--
    This <style> and <link> is only used for the example code, is no needed for the real case use
  -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    body {
      background: none;
    }

    h2.bb-docs {
      font-size: 1.8rem;
      font-family: sans-serif;
      font-weight: lighter;
      color: #666;
      margin: -1px 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 1px #e8e8e8;
    }

    body[role="application"] ul.bb-tablist[data-type="filter"] {
      margin: 10px 0;
    }
  </style>
</head>
<body role="application">
  <section role="region">

    <h2 class="bb-docs">Default position - Default Filters</h2>
    <ul role="tablist" class="bb-tablist" data-type="filter">
      <li id="filter1-1" role="presentation"><a href="#filter1-1" role="tab">Action 01</a></li>
      <li id="filter1-2" role="presentation"><a href="#filter1-2" role="tab">Action 02</a></li>
    </ul>

    <ul role="tablist" data-type="filter" class="skin-grey bb-tablist">
      <li id="filter2-1" role="presentation"><a href="#filter2-1" role="tab">Action 01</a></li>
      <li id="filter2-2" role="presentation"><a href="#filter2-2" role="tab">Action 02</a></li>
      <li id="filter2-3" role="presentation"><a href="#filter2-3" role="tab">Action 02</a></li>
    </ul>

    <br />
    <br />
    <br />
    <br />

    <h2 class="bb-docs">Default position - Grey Filters</h2>
    <ul role="tablist" data-type="filter" class="bottom bb-tablist">
      <li id="filter-bottom1-1" role="presentation"><a href="#filter-bottom1-1" role="tab">Action 01</a></li>
      <li id="filter-bottom1-2" role="presentation"><a href="#filter-bottom1-2" role="tab">Action 02</a></li>
    </ul>

    <ul role="tablist" data-type="filter" class="skin-grey bottom bb-tablist">
      <li id="filter-bottom2-1" role="presentation"><a href="#filter-bottom2-1" role="tab">Action 01</a></li>
      <li id="filter-bottom2-2" role="presentation"><a href="#filter-bottom2-2" role="tab">Action 02</a></li>
      <li id="filter-bottom2-3" role="presentation"><a href="#filter-bottom2-3" role="tab">Action 02</a></li>
    </ul>

  </section>
</body>
</html>