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