Skip to content

Instantly share code, notes, and snippets.

@tvaliasek
Created May 27, 2016 10:16
Show Gist options
  • Save tvaliasek/a5eca6d70279daef098cfca552191b71 to your computer and use it in GitHub Desktop.
Save tvaliasek/a5eca6d70279daef098cfca552191b71 to your computer and use it in GitHub Desktop.
SCSS partial for styling awesomplete.js autocomplete plugin
$aw_list_bg_color: $white;
$aw_list_border: none;
$aw_list_shadow: .05em .2em .6em rgba(0,0,0,.2);
$aw_list_radius: 0px;
$aw_list_color: $darkGray;
$aw_selected_item_bg: $blue;
$aw_selected_item_color: $white;
$aw_mark_bg: $lightBlue;
$aw_mark_color: $white;
$aw_selected_mark_bg: rgba($white, 0.15);
$aw_selected_mark_color: $white;
.awesomplete{
display: inline-block;
position: relative;
vertical-align: bottom;
[hidden] { display: none; }
.visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
}
& > input {
display: block;
}
& > ul {
position: absolute;
left: 0;
z-index: 1;
min-width: 100%;
box-sizing: border-box;
list-style: none;
padding: 0;
border-radius: $aw_list_radius;
margin: .2em 0 0;
background: $aw_list_bg_color;
border: $aw_list_border;
box-shadow: $aw_list_shadow;
text-shadow: none;
transform: translateY(3em);
width: 21em;
&[hidden],&:empty {
display: none;
}
/* Pointer */
&:before {
content: "";
position: absolute;
top: -0.43em;
left: 1em;
width: 0; height: 0;
padding: 0.4em;
background: $white;
border: inherit;
border-right: 0;
border-bottom: 0;
@include transform(rotate(45deg));
}
& > li {
position: relative;
padding: .2em .5em;
cursor: pointer;
color: $aw_list_color;
&:hover,&[aria-selected="true"]{
background: $aw_selected_item_bg;
color: $aw_selected_item_color;
}
}
}
mark {
background: $aw_mark_bg;
color: $aw_mark_color;
}
li{
&:hover mark {
background: $aw_selected_mark_bg;
color: $aw_selected_mark_color;
}
&[aria-selected="true"] mark {
background: $aw_selected_mark_bg;
color: $aw_selected_mark_color;
}
}
}
@supports (transform: scale(0)) {
.awesomplete{
& > ul {
transition: .3s cubic-bezier(.4,.2,.5,1.4);
transform-origin: 1.43em -.43em;
&[hidden],&:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment