1
0
mirror of https://github.com/moparisthebest/mail synced 2024-11-22 17:02:17 -05:00
mail/src/styles.html

105 lines
3.1 KiB
HTML
Raw Normal View History

2013-09-16 13:46:04 -04:00
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styleguide for Whiteout Mail Client</title>
2013-09-16 13:46:04 -04:00
<link rel="stylesheet" href="css/all.css">
2013-09-16 13:46:04 -04:00
<style>
body {
margin: 0 auto;
padding: 20px;
max-width: 800px;
}
</style>
2013-09-16 13:46:04 -04:00
</head>
<body>
<h1>Styleguide for Whiteout Mail Client</h1>
2013-09-16 13:46:04 -04:00
<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>
2013-09-16 13:46:04 -04:00
<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>
2013-09-16 13:46:04 -04:00
<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>
2013-09-16 13:46:04 -04:00
</body>
</html>