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