OLD | NEW |
(Empty) | |
| 1 |
| 2 list { |
| 3 overflow: auto; |
| 4 outline: none; |
| 5 } |
| 6 |
| 7 list > * { |
| 8 -webkit-user-select: none; |
| 9 border: 1px solid rgba(255,255,255,0); /* transparent white */ |
| 10 background-color: rgba(255,255,255,0); |
| 11 -webkit-border-radius: 2px; |
| 12 padding: 0px 3px; |
| 13 line-height: 20px; |
| 14 white-space: nowrap; |
| 15 cursor: default; |
| 16 -webkit-transition: all .12s; |
| 17 position: relative; /* to allow overlap */ |
| 18 display: block; |
| 19 } |
| 20 |
| 21 list > [lead] { |
| 22 border-color: transparent; |
| 23 } |
| 24 |
| 25 list:focus > [lead] { |
| 26 border-color: hsl(214, 91%, 65%); |
| 27 z-index: 2; |
| 28 } |
| 29 |
| 30 list > [anchor] { |
| 31 |
| 32 } |
| 33 |
| 34 list > :hover { |
| 35 border-color: hsl(214, 91%, 85%); |
| 36 z-index: 1; |
| 37 background-color: hsl(214,91%,97%); |
| 38 } |
| 39 |
| 40 list > :hover, |
| 41 list > [selected] { |
| 42 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(25
5,255,255,0.8)), to(rgba(255,255,255,0))); |
| 43 } |
| 44 |
| 45 list > [selected] { |
| 46 border-color: hsl(0,0%,85%); |
| 47 background-color: hsl(0,0%,90%); |
| 48 z-index: 2; |
| 49 } |
| 50 |
| 51 list:focus > [selected] { |
| 52 background-color: hsl(214,91%,89%); |
| 53 border-color: hsl(214, 91%, 65%); |
| 54 } |
| 55 |
| 56 list:focus > [lead][selected], |
| 57 list > [selected]:hover { |
| 58 background-color: hsl(214,91%,87%); |
| 59 border-color: hsl(214, 91%, 65%); |
| 60 } |
OLD | NEW |