use sass magic

static/src/app/common/navigation/navigation-header.component.scss

@@ -1,49 +1,50 @@
-li {
+@import url('../../style/blink-indicator.scss');
-  height: 50px;
-  line-height: 46px;
-  padding: 0 10px;
-  cursor: pointer;
-}
-
-li a {
-  font-size: 16px;
-  text-decoration: none;
-  color: #9d9d9d;
-  padding: 16px 5px;
-}
-
-li mat-list-item {
-  cursor: pointer;
-}
-
-li:hover {
-  a {
-    color: white;
-  }
-}
-
-li.active {
-  @extend li:hover;
-
-  background: #000000;
-}
-
-.navigation-items {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.mat-toolbar.mat-primary {
-  background: #222222;
-}
 
 mat-toolbar {
   height: 2.5em;
   min-height: 50px;
-}
 
-.brand-logo {
+  &.mat-toolbar.mat-primary {
+    background: #222222;
+  }
+
+  .navigation-items {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    height: 50px;
+    line-height: 46px;
+    padding: 0 10px;
+    cursor: pointer;
+
+    mat-list-item {
+      cursor: pointer;
+    }
+
+    a {
+      font-size: 16px;
+      text-decoration: none;
+      color: #9d9d9d;
+      padding: 16px 5px;
+    }
+
+    &:hover {
+      a {
+        color: white;
+      }
+    }
+
+    &.active {
+      @extend li:hover;
+
+      background: #000000;
+    }
+  }
+
+  .brand-logo {
     padding-top: 6px;
     margin-right: -10px;
 
@@ -64,35 +65,6 @@ mat-toolbar {
     @media all and (max-width: 959px) {
       margin: auto;
     }
-}
-
-.unprocessed {
-  -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-  animation-name: color-blink;
-  animation-duration: 4s;
-  animation-iteration-count: infinite;
-}
-
-.unprocessed-child {
-  background-color: orange;
-}
-
-/* Safari 4.0 - 8.0 */
-@-webkit-keyframes color-blink {
-  from {
-    background-color: #222222;
   }
-  to {
-    background-color: orange;
-  }
-}
 
-@keyframes color-blink {
-  from {
-    background-color: #222222;
-  }
-  to {
-    background-color: orange;
-  }
 }

static/src/app/common/navigation/navigation-header.component.ts

@@ -24,12 +24,12 @@ export class NavigationHeaderComponent implements OnInit {
 
   readonly availableLanguages = BaseConfig.i18n.availableLanguages;
 
+  readonly version = require('./../../../../../package.json').version;
+
   config = RouteConfig;
 
   language;
 
-  version = require('./../../../../../package.json').version;
-
   constructor(public loginService: LoginService,
               private promotionService: PromotionService,
               private awardingService: AwardingService,

static/src/app/common/navigation/sidenav-list.component.scss

@@ -1,3 +1,5 @@
+@import url('../../style/blink-indicator.scss');
+
 mat-list-item.mat-list-item, a.mat-list-item {
   font-size: 16px;
   text-decoration: none;
@@ -21,34 +23,3 @@ mat-divider {
   margin: 15% 0;
   border-color: #9d9d9d;
 }
-
-.unprocessed {
-  -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-  animation-name: color-blink;
-  animation-duration: 4s;
-  animation-iteration-count: infinite;
-}
-
-.unprocessed-child {
-  background-color: orange;
-}
-
-/* Safari 4.0 - 8.0 */
-@-webkit-keyframes color-blink {
-  from {
-    background-color: #222222;
-  }
-  to {
-    background-color: orange;
-  }
-}
-
-@keyframes color-blink {
-  from {
-    background-color: #222222;
-  }
-  to {
-    background-color: orange;
-  }
-}

static/src/app/style/blink-indicator.scss

@@ -0,0 +1,30 @@
+.unprocessed {
+  -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
+  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
+  animation-name: color-blink;
+  animation-duration: 4s;
+  animation-iteration-count: infinite;
+}
+
+.unprocessed-child {
+  background-color: orange;
+}
+
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes color-blink {
+  from {
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
+}
+
+@keyframes color-blink {
+  from {
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
+}