Skip to content

Commit

Permalink
Closes #42. Better css themes.
Browse files Browse the repository at this point in the history
  • Loading branch information
pawelczak authored and pawelczak committed Apr 4, 2015
1 parent 45ae3d1 commit c862826
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 5 deletions.
3 changes: 2 additions & 1 deletion demo/example_simple.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ <h1>EasyAutocomplete - easy example</h1>
<script>

var options = {
data: ["blue", "green", "pink", "red", "yellow"]
data: ["blue", "green", "pink", "red", "yellow"],

};

$("#simple").easyAutocomplete(options);
Expand Down
80 changes: 80 additions & 0 deletions dist/easy-autocomplete.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,12 @@
.easy-autocomplete.eac-dark input {
background-color: #404040;
border-radius: 4px;
box-shadow: 0;
color: #f6f6f6;
}
.easy-autocomplete.eac-dark input:hover, .easy-autocomplete.eac-dark input:focus {
border-color: #333333;
box-shadow: 0;
}
.easy-autocomplete.eac-dark ul {
border-color: #333333;
Expand All @@ -111,16 +113,45 @@
background-color: #737373;
color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass {
color: #fff;
}
.easy-autocomplete.eac-dark-glass input {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 4px;
box-shadow: 0;
color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass input:hover, .easy-autocomplete.eac-dark-glass input:focus {
border-color: rgba(0, 0, 0, 0.8);
box-shadow: 0;
}
.easy-autocomplete.eac-dark-glass ul {
border-color: rgba(0, 0, 0, 0.8);
}
.easy-autocomplete.eac-dark-glass ul li {
background-color: rgba(0, 0, 0, 0.8);
border-color: rgba(0, 0, 0, 0.8);
}
.easy-autocomplete.eac-dark-glass ul li.selected {
background-color: rgba(64, 64, 64, 0.8);
color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass ul li:last-child {
border-radius: 0 0 4px 4px;
}
.easy-autocomplete.eac-blue {
color: #fff;
}
.easy-autocomplete.eac-blue input {
background-color: #6d9ed1;
border-radius: 4px;
box-shadow: 0;
color: #f6f6f6;
}
.easy-autocomplete.eac-blue input:hover, .easy-autocomplete.eac-blue input:focus {
border-color: #5a91cb;
box-shadow: 0;
}
.easy-autocomplete.eac-blue ul {
border-color: #5a91cb;
Expand All @@ -133,6 +164,55 @@
background-color: #94b8dd;
color: #f6f6f6;
}
.easy-autocomplete.eac-yellow {
color: #333;
}
.easy-autocomplete.eac-yellow input {
background-color: #ffdb7e;
border-color: #333;
border-radius: 4px;
box-shadow: 0;
color: #333;
}
.easy-autocomplete.eac-yellow input:hover, .easy-autocomplete.eac-yellow input:focus {
border-color: #333;
box-shadow: 0;
}
.easy-autocomplete.eac-yellow ul {
border-color: #333;
}
.easy-autocomplete.eac-yellow ul li {
background-color: #ffdb7e;
border-color: #333;
}
.easy-autocomplete.eac-yellow ul li.selected {
background-color: #ffe9b1;
color: #333;
}
.easy-autocomplete.eac-purple {
color: #333;
}
.easy-autocomplete.eac-purple input {
background-color: #d6d1e7;
border-color: #b8afd5;
box-shadow: 0;
color: #333;
}
.easy-autocomplete.eac-purple input:hover, .easy-autocomplete.eac-purple input:focus {
border-color: #333;
box-shadow: 0;
}
.easy-autocomplete.eac-purple ul {
border-color: #333;
}
.easy-autocomplete.eac-purple ul li {
background-color: #d6d1e7;
border-color: #333;
}
.easy-autocomplete.eac-purple ul li.selected {
background-color: #ebe8f3;
color: #333;
}
.easy-autocomplete.eac-bootstrap input {
border-color: #ccc;
border-radius: 4px;
Expand Down
2 changes: 1 addition & 1 deletion dist/easy-autocomplete.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

115 changes: 112 additions & 3 deletions src/sass/easy-autocomplete.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ $yellow-light: #ffdb00;
$yellow-lighter: rgba(255, 231, 84, 0.6);
$dark-light: #333;
$dark-lighter: rgba(55, 55, 55, 0.6);

$dark-glass: rgba(0, 0, 0, 0.8);
$dark: #333;
$yellow: rgba(255, 212, 100, 1);
$purple: #c7c0de;

.easy-autocomplete {
position: relative;
Expand All @@ -28,8 +30,6 @@ $dark: #333;
}




&.eac-blue-light {

input {
Expand Down Expand Up @@ -160,10 +160,12 @@ $dark: #333;
border: {
radius: 4px;
}
box-shadow: 0;
color: #f6f6f6;

&:hover, &:focus {
border-color: $dark;
box-shadow: 0;
}
}

Expand All @@ -183,6 +185,44 @@ $dark: #333;
}
}

&.eac-dark-glass {
color: #fff;

input {
background-color: $dark-glass;
border: {
radius: 4px;
}
box-shadow: 0;
color: #f6f6f6;

&:hover, &:focus {
border-color: $dark-glass;
box-shadow: 0;
}
}

ul {
border-color: $dark-glass;

li {
background-color: $dark-glass;
border-color: $dark-glass;

&.selected {
background-color: lighten($dark-glass, 25%);
color: #f6f6f6;
}

&:last-child {
border-radius: 0 0 4px 4px;
}

}
}
}



&.eac-blue {
color: #fff;
Expand All @@ -192,10 +232,12 @@ $dark: #333;
border: {
radius: 4px;
}
box-shadow: 0;
color: #f6f6f6;

&:hover, &:focus {
border-color: $blue;
box-shadow: 0;
}
}

Expand All @@ -215,6 +257,73 @@ $dark: #333;
}
}

&.eac-yellow {
color: #333;

input {
background-color: lighten($yellow, 5%);
border: {
color: #333;
radius: 4px;
}
box-shadow: 0;
color: #333;

&:hover, &:focus {
border-color: #333;
box-shadow: 0;
}
}

ul {
border-color: #333;

li {
background-color: lighten($yellow, 5%);
border-color: #333;

&.selected {
background-color: lighten($yellow, 15%);
color: #333;
}

}
}
}

&.eac-purple {
color: #333;

input {
background-color: lighten($purple, 5%);
border: {
color: darken($purple, 5%);
}
box-shadow: 0;
color: #333;

&:hover, &:focus {
border-color: #333;
box-shadow: 0;
}
}

ul {
border-color: #333;

li {
background-color: lighten($purple, 5%);
border-color: #333;

&.selected {
background-color: lighten($purple, 12%);
color: #333;
}

}
}
}

&.eac-bootstrap {

input {
Expand Down

0 comments on commit c862826

Please sign in to comment.