Omnimaga
/
bugs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>Buttons</title>
  <meta name="description" content="You can use button tag or also anchor tag with role button">

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

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

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

    div.bb-docs {
      padding: 1rem;
    }

    div.bb-docs.dark {
      background: #000;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    body[role="application"] > [role="region"] {
      height: 100%;
      position: relative;
    }
  </style>
</head>
<body role="application">
  <p dir="ltr">
    <label>
      <input type="checkbox"
        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
      RTL mode
    </label>
  </p>
  <h2 class="bb-docs">Normal</h2>
  <div class="bb-docs">
    <button>Default</button>
    <button class="recommend">Recommend</button>
    <button class="danger">Danger</button>
   </div>

  <h2 class="bb-docs">Disabled</h2>
  <div class="bb-docs">
    <button disabled>Default</button>
    <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
    <button disabled class="danger">Danger</button>
  </div>

  <h2 class="bb-docs">Disabled with dark background</h2>
  <div class="bb-docs dark">
    <button disabled>Default</button>
    <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
    <button disabled class="danger">Danger</button>
  </div>

  <h2 class="bb-docs">Button List </h2>
  <div class="bb-docs">
    <ul>
      <li>
        <button>Default</button>
      </li>
      <li>
        <button disabled="disabled">Disabled</button>
      </li>
      <li>
        <button class="icon icon-view">
          View Name
        </button>
      </li>
      <li>
        <button disabled="disabled" class="icon icon-view">
          View Name
        </button>
      </li>
      <li>
        <a role="button" class="icon icon-dialog">
          Tuesday September 18, 2012
        </a>
      </li>
      <li>
        <a role="button" aria-disabled="true" class="icon icon-dialog">
          Tuesday September 18, 2012
        </a>
      </li>
    </ul>
  </div>

  <h2 class="bb-docs">Button list (compact mode)</h2>
  <div class="bb-docs">
    <ul class="compact">
      <li>
        <label>Description</label>
        <button class="icon icon-dialog">Action 1</button>
      </li>
      <li>
        <label>Description</label>
        <button class="icon icon-dialog">Action 2</button>
      </li>
      <li>
        <label>This is a large description for this action</label>
        <button class="icon icon-dialog" disabled >Action 3 (disabled)</button>
      </li>
    </ul>
  </div>
</body>
</html>