todo

1
body {
2
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
3
  font-weight: 300;
4
  font-size: 14px;
5
  line-height: 1.4em;
6
  background: #f5f5f5;
7
  color: #4d4d4d;
8
  min-width: 230px;
9
  max-width: 550px;
10
  margin: 0 auto;
11
  -webkit-font-smoothing: antialiased;
12
  -moz-osx-font-smoothing: grayscale;
13
  font-smoothing: antialiased;
14
}
15

16
h1 {
17
  padding-top: 40px;
18
  width: 100%;
19
  font-size: 80px;
20
  font-weight: 100;
21
  text-align: center;
22
  color: rgba(175, 47, 47, 0.15);
23

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), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
31
}
32

33
input[type="text"] {
34
  padding: 16px;
35
  border: none;
36
  width: 100%;
37
  font-size: 24px;
38
  box-sizing: border-box;
39
  font-family: inherit;
40
  font-weight: inherit;
41
  line-height: 1.4em;
42
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
43
}
44

45
input[type="text"]::placeholder {
46
  color: #e6e6e6;
47
  font-style: italic;
48
}
49

50
ul {
51
  margin: 0;
52
  padding: 0;
53
  list-style: none;
54
}
55

56
li {
57
  margin: 10px;
58
  position: relative;
59
  font-size: 24px;
60
  border-bottom: 1px solid #ededed;
61
  display: flex;
62
  align-items: center;
63
}
64

65
li:last-child {
66
  border-bottom: none;
67
}
68

69
input[type="checkbox"] {
70
  margin-right: 10px;
71
  width: 25px;
72
  height: 25px;
73
  position: relative;
74
  cursor: pointer;
75
  -webkit-appearance: none;
76
  appearance: none;
77
  border: 2px solid #d9d9d9;
78
  border-radius: 50%;
79
  outline: none;
80
  transition: background-color 0.3s, border-color 0.3s;
81
}
82

83
input[type="checkbox"]::before {
84
  content: "";
85
  position: absolute;
86
  top: 50%;
87
  left: 50%;
88
  width: 12px;
89
  height: 12px;
90
  border-radius: 50%;
91
  background: #5dc2af;
92
  transform: scale(0) translate(-50%, -50%);
93
  transition: transform 0.3s ease-in-out;
94
}
95

96
input[type="checkbox"]:checked::before {
97
  transform: scale(1) translate(-50%, -50%);
98
}
99

100
input[type="checkbox"]::after {
101
  content: '';
102
  position: absolute;
103
  top: 50%;
104
  left: 50%;
105
  transform: translate(-50%, -50%);
106
  font-size: 16px;
107
  color: white;
108
  opacity: 0;
109
  transition: opacity 0.3s;
110
}
111

112
input[type="checkbox"]:checked::after {
113
  opacity: 1;
114
}
115

116

117
button {
118
  background: none;
119
  border: none;
120
  padding: 0;
121
  cursor: pointer;
122
  font: inherit;
123
  color: inherit;
124
}
125

126
button:hover {
127
  color: #af5b5e;
128
}
129

130
.selected {
131
  border: 1px solid rgba(175, 47, 47, 0.2);
132
}
133

134
.footer {
135
  color: #777;
136
  padding: 10px 15px;
137
  height: 20px;
138
  text-align: center;
139
  border-top: 1px solid #e6e6e6;
140
}
141

142
.footer::before {
143
  content: '';
144
  position: absolute;
145
  right: 0;
146
  bottom: 0;
147
  left: 0;
148
  height: 50px;
149
  overflow: hidden;
150
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
151
  z-index: -1;
152
}
153

154
@media (max-width: 430px) {
155
  body {
156
    font-size: 12px;
157
  }
158

159
  .todo-app {
160
    margin-top: 40px;
161
  }
162

163
  input[type="text"] {
164
    font-size: 18px;
165
  }
166

167
  li {
168
    font-size: 18px;
169
  }
170
}
171