Move inner styles to scss files.

src/components/popover/popover.component.scss

@@ -0,0 +1,30 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    min-width: 577px;
+    padding: 0;
+}
+
+.popover-action {
+    padding: 8px 14px;
+    margin: 0;
+    font-size: 14px;
+    background-color: #f7f7f7;
+    border-top: 1px solid #ebebeb;
+    border-radius: 0 0 5px 5px;
+    text-align: right;
+}
+
+.popover-title.menu-tabs {
+    padding: .5rem .5rem 0;
+    display: block;
+}
+
+.popover-title.menu-tabs .nav-tabs {
+    position: relative;
+    top: 1px;
+}
+
+.popover-content {
+    padding: 10px 24px;
+}

src/components/popover/popover.component.ts

@@ -86,39 +86,7 @@ import {NoneTabComponent} from './tab/none-tab.component';
             </div>
         </div>
     `,
-    styles:
+    styles: [ require('./popover.component.scss') ],
-    [`
-        :host {
-            display: flex;
-            flex-direction: column;
-            min-width: 577px;
-            padding: 0;
-        }
-
-        .popover-action {
-            padding: 8px 14px;
-            margin: 0;
-            font-size: 14px;
-            background-color: #f7f7f7;
-            border-top: 1px solid #ebebeb;
-            border-radius: 0 0 5px 5px;
-            text-align: right;
-        }
-
-        .popover-title.menu-tabs {
-            padding: .5rem .5rem 0;
-            display: block;
-        }
-
-        .popover-title.menu-tabs .nav-tabs {
-            position: relative;
-            top: 1px;
-        }
-
-        .popover-content {
-            padding: 10px 24px;
-        }
-    `],
     host: { 'class': 'popover' },
     directives:
     [

src/components/popover/tab/mouse-tab.component.scss

@@ -0,0 +1,12 @@
+:host {
+    display: flex;
+}
+
+.mouse-action {
+    flex: 1;
+    border-right: 1px solid black;
+}
+
+.details {
+    flex: 2;
+}

src/components/popover/tab/mouse-tab.component.ts

@@ -16,21 +16,7 @@ import { Component, OnInit } from '@angular/core';
         <div class="details">
         </div>
     `,
-    styles:
+    styles: [ require('./mouse-tab.component.scss') ]
-    [`
-        :host {
-            display: flex;
-        }
-
-        .mouse-action {
-            flex: 1;
-            border-right: 1px solid black;
-        }
-
-        .details {
-            flex: 2;
-        }
-    `]
 })
 export class MouseTabComponent implements OnInit {
     constructor() { }