Consolidate styles into single file
Nathan Hunzaker committed
Jan 3, 2017 at 20:13 UTC
2d75ae9fed1a903dda3ee7edee2c11aafeccd315
5 files changed
+38
-79
fixtures/src/components/App.js
+2
-1
@@ -1,7 +1,8 @@
1
const React = window.React;
2
import Header from './Header';
3
import Fixtures from './fixtures';
4
-import '../styles/App.css';
4
+
5
+import '../style.css';
6
7
const App = React.createClass({
8
render() {
fixtures/src/components/fixtures/text-inputs/index.js
-1
@@ -1,5 +1,4 @@
1
const React = window.React;
2
-import '../../../styles/TextInputs.css';
2
3
const TextInputFixtures = React.createClass({
4
getInitialState() {
fixtures/src/components/fixtures/textareas/index.js
+6
-3
@@ -9,8 +9,8 @@ const TextAreaFixtures = React.createClass({
9
},
10
render() {
11
return (
12
- <div className="container">
13
- <form>
12
+ <div>
13
+ <form className="container">
14
<fieldset>
15
<legend>Controlled</legend>
16
<textarea value={this.state.value} onChange={this.onChange} />
@@ -21,10 +21,13 @@ const TextAreaFixtures = React.createClass({
21
<textarea defaultValue="" />
22
</fieldset>
23
</form>
24
- <h4>Controlled Output:</h4>
24
+
25
+ <div className="container">
26
+ <h4>Controlled Output:</h4>
27
<div className='output'>
28
{this.state.value}
29
</div>
30
+ </div>
31
</div>
32
);
33
},
fixtures/src/style.css
renamed
+30
-38
@@ -1,29 +1,3 @@
1
-.App {
2
- text-align: center;
3
-}
4
-
5
-.App-logo {
6
- animation: App-logo-spin infinite 20s linear;
7
- height: 80px;
8
-}
9
-
10
-.App-header {
11
- background-color: #222;
12
- height: 150px;
13
- padding: 20px;
14
- color: white;
15
-}
16
-
17
-.App-intro {
18
- font-size: large;
19
-}
20
-
21
-@keyframes App-logo-spin {
22
- from { transform: rotate(0deg); }
23
- to { transform: rotate(360deg); }
24
-}
25
-
26
-
1
*,
2
*:before,
3
*:after {
@@ -31,9 +5,9 @@
5
}
6
7
body {
8
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
9
margin: 0;
10
padding: 0;
36
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
11
}
12
13
select {
@@ -43,15 +17,15 @@ select {
17
.header {
18
background: #222;
19
box-shadow: inset 0 -1px 3px #000;
20
+ line-height: 32px;
21
overflow: hidden;
22
padding: 8px 16px;
48
- line-height: 32px;
23
}
24
25
.header__inner {
26
display: table;
53
- max-width: 1000px;
27
margin: 0 auto;
28
+ max-width: 1000px;
29
overflow: hidden;
30
text-align: center;
31
width: 100%;
@@ -77,18 +51,36 @@ select {
51
width: 100%;
52
}
53
80
-iframe {
81
- display: block;
82
- height: 98%;
83
- height: calc(100vh - 72px);
84
- margin: 20px auto 0;
85
- width: 100%;
86
-}
87
-
54
.sr-only {
55
clip: rect(0, 0, 0, 0);
56
height: 0;
57
margin: -1px;
58
position: absolute;
59
width: 0;
94
-}
\ No newline at end of file
60
+}
61
+
62
+.container {
63
+ margin: 0 auto;
64
+ max-width: 900px;
65
+ overflow: hidden;
66
+ padding: 20px;
67
+}
68
+
69
+label {
70
+ display: block;
71
+ font-size: 12px;
72
+ letter-spacing: 0.01em;
73
+ margin-bottom: 4px;
74
+ text-transform: uppercase;
75
+}
76
+
77
+.field {
78
+ padding: 8px;
79
+}
80
+
81
+fieldset {
82
+ border: 1px solid #aaa;
83
+ float: left;
84
+ padding: 16px;
85
+ width: 49%;
86
+}
fixtures/src/styles/TextInputs.css
deleted
-36
@@ -1,36 +0,0 @@
1
-* {
2
- box-sizing: border-box;
3
-}
4
-
5
-body {
6
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
7
-}
8
-
9
-.container {
10
- padding: 20px;
11
-}
12
-
13
-label {
14
- display: block;
15
- text-transform: uppercase;
16
- letter-spacing: 0.01em;
17
- font-size: 12px;
18
- margin-bottom: 4px;
19
-}
20
-
21
-.field {
22
- padding: 8px;
23
-}
24
-
25
-form {
26
- max-width: 900px;
27
- margin: 0 auto;
28
- width: 100%;
29
-}
30
-
31
-fieldset {
32
- border: 1px solid #aaa;
33
- padding: 16px;
34
- float: left;
35
- width: 49%;
36
-}