src/sellect.css
/**
* @file sellect.js is micro-library.
* Scaffolded with generator-microjs
* @author Lidia Freitas <lidiafreitas.me@gmail.com>
*/
*{
box-sizing: border-box;
}
body{
font-family: Verdana, sans-serif;
font-size: 11px;
}
.sellect-element{
border: none;
height: 18px;
background: none;
}
.sellect-container{
border: 1px solid #ccc;
padding: 5px 5px 0 5px;
border-radius: 3px;
margin-top: 5px;
position: relative;
}
.sellect-destination-list{
display: inline-block;
}
.sellect-destination-list .sellect-item{
margin: 0 5px 5px 0;
background-color: #e5e5e5;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 2px;
padding: 0 5px 2px;
display: inline-block;
}
.sellect-destination-list .sellect-item .sellect-close-icon{
margin-left: 5px;
}
.sellect-origin-list{
overflow: auto;
max-height: 0;
opacity: 0;
transition: opacity 1.1s ease, max-height .2s ease;
}
.sellect-origin-list.open{
max-height: 138px;
opacity: 1;
}
.sellect-origin-list .sellect-item{
display: block;
cursor: pointer;
padding: 5px;
border-radius: 3px;
margin-right: 5px;
}
.sellect-origin-list .sellect-item:last-child{
margin-bottom: 5px;
}
.sellect-origin-list .sellect-item:hover,
.sellect-origin-list .sellect-item.active{
background: #e2e2e2;
}
.sellect-origin-list .sellect-item .sellect-close-icon{
display: none;
}
.sellect-arrow-icon{
position: absolute;
cursor: pointer;
top: 0;
right: 0;
padding: 8px;
}