Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/v8.0.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
TarekRaafat committed Dec 4, 2020
2 parents dbf0c1f + 0fe4feb commit b541d7b
Show file tree
Hide file tree
Showing 37 changed files with 4,041 additions and 1,895 deletions.
76 changes: 0 additions & 76 deletions .eslintrc.json

This file was deleted.

5 changes: 3 additions & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
language: node_js

node_js:
- "node"
- "10"
- "8"
- "6"
- "7"
- "6"
22 changes: 22 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"cSpell.words": [
"Raafat",
"Tarek",
"activedescendant",
"afterend",
"autocapitalize",
"autocorrect",
"combobox",
"debouncer",
"haspopup",
"labelledby",
"listbox",
"nodent",
"sourcemap",
"tabindex",
"tarekraafat",
"textbox",
"toplevel",
"uninit"
]
}
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
[![](https://data.jsdelivr.com/v1/package/npm/@tarekraafat/autocomplete.js/badge)](https://www.jsdelivr.com/package/npm/@tarekraafat/autocomplete.js)
![npm](https://img.shields.io/npm/dm/@tarekraafat/autocomplete.js?label=npm)
![\[Zero Dependencies\]()](https://img.shields.io/badge/Dependencies-0-blue.svg)
![\[Size\]()](https://img.shields.io/badge/Size-7%20KB-green.svg)
![\[Size\]()](https://img.shields.io/badge/Size-9%20KB-green.svg)
[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/TarekRaafat/autoComplete.js)

<br>
Expand All @@ -20,7 +20,7 @@
<br>
<br>

> Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v7.2**
> Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v8.0**
autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed, high versatility and seamless integration with a wide range of projects & systems, made for users and developers in mind.

Expand Down Expand Up @@ -53,13 +53,13 @@ git clone https://github.com/TarekRaafat/autoComplete.js.git
`CSS`

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/css/autoComplete.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.0.0/dist/css/autoComplete.min.css">
```

`JS`

```html
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/js/autoComplete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.0.0/dist/js/autoComplete.min.js"></script>
```

- <a href="https://www.npmjs.com/package/@tarekraafat/autocomplete.js">npm</a> install `(Node Package Manager)`
Expand Down
109 changes: 109 additions & 0 deletions dist/css/autoComplete.01.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
.autoComplete_wrapper {
position: relative;
display: inline-block;
width: 370px;
}

#autoComplete {
width: 95%;
height: 40px;
padding-left: 10px;
font-size: 1rem;
color: rgba(123, 123, 123, 1);
border-radius: 8px;
border: 1px solid rgba(123, 123, 123, 0.2);
outline: none;
background-color: rgba(123, 123, 123, 0.1);
}

#autoComplete::placeholder {
color: rgba(123, 123, 123, 0.5);
transition: all 0.3s ease;
}

#autoComplete_list {
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: 0;
margin: 10px 0;
border-radius: 0.6rem;
background-color: #fff;
box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
border: 1px solid rgba(33, 33, 33, 0.07);
z-index: 1000;
outline: none;
}

.autoComplete_result {
margin: 0.3rem;
padding: 0.3rem 0.5rem;
list-style: none;
text-align: left;
font-size: 1rem;
color: #212121;
transition: all 0.1s ease-in-out;
border-radius: 0.35rem;
background-color: rgba(255, 255, 255, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.2s ease;
}

.autoComplete_result::selection {
color: rgba(#ffffff, 0);
background-color: rgba(#ffffff, 0);
}

.autoComplete_result:hover {
cursor: pointer;
background-color: rgba(123, 123, 123, 0.1);
}

.autoComplete_highlighted {
color: rgba(123, 123, 123, 0.5);
font-weight: bold;
}

.autoComplete_highlighted::selection {
color: rgba(#ffffff, 0);
background-color: rgba(#ffffff, 0);
}

.autoComplete_selected {
cursor: pointer;
background-color: rgba(123, 123, 123, 0.1);
}

@media only screen and (max-width: 600px) {
.autoComplete_wrapper {
width: 320px;
}

#autoComplete {
width: 18rem;
background-size: 1.6rem;
background-position: left 1.1rem top 0.75rem;
}

#autoComplete_list {
margin: 10px;
}
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
#autoComplete {
border-width: 1px;
}
}

@-moz-document url-prefix() {
#autoComplete {
background-size: 1.2rem;
background-origin: border-box;
border-width: 1px;
background-position: left 1.1rem top 0.8rem;
}
}
Loading

0 comments on commit b541d7b

Please sign in to comment.