OLD | NEW |
1 | 1 |
2 :-webkit-any(list, grid) { | 2 list, |
| 3 grid { |
3 display: block; | 4 display: block; |
4 outline: none; | 5 outline: none; |
5 overflow: auto; | 6 overflow: auto; |
6 position: relative; /* Make sure that item offsets are relative to the | 7 position: relative; /* Make sure that item offsets are relative to the |
7 list. */ | 8 list. */ |
8 } | 9 } |
9 | 10 |
10 :-webkit-any(list, grid) > * { | 11 list > *, |
| 12 grid > * { |
11 -webkit-user-select: none; | 13 -webkit-user-select: none; |
12 background-color: rgba(255,255,255,0); | 14 background-color: rgba(255,255,255,0); |
13 border: 1px solid rgba(255,255,255,0); /* transparent white */ | 15 border: 1px solid rgba(255,255,255,0); /* transparent white */ |
14 border-radius: 2px; | 16 border-radius: 2px; |
15 cursor: default; | 17 cursor: default; |
16 line-height: 20px; | 18 line-height: 20px; |
17 margin: -1px 0; | 19 margin: -1px 0; |
18 overflow: hidden; | 20 overflow: hidden; |
19 padding: 0px 3px; | 21 padding: 0px 3px; |
20 position: relative; /* to allow overlap */ | 22 position: relative; /* to allow overlap */ |
21 text-overflow: ellipsis; | 23 text-overflow: ellipsis; |
22 white-space: pre; | 24 white-space: pre; |
23 } | 25 } |
24 | 26 |
25 list > * { | 27 list > * { |
26 display: block; | 28 display: block; |
27 } | 29 } |
28 | 30 |
29 grid > * { | 31 grid > * { |
30 display: inline-block; | 32 display: inline-block; |
31 } | 33 } |
32 | 34 |
33 :-webkit-any(list, grid) > [lead] { | 35 list > [lead], |
| 36 grid > [lead] { |
34 border-color: transparent; | 37 border-color: transparent; |
35 } | 38 } |
36 | 39 |
37 :-webkit-any(list, grid):focus > [lead] { | 40 list:focus > [lead], |
| 41 grid:focus > [lead] { |
38 border-color: hsl(214, 91%, 65%); | 42 border-color: hsl(214, 91%, 65%); |
39 z-index: 2; | 43 z-index: 2; |
40 } | 44 } |
41 | 45 |
42 :-webkit-any(list, grid) > [anchor] { | 46 list > [anchor], |
| 47 grid > [anchor] { |
43 | 48 |
44 } | 49 } |
45 | 50 |
46 :-webkit-any(list, grid):not([disabled]) > :hover { | 51 list:not([disabled]) > :hover, |
| 52 grid:not([disabled]) > :hover { |
47 border-color: hsl(214, 91%, 85%); | 53 border-color: hsl(214, 91%, 85%); |
48 z-index: 1; | 54 z-index: 1; |
49 background-color: hsl(214, 91%, 97%); | 55 background-color: hsl(214, 91%, 97%); |
50 } | 56 } |
51 | 57 |
52 :-webkit-any(list, grid) > [selected] { | 58 list > [selected], |
| 59 grid > [selected] { |
53 border-color: hsl(0, 0%, 85%); | 60 border-color: hsl(0, 0%, 85%); |
54 background-color: hsl(0,0%,90%); | 61 background-color: hsl(0,0%,90%); |
55 z-index: 2; | 62 z-index: 2; |
56 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), | 63 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), |
57 rgba(255, 255, 255, 0)); | 64 rgba(255, 255, 255, 0)); |
58 } | 65 } |
59 | 66 |
60 :-webkit-any(list, grid):focus > [selected] { | 67 list:focus > [selected], |
| 68 grid:focus > [selected] { |
61 background-color: hsl(214,91%,89%); | 69 background-color: hsl(214,91%,89%); |
62 border-color: hsl(214, 91%, 65%); | 70 border-color: hsl(214, 91%, 65%); |
63 } | 71 } |
64 | 72 |
65 :-webkit-any(list, grid):focus > [lead][selected], | 73 list:focus > [lead][selected], |
66 :-webkit-any(list, grid) > [selected]:hover { | 74 list > [selected]:hover, |
| 75 grid:focus > [lead][selected], |
| 76 grid > [selected]:hover { |
67 background-color: hsl(214, 91%, 87%); | 77 background-color: hsl(214, 91%, 87%); |
68 border-color: hsl(214, 91%, 65%); | 78 border-color: hsl(214, 91%, 65%); |
69 } | 79 } |
70 | 80 |
71 :-webkit-any(list, grid) > .spacer { | 81 list > .spacer, |
| 82 grid > .spacer { |
72 border: 0; | 83 border: 0; |
73 box-sizing: border-box; | 84 box-sizing: border-box; |
74 display: block; | 85 display: block; |
75 overflow: hidden; | 86 overflow: hidden; |
76 visibility: hidden; | 87 visibility: hidden; |
77 margin: 0; | 88 margin: 0; |
78 } | 89 } |
OLD | NEW |