move settings styles to its own file

src/app/tabs/settings-tab.js

@@ -1,5 +1,4 @@
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
 var globalRegistry = require('../../global/registry')
@@ -8,7 +7,7 @@ var copyToClipboard = require('../ui/copy-to-clipboard')
 var styleGuide = require('../ui/styles-guide/theme-chooser')
 var Storage = remixLib.Storage
 var EventManager = require('../../lib/events')
-
+var css = require('./styles/settings-tab-styles')
 import { ApiFactory } from 'remix-plugin'
 
 module.exports = class SettingsTab extends ApiFactory {
@@ -179,94 +178,3 @@ module.exports = class SettingsTab extends ApiFactory {
     return self._view.el
   }
 }
-
-const css = csjs`
-  .settingsTabView {
-    padding: 2%;
-  }
-  .info {
-    margin-bottom: .6rem;
-    word-break: break-word;
-    font-size: .8rem;
-  }
-  .info h7 {
-    margin-bottom: .5rem;
-  }
-  .title {
-    // font-size: 1.1em;
-    // font-weight: bold;
-    // margin-bottom: 1em;
-  }
-  .frow {
-    margin-bottom: .5rem;
-  }
-  .crow {
-    // display: flex;
-    // overflow: auto;
-    // clear: both;
-    // padding: .2em;
-  }
-  .checkboxText {
-    font-weight: normal;
-  }
-  .crow label {
-    cursor:pointer;
-  }
-  .crowNoFlex {
-    overflow: auto;
-    clear: both;
-  }
-  .attention {
-    margin-bottom: 1em;
-    padding: .5em;
-    font-weight: bold;
-  }
-  .heading {
-    margin-bottom: 0;
-  }
-  .explaination {
-    margin-top: 3px;
-    margin-bottom: 3px;
-  }
-  input {
-    margin-right: 5px;
-    cursor: pointer;
-    width: inherit;
-  }
-  input[type=radio] {
-    margin-top: 2px;
-  }
-  .pluginTextArea {
-    font-family: unset;
-  }
-
-  .removePlugin {
-    cursor: pointer;
-  }
-  .icon {
-    margin-right: .5em;
-  }
-  .savegisttoken {
-    margin-left: 5px;
-  }
-  .aPlugin {
-    display: inline-block;
-    padding-left: 10px;
-    padding-top: 4px;
-    padding-bottom: 6px;
-    max-width: 100px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    vertical-align: middle;
-  }
-  .removePlugin{
-    padding-left: 7px;
-    padding-right: 7px;
-    margin-left: 10px;
-  }
-  .inline {
-    display: inline;
-    width: 50%;
-  }
-`

src/app/tabs/styles/settings-tab-styles.js

@@ -1,24 +1,30 @@
 var csjs = require('csjs-inject')
 
-var css = csjs`
+const css = csjs`
   .settingsTabView {
     padding: 2%;
-    display: flex;
   }
   .info {
-    margin-bottom: 1em;
+    margin-bottom: .6rem;
     word-break: break-word;
+    font-size: .8rem;
+  }
+  .info h7 {
+    margin-bottom: .5rem;
   }
   .title {
-    font-size: 1.1em;
+    // font-size: 1.1em;
-    font-weight: bold;
+    // font-weight: bold;
-    margin-bottom: 1em;
+    // margin-bottom: 1em;
+  }
+  .frow {
+    margin-bottom: .5rem;
   }
   .crow {
-    display: flex;
+    // display: flex;
-    overflow: auto;
+    // overflow: auto;
-    clear: both;
+    // clear: both;
-    padding: .2em;
+    // padding: .2em;
   }
   .checkboxText {
     font-weight: normal;
@@ -35,10 +41,6 @@ var css = csjs`
     padding: .5em;
     font-weight: bold;
   }
-  .select {
-    font-weight: bold;
-    margin-top: 1em;
-  }
   .heading {
     margin-bottom: 0;
   }
@@ -49,6 +51,7 @@ var css = csjs`
   input {
     margin-right: 5px;
     cursor: pointer;
+    width: inherit;
   }
   input[type=radio] {
     margin-top: 2px;
@@ -56,24 +59,36 @@ var css = csjs`
   .pluginTextArea {
     font-family: unset;
   }
-  .pluginLoad {
+
-    vertical-align: top;
+  .removePlugin {
-  }
+    cursor: pointer;
-  i.warnIt {
-    color: var(--warning);
   }
   .icon {
     margin-right: .5em;
   }
-  .remixdinstallation {
-    padding: 3px;
-    border-radius: 2px;
-    margin-left: 5px;
-  }
   .savegisttoken {
     margin-left: 5px;
   }
-}
+  .aPlugin {
+    display: inline-block;
+    padding-left: 10px;
+    padding-top: 4px;
+    padding-bottom: 6px;
+    max-width: 100px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .removePlugin{
+    padding-left: 7px;
+    padding-right: 7px;
+    margin-left: 10px;
+  }
+  .inline {
+    display: inline;
+    width: 50%;
+  }
 `
 
 module.exports = css