diff options
Diffstat (limited to 'awesomplete.css')
-rw-r--r-- | awesomplete.css | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/awesomplete.css b/awesomplete.css new file mode 100644 index 0000000..6466a0c --- /dev/null +++ b/awesomplete.css @@ -0,0 +1,91 @@ +[hidden] { display: none; } + +div.awesomplete { + display: inline-block; + position: relative; +} + +div.awesomplete > input { + display: block; +} + +div.awesomplete > ul { + position: absolute; + left: 0; + z-index: 1; + min-width: 100%; + box-sizing: border-box; + list-style: none; + padding: 0; + border-radius: .3em; + margin: .2em 0 0; + background: hsla(0,0%,100%,.9); + background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8)); + border: 1px solid rgba(0,0,0,.3); + box-shadow: .05em .2em .6em rgba(0,0,0,.2); + text-shadow: none; +} + +div.awesomplete > ul[hidden], +div.awesomplete > ul:empty { + display: none; +} + +@supports (transform: scale(0)) { + div.awesomplete > ul { + transition: .3s cubic-bezier(.4,.2,.5,1.4); + transform-origin: 1em -.43em; + } + + div.awesomplete > ul[hidden], + div.awesomplete > ul:empty { + opacity: 0; + transform: scale(0); + display: block; + transition-timing-function: ease; + } +} + + /* Pointer */ + div.awesomplete > ul:before { + content: ""; + position: absolute; + top: -.43em; + left: 1em; + width: 0; height: 0; + padding: .4em; + background: linear-gradient(to bottom right,white 50%, transparent 0); + border: inherit; + border-right: 0; + border-bottom: 0; + transform: rotate(45deg); + } + + div.awesomplete > ul > li { + position: relative; + padding: .2em .5em; + cursor: pointer; + } + + div.awesomplete > ul > li:hover { + background: hsl(200, 40%, 80%); + color: black; + } + + div.awesomplete > ul > li[aria-selected="true"] { + background: hsl(205, 40%, 40%); + color: white; + } + + div.awesomplete mark { + background: yellow; + } + + div.awesomplete li:hover mark { + background: hsl(68, 101%, 41%); + } + + div.awesomplete li[aria-selected="true"] mark { + background: hsl(86, 102%, 21%); + color: inherit; + }
\ No newline at end of file |