From 62ff5449340027c31d1ca89596717a7ca95d00da Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Tue, 3 Sep 2013 18:02:26 +0200
Subject: [PATCH] add read bubble

---
 src/ui/css/style.scss | 21 ++++++++++++++++++---
 src/ui/index.html     |  4 ++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/ui/css/style.scss b/src/ui/css/style.scss
index b02441c..a41c0eb 100644
--- a/src/ui/css/style.scss
+++ b/src/ui/css/style.scss
@@ -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;
         }
     }
 }
diff --git a/src/ui/index.html b/src/ui/index.html
index 9c3db19..6cf57f3 100755
--- a/src/ui/index.html
+++ b/src/ui/index.html
@@ -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>