Move notifications style outside of component

src/assets/css/index.css

@@ -23,6 +23,7 @@
 @import 'src/2.blocks.header.css';
 @import 'src/2.blocks.image.css';
 @import 'src/2.blocks.kanban.css';
+@import 'src/2.blocks.notifications.css';
 @import 'src/2.blocks.pill.css';
 @import 'src/2.blocks.pdf-viewer.css';
 @import 'src/2.blocks.project.css';

src/assets/css/src/2.blocks.notifications.css

@@ -0,0 +1,51 @@
+/* NOTIFICATIONS BLOCK */
+
+.notifications {
+  --flow-space: var(--space-16);
+}
+
+.notification {
+  --flow-space: var(--space-12);
+  font-size: var(--text-sm);
+  position: relative;
+  cursor: pointer;
+}
+.notification[data-status="unread"]::after {
+  content: "";
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  outline: 2px solid var(--color-white);
+  background: var(--color-primary);
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.notification p {
+  max-width: 100%;
+}
+.notification header p {
+  column-gap: 0;
+}
+.notification__type {
+  display: flex;
+}
+.notification__type::before {
+  margin-right: var(--space-8);
+}
+.notification__client {
+  display: inline-block;
+}
+.notification__client::before {
+  content: "";
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  background: var(--color-grey-700);
+  border-radius: 50%;
+  margin: 0.2em 0.5em;
+}
+.notification__body {
+  --line-clamp: 2;
+}

src/views/Notifications.vue

@@ -173,58 +173,4 @@ main > header {
 main > header [role="tablist"] {
   margin-left: 0;
 }
-
-/* Notifications */
-.notifications {
-  --flow-space: var(--space-16);
-}
-</style>
-
-<!-- WARNING : below styles are not scoped so as to be applied to the children components  -->
-<style>
-.notifications .notification {
-  --flow-space: var(--space-12);
-  font-size: var(--text-sm);
-  position: relative;
-  cursor: pointer;
-}
-.notifications .notification[data-status="unread"]::after {
-  content: "";
-  display: inline-block;
-  width: 0.5rem;
-  height: 0.5rem;
-  outline: 2px solid var(--color-white);
-  background: var(--color-primary);
-  border-radius: 50%;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.notifications .notification p {
-  max-width: 100%;
-}
-.notifications .notification header p {
-  column-gap: 0;
-}
-.notifications .notification__type {
-  display: flex;
-}
-.notifications .notification__type::before {
-  margin-right: var(--space-8);
-}
-.notifications .notification__client {
-  display: inline-block;
-}
-.notifications .notification__client::before {
-  content: "";
-  display: inline-block;
-  width: 3px;
-  height: 3px;
-  background: var(--color-grey-700);
-  border-radius: 50%;
-  margin: 0.2em 0.5em;
-}
-.notifications .notification__body {
-  --line-clamp: 2;
-}
 </style>