Skip to content

Commit e5d339f

Browse files
catmandocatmando
authored
Create todo.css
1 parent 03119f4 commit e5d339f

File tree

1 file changed

+395
-0
lines changed

1 file changed

+395
-0
lines changed

‎docs/tutorial/assets/todo.css

Lines changed: 395 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,395 @@
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: #f5f5f5;
11+
color: #4d4d4d;
12+
min-width: 230px;
13+
max-width: 550px;
14+
margin: 0 auto;
15+
-webkit-font-smoothing: antialiased;
16+
-moz-font-smoothing: antialiased;
17+
font-smoothing: antialiased;
18+
font-weight: 300;
19+
}
20+
21+
button,
22+
input[type="checkbox"] {
23+
outline: none;
24+
}
25+
26+
.todo-app {
27+
background: #fff;
28+
margin: 130px 0 40px 0;
29+
position: relative;
30+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
31+
0 25px 50px 0 rgba(0, 0, 0, 0.1);
32+
}
33+
34+
.todo-app input::-webkit-input-placeholder {
35+
font-style: italic;
36+
font-weight: 300;
37+
color: #e6e6e6;
38+
}
39+
40+
.todo-app input::-moz-placeholder {
41+
font-style: italic;
42+
font-weight: 300;
43+
color: #e6e6e6;
44+
}
45+
46+
.todo-app input::input-placeholder {
47+
font-style: italic;
48+
font-weight: 300;
49+
color: #e6e6e6;
50+
}
51+
52+
.todo-app h1 {
53+
position: absolute;
54+
top: -155px;
55+
width: 100%;
56+
font-size: 100px;
57+
font-weight: 100;
58+
text-align: center;
59+
color: rgba(175, 47, 47, 0.15);
60+
-webkit-text-rendering: optimizeLegibility;
61+
-moz-text-rendering: optimizeLegibility;
62+
text-rendering: optimizeLegibility;
63+
}
64+
65+
.new-todo,
66+
.edit {
67+
position: relative;
68+
margin: 0;
69+
width: 100%;
70+
font-size: 24px;
71+
font-family: inherit;
72+
font-weight: inherit;
73+
line-height: 1.4em;
74+
border: 0;
75+
outline: none;
76+
color: inherit;
77+
padding: 6px;
78+
border: 1px solid #999;
79+
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
80+
box-sizing: border-box;
81+
-webkit-font-smoothing: antialiased;
82+
-moz-font-smoothing: antialiased;
83+
font-smoothing: antialiased;
84+
}
85+
86+
.new-todo {
87+
padding: 16px 16px 16px 60px;
88+
border: none;
89+
background: rgba(0, 0, 0, 0.003);
90+
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
91+
}
92+
93+
.main {
94+
position: relative;
95+
z-index: 2;
96+
border-top: 1px solid #e6e6e6;
97+
}
98+
99+
label[for='toggle-all'] {
100+
display: none;
101+
}
102+
103+
.toggle-all {
104+
position: absolute;
105+
top: -55px;
106+
left: -12px;
107+
width: 60px;
108+
height: 34px;
109+
text-align: center;
110+
border: none; /* Mobile Safari */
111+
}
112+
113+
.toggle-all:before {
114+
content: '❯';
115+
font-size: 22px;
116+
color: #e6e6e6;
117+
padding: 10px 27px 10px 27px;
118+
}
119+
120+
.toggle-all:checked:before {
121+
color: #737373;
122+
}
123+
124+
.todo-list {
125+
margin: 0;
126+
padding: 0;
127+
list-style: none;
128+
}
129+
130+
li.todo-item {
131+
position: relative;
132+
font-size: 24px;
133+
border-bottom: 1px solid #ededed;
134+
}
135+
136+
li.todo-item:last-child {
137+
border-bottom: none;
138+
}
139+
140+
li.todo-item.editing {
141+
border-bottom: none;
142+
padding: 0;
143+
}
144+
145+
li.todo-item.editing .edit {
146+
display: block;
147+
width: 506px;
148+
padding: 13px 17px 12px 17px;
149+
margin: 0 0 0 43px;
150+
}
151+
152+
li.todo-item .toggle {
153+
text-align: center;
154+
width: 40px;
155+
display:block;
156+
/* auto, since non-WebKit browsers doesn't support input styling */
157+
height: auto;
158+
position: absolute;
159+
top: 0;
160+
bottom: 0;
161+
margin: auto 0;
162+
border: none; /* Mobile Safari */
163+
-webkit-appearance: none;
164+
appearance: none;
165+
}
166+
167+
li.todo-item .toggle:after {
168+
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
169+
}
170+
171+
li.todo-item .toggle:checked:after {
172+
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
173+
}
174+
175+
li.todo-item label {
176+
white-space: pre-line;
177+
word-break: break-all;
178+
padding: 15px 60px 15px 15px;
179+
margin-left: 45px;
180+
display: block;
181+
line-height: 1.2;
182+
transition: color 0.4s;
183+
}
184+
185+
li.todo-item.completed label {
186+
color: #d9d9d9;
187+
text-decoration: line-through;
188+
}
189+
190+
li.todo-item .destroy {
191+
/* display: none;*/
192+
position: absolute;
193+
text-decoration: none;
194+
top: 0;
195+
right: 10px;
196+
bottom: 0;
197+
width: 40px;
198+
height: 40px;
199+
margin: auto 0;
200+
font-size: 30px;
201+
color: #cc9a9a;
202+
margin-bottom: 11px;
203+
transition: color 0.2s ease-out;
204+
}
205+
206+
li.todo-item .destroy:hover {
207+
color: #af5b5e;
208+
}
209+
210+
li.todo-item .destroy:after {
211+
content: '×';
212+
}
213+
214+
li.todo-item:hover .destroy {
215+
display: block;
216+
}
217+
218+
/*li.todo-item .edit {
219+
display: none;
220+
}*/
221+
222+
li.todo-item.editing:last-child {
223+
margin-bottom: -1px;
224+
}
225+
226+
.footer {
227+
color: #777;
228+
padding: 10px 15px;
229+
height: 20px;
230+
text-align: center;
231+
border-top: 1px solid #e6e6e6;
232+
}
233+
234+
.footer:before {
235+
content: '';
236+
position: absolute;
237+
right: 0;
238+
bottom: 0;
239+
left: 0;
240+
height: 50px;
241+
overflow: hidden;
242+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
243+
0 8px 0 -3px #f6f6f6,
244+
0 9px 1px -3px rgba(0, 0, 0, 0.2),
245+
0 16px 0 -6px #f6f6f6,
246+
0 17px 2px -6px rgba(0, 0, 0, 0.2);
247+
}
248+
249+
.todo-count {
250+
float: left;
251+
text-align: left;
252+
}
253+
254+
.todo-count strong {
255+
font-weight: 300;
256+
}
257+
258+
.filters {
259+
margin: 0;
260+
padding: 0;
261+
list-style: none;
262+
position: absolute;
263+
right: 0;
264+
left: 0;
265+
}
266+
267+
.filters li {
268+
display: inline;
269+
}
270+
271+
.filters li a {
272+
color: inherit;
273+
margin: 3px;
274+
padding: 3px 7px;
275+
text-decoration: none;
276+
border: 1px solid transparent;
277+
border-radius: 3px;
278+
}
279+
280+
.filters li a.selected,
281+
.filters li a:hover {
282+
border-color: rgba(175, 47, 47, 0.1);
283+
}
284+
285+
.filters li a.selected {
286+
border-color: rgba(175, 47, 47, 0.2);
287+
}
288+
289+
.clear-completed,
290+
html .clear-completed:active {
291+
float: right;
292+
position: relative;
293+
line-height: 20px;
294+
text-decoration: none;
295+
cursor: pointer;
296+
position: relative;
297+
}
298+
299+
.clear-completed:hover {
300+
text-decoration: underline;
301+
}
302+
303+
.info {
304+
margin: 65px auto 0;
305+
color: #bfbfbf;
306+
font-size: 10px;
307+
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
308+
text-align: center;
309+
}
310+
311+
.info p {
312+
line-height: 1;
313+
}
314+
315+
.info a {
316+
color: inherit;
317+
text-decoration: none;
318+
font-weight: 400;
319+
}
320+
321+
.info a:hover {
322+
text-decoration: underline;
323+
}
324+
325+
/*
326+
Hack to remove background from Mobile Safari.
327+
Can't use it globally since it destroys checkboxes in Firefox
328+
*/
329+
@media screen and (-webkit-min-device-pixel-ratio:0) {
330+
.toggle-all,
331+
li.todo-item .toggle {
332+
background: none;
333+
}
334+
335+
li.todo-item .toggle {
336+
height: 40px;
337+
}
338+
339+
.toggle-all {
340+
-webkit-transform: rotate(90deg);
341+
transform: rotate(90deg);
342+
-webkit-appearance: none;
343+
appearance: none;
344+
}
345+
}
346+
347+
@media (max-width: 430px) {
348+
.footer {
349+
height: 50px;
350+
}
351+
352+
.filters {
353+
bottom: 10px;
354+
}
355+
}
356+
357+
.new_todo{
358+
color: #777;
359+
text-align: center;
360+
padding-top:10px;
361+
}
362+
363+
364+
.text_label{
365+
white-space: pre-line;
366+
word-break: break-all;
367+
padding: 15px 60px 15px 15px;
368+
margin-left: 45px;
369+
display: block;
370+
line-height: 1.2;
371+
transition: color 0.4s;
372+
border:none;
373+
width:75%;
374+
font-size:24px;
375+
font-weight: 300;
376+
color: #777;
377+
}
378+
379+
.todo_button{
380+
border-image: none;
381+
border: none;
382+
background-color: inherit;
383+
color: #777;
384+
border-color: rgb(175, 47, 47);
385+
border: 1px solid;
386+
font-size: 14px;
387+
font-weight: normal;
388+
}
389+
390+
.filters li input.selected,
391+
.filters li input:hover {
392+
border:1px;
393+
border-style: solid;
394+
cursor: auto;
395+
}

0 commit comments

Comments
 (0)