Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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)

AltStyle によって変換されたページ (->オリジナル) /