VulpesOS/assets/webapps/settings.gaiamobile.org/shared/style/buttons/index.html

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Buttons</title>
  <link rel="stylesheet" href="../buttons.css">
  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">

  <!--
    - These <style> and <script> elements are only used for the example code,
    - they are not needed for the real case.
    -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    label.bb-docs {
      font-family: sans-serif;
      font-size: 1.2rem;
      margin-left: 1.5rem;
    }

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

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

    div.bb-docs.skin-organic {
      background: #f4f4f4;
    }

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

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

    body[role="application"] > [role="region"] {
      height: 100%;
      position: relative;
    }

    [data-icon]:before {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  </style>
  <script>
    window.onload = function() {
      document.getElementById('dir').checked = false;
    };
  </script>
</head>
<body role="application">
  <p dir="ltr">
    <label class="bb-docs">
      <input id="dir" type="checkbox" checked="false"
        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
      RTL mode
    </label>
  </p>
  <h2 class="bb-docs">Special buttons</h2>
  <div class="bb-docs skin-organic">
    <button>Default</button>
    <button class="recommend">Recommend</button>
    <button class="danger">Danger</button>
  </div>

  <h2 class="bb-docs">Buttons with icons</h2>
  <div class="bb-docs skin-organic">
    <button data-icon="forward" aria-label="forward" data-l10n-id="">Default</button>
    <button data-icon="forward" aria-label="forward" data-l10n-id="" class="recommend">Recommend</button>
    <button data-icon="forward" aria-label="forward" data-l10n-id="" class="danger">Danger</button>
    <button data-icon="forward-light" aria-label="forward-light" data-l10n-id="">Default</button>
    <button data-icon="back" aria-label="back" data-l10n-id="">Default</button>
    <button data-icon="back-light" aria-label="back-light" data-l10n-id="">Default</button>
  </div>

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

  <h2 class="bb-docs">Skin dark</h2>
  <div class="bb-docs skin-dark">
    <button>Default</button>
    <button class="recommend">Recommend</button>
    <button class="danger">Danger</button>
   </div>

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

  <h2 class="bb-docs">List buttons</h2>
  <div class="bb-docs skin-organic">
    <ul>
      <li>
        <button>Default</button>
      </li>
      <li>
        <button disabled>Disabled</button>
      </li>
      <li>
        <button class="icon icon-view">
          Icon view button
        </button>
      </li>
      <li>
        <button class="icon icon-dialog">
          Icon dialog button
        </button>
      </li>
      <li>
        <span class="button icon icon-dialog">
          <select>
            <option selected>Icon dialog with options</option>
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
          </select>
        </span>
      </li>
      <li>
        <button class="icon icon-dialog" disabled>
          Icon dialog button disabled
        </button>
      </li>
      <li>
        <button data-icon="forward" aria-label="forward" data-l10n-id="">
          Side navigation
        </button>
      </li>
      <li>
        <button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
          Side navigation
        </button>
      </li>
      <li>
        <a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
          Tuesday Sept. 18, 2012
        </a>
      </li>
      <li>
        <a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
            Tuesday Sept. 18, 2012
        </a>
      </li>
    </ul>
  </div>

  <h2 class="bb-docs">Skin Dark</h2>
  <div class="bb-docs skin-dark">
    <ul>
      <li>
        <button>Default</button>
      </li>
      <li>
        <button disabled>Disabled</button>
      </li>
      <li>
        <button class="icon icon-dialog">
          Dark icon dialog button
        </button>
      </li>
      <li>
        <button data-icon="forward" aria-label="forward" data-l10n-id="">
          Side navigation
        </button>
      </li>
      <li>
        <button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
          Side navigation
        </button>
      </li>
      <li>
        <a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
          Tuesday Sept. 18, 2012
        </a>
      </li>
      <li>
        <a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
          Tuesday Sept. 18, 2012
        </a>
      </li>
    </ul>
  </div>

  <h2 class="bb-docs">Select</h2>
  <div class="bb-docs">
    <select>
      <option>option 1</option>
      <option>option 2</option>
    </select>
  </div>

  <h2 class="bb-docs">Fake select</h2>
  <div class="bb-docs">
    <ul>
      <li>
        <span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
          <select>
            <option>option 1</option>
            <option>option 2</option>
          </select>
        </span>
      </li>
    </ul>
  </div>

  <h2 class="bb-docs">Disabled select</h2>
  <div class="bb-docs">
    <ul>
      <li>
        <span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
          <select>
            <option>option 1</option>
            <option>option 2</option>
          </select>
        </span>
      </li>
    </ul>
  </div>

  <h2 class="bb-docs">Skin dark</h2>
  <div class="bb-docs skin-dark">
    <select>
      <option>option 1</option>
      <option>option 2</option>
    </select>
  </div>

  <h2 class="bb-docs">Fake select</h2>
  <div class="bb-docs skin-dark">
    <ul>
      <li>
        <span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
          <select>
            <option>option 1</option>
            <option>option 2</option>
          </select>
        </span>
      </li>
      <li>
        <span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
          <select>
            <option>option 1</option>
            <option>option 2</option>
          </select>
        </span>
      </li>
    </ul>
  </div>

</body>
</html>