Skip to content

Commit c862826

Browse files
pawelczakpawelczak
pawelczak
authored and
pawelczak
committed
Closes #42. Better css themes.
1 parent 45ae3d1 commit c862826

File tree

4 files changed

+195
-5
lines changed

4 files changed

+195
-5
lines changed

‎demo/example_simple.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ <h1>EasyAutocomplete - easy example</h1>
1515
<script>
1616

1717
var options = {
18-
data: ["blue", "green", "pink", "red", "yellow"]
18+
data: ["blue", "green", "pink", "red", "yellow"],
19+
1920
};
2021

2122
$("#simple").easyAutocomplete(options);

‎dist/easy-autocomplete.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,12 @@
9595
.easy-autocomplete.eac-dark input {
9696
background-color: #404040;
9797
border-radius: 4px;
98+
box-shadow: 0;
9899
color: #f6f6f6;
99100
}
100101
.easy-autocomplete.eac-dark input:hover, .easy-autocomplete.eac-dark input:focus {
101102
border-color: #333333;
103+
box-shadow: 0;
102104
}
103105
.easy-autocomplete.eac-dark ul {
104106
border-color: #333333;
@@ -111,16 +113,45 @@
111113
background-color: #737373;
112114
color: #f6f6f6;
113115
}
116+
.easy-autocomplete.eac-dark-glass {
117+
color: #fff;
118+
}
119+
.easy-autocomplete.eac-dark-glass input {
120+
background-color: rgba(0, 0, 0, 0.8);
121+
border-radius: 4px;
122+
box-shadow: 0;
123+
color: #f6f6f6;
124+
}
125+
.easy-autocomplete.eac-dark-glass input:hover, .easy-autocomplete.eac-dark-glass input:focus {
126+
border-color: rgba(0, 0, 0, 0.8);
127+
box-shadow: 0;
128+
}
129+
.easy-autocomplete.eac-dark-glass ul {
130+
border-color: rgba(0, 0, 0, 0.8);
131+
}
132+
.easy-autocomplete.eac-dark-glass ul li {
133+
background-color: rgba(0, 0, 0, 0.8);
134+
border-color: rgba(0, 0, 0, 0.8);
135+
}
136+
.easy-autocomplete.eac-dark-glass ul li.selected {
137+
background-color: rgba(64, 64, 64, 0.8);
138+
color: #f6f6f6;
139+
}
140+
.easy-autocomplete.eac-dark-glass ul li:last-child {
141+
border-radius: 0 0 4px 4px;
142+
}
114143
.easy-autocomplete.eac-blue {
115144
color: #fff;
116145
}
117146
.easy-autocomplete.eac-blue input {
118147
background-color: #6d9ed1;
119148
border-radius: 4px;
149+
box-shadow: 0;
120150
color: #f6f6f6;
121151
}
122152
.easy-autocomplete.eac-blue input:hover, .easy-autocomplete.eac-blue input:focus {
123153
border-color: #5a91cb;
154+
box-shadow: 0;
124155
}
125156
.easy-autocomplete.eac-blue ul {
126157
border-color: #5a91cb;
@@ -133,6 +164,55 @@
133164
background-color: #94b8dd;
134165
color: #f6f6f6;
135166
}
167+
.easy-autocomplete.eac-yellow {
168+
color: #333;
169+
}
170+
.easy-autocomplete.eac-yellow input {
171+
background-color: #ffdb7e;
172+
border-color: #333;
173+
border-radius: 4px;
174+
box-shadow: 0;
175+
color: #333;
176+
}
177+
.easy-autocomplete.eac-yellow input:hover, .easy-autocomplete.eac-yellow input:focus {
178+
border-color: #333;
179+
box-shadow: 0;
180+
}
181+
.easy-autocomplete.eac-yellow ul {
182+
border-color: #333;
183+
}
184+
.easy-autocomplete.eac-yellow ul li {
185+
background-color: #ffdb7e;
186+
border-color: #333;
187+
}
188+
.easy-autocomplete.eac-yellow ul li.selected {
189+
background-color: #ffe9b1;
190+
color: #333;
191+
}
192+
.easy-autocomplete.eac-purple {
193+
color: #333;
194+
}
195+
.easy-autocomplete.eac-purple input {
196+
background-color: #d6d1e7;
197+
border-color: #b8afd5;
198+
box-shadow: 0;
199+
color: #333;
200+
}
201+
.easy-autocomplete.eac-purple input:hover, .easy-autocomplete.eac-purple input:focus {
202+
border-color: #333;
203+
box-shadow: 0;
204+
}
205+
.easy-autocomplete.eac-purple ul {
206+
border-color: #333;
207+
}
208+
.easy-autocomplete.eac-purple ul li {
209+
background-color: #d6d1e7;
210+
border-color: #333;
211+
}
212+
.easy-autocomplete.eac-purple ul li.selected {
213+
background-color: #ebe8f3;
214+
color: #333;
215+
}
136216
.easy-autocomplete.eac-bootstrap input {
137217
border-color: #ccc;
138218
border-radius: 4px;

‎dist/easy-autocomplete.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/sass/easy-autocomplete.scss‎

Lines changed: 112 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ $yellow-light: #ffdb00;
1010
$yellow-lighter: rgba(255, 231, 84, 0.6);
1111
$dark-light: #333;
1212
$dark-lighter: rgba(55, 55, 55, 0.6);
13-
13+
$dark-glass: rgba(0, 0, 0, 0.8);
1414
$dark: #333;
15+
$yellow: rgba(255, 212, 100, 1);
16+
$purple: #c7c0de;
1517

1618
.easy-autocomplete {
1719
position: relative;
@@ -28,8 +30,6 @@ $dark: #333;
2830
}
2931

3032

31-
32-
3333
&.eac-blue-light {
3434

3535
input {
@@ -160,10 +160,12 @@ $dark: #333;
160160
border: {
161161
radius: 4px;
162162
}
163+
box-shadow: 0;
163164
color: #f6f6f6;
164165

165166
&:hover, &:focus {
166167
border-color: $dark;
168+
box-shadow: 0;
167169
}
168170
}
169171

@@ -183,6 +185,44 @@ $dark: #333;
183185
}
184186
}
185187

188+
&.eac-dark-glass {
189+
color: #fff;
190+
191+
input {
192+
background-color: $dark-glass;
193+
border: {
194+
radius: 4px;
195+
}
196+
box-shadow: 0;
197+
color: #f6f6f6;
198+
199+
&:hover, &:focus {
200+
border-color: $dark-glass;
201+
box-shadow: 0;
202+
}
203+
}
204+
205+
ul {
206+
border-color: $dark-glass;
207+
208+
li {
209+
background-color: $dark-glass;
210+
border-color: $dark-glass;
211+
212+
&.selected {
213+
background-color: lighten($dark-glass, 25%);
214+
color: #f6f6f6;
215+
}
216+
217+
&:last-child {
218+
border-radius: 0 0 4px 4px;
219+
}
220+
221+
}
222+
}
223+
}
224+
225+
186226

187227
&.eac-blue {
188228
color: #fff;
@@ -192,10 +232,12 @@ $dark: #333;
192232
border: {
193233
radius: 4px;
194234
}
235+
box-shadow: 0;
195236
color: #f6f6f6;
196237

197238
&:hover, &:focus {
198239
border-color: $blue;
240+
box-shadow: 0;
199241
}
200242
}
201243

@@ -215,6 +257,73 @@ $dark: #333;
215257
}
216258
}
217259

260+
&.eac-yellow {
261+
color: #333;
262+
263+
input {
264+
background-color: lighten($yellow, 5%);
265+
border: {
266+
color: #333;
267+
radius: 4px;
268+
}
269+
box-shadow: 0;
270+
color: #333;
271+
272+
&:hover, &:focus {
273+
border-color: #333;
274+
box-shadow: 0;
275+
}
276+
}
277+
278+
ul {
279+
border-color: #333;
280+
281+
li {
282+
background-color: lighten($yellow, 5%);
283+
border-color: #333;
284+
285+
&.selected {
286+
background-color: lighten($yellow, 15%);
287+
color: #333;
288+
}
289+
290+
}
291+
}
292+
}
293+
294+
&.eac-purple {
295+
color: #333;
296+
297+
input {
298+
background-color: lighten($purple, 5%);
299+
border: {
300+
color: darken($purple, 5%);
301+
}
302+
box-shadow: 0;
303+
color: #333;
304+
305+
&:hover, &:focus {
306+
border-color: #333;
307+
box-shadow: 0;
308+
}
309+
}
310+
311+
ul {
312+
border-color: #333;
313+
314+
li {
315+
background-color: lighten($purple, 5%);
316+
border-color: #333;
317+
318+
&.selected {
319+
background-color: lighten($purple, 12%);
320+
color: #333;
321+
}
322+
323+
}
324+
}
325+
}
326+
218327
&.eac-bootstrap {
219328

220329
input {

0 commit comments

Comments
 (0)