demo/demo.css
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Overpass Mono', monospace;
color: #666;
background: #eaeaea;
font-size: 13px;
}
a {
text-decoration: none;
color: #6fbb95;
outline: none;
}
a:hover,
a:focus {
color: #fff;
}
.github{
display: block;
font-weight: bold;
margin-bottom: 40px;
}
.sellect-destination-list .sellect-item{
padding-top: 3px;
padding-bottom: 0;
font-size: 11px;
}
.sellect-origin-list .sellect-item{
font-size: 11px;
}
.sellect-destination-list .sellect-item:hover,
.sellect-origin-list .sellect-item:hover{
color: #6fbb95;
}
input{
font-family: 'Overpass Mono', monospace;
outline: none;
}
button{
font-size: 11px;
border-radius: 2px;
border: 1px solid #ccc;
padding: 5px;
cursor: pointer;
box-shadow: 1px 1px 2px 0 #ccc;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: button; /* for input */
-moz-appearance: button;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
padding: 0;
}
button:hover{
background: #ccc;
border: 1px solid #b8b8b8;
box-shadow: none;
}
.sellect-container{
background: #efefef;
}
.demo-list{
width: 49%;
background: #fff;
min-height: 100px;
border: 1px solid #ccc;
border-radius: 3px;
margin-top: 40px;
padding: 10px;
}
.demo-list span{
display: block;
font-size: 10px;
line-height: 2;
font-style: italic;
}
.selected-list{
float: left;
}
.selected-list:before{
content: 'selected items:';
}
.unselected-list{
float: right;
}
.unselected-list:before{
content: 'unselected items:';
}