mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

move righthand panel styles to its own file

Browse Source
pull/3094/head
Iuri Matias 7 years ago
parent 0dc0c6863f
commit 748693b6d5
2 changed files with 106 additions and 105 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 108
      src/app/panels/righthand-panel.js
  2. 103
      src/app/panels/styles/righthand-panel-styles.js

108
src/app/panels/righthand-panel.js
Unescape View File

@ -11,111 +11,7 @@ var supportTab = require('../tabs/support-tab')
var pluginTab = require('../tabs/plugin-tab') var pluginTab = require('../tabs/plugin-tab')
var PluginManager = require('../../pluginManager') var PluginManager = require('../../pluginManager')
// -------------- styling ---------------------- var css = require('./styles/righthand-panel-styles')
var csjs = require('csjs-inject')
var styleGuide = remixLib.ui.themeChooser
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 = RighthandPanel
function RighthandPanel (appAPI, events, opts) { function RighthandPanel (appAPI, events, opts) {
var self = this var self = this
@ -211,3 +107,5 @@ function RighthandPanel (appAPI, events, opts) {
} }
} }
} }
module.exports = RighthandPanel

103
src/app/panels/styles/righthand-panel-styles.js
Unescape View File

@ -0,0 +1,103 @@
var csjs = require('csjs-inject')
var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
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
Write Preview
Loading…
Cancel
Save