VulpesOS/gaia/shared/style/lists/index.html

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
  <meta name="description" content="Displaying an enumeration of a set of items ">

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

  <!--
    - These <style>, <script> and <link> elements are only used for the example
    - code, they are not needed for the real case.
    -->
  <link rel="stylesheet" href="../../style/headers.css">
  <link rel="stylesheet" href="../../style/switches.css">
  <link rel="stylesheet" href="../../style/buttons.css">
  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    body {
      background: none;
    }

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

    h2.pack-docs:first-child {
      margin-top: 0;
    }

    [data-type="list"] li img[alt="placeholder"] {
      background: #ccc url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiLz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTAiIHkxPSIwIiB4Mj0iMC4wODIiIHkyPSI0OS45MTkiLz4NCjwvc3ZnPg0K);
      background-size: 100% 100%;
      font-size: 0;
    }

    [data-icon]:before {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    [data-type="list"] [data-icon="forward"]:before {
      color: #686f72;
    }

    #settings-list { background-color: #eff0eb; }
    #settings-list li { border-color: #dcdcdc; }
    #settings-list button { max-width: 8rem; margin: 1rem 1rem 0 0; }
    #settings-list aside label { margin: 0 1rem 0 0; height: 100%; }
    #settings-list > header h2 { margin: 0 1.5rem; }
  </style>
  <script>
    window.onload = function() {
      var dirInput = document.getElementById('dir');
      dirInput.checked = false;
      dirInput.onchange = function() {
        document.documentElement.dir = this.checked ? "rtl" : "ltr";
      };
    };
  </script>
</head>

<body role="application">
  <p dir="ltr">
    <label class="bb-docs">
      <input id="dir" type="checkbox"> RTL mode
    </label>
  </p>
  <section data-type="list">
    <header>Title</header>
    <ul>
      <li>
        <p>Margherita <strong>Gomez</strong></p>
      </li>
      <li>
        <a href="#">
          <aside class="pack-end" data-icon="forward" data-l10n-id="" aria-label="forward"></aside>
          <p>Margherita Clickable <strong>Gomez</strong></p>
        </a>
      </li>
      <li>
        <aside class="pack-end">
          <img alt="placeholder" src="myimage.jpg">
        </aside>
        <a href="#">
          <p>Margherita <strong>Gomez</strong></p>
          <p>Family</p>
        </a>
      </li>
    </ul>

    <header>Another title</header>
    <ul>
      <li aria-disabled="true">
        <aside class="pack-end">
          <img alt="placeholder" src="myimage.jpg">
        </aside>
        <a href="#">
          <p>Margherita <strong>Gomez</strong></p>
          <p>Family</p>
        </a>
      </li>
      <li>
        <aside class="pack-end icon icon-nopic"></aside>
        <a href="#">
          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call">
            asidecall
          </aside>
          <p dir="auto">
            Margherita <strong>Gomez</strong>
            <em>(2)</em>
          </p>
          <p>
            <time datetime="17:43">5:43PM</time>
            Mobile, Vivo
          </p>
        </a>
      </li>
    </ul>
  </section>

  <section data-type="list">
    <header>Edit mode</header>
    <ul data-type="edit">
      <li>
        <label class="pack-checkbox danger">
          <input type="checkbox">
          <span></span>
        </label>
        <aside class="pack-end">
          <img alt="placeholder" src="myimage.jpg">
        </aside>
        <a href="#">
          <p>Margherita <strong>Gomez</strong></p>
          <p>Family</p>
        </a>
      </li>
      <li>
        <label class="pack-checkbox danger">
          <input type="checkbox">
          <span></span>
        </label>
        <a href="#">
          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call"></aside>
          <p dir="auto">
            Margherita <strong>Gomez</strong>
            <em>(2)</em>
          </p>
          <p>
            <time datetime="17:43">5:43PM</time>
            Mobile, Vivo
          </p>
        </a>
      </li>
    </ul>
  </section>

  <section id="settings-list" role="region" class="skin-organic">
    <section data-type="list">
      <ul>
      <li>
        <a href="#">
          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call"></aside>
          <p>Phone lock</p>
        </a>
      </li>
      </ul>
    </section>
    <header>
      <h2>Settings style</h2>
    </header>
    <section data-type="list">
      <ul>
        <li>
          <aside class="pack-end">
            <button class="icon icon-dialog">Spain</button>
          </aside>
          <p>Time zone</p>
          <p>Choose your country</p>
        </li>
        <li>
          <aside class="pack-end">
            <label class="pack-switch">
              <input type="checkbox" checked>
              <span></span>
            </label>
          </aside>
          <p>Phone lock</p>
        </li>
      </ul>
    </section>
  </section>

</body>
</html>