Skip to content

Commit afda43d

Browse files
davideastvicb
davideast
authored and
vicb
committed
feat(examples): Add TodoMVC sample application.
1 parent e896565 commit afda43d

File tree

7 files changed

+631
-0
lines changed

7 files changed

+631
-0
lines changed

‎modules/examples/src/todo/css/base.css‎

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

‎modules/examples/src/todo/css/bg.png‎

2.08 KB
Loading

‎modules/examples/src/todo/css/main.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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: #eaeaea;
11+
color: #4d4d4d;
12+
width: 550px;
13+
margin: 0 auto;
14+
-webkit-font-smoothing: antialiased;
15+
-moz-font-smoothing: antialiased;
16+
-ms-font-smoothing: antialiased;
17+
-o-font-smoothing: antialiased;
18+
font-smoothing: antialiased;
19+
}

0 commit comments

Comments
 (0)