diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js index 88cba2804c..5c0f9dc53d 100644 --- a/src/app/panels/righthand-panel.js +++ b/src/app/panels/righthand-panel.js @@ -1,6 +1,8 @@ var yo = require('yo-yo') +var csjs = require('csjs-inject') var remixLib = require('remix-lib') +var styleguide = require('../ui/styles-guide/theme-chooser') var PluginManager = require('../plugin/pluginManager') var TabbedMenu = require('../tabs/tabbed-menu') var CompileTab = require('../tabs/compile-tab') @@ -13,7 +15,7 @@ var TestTab = require('../tabs/test-tab') var RunTab = require('../tabs/run-tab') var EventManager = remixLib.EventManager -var css = require('./styles/righthand-panel-styles') +var styles = styleguide.chooser() module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) { var self = this @@ -122,3 +124,100 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) { } } } + +var css = csjs` + #righthand-panel { + display: flex; + flex-direction: column; + top: 0; + right: 0; + bottom: 0; + box-sizing: border-box; + overflow: hidden; + } + #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; + } + #optionViews .hide { + display: none; + } + a { + color: ${styles.rightPanel.text_link}; + } + .menu { + display: flex; + background-color: ${styles.rightPanel.BackgroundColor_Pre}; + } + .options { + float: left; + padding-top: 0.7em; + min-width: 60px; + font-size: 0.9em; + cursor: pointer; + font-size: 1em; + text-align: center; + } + .opts { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + .opts_li { + display: block; + font-weight: bold; + color: ${styles.rightPanel.text_Teriary}; + } + .opts_li.active { + color: ${styles.rightPanel.text_Primary}; + } + .opts_li:hover { + color: ${styles.rightPanel.icon_HoverColor_TogglePanel}; + } + .dragbar { + position : absolute; + width : 0.5em; + top : 3em; + bottom : 0; + cursor : col-resize; + z-index : 999; + border-left : 2px solid ${styles.rightPanel.bar_Dragging}; + } + .ghostbar { + width : 3px; + background-color : ${styles.rightPanel.bar_Ghost}; + opacity : 0.5; + position : absolute; + cursor : col-resize; + z-index : 9999; + top : 0; + bottom : 0; + } + .panel { + height : 100%; + } + .header { + height : 100%; + } + .solIcon { + margin-left: 10px; + margin-right: 30px; + display: flex; + align-self: center; + height: 29px; + width: 20px; + background-color: ${styles.colors.transparent}; + } +` diff --git a/src/app/panels/styles/righthand-panel-styles.js b/src/app/panels/styles/righthand-panel-styles.js deleted file mode 100644 index f477529227..0000000000 --- a/src/app/panels/styles/righthand-panel-styles.js +++ /dev/null @@ -1,102 +0,0 @@ -var csjs = require('csjs-inject') -var styleGuide = require('../../ui/styles-guide/theme-chooser') -var styles = styleGuide.chooser() - -var css = csjs` - #righthand-panel { - display: flex; - flex-direction: column; - top: 0; - right: 0; - bottom: 0; - box-sizing: border-box; - overflow: hidden; - } - #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; - } - #optionViews .hide { - display: none; - } - a { - color: ${styles.rightPanel.text_link}; - } - .menu { - display: flex; - background-color: ${styles.rightPanel.BackgroundColor_Pre}; - } - .options { - float: left; - padding-top: 0.7em; - min-width: 60px; - font-size: 0.9em; - cursor: pointer; - font-size: 1em; - text-align: center; - } - .opts { - display: flex; - list-style: none; - margin: 0; - padding: 0; - } - .opts_li { - display: block; - font-weight: bold; - color: ${styles.rightPanel.text_Teriary}; - } - .opts_li.active { - color: ${styles.rightPanel.text_Primary}; - } - .opts_li:hover { - color: ${styles.rightPanel.icon_HoverColor_TogglePanel}; - } - .dragbar { - position : absolute; - width : 0.5em; - top : 3em; - bottom : 0; - cursor : col-resize; - z-index : 999; - border-left : 2px solid ${styles.rightPanel.bar_Dragging}; - } - .ghostbar { - width : 3px; - background-color : ${styles.rightPanel.bar_Ghost}; - opacity : 0.5; - position : absolute; - cursor : col-resize; - z-index : 9999; - top : 0; - bottom : 0; - } - .panel { - height : 100%; - } - .header { - height : 100%; - } - .solIcon { - margin-left: 10px; - margin-right: 30px; - display: flex; - align-self: center; - height: 29px; - width: 20px; - background-color: ${styles.colors.transparent}; - } -` - -module.exports = css