[FIX] web: manual update of select2 lib to 3.5.1 version
The previous version of the lib seemed to be in an inconsistent state. This fix the select2-offscreen class when the page is larger than 10 000px (this situation happens when importing a file with lots of column).
This commit is contained in:
parent
14f3085776
commit
6e8b678667
|
@ -1,12 +1,18 @@
|
||||||
Copyright 2012 Igor Vaynberg
|
Copyright 2014 Igor Vaynberg
|
||||||
|
|
||||||
Version: @@ver@@ Timestamp: @@timestamp@@
|
Version: @@ver@@ Timestamp: @@timestamp@@
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
|
This software is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU
|
||||||
compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
|
General Public License version 2 (the "GPL License"). You may choose either license to govern your
|
||||||
|
use of this software only upon the condition that you accept all of the terms of either the Apache
|
||||||
|
License or the GPL License.
|
||||||
|
|
||||||
|
You may obtain a copy of the Apache License and the GPL License at:
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
http://www.gnu.org/licenses/gpl-2.0.html
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software distributed under the License is
|
Unless required by applicable law or agreed to in writing, software distributed under the Apache License
|
||||||
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
or the GPL Licesnse is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
|
||||||
See the License for the specific language governing permissions and limitations under the License.
|
either express or implied. See the Apache License and the GPL License for the specific language governing
|
||||||
|
permissions and limitations under the Apache License and the GPL License.
|
|
@ -1,39 +1,65 @@
|
||||||
Select2
|
Select2
|
||||||
=================
|
=======
|
||||||
|
|
||||||
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent [Chosen](http://harvesthq.github.com/chosen/) library.
|
Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
|
||||||
|
|
||||||
To get started -- checkout http://ivaynberg.github.com/select2!
|
To get started, checkout examples and documentation at http://ivaynberg.github.com/select2
|
||||||
|
|
||||||
What Does Select2 Support That Chosen Does Not?
|
Use cases
|
||||||
-------------------------------------------------
|
---------
|
||||||
|
|
||||||
* Working with large datasets: Chosen requires the entire dataset to be loaded as `option` tags in the DOM, which limits
|
* Enhancing native selects with search.
|
||||||
it to working with small-ish datasets. Select2 uses a function to find results on-the-fly, which allows it to partially
|
* Enhancing native selects with a better multi-select interface.
|
||||||
load results.
|
* Loading data from JavaScript: easily load items via ajax and have them searchable.
|
||||||
* Paging of results: Since Select2 works with large datasets and only loads a small amount of matching results at a time
|
* Nesting optgroups: native selects only support one level of nested. Select2 does not have this restriction.
|
||||||
it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded
|
* Tagging: ability to add new items on the fly.
|
||||||
result set allowing for the 'infinite scrolling' of results.
|
* Working with large, remote datasets: ability to partially load a dataset based on the search term.
|
||||||
* Custom markup for results: Chosen only supports rendering text results because that is the only markup supported by
|
* Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
|
||||||
`option` tags. Select2 provides an extension point which can be used to produce any kind of markup to represent results.
|
* Templating: support for custom rendering of results and selections.
|
||||||
* Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for
|
|
||||||
tagging.
|
|
||||||
|
|
||||||
Browser Compatibility
|
Browser compatibility
|
||||||
--------------------
|
---------------------
|
||||||
* IE 8+ (7 mostly works except for [issue with z-index](https://github.com/ivaynberg/select2/issues/37))
|
* IE 8+
|
||||||
* Chrome 8+
|
* Chrome 8+
|
||||||
* Firefox 3.5+
|
* Firefox 10+
|
||||||
* Safari 3+
|
* Safari 3+
|
||||||
* Opera 10.6+
|
* Opera 10.6+
|
||||||
|
|
||||||
|
Usage
|
||||||
|
-----
|
||||||
|
You can source Select2 directly from a [CDN like JSDliver](http://www.jsdelivr.com/#!select2), [download it from this GitHub repo](https://github.com/ivaynberg/select2/tags), or use one of the integrations below.
|
||||||
|
|
||||||
Integrations
|
Integrations
|
||||||
------------
|
------------
|
||||||
|
|
||||||
* [Wicket-Select2](https://github.com/ivaynberg/wicket-select2) (Java / Apache Wicket)
|
* [Wicket-Select2](https://github.com/ivaynberg/wicket-select2) (Java / [Apache Wicket](http://wicket.apache.org))
|
||||||
* [select2-rails](https://github.com/argerim/select2-rails) (Ruby on Rails)
|
* [select2-rails](https://github.com/argerim/select2-rails) (Ruby on Rails)
|
||||||
* [AngularUI](http://angular-ui.github.com/#directives-select2) ([AngularJS](angularjs.org))
|
* [AngularUI](http://angular-ui.github.com/#directives-select2) ([AngularJS](angularjs.org))
|
||||||
* [Django](https://github.com/applegrew/django-select2)
|
* [Django](https://github.com/applegrew/django-select2)
|
||||||
|
* [Symfony](https://github.com/19Gerhard85/sfSelect2WidgetsPlugin)
|
||||||
|
* [Symfony2](https://github.com/avocode/FormExtensions)
|
||||||
|
* [Bootstrap 2](https://github.com/t0m/select2-bootstrap-css) and [Bootstrap 3](https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3) (CSS skins)
|
||||||
|
* [Meteor](https://github.com/nate-strauser/meteor-select2) (modern reactive JavaScript framework; + [Bootstrap 3 skin](https://github.com/esperadomedia/meteor-select2-bootstrap3-css/))
|
||||||
|
* [Meteor](https://jquery-select2.meteor.com)
|
||||||
|
* [Yii 2.x](http://demos.krajee.com/widgets#select2)
|
||||||
|
* [Yii 1.x](https://github.com/tonybolzan/yii-select2)
|
||||||
|
* [AtmosphereJS](https://atmospherejs.com/package/jquery-select2)
|
||||||
|
|
||||||
|
### Example Integrations
|
||||||
|
|
||||||
|
* [Knockout.js](https://github.com/ivaynberg/select2/wiki/Knockout.js-Integration)
|
||||||
|
* [Socket.IO](https://github.com/ivaynberg/select2/wiki/Socket.IO-Integration)
|
||||||
|
* [PHP](https://github.com/ivaynberg/select2/wiki/PHP-Example)
|
||||||
|
* [.Net MVC] (https://github.com/ivaynberg/select2/wiki/.Net-MVC-Example)
|
||||||
|
|
||||||
|
Internationalization (i18n)
|
||||||
|
---------------------------
|
||||||
|
|
||||||
|
Select2 supports multiple languages by simply including the right language JS
|
||||||
|
file (`select2_locale_it.js`, `select2_locale_nl.js`, etc.) after `select2.js`.
|
||||||
|
|
||||||
|
Missing a language? Just copy `select2_locale_en.js.template`, translate
|
||||||
|
it, and make a pull request back to Select2 here on GitHub.
|
||||||
|
|
||||||
Bug tracker
|
Bug tracker
|
||||||
-----------
|
-----------
|
||||||
|
@ -42,7 +68,6 @@ Have a bug? Please create an issue here on GitHub!
|
||||||
|
|
||||||
https://github.com/ivaynberg/select2/issues
|
https://github.com/ivaynberg/select2/issues
|
||||||
|
|
||||||
|
|
||||||
Mailing list
|
Mailing list
|
||||||
------------
|
------------
|
||||||
|
|
||||||
|
@ -53,16 +78,22 @@ select2@googlegroups.com
|
||||||
https://groups.google.com/d/forum/select2
|
https://groups.google.com/d/forum/select2
|
||||||
|
|
||||||
|
|
||||||
Copyright and License
|
Copyright and license
|
||||||
---------------------
|
---------------------
|
||||||
|
|
||||||
Copyright 2012 Igor Vaynberg
|
Copyright 2012 Igor Vaynberg
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
|
This software is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU
|
||||||
compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
|
General Public License version 2 (the "GPL License"). You may choose either license to govern your
|
||||||
|
use of this software only upon the condition that you accept all of the terms of either the Apache
|
||||||
|
License or the GPL License.
|
||||||
|
|
||||||
|
You may obtain a copy of the Apache License and the GPL License in the LICENSE file, or at:
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
http://www.gnu.org/licenses/gpl-2.0.html
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software distributed under the License is
|
Unless required by applicable law or agreed to in writing, software distributed under the Apache License
|
||||||
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
or the GPL License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
|
||||||
See the License for the specific language governing permissions and limitations under the License.
|
either express or implied. See the Apache License and the GPL License for the specific language governing
|
||||||
|
permissions and limitations under the Apache License and the GPL License.
|
|
@ -5,9 +5,9 @@ echo -n "Enter the version for this release: "
|
||||||
|
|
||||||
read ver
|
read ver
|
||||||
|
|
||||||
if [ ! $ver ]; then
|
if [ ! $ver ]; then
|
||||||
echo "Invalid version."
|
echo "Invalid version."
|
||||||
exit
|
exit
|
||||||
fi
|
fi
|
||||||
|
|
||||||
name="select2"
|
name="select2"
|
||||||
|
@ -15,21 +15,39 @@ js="$name.js"
|
||||||
mini="$name.min.js"
|
mini="$name.min.js"
|
||||||
css="$name.css"
|
css="$name.css"
|
||||||
release="$name-$ver"
|
release="$name-$ver"
|
||||||
releasedir="/tmp/$release"
|
tag="$ver"
|
||||||
tag="release-$ver"
|
|
||||||
branch="build-$ver"
|
branch="build-$ver"
|
||||||
curbranch=`git branch | grep "*" | sed "s/* //"`
|
curbranch=`git branch | grep "*" | sed "s/* //"`
|
||||||
timestamp=$(date)
|
timestamp=$(date)
|
||||||
tokens="s/@@ver@@/$ver/g;s/\@@timestamp@@/$timestamp/g"
|
tokens="s/@@ver@@/$ver/g;s/\@@timestamp@@/$timestamp/g"
|
||||||
remote="github"
|
remote="github"
|
||||||
|
|
||||||
|
echo "Pulling from origin"
|
||||||
|
|
||||||
|
git pull
|
||||||
|
|
||||||
|
echo "Updating Version Identifiers"
|
||||||
|
|
||||||
|
sed -E -e "s/\"version\": \"([0-9\.]+)\",/\"version\": \"$ver\",/g" -i -- bower.json select2.jquery.json component.json composer.json package.json
|
||||||
|
|
||||||
|
git add bower.json
|
||||||
|
git add select2.jquery.json
|
||||||
|
git add component.json
|
||||||
|
git add composer.json
|
||||||
|
git add package.json
|
||||||
|
|
||||||
|
git commit -m "modified version identifiers in descriptors for release $ver"
|
||||||
|
git push
|
||||||
|
|
||||||
git branch "$branch"
|
git branch "$branch"
|
||||||
git checkout "$branch"
|
git checkout "$branch"
|
||||||
|
|
||||||
echo "Tokenizing..."
|
echo "Tokenizing..."
|
||||||
|
|
||||||
find . -name "$js" | xargs sed -i -e "$tokens"
|
find . -name "$js" | xargs -I{} sed -e "$tokens" -i -- {}
|
||||||
find . -name "$css" | xargs sed -i -e "$tokens"
|
find . -name "$css" | xargs -I{} sed -e "$tokens" -i -- {}
|
||||||
|
|
||||||
|
sed -e "s/latest/$ver/g" -i -- bower.json
|
||||||
|
|
||||||
git add "$js"
|
git add "$js"
|
||||||
git add "$css"
|
git add "$css"
|
||||||
|
@ -41,37 +59,21 @@ cat LICENSE | sed "$tokens" >> "$mini"
|
||||||
echo "*/" >> "$mini"
|
echo "*/" >> "$mini"
|
||||||
|
|
||||||
curl -s \
|
curl -s \
|
||||||
-d compilation_level=SIMPLE_OPTIMIZATIONS \
|
--data-urlencode "js_code@$js" \
|
||||||
-d output_format=text \
|
http://marijnhaverbeke.nl/uglifyjs \
|
||||||
-d output_info=compiled_code \
|
>> "$mini"
|
||||||
--data-urlencode "js_code@$js" \
|
|
||||||
http://closure-compiler.appspot.com/compile \
|
|
||||||
>> "$mini"
|
|
||||||
|
|
||||||
git add "$mini"
|
git add "$mini"
|
||||||
|
|
||||||
git commit -m "release $ver"
|
git commit -m "release $ver"
|
||||||
|
|
||||||
echo "Tagging..."
|
echo "Tagging..."
|
||||||
|
|
||||||
git tag -a "$tag" -m "tagged version $ver"
|
git tag -a "$tag" -m "tagged version $ver"
|
||||||
git push "$remote" --tags
|
git push "$remote" --tags
|
||||||
|
|
||||||
echo "Archiving..."
|
|
||||||
|
|
||||||
rm -rf "$releasedir"
|
|
||||||
mkdir "$releasedir"
|
|
||||||
|
|
||||||
cp $name.* "$releasedir"
|
|
||||||
cp spinner.gif "$releasedir"
|
|
||||||
cp README.* "$releasedir"
|
|
||||||
|
|
||||||
zip -r "$releasedir.zip" "$releasedir"
|
|
||||||
rm -rf "$releasedir"
|
|
||||||
|
|
||||||
echo "Cleaning Up..."
|
echo "Cleaning Up..."
|
||||||
|
|
||||||
git checkout "$curbranch"
|
git checkout "$curbranch"
|
||||||
git branch -D "$branch"
|
git branch -D "$branch"
|
||||||
|
|
||||||
echo "Done. Release archive created: $releasedir.zip"
|
echo "Done"
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
@ -1,324 +1,439 @@
|
||||||
/*
|
/*
|
||||||
Version: @@ver@@ Timestamp: @@timestamp@@
|
Version: 3.5.1 Timestamp: Tue Jul 22 18:58:56 EDT 2014
|
||||||
*/
|
*/
|
||||||
.select2-container {
|
.select2-container {
|
||||||
|
margin: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* inline-block for ie7 */
|
/* inline-block for ie7 */
|
||||||
zoom: 1;
|
zoom: 1;
|
||||||
*display: inline;
|
*display: inline;
|
||||||
vertical-align: top;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container,
|
.select2-container,
|
||||||
.select2-drop,
|
.select2-drop,
|
||||||
.select2-search,
|
.select2-search,
|
||||||
.select2-search input{
|
.select2-search input {
|
||||||
/*
|
/*
|
||||||
Force border-box so that % widths fit the parent
|
Force border-box so that % widths fit the parent
|
||||||
container without overlap because of margin/padding.
|
container without overlap because of margin/padding.
|
||||||
|
|
||||||
More Info : http://www.quirksmode.org/css/box.html
|
More Info : http://www.quirksmode.org/css/box.html
|
||||||
*/
|
*/
|
||||||
-moz-box-sizing: border-box; /* firefox */
|
|
||||||
-ms-box-sizing: border-box; /* ie */
|
|
||||||
-webkit-box-sizing: border-box; /* webkit */
|
-webkit-box-sizing: border-box; /* webkit */
|
||||||
-khtml-box-sizing: border-box; /* konqueror */
|
-moz-box-sizing: border-box; /* firefox */
|
||||||
box-sizing: border-box; /* css3 */
|
box-sizing: border-box; /* css3 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container .select2-choice {
|
.select2-container .select2-choice {
|
||||||
background-color: #fff;
|
|
||||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
|
|
||||||
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
|
|
||||||
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
|
|
||||||
background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
|
|
||||||
background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
|
|
||||||
background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
-moz-background-clip: padding;
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
position: relative;
|
|
||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 26px;
|
|
||||||
padding: 0 0 0 8px;
|
padding: 0 0 0 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
white-space: nowrap;
|
||||||
|
line-height: 26px;
|
||||||
color: #444;
|
color: #444;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
background-clip: padding-box;
|
||||||
|
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
background-color: #fff;
|
||||||
|
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
|
||||||
|
background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
|
||||||
|
background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
|
||||||
|
background-image: linear-gradient(to top, #eee 0%, #fff 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container.select2-drop-above .select2-choice
|
html[dir="rtl"] .select2-container .select2-choice {
|
||||||
{
|
padding: 0 8px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-container.select2-drop-above .select2-choice {
|
||||||
border-bottom-color: #aaa;
|
border-bottom-color: #aaa;
|
||||||
-webkit-border-radius:0px 0px 4px 4px;
|
|
||||||
-moz-border-radius:0px 0px 4px 4px;
|
border-radius: 0 0 4px 4px;
|
||||||
border-radius:0px 0px 4px 4px;
|
|
||||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white));
|
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
|
||||||
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%);
|
background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
|
||||||
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%);
|
background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
|
||||||
background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
|
||||||
background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%);
|
background-image: linear-gradient(to bottom, #eee 0%, #fff 90%);
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
|
|
||||||
background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container .select2-choice span {
|
.select2-container.select2-allowclear .select2-choice .select2-chosen {
|
||||||
|
margin-right: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-container .select2-choice > .select2-chosen {
|
||||||
margin-right: 26px;
|
margin-right: 26px;
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
-o-text-overflow: ellipsis;
|
|
||||||
-ms-text-overflow: ellipsis;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dir="rtl"] .select2-container .select2-choice > .select2-chosen {
|
||||||
|
margin-left: 26px;
|
||||||
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container .select2-choice abbr {
|
.select2-container .select2-choice abbr {
|
||||||
display: block;
|
display: none;
|
||||||
position: absolute;
|
width: 12px;
|
||||||
right: 26px;
|
height: 12px;
|
||||||
top: 8px;
|
position: absolute;
|
||||||
width: 12px;
|
right: 24px;
|
||||||
height: 12px;
|
top: 8px;
|
||||||
font-size: 1px;
|
|
||||||
background: url('select2.png') right top no-repeat;
|
font-size: 1px;
|
||||||
cursor: pointer;
|
text-decoration: none;
|
||||||
text-decoration: none;
|
|
||||||
border:0;
|
border: 0;
|
||||||
outline: 0;
|
background: url('select2.png') right top no-repeat;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select2-container.select2-allowclear .select2-choice abbr {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.select2-container .select2-choice abbr:hover {
|
.select2-container .select2-choice abbr:hover {
|
||||||
background-position: right -11px;
|
background-position: right -11px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-drop-mask {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 9998;
|
||||||
|
/* styles required for IE to work */
|
||||||
|
background-color: #fff;
|
||||||
|
filter: alpha(opacity=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-drop {
|
.select2-drop {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -1px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9999;
|
||||||
|
top: 100%;
|
||||||
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
|
||||||
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
|
||||||
-o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
|
||||||
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
|
||||||
z-index: 9999;
|
|
||||||
width:100%;
|
|
||||||
margin-top:-1px;
|
|
||||||
|
|
||||||
-webkit-border-radius: 0 0 4px 4px;
|
border-radius: 0 0 4px 4px;
|
||||||
-moz-border-radius: 0 0 4px 4px;
|
|
||||||
border-radius: 0 0 4px 4px;
|
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||||
|
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-drop.select2-drop-above {
|
.select2-drop.select2-drop-above {
|
||||||
-webkit-border-radius: 4px 4px 0px 0px;
|
margin-top: 1px;
|
||||||
-moz-border-radius: 4px 4px 0px 0px;
|
|
||||||
border-radius: 4px 4px 0px 0px;
|
|
||||||
margin-top:1px;
|
|
||||||
border-top: 1px solid #aaa;
|
border-top: 1px solid #aaa;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
|
||||||
-webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
-webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
||||||
-moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
||||||
-o-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
|
||||||
box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container .select2-choice div {
|
.select2-drop-active {
|
||||||
-webkit-border-radius: 0 4px 4px 0;
|
border: 1px solid #5897fb;
|
||||||
-moz-border-radius: 0 4px 4px 0;
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-drop.select2-drop-above.select2-drop-active {
|
||||||
|
border-top: 1px solid #5897fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-drop-auto-width {
|
||||||
|
border-top: 1px solid #aaa;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-drop-auto-width .select2-search {
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-container .select2-choice .select2-arrow {
|
||||||
|
display: inline-block;
|
||||||
|
width: 18px;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
border-left: 1px solid #aaa;
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
-moz-background-clip: padding;
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
|
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
|
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
|
||||||
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
||||||
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
||||||
background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
|
||||||
background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
|
background-image: linear-gradient(to top, #ccc 0%, #eee 60%);
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
|
|
||||||
background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
|
|
||||||
border-left: 1px solid #aaa;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
width: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container .select2-choice div b {
|
html[dir="rtl"] .select2-container .select2-choice .select2-arrow {
|
||||||
background: url('select2.png') no-repeat 0 1px;
|
left: 0;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
border-left: none;
|
||||||
|
border-right: 1px solid #aaa;
|
||||||
|
border-radius: 4px 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-container .select2-choice .select2-arrow b {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background: url('select2.png') no-repeat 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dir="rtl"] .select2-container .select2-choice .select2-arrow b {
|
||||||
|
background-position: 2px 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-search {
|
.select2-search {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
white-space: nowrap;
|
width: 100%;
|
||||||
z-index: 10000;
|
min-height: 26px;
|
||||||
min-height: 26px;
|
margin: 0;
|
||||||
width: 100%;
|
padding-left: 4px;
|
||||||
margin: 0;
|
padding-right: 4px;
|
||||||
padding-left: 4px;
|
|
||||||
padding-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-search-hidden {
|
position: relative;
|
||||||
display: block;
|
z-index: 10000;
|
||||||
position: absolute;
|
|
||||||
left: -10000px;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-search input {
|
.select2-search input {
|
||||||
background: #fff url('select2.png') no-repeat 100% -22px;
|
width: 100%;
|
||||||
background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
|
height: auto !important;
|
||||||
background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
min-height: 26px;
|
||||||
background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
|
||||||
background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
|
||||||
background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
|
||||||
background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
|
||||||
padding: 4px 20px 4px 5px;
|
padding: 4px 20px 4px 5px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border: 1px solid #aaa;
|
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
width:100%;
|
|
||||||
margin:0;
|
border: 1px solid #aaa;
|
||||||
height:auto !important;
|
|
||||||
min-height: 26px;
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
-moz-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
-moz-border-radius: 0;
|
|
||||||
-webkit-border-radius: 0;
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
background: #fff url('select2.png') no-repeat 100% -22px;
|
||||||
|
background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
|
||||||
|
background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||||
|
background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||||
|
background: url('select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-drop.select2-drop-above .select2-search input
|
html[dir="rtl"] .select2-search input {
|
||||||
{
|
padding: 4px 5px 4px 20px;
|
||||||
margin-top:4px;
|
|
||||||
|
background: #fff url('select2.png') no-repeat -37px -22px;
|
||||||
|
background: url('select2.png') no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
|
||||||
|
background: url('select2.png') no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||||
|
background: url('select2.png') no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||||
|
background: url('select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-drop.select2-drop-above .select2-search input {
|
||||||
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-search input.select2-active {
|
.select2-search input.select2-active {
|
||||||
background: #fff url('spinner.gif') no-repeat 100%;
|
background: #fff url('select2-spinner.gif') no-repeat 100%;
|
||||||
background: url('spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
|
background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
|
||||||
background: url('spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||||
background: url('spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
|
||||||
background: url('spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
|
||||||
background: url('spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
|
||||||
background: url('spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.select2-container-active .select2-choice,
|
.select2-container-active .select2-choice,
|
||||||
.select2-container-active .select2-choices {
|
.select2-container-active .select2-choices {
|
||||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
|
|
||||||
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
|
||||||
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
|
||||||
box-shadow : 0 0 5px rgba(0,0,0,.3);
|
|
||||||
border: 1px solid #5897fb;
|
border: 1px solid #5897fb;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
|
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-dropdown-open .select2-choice {
|
.select2-dropdown-open .select2-choice {
|
||||||
border: 1px solid #aaa;
|
border-bottom-color: transparent;
|
||||||
border-bottom-color: transparent;
|
-webkit-box-shadow: 0 1px 0 #fff inset;
|
||||||
-webkit-box-shadow: 0 1px 0 #fff inset;
|
box-shadow: 0 1px 0 #fff inset;
|
||||||
-moz-box-shadow : 0 1px 0 #fff inset;
|
|
||||||
-o-box-shadow : 0 1px 0 #fff inset;
|
border-bottom-left-radius: 0;
|
||||||
box-shadow : 0 1px 0 #fff inset;
|
border-bottom-right-radius: 0;
|
||||||
background-color: #eee;
|
|
||||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
|
background-color: #eee;
|
||||||
background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
|
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
|
||||||
background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
|
background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
|
||||||
background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
|
background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
|
||||||
background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
|
background-image: linear-gradient(to top, #fff 0%, #eee 50%);
|
||||||
background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
|
|
||||||
-webkit-border-bottom-left-radius : 0;
|
|
||||||
-webkit-border-bottom-right-radius: 0;
|
|
||||||
-moz-border-radius-bottomleft : 0;
|
|
||||||
-moz-border-radius-bottomright: 0;
|
|
||||||
border-bottom-left-radius : 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-dropdown-open .select2-choice div {
|
.select2-dropdown-open.select2-drop-above .select2-choice,
|
||||||
background: transparent;
|
.select2-dropdown-open.select2-drop-above .select2-choices {
|
||||||
border-left: none;
|
border: 1px solid #5897fb;
|
||||||
|
border-top-color: transparent;
|
||||||
|
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
|
||||||
|
background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
|
||||||
|
background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
|
||||||
|
background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
|
||||||
}
|
}
|
||||||
.select2-dropdown-open .select2-choice div b {
|
|
||||||
background-position: -18px 1px;
|
.select2-dropdown-open .select2-choice .select2-arrow {
|
||||||
|
background: transparent;
|
||||||
|
border-left: none;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-dropdown-open .select2-choice .select2-arrow b {
|
||||||
|
background-position: -18px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow b {
|
||||||
|
background-position: -16px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-hidden-accessible {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* results */
|
/* results */
|
||||||
.select2-results {
|
.select2-results {
|
||||||
margin: 4px 4px 4px 0;
|
max-height: 200px;
|
||||||
padding: 0 0 0 4px;
|
padding: 0 0 0 4px;
|
||||||
position: relative;
|
margin: 4px 4px 4px 0;
|
||||||
overflow-x: hidden;
|
position: relative;
|
||||||
overflow-y: auto;
|
overflow-x: hidden;
|
||||||
max-height: 200px;
|
overflow-y: auto;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[dir="rtl"] .select2-results {
|
||||||
|
padding: 0 4px 0 0;
|
||||||
|
margin: 4px 0 4px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-results ul.select2-result-sub {
|
.select2-results ul.select2-result-sub {
|
||||||
margin: 0 0 0 0;
|
margin: 0;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
|
|
||||||
.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
|
|
||||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
|
|
||||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
|
|
||||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
|
|
||||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
|
|
||||||
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
|
|
||||||
|
|
||||||
.select2-results li {
|
.select2-results li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: list-item;
|
display: list-item;
|
||||||
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-results li.select2-result-with-children > .select2-result-label {
|
.select2-results li.select2-result-with-children > .select2-result-label {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-results .select2-result-label {
|
.select2-results .select2-result-label {
|
||||||
padding: 3px 7px 4px;
|
padding: 3px 7px 4px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
min-height: 1em;
|
||||||
|
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select2-results-dept-1 .select2-result-label { padding-left: 20px }
|
||||||
|
.select2-results-dept-2 .select2-result-label { padding-left: 40px }
|
||||||
|
.select2-results-dept-3 .select2-result-label { padding-left: 60px }
|
||||||
|
.select2-results-dept-4 .select2-result-label { padding-left: 80px }
|
||||||
|
.select2-results-dept-5 .select2-result-label { padding-left: 100px }
|
||||||
|
.select2-results-dept-6 .select2-result-label { padding-left: 110px }
|
||||||
|
.select2-results-dept-7 .select2-result-label { padding-left: 120px }
|
||||||
|
|
||||||
.select2-results .select2-highlighted {
|
.select2-results .select2-highlighted {
|
||||||
background: #3875d7;
|
background: #3875d7;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-results li em {
|
.select2-results li em {
|
||||||
background: #feffde;
|
background: #feffde;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-results .select2-highlighted em {
|
.select2-results .select2-highlighted em {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select2-results .select2-highlighted ul {
|
||||||
|
background: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.select2-results .select2-no-results,
|
.select2-results .select2-no-results,
|
||||||
.select2-results .select2-searching,
|
.select2-results .select2-searching,
|
||||||
|
.select2-results .select2-ajax-error,
|
||||||
.select2-results .select2-selection-limit {
|
.select2-results .select2-selection-limit {
|
||||||
background: #f4f4f4;
|
background: #f4f4f4;
|
||||||
display: list-item;
|
display: list-item;
|
||||||
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
disabled look for already selected choices in the results dropdown
|
disabled look for disabled choices in the results dropdown
|
||||||
|
*/
|
||||||
.select2-results .select2-disabled.select2-highlighted {
|
.select2-results .select2-disabled.select2-highlighted {
|
||||||
color: #666;
|
color: #666;
|
||||||
background: #f4f4f4;
|
background: #f4f4f4;
|
||||||
|
@ -330,18 +445,22 @@ disabled look for already selected choices in the results dropdown
|
||||||
display: list-item;
|
display: list-item;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
.select2-results .select2-disabled {
|
.select2-results .select2-selected {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-more-results.select2-active {
|
.select2-more-results.select2-active {
|
||||||
background: #f4f4f4 url('spinner.gif') no-repeat 100%;
|
background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-results .select2-ajax-error {
|
||||||
|
background: rgba(255, 50, 50, .2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-more-results {
|
.select2-more-results {
|
||||||
background: #f4f4f4;
|
background: #f4f4f4;
|
||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* disabled styles */
|
/* disabled styles */
|
||||||
|
@ -353,31 +472,43 @@ disabled look for already selected choices in the results dropdown
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container.select2-container-disabled .select2-choice div {
|
.select2-container.select2-container-disabled .select2-choice .select2-arrow {
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select2-container.select2-container-disabled .select2-choice abbr {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* multiselect */
|
/* multiselect */
|
||||||
|
|
||||||
.select2-container-multi .select2-choices {
|
.select2-container-multi .select2-choices {
|
||||||
|
height: auto !important;
|
||||||
|
height: 1%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 5px 0 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
cursor: text;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
|
||||||
background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
|
||||||
background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
|
||||||
background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
background-image: linear-gradient(to bottom, #eee 1%, #fff 15%);
|
||||||
background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
}
|
||||||
background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
|
||||||
border: 1px solid #aaa;
|
html[dir="rtl"] .select2-container-multi .select2-choices {
|
||||||
margin: 0;
|
padding: 0 0 0 5px;
|
||||||
padding: 0;
|
}
|
||||||
cursor: text;
|
|
||||||
overflow: hidden;
|
.select2-locked {
|
||||||
height: auto !important;
|
padding: 3px 5px 3px 5px !important;
|
||||||
height: 1%;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi .select2-choices {
|
.select2-container-multi .select2-choices {
|
||||||
|
@ -385,107 +516,125 @@ disabled look for already selected choices in the results dropdown
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi.select2-container-active .select2-choices {
|
.select2-container-multi.select2-container-active .select2-choices {
|
||||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
|
|
||||||
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
|
||||||
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
|
||||||
box-shadow : 0 0 5px rgba(0,0,0,.3);
|
|
||||||
border: 1px solid #5897fb;
|
border: 1px solid #5897fb;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
|
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||||
}
|
}
|
||||||
.select2-container-multi .select2-choices li {
|
.select2-container-multi .select2-choices li {
|
||||||
float: left;
|
float: left;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
}
|
||||||
|
html[dir="rtl"] .select2-container-multi .select2-choices li
|
||||||
|
{
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
.select2-container-multi .select2-choices .select2-search-field {
|
.select2-container-multi .select2-choices .select2-search-field {
|
||||||
white-space: nowrap;
|
margin: 0;
|
||||||
margin: 0;
|
padding: 0;
|
||||||
padding: 0;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi .select2-choices .select2-search-field input {
|
.select2-container-multi .select2-choices .select2-search-field input {
|
||||||
color: #666;
|
padding: 5px;
|
||||||
background: transparent !important;
|
margin: 1px 0;
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 100%;
|
font-family: sans-serif;
|
||||||
height: 15px;
|
font-size: 100%;
|
||||||
padding: 5px;
|
color: #666;
|
||||||
margin: 1px 0;
|
outline: 0;
|
||||||
outline: 0;
|
border: 0;
|
||||||
border: 0;
|
-webkit-box-shadow: none;
|
||||||
-webkit-box-shadow: none;
|
box-shadow: none;
|
||||||
-moz-box-shadow : none;
|
background: transparent !important;
|
||||||
-o-box-shadow : none;
|
|
||||||
box-shadow : none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
|
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
|
||||||
background: #fff url('spinner.gif') no-repeat 100% !important;
|
background: #fff url('select2-spinner.gif') no-repeat 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-default {
|
.select2-default {
|
||||||
color: #999 !important;
|
color: #999 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi .select2-choices .select2-search-choice {
|
.select2-container-multi .select2-choices .select2-search-choice {
|
||||||
-webkit-border-radius: 3px;
|
padding: 3px 5px 3px 18px;
|
||||||
-moz-border-radius : 3px;
|
margin: 3px 0 3px 5px;
|
||||||
border-radius : 3px;
|
position: relative;
|
||||||
-moz-background-clip : padding;
|
|
||||||
-webkit-background-clip: padding-box;
|
line-height: 13px;
|
||||||
background-clip : padding-box;
|
color: #333;
|
||||||
background-color: #e4e4e4;
|
cursor: default;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
|
border: 1px solid #aaaaaa;
|
||||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
|
||||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
border-radius: 3px;
|
||||||
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
|
||||||
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
|
||||||
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
|
||||||
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
|
||||||
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
background-clip: padding-box;
|
||||||
-moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
|
||||||
box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
-webkit-touch-callout: none;
|
||||||
color: #333;
|
-webkit-user-select: none;
|
||||||
border: 1px solid #aaaaaa;
|
-moz-user-select: none;
|
||||||
line-height: 13px;
|
-ms-user-select: none;
|
||||||
padding: 3px 5px 3px 18px;
|
user-select: none;
|
||||||
margin: 3px 0 3px 5px;
|
|
||||||
position: relative;
|
background-color: #e4e4e4;
|
||||||
cursor: default;
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
|
||||||
|
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
|
||||||
|
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
|
||||||
|
background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
|
||||||
}
|
}
|
||||||
.select2-container-multi .select2-choices .select2-search-choice span {
|
html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice
|
||||||
cursor: default;
|
{
|
||||||
|
margin: 3px 5px 3px 0;
|
||||||
|
padding: 3px 18px 3px 5px;
|
||||||
|
}
|
||||||
|
.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
.select2-container-multi .select2-choices .select2-search-choice-focus {
|
.select2-container-multi .select2-choices .select2-search-choice-focus {
|
||||||
background: #d4d4d4;
|
background: #d4d4d4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-search-choice-close {
|
.select2-search-choice-close {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
width: 12px;
|
||||||
right: 3px;
|
height: 13px;
|
||||||
top: 4px;
|
position: absolute;
|
||||||
width: 12px;
|
right: 3px;
|
||||||
height: 13px;
|
top: 4px;
|
||||||
font-size: 1px;
|
|
||||||
background: url('select2.png') right top no-repeat;
|
font-size: 1px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
background: url('select2.png') right top no-repeat;
|
||||||
|
}
|
||||||
|
html[dir="rtl"] .select2-search-choice-close {
|
||||||
|
right: auto;
|
||||||
|
left: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi .select2-search-choice-close {
|
.select2-container-multi .select2-search-choice-close {
|
||||||
left: 3px;
|
left: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html[dir="rtl"] .select2-container-multi .select2-search-choice-close {
|
||||||
|
left: auto;
|
||||||
|
right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
|
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
|
||||||
background-position: right -11px;
|
background-position: right -11px;
|
||||||
}
|
}
|
||||||
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
|
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
|
||||||
background-position: right -11px;
|
background-position: right -11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* disabled styles */
|
/* disabled styles */
|
||||||
|
.select2-container-multi.select2-container-disabled .select2-choices {
|
||||||
.select2-container-multi.select2-container-disabled .select2-choices{
|
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
|
@ -493,32 +642,63 @@ disabled look for already selected choices in the results dropdown
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
|
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
|
||||||
|
padding: 3px 5px 3px 5px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 3px 5px 3px 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
|
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none;
|
||||||
display: none;
|
background: none;
|
||||||
}
|
}
|
||||||
/* end multiselect */
|
/* end multiselect */
|
||||||
|
|
||||||
.select2-result-selectable .select2-match,
|
|
||||||
.select2-result-unselectable .select2-result-selectable .select2-match { text-decoration: underline; }
|
|
||||||
.select2-result-unselectable .select2-match { text-decoration: none; }
|
|
||||||
|
|
||||||
.select2-offscreen { position: absolute; left: -10000px; }
|
.select2-result-selectable .select2-match,
|
||||||
|
.select2-result-unselectable .select2-match {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-offscreen, .select2-offscreen:focus {
|
||||||
|
clip: rect(0 0 0 0) !important;
|
||||||
|
width: 1px !important;
|
||||||
|
height: 1px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
position: absolute !important;
|
||||||
|
outline: 0 !important;
|
||||||
|
left: 0px !important;
|
||||||
|
top: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-display-none {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-measure-scrollbar {
|
||||||
|
position: absolute;
|
||||||
|
top: -10000px;
|
||||||
|
left: -10000px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
/* Retina-ize icons */
|
/* Retina-ize icons */
|
||||||
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
|
||||||
.select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b {
|
.select2-search input,
|
||||||
background-image: url(select2x2.png) !important;
|
.select2-search-choice-close,
|
||||||
background-repeat: no-repeat !important;
|
.select2-container .select2-choice abbr,
|
||||||
background-size: 60px 40px !important;
|
.select2-container .select2-choice .select2-arrow b {
|
||||||
}
|
background-image: url('select2x2.png') !important;
|
||||||
.select2-search input {
|
background-repeat: no-repeat !important;
|
||||||
background-position: 100% -21px !important;
|
background-size: 60px 40px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select2-search input {
|
||||||
|
background-position: 100% -21px !important;
|
||||||
|
}
|
||||||
}
|
}
|
File diff suppressed because one or more lines are too long
|
@ -1,16 +0,0 @@
|
||||||
CSS for making Select2 fit in with Bootstrap a bit better,
|
|
||||||
**updated for Bootstrap v3.0.0**.
|
|
||||||
|
|
||||||
http://fk.github.io/select2-bootstrap-css/
|
|
||||||
|
|
||||||
Tested with Bootstrap 3.0.0 and Select2 3.3.2, 3.4.1 and 3.4.2 and in latest Chrome, Safari, Firefox, Opera (Mac) and IE8-IE10.
|
|
||||||
|
|
||||||
Known issues:
|
|
||||||
|
|
||||||
* "Loading Remote Data" and "Infinite Scroll" not addressed yet, the loading indicator position probably needs some adjustments
|
|
||||||
* IE8/IE9/IE10, Firefox: Select2 in "Bootstrap input group with radio/checkbox addon" and .input-lg misses 1px in height (IE9/IE10, Firefox behave the same for Bootstrap 3's "input group sizing"-demo at http://getbootstrap.com/components/#input-groups-sizing)
|
|
||||||
* IE9/IE10: Select2 in "Bootstrap input group with button addon" (no height modifier, i. e. .input-sm, .input-lg) also misses 1px in height (bug _not_ inherited from Bootstrap 3)
|
|
||||||
* box-shadow for .select2-search input do not fit Bootstrap's defaults
|
|
||||||
* the Select2 dropdown could inherit look-and-feel from Bootstrap dropdowns and/or could honor Bootstrap height sizing classes
|
|
||||||
* border-radii for opened Select2 dropdowns could consistently be set to be … round ;-)
|
|
||||||
* checkboxes and radio-buttons in "Bootstrap input groups" could be vertically aligned to the top (instead of center) if combined with a multi Select2 to address variable height of the Select2 container
|
|
|
@ -1,420 +1,90 @@
|
||||||
/**
|
/*
|
||||||
* Select2 Bootstrap CSS
|
Version: 3.5.1 Timestamp: Tue Jul 22 18:58:56 EDT 2014
|
||||||
* Compatible with Select2 3.3.2, 3.4.1, 3.4.2 and Twitter Bootstrap 3.0.0
|
*/
|
||||||
* MIT License
|
.form-control .select2-choice {
|
||||||
*/
|
border: 0;
|
||||||
/**
|
border-radius: 2px;
|
||||||
* Reset Bootstrap 3 .form-control styles which - if applied to the
|
|
||||||
* original <select>-element the Select2-plugin may be run against -
|
|
||||||
* are copied to the .select2-container.
|
|
||||||
*/
|
|
||||||
.select2-container.form-control {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
.form-control .select2-choice .select2-arrow {
|
||||||
* Adjust Select2 inputs to fit Bootstrap 3 default .form-control appearance.
|
border-radius: 0 2px 2px 0;
|
||||||
*/
|
|
||||||
.select2-container .select2-choices .select2-search-field input,
|
|
||||||
.select2-container .select2-choice,
|
|
||||||
.select2-container .select2-choices {
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
border-color: #cccccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #555555;
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
background-color: white;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-search input {
|
.form-control.select2-container {
|
||||||
border-color: #cccccc;
|
height: auto !important;
|
||||||
border-radius: 4px;
|
padding: 0;
|
||||||
color: #555555;
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
background-color: white;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container .select2-choices .select2-search-field input {
|
.form-control.select2-container.select2-dropdown-open {
|
||||||
-webkit-box-shadow: none;
|
border-color: #5897FB;
|
||||||
box-shadow: none;
|
border-radius: 3px 3px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
.form-control .select2-container.select2-dropdown-open .select2-choices {
|
||||||
* Adjust Select2 input heights to match the Bootstrap default.
|
border-radius: 3px 3px 0 0;
|
||||||
*/
|
|
||||||
.select2-container .select2-choice {
|
|
||||||
height: 34px;
|
|
||||||
line-height: 1.42857;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
.form-control.select2-container .select2-choices {
|
||||||
* Address Multi Select2's height which - depending on how many elements have been selected -
|
border: 0 !important;
|
||||||
* may grown higher than their initial size.
|
border-radius: 3px;
|
||||||
*/
|
|
||||||
.select2-container.select2-container-multi.form-control {
|
|
||||||
height: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
.control-group.warning .select2-container .select2-choice,
|
||||||
* Address Bootstrap 3 control sizing classes
|
.control-group.warning .select2-container .select2-choices,
|
||||||
* @see http://getbootstrap.com/css/#forms-control-sizes
|
.control-group.warning .select2-container-active .select2-choice,
|
||||||
*/
|
.control-group.warning .select2-container-active .select2-choices,
|
||||||
.select2-container.input-sm .select2-choice,
|
.control-group.warning .select2-dropdown-open.select2-drop-above .select2-choice,
|
||||||
.input-group-sm .select2-container .select2-choice {
|
.control-group.warning .select2-dropdown-open.select2-drop-above .select2-choices,
|
||||||
height: 30px;
|
.control-group.warning .select2-container-multi.select2-container-active .select2-choices {
|
||||||
line-height: 1.5;
|
border: 1px solid #C09853 !important;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container.input-lg .select2-choice,
|
.control-group.warning .select2-container .select2-choice div {
|
||||||
.input-group-lg .select2-container .select2-choice {
|
border-left: 1px solid #C09853 !important;
|
||||||
height: 45px;
|
background: #FCF8E3 !important;
|
||||||
line-height: 1.33;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi .select2-choices .select2-search-field input {
|
.control-group.error .select2-container .select2-choice,
|
||||||
height: 32px;
|
.control-group.error .select2-container .select2-choices,
|
||||||
|
.control-group.error .select2-container-active .select2-choice,
|
||||||
|
.control-group.error .select2-container-active .select2-choices,
|
||||||
|
.control-group.error .select2-dropdown-open.select2-drop-above .select2-choice,
|
||||||
|
.control-group.error .select2-dropdown-open.select2-drop-above .select2-choices,
|
||||||
|
.control-group.error .select2-container-multi.select2-container-active .select2-choices {
|
||||||
|
border: 1px solid #B94A48 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi.input-sm .select2-choices .select2-search-field input,
|
.control-group.error .select2-container .select2-choice div {
|
||||||
.input-group-sm .select2-container-multi .select2-choices .select2-search-field input {
|
border-left: 1px solid #B94A48 !important;
|
||||||
height: 28px;
|
background: #F2DEDE !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container-multi.input-lg .select2-choices .select2-search-field input,
|
.control-group.info .select2-container .select2-choice,
|
||||||
.input-group-lg .select2-container-multi .select2-choices .select2-search-field input {
|
.control-group.info .select2-container .select2-choices,
|
||||||
height: 43px;
|
.control-group.info .select2-container-active .select2-choice,
|
||||||
|
.control-group.info .select2-container-active .select2-choices,
|
||||||
|
.control-group.info .select2-dropdown-open.select2-drop-above .select2-choice,
|
||||||
|
.control-group.info .select2-dropdown-open.select2-drop-above .select2-choices,
|
||||||
|
.control-group.info .select2-container-multi.select2-container-active .select2-choices {
|
||||||
|
border: 1px solid #3A87AD !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
.control-group.info .select2-container .select2-choice div {
|
||||||
* Adjust height and line-height for .select2-search-field amd multi-select Select2 widgets.
|
border-left: 1px solid #3A87AD !important;
|
||||||
*
|
background: #D9EDF7 !important;
|
||||||
* 1. Class repetition to address missing .select2-chosen in Select2 < 3.3.2.
|
|
||||||
*/
|
|
||||||
.select2-container-multi .select2-choices .select2-search-field input {
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-chosen,
|
.control-group.success .select2-container .select2-choice,
|
||||||
.select2-choice > span:first-child,
|
.control-group.success .select2-container .select2-choices,
|
||||||
.select2-container .select2-choices .select2-search-field input {
|
.control-group.success .select2-container-active .select2-choice,
|
||||||
padding: 6px 12px;
|
.control-group.success .select2-container-active .select2-choices,
|
||||||
|
.control-group.success .select2-dropdown-open.select2-drop-above .select2-choice,
|
||||||
|
.control-group.success .select2-dropdown-open.select2-drop-above .select2-choices,
|
||||||
|
.control-group.success .select2-container-multi.select2-container-active .select2-choices {
|
||||||
|
border: 1px solid #468847 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-sm .select2-chosen,
|
.control-group.success .select2-container .select2-choice div {
|
||||||
.input-group-sm .select2-chosen,
|
border-left: 1px solid #468847 !important;
|
||||||
.input-sm .select2-choice > span:first-child,
|
background: #DFF0D8 !important;
|
||||||
.input-group-sm .select2-choice > span:first-child,
|
}
|
||||||
.input-sm .select2-choices .select2-search-field input,
|
|
||||||
.input-group-sm .select2-choices .select2-search-field input {
|
|
||||||
padding: 5px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-lg .select2-chosen,
|
|
||||||
.input-group-lg .select2-chosen,
|
|
||||||
.input-lg .select2-choice > span:first-child,
|
|
||||||
.input-group-lg .select2-choice > span:first-child,
|
|
||||||
.input-lg .select2-choices .select2-search-field input,
|
|
||||||
.input-group-lg .select2-choices .select2-search-field input {
|
|
||||||
padding: 10px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-container-multi .select2-choices .select2-search-choice {
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-container-multi.input-sm .select2-choices .select2-search-choice,
|
|
||||||
.input-group-sm .select2-container-multi .select2-choices .select2-search-choice {
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-container-multi.input-lg .select2-choices .select2-search-choice,
|
|
||||||
.input-group-lg .select2-container-multi .select2-choices .select2-search-choice {
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adjust the single Select2's dropdown arrow button appearance.
|
|
||||||
*
|
|
||||||
* 1. For Select2 v.3.3.2.
|
|
||||||
*/
|
|
||||||
.select2-container .select2-choice .select2-arrow,
|
|
||||||
.select2-container .select2-choice div {
|
|
||||||
border-left: 1px solid #cccccc;
|
|
||||||
background: none;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-dropdown-open .select2-choice .select2-arrow,
|
|
||||||
.select2-dropdown-open .select2-choice div {
|
|
||||||
border-left-color: transparent;
|
|
||||||
background: none;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adjust the dropdown arrow button icon position for the single-select Select2 elements
|
|
||||||
* to make it line up vertically now that we increased the height of .select2-container.
|
|
||||||
*
|
|
||||||
* 1. Class repetition to address missing .select2-chosen in Select2 v.3.3.2.
|
|
||||||
*/
|
|
||||||
.select2-container .select2-choice .select2-arrow b,
|
|
||||||
.select2-container .select2-choice div b {
|
|
||||||
background-position: 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-dropdown-open .select2-choice .select2-arrow b,
|
|
||||||
.select2-dropdown-open .select2-choice div b {
|
|
||||||
background-position: -18px 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-container.input-sm .select2-choice .select2-arrow b,
|
|
||||||
.input-group-sm .select2-container .select2-choice .select2-arrow b,
|
|
||||||
.select2-container.input-sm .select2-choice div b,
|
|
||||||
.input-group-sm .select2-container .select2-choice div b {
|
|
||||||
background-position: 0 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-dropdown-open.input-sm .select2-choice .select2-arrow b,
|
|
||||||
.input-group-sm .select2-dropdown-open .select2-choice .select2-arrow b,
|
|
||||||
.select2-dropdown-open.input-sm .select2-choice div b,
|
|
||||||
.input-group-sm .select2-dropdown-open .select2-choice div b {
|
|
||||||
background-position: -18px 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-container.input-lg .select2-choice .select2-arrow b,
|
|
||||||
.input-group-lg .select2-container .select2-choice .select2-arrow b,
|
|
||||||
.select2-container.input-lg .select2-choice div b,
|
|
||||||
.input-group-lg .select2-container .select2-choice div b {
|
|
||||||
background-position: 0 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-dropdown-open.input-lg .select2-choice .select2-arrow b,
|
|
||||||
.input-group-lg .select2-dropdown-open .select2-choice .select2-arrow b,
|
|
||||||
.select2-dropdown-open.input-lg .select2-choice div b,
|
|
||||||
.input-group-lg .select2-dropdown-open .select2-choice div b {
|
|
||||||
background-position: -18px 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address Bootstrap's validation states and change Select2's border colors and focus states.
|
|
||||||
* Apply .has-warning, .has-danger or .has-succes to #select2-drop to match Bootstraps' colors.
|
|
||||||
*/
|
|
||||||
.has-warning .select2-choice,
|
|
||||||
.has-warning .select2-choices {
|
|
||||||
border-color: #c09853;
|
|
||||||
}
|
|
||||||
.has-warning .select2-container-active .select2-choice,
|
|
||||||
.has-warning .select2-container-multi.select2-container-active .select2-choices {
|
|
||||||
border-color: #a47e3c;
|
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
|
||||||
}
|
|
||||||
.has-warning.select2-drop-active {
|
|
||||||
border-color: #a47e3c;
|
|
||||||
}
|
|
||||||
.has-warning.select2-drop-active.select2-drop.select2-drop-above {
|
|
||||||
border-top-color: #a47e3c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-error .select2-choice,
|
|
||||||
.has-error .select2-choices {
|
|
||||||
border-color: #b94a48;
|
|
||||||
}
|
|
||||||
.has-error .select2-container-active .select2-choice,
|
|
||||||
.has-error .select2-container-multi.select2-container-active .select2-choices {
|
|
||||||
border-color: #953b39;
|
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
|
||||||
}
|
|
||||||
.has-error.select2-drop-active {
|
|
||||||
border-color: #953b39;
|
|
||||||
}
|
|
||||||
.has-error.select2-drop-active.select2-drop.select2-drop-above {
|
|
||||||
border-top-color: #953b39;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-success .select2-choice,
|
|
||||||
.has-success .select2-choices {
|
|
||||||
border-color: #468847;
|
|
||||||
}
|
|
||||||
.has-success .select2-container-active .select2-choice,
|
|
||||||
.has-success .select2-container-multi.select2-container-active .select2-choices {
|
|
||||||
border-color: #356635;
|
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
|
||||||
}
|
|
||||||
.has-success.select2-drop-active {
|
|
||||||
border-color: #356635;
|
|
||||||
}
|
|
||||||
.has-success.select2-drop-active.select2-drop.select2-drop-above {
|
|
||||||
border-top-color: #356635;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Make Select2's active-styles - applied to .select2-container when the widget receives focus -
|
|
||||||
* fit Bootstrap 3's .form-element:focus appearance.
|
|
||||||
*/
|
|
||||||
.select2-container-active .select2-choice,
|
|
||||||
.select2-container-multi.select2-container-active .select2-choices {
|
|
||||||
border-color: #66afe9;
|
|
||||||
outline: none;
|
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
|
||||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
|
||||||
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
|
||||||
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-drop-active {
|
|
||||||
border-color: #66afe9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-drop-auto-width,
|
|
||||||
.select2-drop.select2-drop-above.select2-drop-active {
|
|
||||||
border-top-color: #66afe9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Select2 widgets in Bootstrap Input Groups
|
|
||||||
*
|
|
||||||
* When Select2 widgets are combined with other elements using Bootstrap 3's
|
|
||||||
* "Input Group" component, we don't want specific edges of the Select2 container
|
|
||||||
* to have a border-radius.
|
|
||||||
*
|
|
||||||
* In Bootstrap 2, input groups required a markup where these style adjustments
|
|
||||||
* could be bound to a CSS-class identifying if the additional elements are appended,
|
|
||||||
* prepended or both.
|
|
||||||
*
|
|
||||||
* Bootstrap 3 doesn't rely on these classes anymore, so we have to use our own.
|
|
||||||
* Use .select2-bootstrap-prepend and .select2-bootstrap-append on a Bootstrap 3 .input-group
|
|
||||||
* to let the contained Select2 widget know which edges should not be rounded as they are
|
|
||||||
* directly followed by another element.
|
|
||||||
*
|
|
||||||
* @see http://getbootstrap.com/components/#input-groups
|
|
||||||
*/
|
|
||||||
.input-group.select2-bootstrap-prepend [class^="select2-choice"] {
|
|
||||||
border-bottom-left-radius: 0 !important;
|
|
||||||
border-top-left-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group.select2-bootstrap-append [class^="select2-choice"] {
|
|
||||||
border-bottom-right-radius: 0 !important;
|
|
||||||
border-top-right-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-dropdown-open [class^="select2-choice"] {
|
|
||||||
border-bottom-right-radius: 0 !important;
|
|
||||||
border-bottom-left-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
|
|
||||||
border-top-right-radius: 0 !important;
|
|
||||||
border-top-left-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adjust Select2's choices hover and selected styles to match Bootstrap 3's default dropdown styles.
|
|
||||||
*/
|
|
||||||
.select2-results .select2-highlighted {
|
|
||||||
color: white;
|
|
||||||
background-color: #428bca;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adjust alignment of Bootstrap 3 buttons in Bootstrap 3 Input Groups to address
|
|
||||||
* Multi Select2's height which - depending on how many elements have been selected -
|
|
||||||
* may grown higher than their initial size.
|
|
||||||
*/
|
|
||||||
.select2-bootstrap-append .select2-container-multiple,
|
|
||||||
.select2-bootstrap-append .input-group-btn,
|
|
||||||
.select2-bootstrap-append .input-group-btn .btn,
|
|
||||||
.select2-bootstrap-prepend .select2-container-multiple,
|
|
||||||
.select2-bootstrap-prepend .input-group-btn,
|
|
||||||
.select2-bootstrap-prepend .input-group-btn .btn {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Make Multi Select2's choices match Bootstrap 3's default button styles.
|
|
||||||
*/
|
|
||||||
.select2-container-multi .select2-choices .select2-search-choice {
|
|
||||||
color: #555555;
|
|
||||||
background: white;
|
|
||||||
border-color: #cccccc;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select2-container-multi .select2-choices .select2-search-choice-focus {
|
|
||||||
background: #ebebeb;
|
|
||||||
border-color: #adadad;
|
|
||||||
color: #333333;
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address Multi Select2's choice close-button vertical alignment.
|
|
||||||
*/
|
|
||||||
.select2-search-choice-close {
|
|
||||||
margin-top: -7px;
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adjust the single Select2's clear button position (used to reset the select box
|
|
||||||
* back to the placeholder value and visible once a selection is made
|
|
||||||
* activated by Select2's "allowClear" option).
|
|
||||||
*/
|
|
||||||
.select2-container .select2-choice abbr {
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adjust "no results" and "selection limit" messages to make use
|
|
||||||
* of Bootstrap 3's default "Alert" style.
|
|
||||||
*
|
|
||||||
* @see http://getbootstrap.com/components/#alerts-default
|
|
||||||
*/
|
|
||||||
.select2-results .select2-no-results,
|
|
||||||
.select2-results .select2-searching,
|
|
||||||
.select2-results .select2-selection-limit {
|
|
||||||
background-color: #fcf8e3;
|
|
||||||
color: #c09853;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address disabled Select2 styles.
|
|
||||||
*
|
|
||||||
* 1. For Select2 v.3.3.2.
|
|
||||||
* 2. Revert border-left:0 inherited from Select2's CSS to prevent the arrow
|
|
||||||
* from jumping when switching from disabled to enabled state and vice versa.
|
|
||||||
*/
|
|
||||||
.select2-container.select2-container-disabled .select2-choice,
|
|
||||||
.select2-container.select2-container-disabled .select2-choices {
|
|
||||||
cursor: not-allowed;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
border-color: #cccccc;
|
|
||||||
}
|
|
||||||
.select2-container.select2-container-disabled .select2-choice .select2-arrow,
|
|
||||||
.select2-container.select2-container-disabled .select2-choice div,
|
|
||||||
.select2-container.select2-container-disabled .select2-choices .select2-arrow,
|
|
||||||
.select2-container.select2-container-disabled .select2-choices div {
|
|
||||||
background-color: transparent;
|
|
||||||
border-left: 1px solid transparent;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
Loading…
Reference in New Issue