Skip to content

Commit b052d63

Browse files
neerajsingh0101neerajsingh0101
committed
apply new css
1 parent c29bae1 commit b052d63

File tree

2 files changed

+190
-3
lines changed

2 files changed

+190
-3
lines changed

‎ep16-new-css/app/components/DisplayItem.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default class DisplayItem extends React.Component {
55
render () {
66
var todo = this.props.todo;
77

8-
return <li className={ item.done } 'done' : '' }>
8+
return <li className={ todo.done ? 'done' : '' }>
99
<input
1010
checked={todo.done}
1111
onChange={this.props.handleDone.bind(null, todo.id)}

‎ep16-new-css/app/stylesheets/main.css

Lines changed: 189 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,190 @@
1-
body{
2-
font-size: 200%;
1+
html,
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
9+
line-height: 1.4em;
10+
background: #eeeeee;
11+
color: #333333;
12+
width: 520px;
13+
margin: 0 auto;
14+
-webkit-font-smoothing: antialiased;
15+
}
16+
17+
#todoapp {
18+
background: #fff;
19+
padding: 20px;
20+
margin-bottom: 40px;
21+
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
22+
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
23+
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
24+
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
25+
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
26+
-webkit-border-radius: 0 0 5px 5px;
27+
-moz-border-radius: 0 0 5px 5px;
28+
-ms-border-radius: 0 0 5px 5px;
29+
-o-border-radius: 0 0 5px 5px;
30+
border-radius: 0 0 5px 5px;
31+
}
32+
33+
#todoapp h1 {
34+
font-size: 36px;
35+
font-weight: bold;
36+
text-align: center;
37+
padding: 0 0 10px 0;
38+
}
39+
40+
#todoapp input[type="text"] {
41+
width: 466px;
42+
font-size: 24px;
43+
font-family: inherit;
44+
line-height: 1.4em;
45+
border: 0;
46+
outline: none;
47+
padding: 6px;
48+
border: 1px solid #999999;
49+
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
50+
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
51+
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
52+
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
53+
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
54+
}
55+
56+
#todoapp input::-webkit-input-placeholder {
57+
font-style: italic;
58+
}
59+
60+
#todo-list {
61+
margin: 10px 0;
62+
padding: 0;
63+
list-style: none;
64+
}
65+
66+
#todo-list li {
67+
padding: 18px 20px 18px 0;
68+
position: relative;
69+
font-size: 24px;
70+
border-bottom: 1px solid #cccccc;
71+
}
72+
73+
#todo-list li:last-child {
74+
border-bottom: none;
75+
}
76+
77+
#todo-list li.done label {
78+
color: #777777;
79+
text-decoration: line-through;
80+
}
81+
82+
#todo-list .destroy {
83+
position: absolute;
84+
right: 5px;
85+
top: 20px;
86+
display: none;
87+
cursor: pointer;
88+
width: 20px;
89+
height: 20px;
90+
}
91+
92+
#todo-list li:hover .destroy {
93+
display: block;
94+
}
95+
96+
#todo-list .destroy:hover {
97+
background-position: 0 -20px;
98+
}
99+
100+
#todo-list li.editing {
101+
border-bottom: none;
102+
margin-top: -1px;
103+
padding: 0;
104+
}
105+
106+
#todo-list li.editing:last-child {
107+
margin-bottom: -1px;
108+
}
109+
110+
#todo-list li .view label {
111+
word-break: break-word;
112+
}
113+
114+
#todoapp footer {
115+
margin: 0 -20px -20px -20px;
116+
overflow: hidden;
117+
color: #555555;
118+
background: #f4fce8;
119+
border-top: 1px solid #ededed;
120+
padding: 0 20px;
121+
line-height: 37px;
122+
-webkit-border-radius: 0 0 5px 5px;
123+
-moz-border-radius: 0 0 5px 5px;
124+
-ms-border-radius: 0 0 5px 5px;
125+
-o-border-radius: 0 0 5px 5px;
126+
border-radius: 0 0 5px 5px;
127+
}
128+
129+
#clear-completed {
130+
float: right;
131+
line-height: 20px;
132+
text-decoration: none;
133+
background: rgba(0, 0, 0, 0.1);
134+
color: #555555;
135+
font-size: 11px;
136+
margin-top: 8px;
137+
margin-bottom: 8px;
138+
padding: 0 10px 1px;
139+
cursor: pointer;
140+
-webkit-border-radius: 12px;
141+
-moz-border-radius: 12px;
142+
-ms-border-radius: 12px;
143+
-o-border-radius: 12px;
144+
border-radius: 12px;
145+
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
146+
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
147+
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
148+
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
149+
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
150+
}
151+
152+
#clear-completed:hover {
153+
background: rgba(0, 0, 0, 0.15);
154+
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
155+
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
156+
-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
157+
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
158+
box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
159+
}
160+
161+
#clear-completed:active {
162+
position: relative;
163+
top: 1px;
164+
}
165+
166+
#todo-count span {
167+
font-weight: bold;
168+
}
169+
170+
#instructions {
171+
margin: 10px auto;
172+
color: #777777;
173+
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
174+
text-align: center;
175+
}
176+
177+
#instructions a {
178+
color: #336699;
179+
}
180+
181+
#credits {
182+
margin: 30px auto;
183+
color: #999;
184+
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
185+
text-align: center;
186+
}
187+
188+
#credits a {
189+
color: #888;
3190
}

0 commit comments

Comments
 (0)