moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-12-23 15:58:49 -05:00
Code Issues Releases Wiki Activity

add read bubble

Browse Source
This commit is contained in:
Tankred Hase 2013-09-03 18:02:26 +02:00
parent 145a971911
commit 62ff544934
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,17 +67,33 @@ body {
}
}
.unread {
@mixin read-bubble {
position: absolute;
margin-top: 1.85em;
margin-left: 0.5em;
width: 0.9em;
height: 0.9em;
border-radius: 50%;
}
@mixin read-bubble-grey {
background: $lightgrey-color;
box-shadow: inset 1px 1px 1px $lightgrey-box-shadow-color;
}
@mixin read-bubble-blue {
background: $blue-color;
box-shadow: inset 0.5px 1px 1px $blue-box-shadow-color;
}
.unread {
@include read-bubble;
@include read-bubble-blue;
}
.read {
@include read-bubble;
@include read-bubble-grey;
}
li {
background-color: white;
margin: 8px 0;
@ -118,8 +134,7 @@ body {
@include marked;
.unread {
background: $lightgrey-color;
box-shadow: inset 1px 1px 1px $lightgrey-box-shadow-color;
@include read-bubble-grey;
}
}
}

4
src/ui/index.html
View File

@ -34,21 +34,25 @@
<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>
<div class="read"></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. 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>
<div class="read"></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. 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>
<div class="read"></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. 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>
<div class="read"></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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>