Make header icon opaque

This is to align with the other header icons Signed-off-by: Louis Chemineau <louis@chmn.me>
nextcloud · Jun 2, 2022 · 0e34736 · 0e34736
1 parent 7cda89b
commit 0e34736
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/js/notifications-main.js b/js/notifications-main.js
diff --git a/js/notifications-main.js.map b/js/notifications-main.js.map
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -7,11 +7,17 @@
 	border-radius: 50%;
 	text-align: center;
 	padding: 10px;
-	opacity: .6;
+	opacity: 1 !important;
+
+	svg {
+		opacity: .6;
+	}
 
 	&:hover,
 	&:focus {
-		opacity: 1 !important;
+		svg {
+			opacity: 1 !important;
+		}
 	}
 
 	.notification__dot {
@@ -22,14 +28,12 @@
 	}
 
 	&.hasNotifications {
-		opacity: 1 !important;
 		animation-name: pulse;
 		animation-duration: 1600ms;
 		animation-iteration-count: 4;
 
-		&:hover,
-		&:focus {
-			opacity: .6 !important;
+		svg {
+			opacity: 1 !important;
 		}
 	}
 
@@ -38,15 +42,19 @@
 	}
 }
 
-@keyframes pulse {
-	0% {
-		opacity: 1;
-	}
-	60% {
-		opacity: .6;
-	}
-	100% {
-		opacity: 1;
+svg {
+	@keyframes pulse {
+		0% {
+			opacity: 1;
+		}
+
+		60% {
+			opacity: .6;
+		}
+
+		100% {
+			opacity: 1;
+		}
 	}
 }