Merge remote-tracking branch 'ArthurHoaro/autocomplete' into next

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 @@
+[hidden] { display: none; }
+
+.visually-hidden {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+}
+
+div.awesomplete {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+}
+
+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: #FFF;
+    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: 1.43em -.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: white;
+    border: inherit;
+    border-right: 0;
+    border-bottom: 0;
+    -webkit-transform: rotate(45deg);
+    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: hsl(65, 100%, 50%);
+}
+
+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