mirror of https://github.com/moparisthebest/mail
105 lines
3.1 KiB
HTML
Executable File
105 lines
3.1 KiB
HTML
Executable File
<!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="">Send securely and invite</a>
|
|
<button class="btn" disabled>Disabled Button</button>
|
|
<a class="btn" aria-disabled="true" data-icon-append="" href="#">Disabled Link</a>
|
|
</p>
|
|
<h3>Icon Buttons</h3>
|
|
<p>
|
|
<button class="btn-icon"></button>
|
|
<button class="btn-icon"></button>
|
|
<button class="btn-icon"></button>
|
|
<button class="btn-icon" disabled></button>
|
|
</p>
|
|
|
|
<h2>2) Labels</h2>
|
|
<p>
|
|
<span class="label">Max Mustermann</span>
|
|
<span class="label label-primary" data-icon-append="">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> |