Add circular icon for unread messages

2018-07-13 09:57:08 +02:00
parent 40f6eabdd9
commit d88031e64d
2 changed files with 23 additions and 8 deletions
@@ -32,10 +32,6 @@
 			width: 32px;
 		}

-		&.unread {
-			background-color: #b12525;
-		}
-
 		&.on {
 			background-color: rgba(#fff, 0.7);
 		}
@@ -53,6 +49,21 @@
 			}
 		}
 	}
+
+	> .badge {
+		border-radius: 50%;
+    font-size: 1rem;
+    background: #b12525;
+    color: #fff;
+    text-align: center;
+    margin-top: -8px;
+    line-height: 1rem;
+    margin-right: -8px;
+    position: absolute;
+    padding: 0.2rem 0.4rem;
+    top: 0;
+    right: 0;
+	}
 }

 [data-component='ToolArea'] {
@@ -77,7 +88,6 @@
 			font-size: 1.3vmin;
 			height: 3vmin;

-
 			> .badge {
 				padding: 0.1vmin 1vmin;
 				text-align: center;