|
1 |
| - html { |
2 |
| - box-sizing: border-box; |
3 |
| - background: #ffc600; |
4 |
| - font-family: 'helvetica neue'; |
5 |
| - font-size: 20px; |
6 |
| - font-weight: 200; |
7 |
| - } |
| 1 | +html { |
| 2 | + box-sizing: border-box; |
| 3 | + background: #ffc600; |
| 4 | + font-family: 'helvetica neue'; |
| 5 | + font-size: 20px; |
| 6 | + font-weight: 200; |
| 7 | +} |
8 | 8 |
|
9 |
| - *, *:before, *:after { |
10 |
| - box-sizing: inherit; |
11 |
| - } |
| 9 | +*, *:before, *:after { |
| 10 | + box-sizing: inherit; |
| 11 | +} |
12 | 12 |
|
13 |
| - input { |
14 |
| - width: 100%; |
15 |
| - padding: 20px; |
16 |
| - } |
| 13 | +input { |
| 14 | + width: 100%; |
| 15 | + padding: 20px; |
| 16 | +} |
17 | 17 |
|
18 |
| - .search-form { |
19 |
| - max-width: 400px; |
20 |
| - margin: 50px auto; |
21 |
| - } |
| 18 | +.search-form { |
| 19 | + max-width: 400px; |
| 20 | + margin: 50px auto; |
| 21 | +} |
22 | 22 |
|
23 |
| - input.search { |
24 |
| - margin: 0; |
25 |
| - text-align: center; |
26 |
| - outline: 0; |
27 |
| - border: 10px solid #F7F7F7; |
28 |
| - width: 120%; |
29 |
| - left: -10%; |
30 |
| - position: relative; |
31 |
| - top: 10px; |
32 |
| - z-index: 2; |
33 |
| - border-radius: 5px; |
34 |
| - font-size: 40px; |
35 |
| - box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); |
36 |
| - } |
| 23 | +input.search { |
| 24 | + margin: 0; |
| 25 | + text-align: center; |
| 26 | + outline: 0; |
| 27 | + border: 10px solid #F7F7F7; |
| 28 | + width: 120%; |
| 29 | + left: -10%; |
| 30 | + position: relative; |
| 31 | + top: 10px; |
| 32 | + z-index: 2; |
| 33 | + border-radius: 5px; |
| 34 | + font-size: 40px; |
| 35 | + box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); |
| 36 | +} |
37 | 37 |
|
38 |
| - .suggestions { |
39 |
| - margin: 0; |
40 |
| - padding: 0; |
41 |
| - position: relative; |
42 |
| - /*perspective: 20px;*/ |
43 |
| - } |
| 38 | +.suggestions { |
| 39 | + margin: 0; |
| 40 | + padding: 0; |
| 41 | + position: relative; |
| 42 | + /*perspective: 20px;*/ |
| 43 | +} |
44 | 44 |
|
45 |
| - .suggestions li { |
46 |
| - background: white; |
47 |
| - list-style: none; |
48 |
| - border-bottom: 1px solid #D8D8D8; |
49 |
| - box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); |
50 |
| - margin: 0; |
51 |
| - padding: 20px; |
52 |
| - transition: background 0.2s; |
53 |
| - display: flex; |
54 |
| - justify-content: space-between; |
55 |
| - text-transform: capitalize; |
56 |
| - } |
| 45 | +.suggestions li { |
| 46 | + background: white; |
| 47 | + list-style: none; |
| 48 | + border-bottom: 1px solid #D8D8D8; |
| 49 | + box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); |
| 50 | + margin: 0; |
| 51 | + padding: 20px; |
| 52 | + transition: background 0.2s; |
| 53 | + display: flex; |
| 54 | + justify-content: space-between; |
| 55 | + text-transform: capitalize; |
| 56 | +} |
57 | 57 |
|
58 |
| - .suggestions li:nth-child(even) { |
59 |
| - transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); |
60 |
| - background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); |
61 |
| - } |
| 58 | +.suggestions li:nth-child(even) { |
| 59 | + transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); |
| 60 | + background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); |
| 61 | +} |
62 | 62 |
|
63 |
| - .suggestions li:nth-child(odd) { |
64 |
| - transform: perspective(100px) rotateX(-3deg) translateY(3px); |
65 |
| - background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); |
66 |
| - } |
| 63 | +.suggestions li:nth-child(odd) { |
| 64 | + transform: perspective(100px) rotateX(-3deg) translateY(3px); |
| 65 | + background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); |
| 66 | +} |
67 | 67 |
|
68 |
| - span.population { |
69 |
| - font-size: 15px; |
70 |
| - } |
| 68 | +span.population { |
| 69 | + font-size: 15px; |
| 70 | +} |
71 | 71 |
|
72 |
| - .hl { |
73 |
| - background: #ffc600; |
74 |
| - } |
| 72 | +.hl { |
| 73 | + background: #ffc600; |
| 74 | +} |
0 commit comments