Skip to content

Commit 71be603

Browse files
author
Alexey Litvinov
committed
styles update
1 parent 2582c12 commit 71be603

File tree

9 files changed

+86
-16
lines changed

9 files changed

+86
-16
lines changed

‎demo/app/browser.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎demo/components/Button/Button.css‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
.common
1+
.common,
2+
.common:active
23
{
3-
padding: 0 13px;
4+
display: inline-block;
5+
6+
padding: 0 11px;
47

58
cursor: pointer;
69
user-select: none;
10+
transition: all .3s;
711
text-align: center;
812
white-space: nowrap;
13+
text-decoration: none;
914

15+
color: #fff;
1016
border: none;
11-
border-radius: 3px;
17+
border-radius: 5px;
1218
outline: none;
13-
background: #ffdb4d;
19+
background: #43a047;
20+
box-shadow: 0 5px 0 #2e7d32;
21+
22+
font: normal 20px/38px Roboto;
23+
}
1424

15-
font-family: arial, sans-serif;
16-
font-size: 13px;
17-
line-height: 28px;
25+
.common:hover
26+
{
27+
background: #4caf50;
28+
box-shadow: 0 5px 0 #388e3c;
1829
}

‎demo/components/Button/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import base from './Button.css';
33

4-
export default ({ styles = base, ..._ }) => (
5-
<button { ..._ } className={ styles.common }/>
4+
export default ({ href = '#', styles = base, ..._ }) => (
5+
<a { ..._ } className={ styles.common } href={ href }/>
66
);

‎demo/components/Page.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
:global(html)
2+
{
3+
height: 100%;
4+
}
5+
6+
.page
7+
{
8+
display: flex;
9+
flex-direction: column;
10+
flex-wrap: nowrap;
11+
justify-content: center;
12+
/*align-items: center;*/
13+
14+
min-height: 100%;
15+
margin: 0;
16+
/*background: #efe0b9;*/
17+
18+
background: #fff;
19+
}
20+
21+
.wrapper
22+
{
23+
margin: 30px;
24+
25+
text-align: left;
26+
}

‎demo/components/Page.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import React from 'react';
22
import Button from './Button';
3+
import Title from './Title';
4+
5+
import styles from './Page.css';
36

47
export default _ => (
58
<html lang='en'>
69
<head>
710
<title>Universal demo</title>
811
<link rel='stylesheet' href='common.css'/>
9-
<script type='text/javascript' src='browser.js'></script>
1012
</head>
11-
<body>
12-
<Button>Welcome to the future</Button>
13+
<body className={ styles.page }>
14+
<section className={ styles.wrapper }>
15+
<Title>CSS Modules</Title>
16+
<Button href='http://glenmaddern.com/articles/css-modules'>Welcome to the future</Button>
17+
</section>
1318
</body>
1419
</html>
1520
);

‎demo/components/Title/Title.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.common
2+
{
3+
margin: 20px 0;
4+
5+
color: #333;
6+
7+
font: normal 42px/48px 'Roboto Condensed', helvetica, arial;
8+
}

‎demo/components/Title/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import base from './Title.css';
3+
4+
export default ({ styles = base, ..._ }) => (
5+
<h1 { ..._ } className={ styles.common }/>
6+
);

‎demo/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"main": "worker.js",
66
"scripts": {
77
"compile": "webpack",
8+
"compile:watch": "webpack --watch",
89
"start": "node app/worker",
910
"test": "echo \"Error: no test specified\" && exit 1"
1011
},
@@ -24,6 +25,7 @@
2425
"react-dom": "^0.14.7"
2526
},
2627
"devDependencies": {
28+
"autoprefixer": "^6.3.3",
2729
"babel-core": "^6.5.2",
2830
"babel-loader": "^6.2.3",
2931
"babel-preset-es2015": "^6.5.0",
@@ -32,6 +34,8 @@
3234
"css-loader": "0.23.1",
3335
"extract-text-webpack-plugin": "^1.0.1",
3436
"npm-install-webpack-plugin": "^2.0.2",
37+
"postcss-font-magician": "^1.4.0",
38+
"postcss-loader": "0.8.1",
3539
"style-loader": "0.13.0",
3640
"webpack": "^1.12.14"
3741
}

‎demo/webpack.config.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ const resolve = require('path').resolve;
77
const config = require('./package').config;
88

99
module.exports = {
10-
entry: resolve('app/browser.js'),
10+
entry: resolve('components/Page.js'),
1111

1212
output: {
13-
filename: 'browser.js',
13+
filename: '_.js',
1414
path: resolve('static'),
1515
},
1616

@@ -24,11 +24,16 @@ module.exports = {
2424
{
2525
test: /\.css$/i,
2626
loader: ExtractTextPlugin.extract('style',
27-
`css?modules&localIdentName=${config.css}`),
27+
`css?modules&localIdentName=${config.css}!postcss`),
2828
},
2929
],
3030
},
3131

32+
postcss: [
33+
require('postcss-font-magician'),
34+
require('autoprefixer'),
35+
],
36+
3237
plugins: [
3338
new ExtractTextPlugin('common.css', {
3439
allChunks: true
@@ -39,4 +44,10 @@ module.exports = {
3944
saveExact: true,
4045
}),
4146
],
47+
48+
externals: [
49+
{
50+
react: true,
51+
},
52+
]
4253
};

0 commit comments

Comments
 (0)