<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Styleguide for Whiteout Mail Client</title>

  <link rel="stylesheet" href="../dist/css/all.min.css">

  <style>
  body {
    margin: 0 auto;
    padding: 20px;
    max-width: 800px;
  }
  </style>
</head>
<body>

  <h1>Styleguide for Whiteout Mail Client</h1>

  <h2>1) Buttons</h2>
  <h3>Regular Buttons</h3>
  <p>
    <button class="btn">Label</button>
    <a class="btn" href="#" data-icon="&#xe001;">Send securely and invite</a>
    <button class="btn" disabled>Disabled Button</button>
    <a class="btn" aria-disabled="true" data-icon-append="&#xe001;" href="#">Disabled Link</a>
  </p>
  <h3>Icon Buttons</h3>
  <p>
    <button class="btn-icon">&#xe005;</button>
    <button class="btn-icon">&#xe002;</button>
    <button class="btn-icon">&#xe006;</button>
    <button class="btn-icon" disabled>&#xe006;</button>
  </p>

  <h2>2) Labels</h2>
  <p>
    <span class="label">Max Mustermann</span>
    <span class="label label-primary" data-icon-append="&#xe003;">Max Mustermann</span>
    <span class="label label-light">1</span>
  </p>

  <h2>3) Mail List</h2>
  <ul class="mail-list">
    <li class="mail-list-active mail-list-attachment">
      <h3>welcome@whiteout.io</h3>
      <div class="head">
        <p class="subject">
          Welcome Nico
        </p>
        <time>
          Wednesday
        </time>
      </div>
      <p class="body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
      </p>
    </li>
    <li>
      <h3>welcome@whiteout.io</h3>
      <div class="head">
        <p class="subject">
          Welcome Nico
        </p>
        <time>
          Wednesday
        </time>
      </div>
      <p class="body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
      </p>
    </li>
    <li class="mail-list-attachment mail-list-unread">
      <h3>welcome@whiteout.io</h3>
      <div class="head">
        <p class="subject">
          Welcome Nico
        </p>
        <time>
          Wednesday
        </time>
      </div>
      <p class="body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
      </p>
    </li>
    <li class="mail-list-replied">
      <h3>welcome@whiteout.io</h3>
      <div class="head">
        <p class="subject">
          Welcome Nico
        </p>
        <time>
          Wednesday
        </time>
      </div>
      <p class="body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
      </p>
    </li>
  </ul>

</body>
</html>