moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-11 19:55:06 -05:00
Code Issues Releases Wiki Activity

built hamburger button

Browse Source
This commit is contained in:
Tankred Hase 2013-09-03 17:49:02 +02:00
parent cac59b07e5
commit 145a971911
2 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/ui/css/style.scss
View File

@ -3,6 +3,8 @@
$default-text-color: #333333;
$blue-color: #00c6ff;
$lightgrey-color: #f9f9f9;
$blue-box-shadow-color: #A4A4A4;
$lightgrey-box-shadow-color: #D8D8D8;
/* global */
@ -18,13 +20,32 @@ body {
color: $default-text-color;
}
/* Inbox */
/* folder name */
.hamburger {
background-image:url('../img/Inbox.png');
background-repeat: no-repeat;
width: 55px;
height: 40px;
.folder-name {
position: absolute;
padding: 13px 15px;
p {
font-size: 1.5em;
}
}
.hamburger-btn {
float: left;
background-color: $lightgrey-color;
height: 1em;
width: 1.3em;
margin-right: 10px;
.blue-box {
float: inherit;
background-color: $blue-color;
height: 5px;
width: 100%;
box-shadow: 1px 1px 1px $lightgrey-box-shadow-color;
margin-bottom: 0.16em;
}
}
/* message list */
@ -54,7 +75,7 @@ body {
height: 0.9em;
border-radius: 50%;
background: $blue-color;
box-shadow: inset 0.5px 1px 1px #A4A4A4;
box-shadow: inset 0.5px 1px 1px $blue-box-shadow-color;
}
li {
@ -98,7 +119,7 @@ body {
.unread {
background: $lightgrey-color;
box-shadow: inset 1px 1px 1px #D8D8D8;
box-shadow: inset 1px 1px 1px $lightgrey-box-shadow-color;
}
}
}

33
src/ui/index.html
View File

@ -9,6 +9,16 @@
</head>
<body>
<div class="folder-name">
<p>
<span class="hamburger-btn">
<span class="blue-box blue-box-margin"></span>
<span class="blue-box blue-box-margin"></span>
<span class="blue-box blue-box-margin"></span>
</span>
Inbox
</p>
</div>
<div class="message-list">
<ul>
<li class="selected">
@ -18,19 +28,30 @@
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<p class="from">welcome@whiteout.io</p>
<div class="unread"></div>
<p class="from">Max Mustermann</p>
<p class="subject">Welcome Nico</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<p class="from">welcome@whiteout.io</p>
<p class="from">Max Mustermann</p>
<p class="subject">Welcome Nico</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<p class="from">welcome@whiteout.io</p>
<p class="from">Max Mustermann</p>
<p class="subject">Welcome Nico</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<p class="from">Max Mustermann</p>
<p class="subject">Welcome Nico</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
<li>
<p class="from">Max Mustermann</p>
<p class="subject">Welcome Nico</p>
<p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
</li>
</ul>
</div><!--/.message-list-->