Provide .less style for bootstrap-tagsinput

We use flatly theme for bootstrap while bootstrap-tagsinput bundles a css file that follow vanilla style, create a less version and use it instead of the css one bundles with bootstrap-tagsinput.
typeahead.js allows to customize class names used for UI elements, but bootstrap-tagsinput doesn't support passing that and is no longer maintained, so we need to follow default typeahead.js classes.
This commit is contained in:
Łukasz Mierzwa
2017-08-05 13:17:07 -07:00
parent add00dab12
commit d8efb97f97
3 changed files with 54 additions and 12 deletions

View File

@@ -353,17 +353,6 @@ button.silence-delete:focus {
background-color: #e74c3c;
}
/* tweak typeahead look for flatly */
.tt-cursor,
.tt-suggestion:hover,
.tt-suggestion:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #2c3e50;
}
/* tweak nprogress look for flatly */
#nprogress .nprogress-flatly.bar {
background: #f39c12;

53
assets/static/bootstrap-tagsinput.less vendored Normal file
View File

@@ -0,0 +1,53 @@
// lessified version of https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/blob/master/src/bootstrap-tagsinput-typeahead.css
@import "bootstrap/less/variables.less";
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.twitter-typeahead .tt-hint {
display: none;
}
.tt-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: @font-size-base;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border;
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
cursor: pointer;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap;
}
.tt-cursor,
.tt-suggestion:hover,
.tt-suggestion:focus {
color: @dropdown-link-hover-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-hover-bg;
}

View File

@@ -8,7 +8,7 @@ require("./jquery.typing-0.3.2.js");
require("corejs-typeahead");
require("bootstrap-tagsinput");
require("bootstrap-tagsinput/dist/bootstrap-tagsinput.css");
require("bootstrap-tagsinput/dist/bootstrap-tagsinput-typeahead.css");
require("./bootstrap-tagsinput.less");
const autocomplete = require("./autocomplete");
const unsee = require("./unsee");