move tabbed menu styles

src/app/tabs/styles/tabbed-menu-styles.js

@@ -0,0 +1,42 @@
+const csjs = require('csjs-inject')
+const styles = require('../../ui/styles-guide/theme-chooser').chooser()
+
+const css = csjs`
+  .menu {
+    display: flex;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .active {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    color: ${styles.appProperties.mainText_Color}
+  }
+  .options {
+    float: left;
+    padding-top: 0.7em;
+    min-width: 60px;
+    font-size: 0.9em;
+    cursor: pointer;
+    font-size: 1em;
+    text-align: center;
+  }
+  .optionViews {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    overflow: scroll;
+    height: 100%;
+  }
+  .optionViews > div {
+    display: none;
+  }
+  .optionViews .pre {
+    word-wrap: break-word;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+    border-radius: 3px;
+    display: inline-block;
+    padding: 0 0.6em;
+  }
+`
+
+module.exports = css

src/app/tabs/tabbed-menu.js

@@ -1,13 +1,12 @@
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
+var css = require('./styles/tabbed-menu-styles')
 
 var globalRegistry = require('../../global/registry')
 var helper = require('../../lib/helper')
-var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
 var EventManager = require('../../lib/events')
 
-module.exports = class TabbedMenu {
+class TabbedMenu {
   constructor (localRegistry) {
     const self = this
     self.event = new EventManager()
@@ -91,40 +90,4 @@ module.exports = class TabbedMenu {
   }
 }
 
-const css = csjs`
+module.exports = TabbedMenu
-  .menu {
-    display: flex;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .active {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    color: ${styles.appProperties.mainText_Color}
-  }
-  .options {
-    float: left;
-    padding-top: 0.7em;
-    min-width: 60px;
-    font-size: 0.9em;
-    cursor: pointer;
-    font-size: 1em;
-    text-align: center;
-  }
-  .optionViews {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    overflow: scroll;
-    height: 100%;
-  }
-  .optionViews > div {
-    display: none;
-  }
-  .optionViews .pre {
-    word-wrap: break-word;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
-    border-radius: 3px;
-    display: inline-block;
-    padding: 0 0.6em;
-  }
-`