react-tag-suggest
Version:
78 lines (76 loc) • 1.45 kB
text/stylus
.tag-input {
font-family: Arial, Helvetica, sans-serif;
border: solid 1px #000;
box-sizing: border-box;
padding: 5px 4px 0;
position: relative;
.new-tag {
border: none;
font-size: 13px;
margin-bottom: 7px;
padding: 3px 2px;
outline: none;
width: auto;
}
.new-tag-size {
position: absolute;
left: -10000px;
font-size: 13px;
padding: 0 2px;
}
.pill {
display: inline-block;
margin: 0 5px 5px 0;
border-radius: 3px;
border: solid #000 3px;
background-color: #000;
color: #fff;
padding: 0px 3px;
font-size: 13px;
transition: background-color border-color 0.5s ease;
&.highlight {
background-color: #f1c40f;
border-color: #f1c40f;
}
.remove {
cursor: pointer;
vertical-align: middle;
padding: 0 0 0 5px;
}
}
}
.tag-suggest {
font-family: Arial, Helvetica, sans-serif;
position: relative;
ul {
list-style: none;
margin: 0;
padding-left: 0;
border: solid 1px;
position: absolute;
}
li {
&.highlight {
background-color: #000;
color: #fff;
}
div {
box-sizing: border-box;
padding: 5px;
position: relative;
min-width: 120px;
}
}
.suggestion {
cursor: pointer;
display: block;
margin-right: 20px;
white-space: nowrap;
}
.set-input {
cursor: pointer;
position: absolute;
right: 5px;
top: 5px;
}
}