carlos / todomvc-bakeoff Public

Download this file

1	/* Controls for visitors without JavaScript. An inline script puts the
2	class "js" on <html> before the page paints, which hides them, so with
3	JavaScript on the page is TodoMVC's own. */
4	.js .nojs {
5	display: none !important;
6	}
7
8	/* The toggle buttons lie, invisible, over the circle and the chevron they
9	stand for, so the page looks the same either way. */
10	.todo-list li .toggle-button,
11	.toggle-all-button {
12	position: absolute;
13	z-index: 1;
14	font-size: 0;
15	color: transparent;
16	cursor: pointer;
17	}
18
19	.todo-list li .toggle-button {
20	top: 0;
21	bottom: 0;
22	left: 0;
23	width: 50px;
24	}
25
26	.toggle-all-button {
27	top: -65px;
28	left: 0;
29	width: 45px;
30	height: 65px;
31	}
32
33	.todo-list li .toggle-button:focus-visible,
34	.toggle-all-button:focus-visible {
35	outline: 2px solid #b83f45;
36	outline-offset: -6px;
37	}
38
39	/* Without double-click, each item gets an Edit link beside the delete
40	button. */
41	html:not(.js) .todo-list li label {
42	padding-right: 100px;
43	}
44
45	.todo-list li .edit-link {
46	position: absolute;
47	top: 0;
48	bottom: 0;
49	right: 55px;
50	height: 20px;
51	margin: auto 0;
52	font-size: 14px;
53	line-height: 20px;
54	color: #949494;
55	text-decoration: none;
56	}
57
58	.todo-list li .edit-link:hover,
59	.todo-list li .edit-link:focus {
60	color: #484848;
61	text-decoration: underline;
62	}
63