.enable_plugin_tag_input() when(@enable-plugin-tag-input = true) {
|
|
.tags {
|
display: inline-block;
|
padding: 4px 6px;
|
color: @ace-grey;
|
vertical-align: middle;
|
//.border-radius(@inputBorderRadius);
|
background-color: #FFF;
|
border: 1px solid @input-border;
|
//.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
|
//.transition(~"border linear .2s, box-shadow linear .2s");
|
width: 206px;
|
|
&:hover {
|
border-color:@input-hover-border;
|
}
|
|
&-hover , &-hover:hover {
|
border-color: @input-border-focus;
|
outline: 0;
|
//outline: thin dotted \9; /* IE6-9 */
|
}
|
|
&[class*="span"] {
|
float: none;
|
margin-left: 0;
|
}
|
|
input[type="text"],
|
input[type="text"]:focus {
|
border: none;
|
display: inline;
|
outline: 0;
|
margin: 0;
|
padding: 0;
|
line-height: 18px;
|
.box-shadow(none);
|
width: 100%;
|
}
|
}
|
|
.tags {
|
.tag {
|
display: inline-block;
|
position:relative;
|
|
font-size: @base-font-size;
|
font-weight: normal;
|
//line-height: 14px; // ensure proper line-height if floated
|
|
vertical-align: baseline;
|
white-space: nowrap;
|
|
//background-color: #3E9BD0;
|
//color:#FFF;
|
|
background-color:@tag-bg;
|
color:#FFF;
|
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
|
|
padding: 4px 22px 5px 9px;
|
// .border-radius(9px);
|
margin-bottom: 3px;
|
margin-right: 3px;
|
.transition(~"all 0.2s");
|
|
&:empty {
|
display: none;
|
}
|
|
&:hover {
|
//background-color: #B2CADD;
|
}
|
|
/**
|
&:nth-child(5n+1) {
|
background-color:#48A2E0;
|
}
|
&:nth-child(5n+2) {
|
background-color:#34C896;
|
}
|
&:nth-child(5n+3) {
|
background-color:#B57BB3;
|
}
|
&:nth-child(5n+4) {
|
background-color:#CC7DA8;
|
}
|
&:nth-child(5n+5) {
|
background-color:#666;
|
}
|
*/
|
|
|
// Important (red)
|
&-important { background-color: @btn-danger; }
|
// Warnings (orange)
|
&-warning { background-color: @btn-warning; }
|
// Success (green)
|
&-success { background-color: @btn-success; }
|
// Info (turquoise)
|
&-info { background-color: @btn-info; }
|
// Inverse (black)
|
&-inverse { background-color: @btn-inverse; }
|
|
.close {
|
font-size: @font-size-tag-remove;
|
line-height: 20px;
|
|
.opacity(1);
|
color: #FFF;
|
text-shadow: none;
|
|
float: none;
|
position: absolute;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
width: 18px;
|
text-align: center;
|
|
&:hover {
|
background-color: rgba(0,0,0,0.2);
|
}
|
}
|
}
|
}
|
|
|
|
|
|
}
|
.enable_plugin_tag_input();
|
