1 | .awesomplete [hidden] {
|
2 | display: none; |
3 | } |
4 | |
5 | .awesomplete .visually-hidden {
|
6 | position: absolute; |
7 | clip: rect(0, 0, 0, 0); |
8 | } |
9 | |
10 | .awesomplete {
|
11 | display: inline-block; |
12 | position: relative; |
13 | } |
14 | |
15 | .awesomplete > input {
|
16 | display: block; |
17 | } |
18 | |
19 | .awesomplete > ul {
|
20 | position: absolute; |
21 | left: 0; |
22 | z-index: 1; |
23 | min-width: 100%; |
24 | box-sizing: border-box; |
25 | list-style: none; |
26 | padding: 0; |
27 | margin: 0; |
28 | background: #fff; |
29 | } |
30 | |
31 | .awesomplete > ul:empty {
|
32 | display: none; |
33 | } |
34 | |
35 | .awesomplete > ul {
|
36 | border-radius: .3em; |
37 | margin: .2em 0 0; |
38 | background: hsla(0,0%,100%,.9); |
39 | background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8)); |
40 | border: 1px solid rgba(0,0,0,.3); |
41 | box-shadow: .05em .2em .6em rgba(0,0,0,.2); |
42 | text-shadow: none; |
43 | } |
44 | |
45 | @supports (transform: scale(0)) {
|
46 | .awesomplete > ul {
|
47 | transition: .3s cubic-bezier(.4,.2,.5,1.4); |
48 | transform-origin: 1.43em -.43em; |
49 | } |
50 | |
51 | .awesomplete > ul[hidden], |
52 | .awesomplete > ul:empty {
|
53 | opacity: 0; |
54 | transform: scale(0); |
55 | display: block; |
56 | transition-timing-function: ease; |
57 | } |
58 | } |
59 | |
60 | /* Pointer */ |
61 | .awesomplete > ul:before {
|
62 | content: ""; |
63 | position: absolute; |
64 | top: -.43em; |
65 | left: 1em; |
66 | width: 0; height: 0; |
67 | padding: .4em; |
68 | background: white; |
69 | border: inherit; |
70 | border-right: 0; |
71 | border-bottom: 0; |
72 | -webkit-transform: rotate(45deg); |
73 | transform: rotate(45deg); |
74 | } |
75 | |
76 | .awesomplete > ul > li {
|
77 | position: relative; |
78 | padding: .2em .5em; |
79 | cursor: pointer; |
80 | } |
81 | |
82 | .awesomplete > ul > li:hover {
|
83 | background: hsl(200, 40%, 80%); |
84 | color: black; |
85 | } |
86 | |
87 | .awesomplete > ul > li[aria-selected="true"] {
|
88 | background: hsl(205, 40%, 40%); |
89 | color: white; |
90 | } |
91 | |
92 | .awesomplete mark {
|
93 | background: hsl(65, 100%, 50%); |
94 | } |
95 | |
96 | .awesomplete li:hover mark {
|
97 | background: hsl(68, 100%, 41%); |
98 | } |
99 | |
100 | .awesomplete li[aria-selected="true"] mark {
|
101 | background: hsl(86, 100%, 21%); |
102 | color: inherit; |
103 | } |
104 | /*# sourceMappingURL=awesomplete.css.map */ |
Snippet is not live.
Travelled to 7 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt, xrpafgyirdlv
No comments. add comment
| Snippet ID: | #2000595 |
| Snippet name: | awesomplete.css |
| Eternal ID of this version: | #2000595/1 |
| Text MD5: | 060a04b444e0052365c53f49b4a85b3f |
| Author: | stefan |
| Category: | |
| Type: | New Tinybrain snippet |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2020-03-30 19:58:48 |
| Source code size: | 2130 bytes / 104 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 302 / 1851 |
| Referenced in: | [show references] |