Modify theme color

This commit is contained in:
Arunoda Susiripala 2016-03-22 05:15:10 +05:30
parent ee1e037e83
commit 2b19f21510
4 changed files with 21 additions and 15 deletions

View File

@ -48,7 +48,9 @@ var Layout = function (_React$Component) {
var rootStyles = { var rootStyles = {
height: height height: height,
padding: '8px',
backgroundColor: '#F7F7F7'
}; };
var controlsStyle = { var controlsStyle = {
width: '240px', width: '240px',
@ -56,13 +58,14 @@ var Layout = function (_React$Component) {
height: '100%', height: '100%',
overflowY: 'auto' overflowY: 'auto'
}; };
// borderRight: '3px solid #DDD',
var contentStyle = { var contentStyle = {
height: height, height: height - 15,
marginLeft: '250px', marginLeft: '250px',
border: '1px solid #DDD', border: '1px solid #DDD',
borderRadius: '4px', borderRadius: '4px',
boxShadow: '0px 2px 6px -1px #b8b8b8' boxShadow: '0px 2px 6px -1px #b8b8b8',
padding: '5px',
backgroundColor: '#FFF'
}; };
return _react2.default.createElement( return _react2.default.createElement(
@ -98,7 +101,7 @@ var Layout = function (_React$Component) {
var body = _document.body; var body = _document.body;
var height = documentElement.clientHeight || body.clientHeight; var height = documentElement.clientHeight || body.clientHeight;
height -= 20; height -= 15;
this.setState({ height: height }); this.setState({ height: height });
} }
}]); }]);

View File

@ -1,5 +1,5 @@
"use strict"; "use strict";
module.exports = function () { module.exports = function () {
return "\n <!DOCTYPE html>\n <html>\n <head>\n <title>React Storybook</title>\n </head>\n <body>\n <div id=\"root\" />\n <script src=\"/static/bundle.js\"></script>\n </body>\n </html>\n "; return "\n <!DOCTYPE html>\n <html>\n <head>\n <title>React Storybook</title>\n </head>\n <body style=\"margin: 0;\">\n <div id=\"root\" />\n <script src=\"/static/bundle.js\"></script>\n </body>\n </html>\n ";
}; };

View File

@ -6,21 +6,24 @@ class Layout extends React.Component {
const {height} = this.state; const {height} = this.state;
const rootStyles = { const rootStyles = {
height height,
padding: '8px',
backgroundColor: '#F7F7F7'
}; };
const controlsStyle = { const controlsStyle = {
width: '240px', width: '240px',
float: 'left', float: 'left',
height: '100%', height: '100%',
overflowY: 'auto', overflowY: 'auto'
// borderRight: '3px solid #DDD',
}; };
const contentStyle = { const contentStyle = {
height, height: height - 15,
marginLeft: '250px', marginLeft: '250px',
border: '1px solid #DDD', border: '1px solid #DDD',
borderRadius: '4px', borderRadius: '4px',
boxShadow: '0px 2px 6px -1px #b8b8b8' boxShadow: '0px 2px 6px -1px #b8b8b8',
padding: '5px',
backgroundColor: '#FFF'
}; };
return ( return (
@ -46,7 +49,7 @@ class Layout extends React.Component {
updateHeight() { updateHeight() {
const {documentElement, body} = document; const {documentElement, body} = document;
let height = documentElement.clientHeight|| body.clientHeight; let height = documentElement.clientHeight|| body.clientHeight;
height -= 20; height -= 15;
this.setState({height}); this.setState({height});
} }
} }

View File

@ -5,9 +5,9 @@ module.exports = function() {
<head> <head>
<title>React Storybook</title> <title>React Storybook</title>
</head> </head>
<body> <body style="margin: 0;">
<div id="root" /> <div id="root" />
<script src="/static/bundle.js"></script> <script src="/static/bundle.js"></script>
</body> </body>
</html> </html>
`; `;