]>
Commit | Line | Data |
---|---|---|
1 | [hidden] { display: none; } | |
2 | ||
3 | .visually-hidden { | |
4 | position: absolute; | |
5 | clip: rect(0, 0, 0, 0); | |
6 | } | |
7 | ||
8 | div.awesomplete { | |
9 | display: inline-block; | |
10 | position: relative; | |
11 | } | |
12 | ||
13 | div.awesomplete > input { | |
14 | display: block; | |
15 | } | |
16 | ||
17 | div.awesomplete > ul { | |
18 | position: absolute; | |
19 | left: 0; | |
20 | z-index: 1; | |
21 | min-width: 100%; | |
22 | box-sizing: border-box; | |
23 | list-style: none; | |
24 | padding: 0; | |
25 | border-radius: .3em; | |
26 | margin: .2em 0 0; | |
27 | background: #FFF; | |
28 | border: 1px solid rgba(0,0,0,.3); | |
29 | box-shadow: .05em .2em .6em rgba(0,0,0,.2); | |
30 | text-shadow: none; | |
31 | } | |
32 | ||
33 | div.awesomplete > ul[hidden], | |
34 | div.awesomplete > ul:empty { | |
35 | display: none; | |
36 | } | |
37 | ||
38 | @supports (transform: scale(0)) { | |
39 | div.awesomplete > ul { | |
40 | transition: .3s cubic-bezier(.4,.2,.5,1.4); | |
41 | transform-origin: 1.43em -.43em; | |
42 | } | |
43 | ||
44 | div.awesomplete > ul[hidden], | |
45 | div.awesomplete > ul:empty { | |
46 | opacity: 0; | |
47 | transform: scale(0); | |
48 | display: block; | |
49 | transition-timing-function: ease; | |
50 | } | |
51 | } | |
52 | ||
53 | /* Pointer */ | |
54 | div.awesomplete > ul:before { | |
55 | content: ""; | |
56 | position: absolute; | |
57 | top: -.43em; | |
58 | left: 1em; | |
59 | width: 0; height: 0; | |
60 | padding: .4em; | |
61 | background: white; | |
62 | border: inherit; | |
63 | border-right: 0; | |
64 | border-bottom: 0; | |
65 | -webkit-transform: rotate(45deg); | |
66 | transform: rotate(45deg); | |
67 | } | |
68 | ||
69 | div.awesomplete > ul > li { | |
70 | position: relative; | |
71 | padding: .2em .5em; | |
72 | cursor: pointer; | |
73 | } | |
74 | ||
75 | div.awesomplete > ul > li:hover { | |
76 | background: hsl(200, 40%, 80%); | |
77 | color: black; | |
78 | } | |
79 | ||
80 | div.awesomplete > ul > li[aria-selected="true"] { | |
81 | background: hsl(205, 40%, 40%); | |
82 | color: white; | |
83 | } | |
84 | ||
85 | div.awesomplete mark { | |
86 | background: hsl(65, 100%, 50%); | |
87 | } | |
88 | ||
89 | div.awesomplete li:hover mark { | |
90 | background: hsl(68, 101%, 41%); | |
91 | } | |
92 | ||
93 | div.awesomplete li[aria-selected="true"] mark { | |
94 | background: hsl(86, 102%, 21%); | |
95 | color: inherit; | |
96 | } |