Refactor pending/sent/delivered state markup & css

No need for separate elements since we only ever display one of these
states at a time.

// FREEBIE

background.html

@@ -78,9 +78,7 @@
           <p class="content">{{ message }}</p>
           <div class='meta'>
             <span class='timestamp'>{{ timestamp }}</span>
-            <span class='sinewave hide'></span>
+            <span class='status hide'></span>
-            <span class='checkmark hide'></span>
-            <span class='double-checkmark hide'></span>
           </div>
       </div>
   </script>

stylesheets/_conversation.scss

@@ -189,37 +189,26 @@
   margin-right: 3px;
 }
 
-.sinewave {
-  background: url('/images/sinewave.png') repeat-x;
-  animation: backgroundScroll 0.5s linear infinite;
-}
-
 @keyframes backgroundScroll {
   from {background-position: 0 0;}
   to {background-position: -18px 0;}
 }
-.entry.sent .checkmark {
+.outgoing.entry {
-  display: inline-block;
+  .status {
-  width: 18px;
-  height: 1em;
-  background: url('/images/check-white.png');
-}
-.entry.delivered {
-  .checkmark { display: none; }
-  .double-checkmark {
     display: inline-block;
-    background: url('/images/double-check-white.png');
     width: 18px;
     height: 1em;
   }
-}
+  &.sent .status {
-.entry.pending {
+    background: url('/images/check-white.png');
-  .sinewave {
+  }
-    display: inline-block;
+  &.delivered .status {
-    width: 18px;
+    background: url('/images/double-check-white.png');
-    height: 1em;
+  }
+  &.pending .status {
+    background: url('/images/sinewave.png') repeat-x;
+    animation: backgroundScroll 0.5s linear infinite;
   }
-  .double-checkmark, .checkmark { display: none; }
 }
 
 .message-list {

stylesheets/manifest.css

@@ -673,35 +673,22 @@ input.search {
   font-size: smaller;
   margin-right: 3px; }
 
-.sinewave {
-  background: url("/images/sinewave.png") repeat-x;
-  animation: backgroundScroll 0.5s linear infinite; }
-
 @keyframes backgroundScroll {
   from {
     background-position: 0 0; }
   to {
     background-position: -18px 0; } }
-.entry.sent .checkmark {
+.outgoing.entry .status {
-  display: inline-block;
-  width: 18px;
-  height: 1em;
-  background: url("/images/check-white.png"); }
-
-.entry.delivered .checkmark {
-  display: none; }
-.entry.delivered .double-checkmark {
   display: inline-block;
-  background: url("/images/double-check-white.png");
   width: 18px;
   height: 1em; }
-
+.outgoing.entry.sent .status {
-.entry.pending .sinewave {
+  background: url("/images/check-white.png"); }
-  display: inline-block;
+.outgoing.entry.delivered .status {
-  width: 18px;
+  background: url("/images/double-check-white.png"); }
-  height: 1em; }
+.outgoing.entry.pending .status {
-.entry.pending .double-checkmark, .entry.pending .checkmark {
+  background: url("/images/sinewave.png") repeat-x;
-  display: none; }
+  animation: backgroundScroll 0.5s linear infinite; }
 
 .message-list {
   margin: 0;