Skip to content

B
baas-ide
Commit 5001dc93 authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #667 from ethereum/compileRunTab11

Compile run tab - 11
parents 3b922876 520de858
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 31 deletions
assets/css/styles.css
View file @ 5001dc93
......@@ -5,6 +5,7 @@ body {
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
font-weight: 300;
overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
......
src/app/analysis-tab.js
View file @ 5001dc93
......@@ -8,7 +8,6 @@ var styles = styleGuide()
var css = csjs`
.analysisTabView {
padding: 2%;
margin-top: 1em;
padding-bottom: 3em;
}
.infoBox extends ${styles.infoTextBox} {
......
src/app/style-guide.js
View file @ 5001dc93
......@@ -7,9 +7,12 @@ function styleGuide () {
COLORS
-------------------------------------------------------------------------- */
var colors = {
blue: '#9393bf',
transparent: 'transparent',
white: '#fff',
black: '#000',
blue: '#C6CFF7',
lightBlue: '#F4F6FF',
greyBlue: '#102026',
greyBlue: '#999999',
grey: '#666',
lightGrey: '#dddddd',
red: '#FF8080',
......@@ -17,7 +20,8 @@ function styleGuide () {
green: '#B1EAC5',
violet: '#C6CFF7',
pink: '#EC96EC',
yellow: '#ffbd01'
yellow: '#ffbd01',
lightYellow: 'hsla(59, 56%, 78%, 0.5)'
}
/* --------------------------------------------------------------------------
......@@ -53,42 +57,49 @@ function styleGuide () {
TEXT-BOXES
-------------------------------------------------------------------------- */
var textBoxes = csjs`
.display-box-L {
.display-box {
font-size : 1em;
padding : 8px 15px;
padding : 10px 15px;
line-height : 20px;
background : #f8f8f8;
background : ${colors.white};
border-radius : 3px;
border : 1px solid #e5e5e5;
overflow-x : auto;
border : 1px solid ${colors.lightGrey};
overflow : hidden;
word-break : break-word;
width : 100%;
}
.info-text-box {
background-color : white;
line-height : 20px;
border : .2em dotted lightGrey;
border : .2em dotted ${colors.lightGrey};
padding : 8px 15px;
border-radius : 5px;
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
}
.warning-text-box {
background-color : hsla(59, 56%, 78%, 0.5); // yellow
background-color : hsla(59, 56%, 78%, 0.5); // light yellow
line-height : 20px;
padding : 8px 15px;
border-radius : 5px;
border : .2em dotted #ffbd01; // orange-yellow
border : .2em dotted ${colors.yellow}; // orange-yellow
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
}
.error-text-box {
background-color : #FFB9B9; // light-red
background-color : ${colors.lightRed}; // light-red
line-height : 20px;
padding : 1em 1em .5em 1em;
border-radius : 3px;
box-shadow : rgba(0,0,0,.2) 0 1px 4px;
margin-bottom : 1em;
overflow : hidden;
word-break : break-word;
}
.title-box {
......@@ -101,6 +112,18 @@ function styleGuide () {
word-wrap : break-word;
position : relative;
border-radius : 3px;
overflow : hidden;
word-break : normal;
}
.input {
border : 1px solid ${colors.lightGrey}; // light-grey
margin : .3em;
height : 25px;
font-size : 10px;
border-radius : 3px;
padding : 0 8px;
overflow : hidden;
word-break : normal;
}
`
/* --------------------------------------------------------------------------
......@@ -110,43 +133,47 @@ function styleGuide () {
.button {
border-color : transparent;
border-radius : 3px;
border : .3px solid ${colors.lightGrey};
cursor : pointer;
padding : .3em;
min-height : 25px;
max-height : 25px;
padding : 3px;
min-width : 100px;
font-size : 12px;
overflow : hidden;
word-break : normal;
background-color : #E8E8E8;
}
.button:hover {
opacity : 0.8;
}
.dropdown-menu {
font-size : 1em;
.dropdown {
font-size : 10px;
padding : 0 8px;
text-decoration : none;
background-color : #C6CFF7;
background-color : ${colors.white};
cursor : pointer;
font-size : 12px;
border : none;
height : 20px;
border : 1px solid ${colors.lightGrey};
border-radius : 3px;
height : 30px;
text-align : center;
overflow : hidden;
word-break : normal;
}
`
/* --------------------------------------------------------------------------
INPUT FIELDS
-------------------------------------------------------------------------- */
/*
.input-field {
border : 1px solid #f0f0f0; // light-grey
padding : .3em;
margin : .3em;
}
*/
return {
textBoxL: textBoxes['display-box-L'],
infoTextBox: textBoxes['info-text-box'],
inputField: textBoxes['input'],
displayBox: textBoxes['display-box'],
warningTextBox: textBoxes['warning-text-box'],
titleL: texts['title-L'],
titleM: texts['title-M'],
dropdown: buttons['dropdown-menu'],
dropdown: buttons['dropdown'],
button: buttons['button'],
colors: colors,
titleBox: textBoxes['title-box']
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment