css theme fix

giray123 · Oct 28, 2020 · 63080e6 · 63080e6
1 parent be21898
commit 63080e6
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 124 deletions.
diff --git a/README.md b/README.md
@@ -27,22 +27,18 @@ Add JS onto your html
 ```html
 <script src="/js/autocomplete.js"></script>
 ```
-Add either raw or default CSS styles to your html
-(feel free to change any CSS according to your html)
+Add CSS onto your html. You can omit the second onw if you do not want any UI styling as in examples
 ```html
 <link rel="stylesheet" href="/css/autocomplete.css">
-```
-If you do not want custom styling as in examples here is the css with only core styles
-```html
-<link rel="stylesheet" href="/css/autocomplete-core.css">
+<link rel="stylesheet" href="/css/autocomplete-theme.css">
 ```
 
 ### CDN
 You can also use below CDN links. Feel free to change version number with respect to the releases
 ```html
 <script src="https://cdn.jsdelivr.net/gh/giray123/[email protected]/js/autocomplete.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/giray123/[email protected]/css/autocomplete.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/giray123/[email protected]/css/autocomplete-core.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/giray123/[email protected]/css/autocomplete-theme.css">
 ```
 
 Initialize Autocomplete object with your configurations

diff --git a/css/autocomplete-core.css b/css/autocomplete-core.css
diff --git a/css/autocomplete-theme.css b/css/autocomplete-theme.css
@@ -0,0 +1,41 @@
+input.ac-input-default{
+    width: 350px;
+    transition: all .25s ease-out;
+    color: #4a5568;
+    padding: 10px 20px 10px 20px;
+    line-height: 1.5;
+    border-width: 1px;
+    border-radius: .5rem;
+    border-color: transparent;
+    background-color: #edf2f7;
+    font-family: sans-serif;
+    font-size: 15px;
+}
+input.ac-input-default:focus{
+    outline: none;
+    background-color: white;
+    border: 1px solid #edf2f7;
+}
+.ac-wrapper input.ac-list-open{
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+.ac-wrapper .ac-suggestion-list{ 
+    font-family: sans-serif;
+    font-size: 15px;
+    color: #4a5568;
+    box-sizing: border-box;
+}
+.ac-wrapper .ac-suggestion-list div.autocomplete-text { 
+    padding: 10px 20px 10px 20px;
+    line-height: 1.5;
+}
+.ac-wrapper .ac-autocomplete-clear-icon{
+    width: 40px;
+}
+.ac-wrapper .ac-autocomplete-loading-icon{
+    right: 40px; 
+}
+.ac-wrapper .ac-suggestion-list div.autocomplete-mobile-icon { 
+    width: 40px;
+}
diff --git a/css/autocomplete.css b/css/autocomplete.css
@@ -8,14 +8,7 @@
 .ac-wrapper input{
     padding-right: 40px;
 }
-.ac-wrapper input.ac-list-open{
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
 .ac-wrapper .ac-suggestion-list{ 
-    font-family: sans-serif;
-    font-size: 15px;
-    color: #4a5568;
     width: 100%;
     position: absolute;
     left: 0px;
@@ -27,12 +20,11 @@
     overflow: hidden;
     border: 1px solid #e8e8e8;
     border-top: none;
-    box-sizing: border-box;
 }
 .ac-wrapper .ac-autocomplete-clear-icon{
     position: absolute;
     top: 0;
-    right: 10px; 
+    right: 0; 
     width: 20px;
     height: 100%;
     background-image: url(../img/clear.svg);
@@ -45,7 +37,7 @@
 .ac-wrapper .ac-autocomplete-loading-icon{
     position: absolute;
     top: 0;
-    right: 40px; 
+    right: 20px; 
     width: 20px;
     height: 100%;
     background-image: url(../img/loading.svg);
@@ -71,8 +63,7 @@
     background-color: #e4e2e2;
 }
 .ac-wrapper .ac-suggestion-list div.autocomplete-text { 
-    padding: 10px 20px 10px 20px;
-    line-height: 1.5;
+    padding: 5px 0px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -82,7 +73,6 @@
     display: none;
     flex-shrink: 0;
     width: 20px;
-    padding: 0 10px;
     background-image: url(../img/arrow-top-left.svg);
     background-repeat: no-repeat;
     background-position: center;

diff --git a/index.html b/index.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="css/autocomplete.css">
-    <!-- use below for only core CSS without extra styling -->
-    <!-- <link rel="stylesheet" href="css/autocomplete-default.css"> -->
+    <link rel="stylesheet" href="css/autocomplete-theme.css">
     <style>
         body{
             font-family: sans-serif;
@@ -29,24 +28,6 @@
                 margin: auto;
             }
         }
-        input.ac-input-default{
-            width: 350px;
-            transition: all .25s ease-out;
-            color: #4a5568;
-            padding: 10px 20px 10px 20px;
-            line-height: 1.5;
-            border-width: 1px;
-            border-radius: .5rem;
-            border-color: transparent;
-            background-color: #edf2f7;
-            font-family: sans-serif;
-            font-size: 15px;
-        }
-        input.ac-input-default:focus{
-            outline: none;
-            background-color: white;
-            border: 1px solid #edf2f7;
-        }
     </style>
 </head>
 <body>