RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 04:56:08 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5033 from select2/docs-redirect

Browse Source 
Replace docs with a redirect
This commit is contained in:
Alex Weissman 2017-09-10 18:04:00 -04:00 committed by GitHub
commit 88b84f7474
255 changed files with 76 additions and 17553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -6,7 +6,7 @@ Select2 is a jQuery-based replacement for select boxes. It supports searching,
remote data sets, and pagination of results.
To get started, checkout examples and documentation at
https://select2.github.io/
https://select2.org/
Use cases
---------
@ -89,8 +89,8 @@ Copyright and license
The license is available within the repository in the [LICENSE][license] file.
[cdnjs]: http://www.cdnjs.com/libraries/select2
[community]: https://select2.github.io/community.html
[documentation]: https://select2.github.io/
[community]: https://select2.org/getting-help
[documentation]: https://select2.org
[documentation-folder]: https://github.com/select2/select2/tree/master/docs
[freenode]: https://freenode.net/
[jsdelivr]: http://www.jsdelivr.com/#!select2

2
docs/.gitignore vendored
View File

@ -1,2 +0,0 @@
_site
dist

68
docs/README.md
View File

@ -1,67 +1 @@
Select2 Documentation
=====================
[This repository][select2-docs-source] holds the latest documentation for
[Select2][select2].
What is this?
-------------
The documentation is automatically extracted from the `docs` directory at the
[Select2 source repository][select2-source]. This is done periodically by
the maintainers of Select2.
How can I fix an issue in these docs?
-------------------------------------
If you are reading this from the source repository, within the `docs` directory,
then you're already in the right place. You can fork the source repository,
commit your changes, and then make a pull request and it will be reviewed.
**If you are reading this from the
[documentation repository][select2-docs-source], you are in the wrong place.**
Pull requests made directly to the documentation repository will be ignored and
eventually closed, so don't do that.
How can I build these docs manually?
------------------------------------
### Requirements
##### Ruby and Jekyll
Jekyll is a static site builder written in Ruby. You will need **the latest version** of [Jekyll][jekyll] installed to build the Select2 documentation.
First, [make sure that you have a Ruby environment set up][jekyll-quickstart]. Then, to install Jekyll:
`gem install jekyll bundler`
To upgrade Jekyll:
`gem update jekyll`
##### npm and Grunt
Select2 uses [Grunt][grunt], which is an npm package, as a task runner. To run the build task, you will need to first [install the latest version of npm and Node.js][nodejs] as well as the [Grunt CLI][grunt-cli].
### Building the docs with Grunt
This assumes that you have already cloned the Select2 repo to your local development environment. In the [main Select2 repository][select2-source], you will first need to install the npm dependencies locally:
```
npm install
```
Then, you can build and launch the documentation by running
```bash
grunt docs
```
This will start up the documentation on port 4000 ([http://localhost:4000](http://localhost:4000)).
[jekyll]: http://jekyllrb.com/
[jekyll-quickstart]: https://jekyllrb.com/docs/quickstart/
[grunt]: https://gruntjs.com
[grunt-cli]: https://gruntjs.com/getting-started
[nodejs]: https://nodejs.org/en/download/
[select2]: https://select2.github.io
[select2-docs-source]: https://github.com/select2/select2.github.io
[select2-source]: https://github.com/select2/select2
Effective beginning September 10, 2017, the Select2 documentation repository is now available at [`select2/docs`](https://github.com/select2/docs).

97
docs/_includes/examples/basics.html
View File

@ -1,97 +0,0 @@
<section>
<h1 id="basics" class="page-header">The basics</h1>
<h2 id="single">Single select boxes</h2>
<p>
Select2 can take a regular select box like this...
</p>
<p>
<select class="js-states form-control"></select>
</p>
<p>
and turn it into this...
</p>
<div class="s2-example">
<p>
<select class="js-example-basic-single js-states form-control"></select>
</p>
</div>
{% highlight html linenos %}
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
{% endhighlight %}
<h2 id="multiple">Multiple select boxes</h2>
<p>
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
</p>
<div class="s2-example">
<p>
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
</p>
</div>
{% highlight html linenos %}
<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
{% endhighlight %}
<h2>Select boxes with labels</h2>
<p>
You can, and should, use a <code>&lt;label&gt;</code> with Select2, just like any other <code>&lt;select&gt</code> element.
</p>
<div class="s2-example">
<p>
<label for="id_label_single">
Click this to focus the single select element
<select class="js-example-basic-single js-states form-control" id="id_label_single"></select>
</label>
</p>
<p>
<label for="id_label_multiple">
Click this to focus the multiple select element
<select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple"></select>
</label>
</p>
</div>
{% highlight html linenos %}
<label for="id_label_single">
Click this to highlight the single select element
<select class="js-example-basic-single js-states form-control" id="id_label_single"></select>
</label>
<label for="id_label_multiple">
Click this to highlight the multiple select element
<select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple"></select>
</label>
{% endhighlight %}
</section>

123
docs/_includes/examples/data.html
View File

@ -1,123 +0,0 @@
<section>
<h1 id="data" class="page-header">
Data sources
</h1>
<p>In addition to handling options from a standard <code>&lt;select&gt;</code>, Select2 can also retrieve the results from other data sources.</p>
<h2 id="data-array" >Loading array data</h2>
<p>
Select2 provides a way to load the data from a local array.
You can provide initial selections with array data by providing the
option tag for the selected values, similar to how it would be done for
a standard select.
</p>
<div class="s2-example">
<p>
<select class="js-example-data-array form-control"></select>
</p>
<p>
<select class="js-example-data-array-selected form-control">
<option value="2" selected="selected">duplicate</option>
</select>
</p>
</div>
{% highlight html linenos %}
<script type="text/javascript">
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({
data: data
})
$(".js-example-data-array-selected").select2({
data: data
})
</script>
<select class="js-example-data-array"></select>
<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select>
{% endhighlight %}
<h2 id="data-ajax" >Loading remote data</h2>
<p>
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
In this example, we can search for repositories using GitHub's API.
</p>
<p>
<select class="js-example-data-ajax form-control">
<option value="3620194" selected="selected">select2/select2</option>
</select>
</p>
<p>
When using Select2 with remote data, the HTML required for the
<code>select</code> is the same as any other Select2. If you need to
provide default selections, you just need to include an
<code>option</code> for each selection that contains the value and text
that should be displayed.
</p>
{% highlight html linenos %}
<select class="js-data-example-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>
{% endhighlight %}
<p>
You can configure how Select2 searches for remote data using the
<code>ajax</code> option. More information on the individual options
that Select2 handles can be found in the
<a href="options.html#ajax">options documentation for <code>ajax</code></a>.
</p>
{% highlight js linenos %}
$(".js-data-example-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
{% endhighlight %}
<p>
Select2 will pass any options in the <code>ajax</code> object to
jQuery's <code>$.ajax</code> function, or the <code>transport</code>
function you specify.
</p>
</section>

43
docs/_includes/examples/disabled-mode.html
View File

@ -1,43 +0,0 @@
<section>
<h1 id="disabled">Disabled mode</h1>
<p>
Select2 will respond to the <code>disabled</code> attribute on
<code>&lt;select&gt;</code> elements. You can also initialize Select2
with <code>disabled: true</code> to get the same effect.
</p>
<div class="s2-example">
<p>
<select class="js-example-disabled js-states form-control" disabled="disabled"></select>
</p>
<p>
<select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
</p>
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic enabling and disabling">
<button type="button" class="js-programmatic-enable btn btn-default">
Enable
</button>
<button type="button" class="js-programmatic-disable btn btn-default">
Disable
</button>
</div>
</div>
<pre data-fill-from=".js-code-disabled"></pre>
<script type="text/javascript" class="js-code-disabled">
$(".js-programmatic-enable").on("click", function () {
$(".js-example-disabled").prop("disabled", false);
$(".js-example-disabled-multi").prop("disabled", false);
});
$(".js-programmatic-disable").on("click", function () {
$(".js-example-disabled").prop("disabled", true);
$(".js-example-disabled-multi").prop("disabled", true);
});
</script>
</section>

29
docs/_includes/examples/disabled-results.html
View File

@ -1,29 +0,0 @@
<section>
<h1 id="disabled-results">Disabled results</h1>
<p>
Select2 will correctly handle disabled results, both with data coming
from a standard select (when the <code>disabled</code> attribute is set)
and from remote sources, where the object has
<code>disabled: true</code> set.
</p>
<div class="s2-example">
<p>
<select class="js-example-disabled-results form-control">
<option value="one">First</option>
<option value="two" disabled="disabled">Second (disabled)</option>
<option value="three">Third</option>
</select>
</p>
</div>
{% highlight html linenos %}
<select class="js-example-disabled-results">
<option value="one">First</option>
<option value="two" disabled="disabled">Second (disabled)</option>
<option value="three">Third</option>
</select>
{% endhighlight %}
</section>

22
docs/_includes/examples/hide-search.html
View File

@ -1,22 +0,0 @@
<section>
<h1 id="hide-search">Hiding the search box</h1>
<p>
Select2 allows you to hide the search box depending on the number of
options which are displayed. In this example, we use the value
<code>Infinity</code> to tell Select2 to never display the search box.
</p>
<div class="s2-example">
<p>
<select class="js-example-basic-hide-search js-states form-control"></select>
</p>
</div>
{% highlight js linenos %}
$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});
{% endhighlight %}
</section>

82
docs/_includes/examples/localization-rtl-diacritics.html
View File

@ -1,82 +0,0 @@
<section>
<h1 id="localization-rtl-diacritics" class="page-header">
Localization, RTL and diacritics support
</h1>
<h2 id="language">Multiple languages</h2>
<p>
Select2 supports displaying the messages in different languages, as well
as providing your own
<a href="options.html#language">custom messages</a>
that can be displayed.
</p>
<p>
The language does not have to be defined when Select2 is being
initialized, but instead can be defined in the <code>[lang]</code>
attribute of any parent elements as <code>[lang="es"]</code>.
</p>
<div class="s2-example">
<p>
<select class="js-example-language js-states form-control">
</select>
</p>
</div>
{% highlight js linenos %}
$(".js-example-language").select2({
language: "es"
});
{% endhighlight %}
<h2 id="rtl">RTL support</h2>
<p>
Select2 will work on RTL websites if the <code>dir</code> attribute is
set on the <code>&lt;select&gt;</code> or any parents of it. You can also
initialize Select2 with <code>dir: "rtl"</code> set.
</p>
<div class="s2-example">
<p>
<select class="js-example-rtl js-states form-control" dir="rtl"></select>
</p>
</div>
{% highlight js linenos %}
$(".js-example-rtl").select2({
dir: "rtl"
});
{% endhighlight %}
<h2 id="diacritics">Diacritics support</h2>
<p>
Select2's default matcher will ignore diacritics, making it easier for
users to filter results in international selects. Type "aero" into the
select below.
</p>
<div class="s2-example">
<p>
<select class="js-example-diacritics form-control">
<option>Aeróbics</option>
<option>Aeróbics en Agua</option>
<option>Aerografía</option>
<option>Aeromodelaje</option>
<option>Águilas</option>
<option>Ajedrez</option>
<option>Ala Delta</option>
<option>Álbumes de Música</option>
<option>Alusivos</option>
<option>Análisis de Escritura a Mano</option>
</select>
</p>
</div>
{% highlight js linenos %}
$(".js-example-diacritics").select2();
{% endhighlight %}
</section>

39
docs/_includes/examples/matcher.html
View File

@ -1,39 +0,0 @@
<section>
<h1 id="matcher">Customizing how results are matched</h1>
<p>
Unlike other dropdowns on this page, this one matches options only if
the term appears in the beginning of the string as opposed to anywhere:
</p>
<p>
This custom matcher uses a
<a href="options.html#compat-matcher">compatibility module</a> that is
only bundled in the
<a href="index.html#builds-full">full version of Select2</a>. You also
have the option of using a
<a href="options.html#matcher">more complex matcher</a>.
</p>
<div class="s2-example">
<p>
<select class="js-example-matcher-start js-states form-control"></select>
</p>
</div>
{% highlight js linenos %}
function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true;
}
return false;
}
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
$(".js-example-matcher-start").select2({
matcher: oldMatcher(matchStart)
})
});
{% endhighlight %}
</section>

24
docs/_includes/examples/multiple-max.html
View File

@ -1,24 +0,0 @@
<section>
<h1 id="multiple-max">
Limiting the number of selections
</h1>
<p>
Select2 multi-value select boxes can set restrictions regarding the
maximum number of options selected. The select below is declared with
the <code>multiple</code> attribute with <code>maximumSelectionLength</code>
in the select2 options.
</p>
<div class="s2-example">
<p>
<select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select>
</p>
</div>
{% highlight js linenos %}
$(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 2
});
{% endhighlight %}
</section>

36
docs/_includes/examples/placeholders.html
View File

@ -1,36 +0,0 @@
<section>
<h1 id="placeholders">Placeholders</h1>
<p>
A placeholder value can be defined and will be displayed until a
selection is made. Select2 uses the <code>placeholder</code> attribute
on multiple select boxes, which requires IE 10+. You can support it in
older versions with
<a href="https://github.com/jamesallardice/Placeholders.js">the Placeholders.js polyfill</a>.
</p>
<div class="s2-example">
<p>
<select class="js-example-placeholder-single js-states form-control">
<option></option>
</select>
</p>
<p>
<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
</p>
</div>
<pre data-fill-from=".js-code-placeholder"></pre>
<script type="text/javascript" class="js-code-placeholder">
$(".js-example-placeholder-single").select2({
placeholder: "Select a state",
allowClear: true
});
$(".js-example-placeholder-multiple").select2({
placeholder: "Select a state"
});
</script>
</section>

155
docs/_includes/examples/programmatic-control.html
View File

@ -1,155 +0,0 @@
<section>
<h1 id="programmatic-control" class="page-header">
Programmatic control
</h1>
<h2 id="events">DOM events</h2>
<p>
Select2 will trigger some events on the original select element,
allowing you to integrate it with other components. You can find more
information on events
<a href="options.html#events">on the options page</a>.
</p>
<p>
<code>change</code> is fired whenever an option is selected or removed.
</p>
<p>
<code>select2:open</code> is fired whenever the dropdown is opened.
<code>select2:opening</code> is fired before this and can be prevented.
</p>
<p>
<code>select2:close</code> is fired whenever the dropdown is closed.
<code>select2:closing</code> is fired before this and can be prevented.
</p>
<p>
<code>select2:select</code> is fired whenever a result is selected.
<code>select2:selecting</code> is fired before this and can be prevented.
</p>
<p>
<code>select2:unselect</code> is fired whenever a result is unselected.
<code>select2:unselecting</code> is fired before this and can be prevented.
</p>
<div class="s2-example">
<p>
<select class="js-states js-example-events form-control"></select>
</p>
<p>
<select class="js-states js-example-events form-control" multiple="multiple"></select>
</p>
</div>
<div class="s2-event-log">
<ul class="js-event-log"></ul>
</div>
<pre data-fill-from=".js-code-events"></pre>
<script type="text/javascript" class="js-code-events">
var $eventLog = $(".js-event-log");
var $eventSelect = $(".js-example-events");
$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
$eventSelect.on("select2:select", function (e) { log("select2:select", e); });
$eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); });
$eventSelect.on("change", function (e) { log("change"); });
function log (name, evt) {
if (!evt) {
var args = "{}";
} else {
var args = JSON.stringify(evt.params, function (key, value) {
if (value && value.nodeName) return "[DOM node]";
if (value instanceof $.Event) return "[$.Event]";
return value;
});
}
var $e = $("<li>" + name + " -> " + args + "</li>");
$eventLog.append($e);
$e.animate({ opacity: 1 }, 10000, 'linear', function () {
$e.animate({ opacity: 0 }, 2000, 'linear', function () {
$e.remove();
});
});
}
</script>
<h2 id="programmatic">Programmatic access</h2>
<p>
Select2 supports methods that allow programmatic control of the
component.
</p>
<div class="s2-example">
<p>
<select class="js-example-programmatic js-states form-control"></select>
</p>
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
<div class="btn-group btn-group-sm" aria-label="Set Select2 option">
<button class="js-programmatic-set-val btn btn-default">
Set "California"
</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
<button class="js-programmatic-open btn btn-default">
Open
</button>
<button class="js-programmatic-close btn btn-default">
Close
</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
<button class="js-programmatic-init btn btn-default">
Init
</button>
<button class="js-programmatic-destroy btn btn-default">
Destroy
</button>
</div>
</div>
<p>
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
</p>
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic setting and clearing Select2 options">
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
Set to California and Alabama
</button>
<button type="button" class="js-programmatic-multi-clear btn btn-default">
Clear
</button>
</div>
</div>
<pre data-fill-from=".js-code-programmatic"></pre>
<script type="text/javascript" class="js-code-programmatic">
var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
</script>
</section>

47
docs/_includes/examples/tags.html
View File

@ -1,47 +0,0 @@
<section>
<h1 id="tags">Tagging support</h1>
<p>
In addition to the dropdown menu of options, Select2 can also allow free-text responses. This feature is called "tagging". To enable free-text responses, set the <code>tags</code> option to <code>true</code>:
</p>
<div class="s2-example">
<p>
<select class="js-example-tags form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
</p>
</div>
{% highlight js linenos %}
$(".js-example-tags").select2({
tags: true
})
{% endhighlight %}
<p>
Note that when tagging is enabled the user can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far.
</p>
<h2>Tagging with multi-value select boxes</h2>
<p>
Tagging can also be used in multi-value select boxes. In the example below, we set the <code>multiple="multiple"</code> attribute on a Select2 control that also has <code>tags: true</code> enabled:
</p>
<div class="s2-example">
<p>
<select class="js-example-tags form-control" multiple="multiple">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
</p>
</div>
<p>
Try entering a value that isn't listed in the dropdown - you'll be able to add it as a new option!
</p>
</section>

105
docs/_includes/examples/themes-templating-responsive-design.html
View File

@ -1,105 +0,0 @@
<section>
<h1 id="themes-templating-responsive-design" class="page-header">
Themes, templating and responsive design
</h1>
<h2 id="themes">Theme support</h2>
<p>
Select2 supports custom themes using the
<a href="options.html#theme">theme option</a>
so you can style Select2 to match the rest of your application.
</p>
<p>
These are using the <code>classic</code> theme, which matches the old
look of Select2.
</p>
<div class="s2-example">
<p>
<select class="js-example-theme-single js-states form-control">
</select>
</p>
<p>
<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
</p>
</div>
{% highlight js linenos %}
$(".js-example-theme-single").select2({
theme: "classic"
});
$(".js-example-theme-multiple").select2({
theme: "classic"
});
{% endhighlight %}
<h2 id="templating">Templating</h2>
<p>
Various display options of the Select2 component can be changed:
You can access the <code>&lt;option&gt;</code> element
(or <code>&lt;optgroup&gt;</code>) and any attributes on those elements
using <code>.element</code>.
</p>
<p>
Templating is primarily controlled by the
<a href="options.html#templateResult"><code>templateResult</code></a>
and <a href="options.html#templateSelection"><code>templateSelection</code></a>
options.
</p>
<div class="s2-example">
<p>
<select class="js-example-templating js-states form-control"></select>
</p>
</div>
{% highlight js linenos %}
function formatState (state) {
if (!state.id) { return state.text; }
var $state = $(
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
$(".js-example-templating").select2({
templateResult: formatState,
templateSelection: formatState
});
{% endhighlight %}
<h2 id="responsive">Responsive design - Percent width</h2>
<p>
Select2's width can be set to a percentage of its parent to support
responsive design. The two Select2 boxes below are styled to 50% and 75%
width respectively.
</p>
<div class="s2-example">
<p>
<select class="js-example-responsive js-states" style="width: 50%"></select>
</p>
<p>
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
</p>
</div>
{% highlight html linenos %}
<select class="js-example-responsive" style="width: 50%"></select>
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
{% endhighlight %}
<div class="alert alert-warning">
Select2 will do its best to resolve the percent width specified via a
CSS class, but it is not always possible. The best way to ensure that
Select2 is using a percent based width is to inline the
<code>style</code> declaration into the tag.
</div>
</section>

32
docs/_includes/examples/tokenizer.html
View File

@ -1,32 +0,0 @@
<section>
<h1 id="tokenizer">Automatic tokenization</h1>
<p>
Select2 supports ability to add choices automatically as the user is
typing into the search field. Try typing in the search field below and
entering a space or a comma.
</p>
<p>
The separators that should be used when tokenizing can be specified
using the <a href="options.html#tokenSeparators">tokenSeparators</a>
options.
</p>
<div class="s2-example">
<p>
<select class="js-example-tokenizer form-control" multiple="multiple">
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
</p>
</div>
{% highlight js linenos %}
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
})
{% endhighlight %}
</section>

20
docs/_includes/footer.html
View File

@ -1,20 +0,0 @@
<footer class="s2-docs-footer" role="contentinfo">
<div class="container">
{% include social-buttons.html %}
<p>
Select2 is licensed under <a href="https://github.com/select2/select2/blob/master/LICENSE.md">MIT</a>, documentation under <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
<p>
Maintained by <a href="https://github.com/kevin-brown">Kevin Brown</a> and <a href="https://github.com/ivaynberg">Igor Vaynberg</a> with the help of <a href="https://github.com/select2/select2/graphs/contributors">our contributors</a>.
</p>
<ul class="s2-docs-footer-links">
<li>Currently v4.0.3</li>
<li><a href="https://github.com/select2/select2">GitHub</a></li>
<li><a href="./examples.html">Examples</a></li>
<li><a href="./options.html">Options</a></li>
<li><a href="http://select2.github.io/select2/">v3.5.2 docs</a></li>
<li><a href="https://github.com/select2/select2/issues">Issues</a></li>
<li><a href="https://github.com/select2/select2/releases">Releases</a></li>
</ul>
</div>
</footer>

9
docs/_includes/ga.html
View File

@ -1,9 +0,0 @@
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57144786-2', 'auto');
ga('send', 'pageview');
</script>

31
docs/_includes/head.html
View File

@ -1,31 +0,0 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png?v=699Nxpjr2A">
<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-touch-icon-60x60.png?v=699Nxpjr2A">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png?v=699Nxpjr2A">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png?v=699Nxpjr2A" sizes="32x32">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png?v=699Nxpjr2A" sizes="16x16">
<link rel="manifest" href="/images/manifest.json?v=699Nxpjr2A">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg?v=699Nxpjr2A" color="#F6F6F6">
<link rel="shortcut icon" href="/images/favicon.ico?v=699Nxpjr2A">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/browserconfig.xml?v=699Nxpjr2A">
<meta name="theme-color" content="#f6f6f6">
<title>
{{ page.title }}
</title>
<script type="text/javascript" src="vendor/js/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/select2.full.js"></script>
<script type="text/javascript" src="vendor/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/js/prettify.min.js"></script>
<script type="text/javascript" src="vendor/js/anchor.min.js"></script>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="dist/css/select2.min.css" type="text/css" rel="stylesheet" />
<link href="css/font-awesome.css" type="text/css" rel="stylesheet" />
<link href="css/s2-docs.css" type="text/css" rel="stylesheet" >

62
docs/_includes/js-source-states.html
View File

@ -1,62 +0,0 @@
<select class="js-source-states">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>

26
docs/_includes/nav/announcements-4.0.html
View File

@ -1,26 +0,0 @@
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav s2-docs-sidenav">
<li>
<a href="#select2-400">Select2 4.0.0</a>
<ul class="nav">
<li><a href="#new-features">New features</a></li>
<li><a href="#plugin-system">Plugin system</a></li>
<li><a href="#amd-based-build-system">AMD-based build system</a></li>
</ul>
</li>
<li>
<a href="#migrating-from-select2-35">Migrating from Select2 3.5</a>
<ul class="nav">
<li><a href="#hidden-input">No more hidden input tags</a></li>
<li><a href="#new-matcher">Advanced matching of searches</a></li>
<li><a href="#flexible-placeholders">More flexible placeholders</a></li>
<li><a href="#value-ordering">Display reflects the actual order of the values</a></li>
<li><a href="#changed-options">Changed method and option names</a></li>
<li><a href="#removed-methods">Deprecated and removed methods</a></li>
</ul>
</li>
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
</nav>

96
docs/_includes/nav/examples.html
View File

@ -1,96 +0,0 @@
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav s2-docs-sidenav">
<li>
<a href="#basics">The basics</a>
<ul class="nav">
<li>
<a href="#single">Single select boxes</a>
</li>
<li>
<a href="#multiple">Multiple select boxes</a>
</li>
</ul>
</li>
<li>
<a href="#placeholders">Placeholders</a>
</li>
<li>
<a href="#data">
Data sources
</a>
<ul class="nav">
<li>
<a href="#data-array">Loading array data</a>
</li>
<li>
<a href="#data-ajax">Loading remote data</a>
</li>
</ul>
</li>
<li>
<a href="#disabled">Disabled mode</a>
</li>
<li>
<a href="#disabled-results">Disabled results</a>
</li>
<li>
<a href="#multiple-max">Limiting the number of selections</a>
</li>
<li>
<a href="#hide-search">Hiding the search box</a>
</li>
<li>
<a href="#programmatic-control">Programmatic control</a>
<ul class="nav">
<li>
<a href="#events">DOM events</a>
</li>
<li>
<a href="#programmatic">Programmatic access</a>
</li>
</ul>
</li>
<li>
<a href="#tags">Tagging (free-text) support</a>
</li>
<li>
<a href="#tokenizer">Automatic tokenization</a>
</li>
<li>
<a href="#matcher">Customizing how results are matched</a>
</li>
<li>
<a href="#localization-rtl-diacritics">Localization, RTL and diacritics support</a>
<ul class="nav">
<li>
<a href="#language">Multiple languages</a>
</li>
<li>
<a href="#rtl">RTL support</a>
</li>
<li>
<a href="#diacritics">Diacritics support</a>
</li>
</ul>
</li>
<li>
<a href="#themes-templating-responsive-design">
Themes, templating and responsive design
</a>
<ul class="nav">
<li>
<a href="#themes">Theme support</a>
</li>
<li>
<a href="#templating">Templating</a>
</li>
<li>
<a href="#responsive">Responsive design</a>
</li>
</ul>
</li>
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
</nav>

55
docs/_includes/nav/options-old.html
View File

@ -1,55 +0,0 @@
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav s2-docs-sidenav">
<li>
<a href="#core-options">Core Options</a>
<ul class="nav">
<li><a href="#data-attributes">Declaring configuration in the <code>data-*</code> attributes</a></li>
<li><a href="#amd">AMD compatibility</a></li>
<li><a href="#core-options-display">Displaying selections</a></li>
<li><a href="#core-options-results">Returning and displaying results</a></li>
</ul>
</li>
<li>
<a href="#dropdown">Dropdown</a>
<ul class="nav">
<li><a href="#dropdownParent">Attached to body</a></li>
<li><a href="#dropdown-attachContainer">Attached below the container</a></li>
<li><a href="#dropdown-search">Search</a></li>
<li><a href="#dropdown-select-on-close">Select the highlighted option on close</a></li>
<li><a href="#closeOnSelect">Close the dropdown when a result is selected</a></li>
</ul>
</li>
<li>
<a href="#events">Events</a>
<ul class="nav">
<li><a href="#events-public">Public events</a></li>
<li><a href="#events-internal">Internal events</a></li>
</ul>
</li>
<li>
<a href="#adapters">The plugin system (adapters)</a>
<ul class="nav">
<li><a href="#adapters-all">All adapters</a></li>
<li><a href="#selectionAdapter">Container (selection)</a></li>
<li><a href="#dataAdapter">Data set</a></li>
<li><a href="#dropdownAdapter">Dropdown</a></li>
<li><a href="#resultsAdapter">Results</a></li>
</ul>
</li>
<li>
<a href="#setting-default-options">Setting default options</a>
</li>
<li>
<a href="#backwards-compatibility">Backwards compatibility</a>
<ul class="nav">
<li><a href="#compat-matcher">Simplified function for matching data objects</a></li>
<li><a href="#initSelection">Old initial selections with <code>initSelection</code></a></li>
<li><a href="#query">Querying old data with <code>query</code></a></li>
<li><a href="#input-fallback">Compatibility with <code>&lt;input type="text" /&gt;</code></a></li>
</ul>
</li>
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
</nav>

80
docs/_includes/nav/options.html
View File

@ -1,80 +0,0 @@
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav s2-docs-sidenav">
<li>
<a href="#core-options">Core options</a>
<ul class="nav">
<li><a href="#setting-default-options">Changing default options</a></li>
<li><a href="#data-attributes">Declaring configuration in the HTML</a></li>
<li><a href="#amd">AMD compatibility</a></li>
</ul>
</li>
<li>
<a href="#data-adapters">Data adapters</a>
<ul class="nav">
<li>
<a href="#data-adapters-select-tag">Using a <code>&lt;select&gt;</code></a>
</li>
<li>
<a href="#data">Loading data from an array</a>
</li>
<li>
<a href="#ajax">Connecting to a remote data source</a>
</li>
<li>
<a href="#selection-api-access">Accessing a selection data</a>
</li>
</ul>
</li>
<li>
<a href="#selections">Displaying selections</a>
<ul class="nav">
<li>
<a href="#placeholder">Showing a placeholder</a>
</li>
<li>
<a href="#allowClear">Clearing selections</a>
</li>
<li>
<a href="#templateSelection">Templating</a>
</li>
</ul>
</li>
<li>
<a href="#results">Displaying results</a>
<ul class="nav">
<li><a href="#can-i-change-when-search-results-are-loaded">Controlling result loading</a></li>
<li><a href="#can-i-change-how-selecting-results-works">Making selections</a></li>
<li><a href="#can-i-change-how-the-dropdown-is-placed">Placement</a></li>
</ul>
</li>
<li>
<a href="#events">Events</a>
<ul class="nav">
<li><a href="#events-public">Public jQuery events</a></li>
<li><a href="#events-internal">Internal events</a></li>
</ul>
</li>
<li>
<a href="#adapters">The plugin system (adapters)</a>
<ul class="nav">
<li><a href="#adapters-all">All adapters</a></li>
<li><a href="#selectionAdapter">Container (selection)</a></li>
<li><a href="#dataAdapter">Data set</a></li>
<li><a href="#dropdownAdapter">Dropdown</a></li>
<li><a href="#resultsAdapter">Results</a></li>
</ul>
</li>
<li>
<a href="#backwards-compatibility">Deprecated options</a>
<ul class="nav">
<li><a href="#compat-matcher">Simplified function for matching data objects</a></li>
<li><a href="#initSelection">Old initial selections with <code>initSelection</code></a></li>
<li><a href="#query">Querying old data with <code>query</code></a></li>
<li><a href="#input-fallback">Compatibility with <code>&lt;input type="text" /&gt;</code></a></li>
</ul>
</li>
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
</nav>

53
docs/_includes/navigation.html
View File

@ -1,53 +0,0 @@
<header class="s2-docs-nav navbar navbar-default navbar-static-top" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a href="./" class="navbar-brand"><img src="/images/logo.png" height="20px"> Select2</a>
</div>
<nav class="collapse navbar-collapse select2-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li{% if page.slug == "examples" %} class="active"{% endif %}>
<a href="./examples.html">Examples</a>
</li>
<li{% if page.slug == "options" %} class="active"{% endif %}>
<a href="./options.html">Options</a>
</li>
<li class="dropdown{% if page.slug == "announcements-4.0" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Topics
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li{% if page.slug == "announcements-4.0" %} class="active"{% endif %}>
<a href="./announcements-4.0.html">4.0 Announcement</a>
</li>
<li class="divider"></li>
<li>
<a href="https://github.com/select2/select2/releases">
Release notes
</a>
</li>
</ul>
</li>
<li{% if page.slug == "community" %} class="active"{% endif %}>
<a href="./community.html">Community</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/select2/select2">
<i class="fa fa-github"></i>
GitHub
</a>
</li>
</ul>
</nav>
</div>
</header>

7
docs/_includes/notice-previous.html
View File

@ -1,7 +0,0 @@
<section class="notice-previous">
<div class="container text-center">
<a href="http://select2.github.io/select2/">Looking for the Select2 3.5.2 docs?</a>
We have moved them to a new location
<a href="announcements-4.0.html">while we push forward with Select2 4.0</a>.
</div>
</section>

209
docs/_includes/options-old/adapters.html
View File

@ -1,209 +0,0 @@
<section>
<div class="page-header">
<h1 id="adapters">Adapters</h1>
</div>
<p>
Select2 allows plugins to add additional functionality through the core
adapters. You can change almost anything involving the way Select2 works
to the way Select2 interacts with the page by modifying the core adapters.
Most third-party plugins should provide decorators (used to wrap adapters)
and custom adapters that you can use.
</p>
<p>
Each adapter contains a set of methods which will must always be defined.
Along with the global methods that all adapters must implement, these
methods must be implemented.
</p>
<h2 id="adapters-all">
All adapters
</h2>
<p>
All adapters must implement a set of methods that Select2 will use to
display them and bind any internal events.
</p>
<pre class="prettyprint linenums">
// The basic HTML that should be rendered by Select2. A jQuery or DOM element
// should be returned, which will automatically be placed by Select2 within the
// DOM.
//
// @returns A jQuery or DOM element that contains any elements that must be
// rendered by Select2.
Adapter.render = function () {
return $jq;
};
// Bind to any Select2 or DOM events.
//
// @param container The Select2 object that is bound to the jQuery element. You
// can listen to Select2 events with `on` and trigger Select2 events using the
// `trigger` method.
// @param $container The jQuery DOM node that all default adapters will be
// rendered within.
Adapter.bind = function (container, $container) { };
// Position the DOM element within the Select2 DOM container, or in another
// place. This allows adapters to be located outside of the Select2 DOM,
// such as at the end of the document or in a specific place within the Select2
// DOM node.
//
// Note: This method is not called on data adapters.
//
// @param $rendered The rendered DOM element that was returned from the call to
// `render`. This may have been modified by Select2, but the root element
// will always be the same.
// @param $defaultContainer The default container that Select2 will typically
// place the rendered DOM element within. For most adapters, this is the
// Select2 DOM element.
Adapter.position = function ($rendered, $defaultContainer) { };
// Destroy any events or DOM elements that have been created.
// This is called when `select2("destroy")` is called on an element.
Adapter.destroy = function () { };
</pre>
<h2 id="selectionAdapter">
Container (selection)
</h2>
<p>
The selection is what is shown to the user as a replacement of the
standard <code>&lt;select&gt;</code> box. It controls the display of the
selection option(s), as well anything else that needs to be embedded
within the container, such as a search box.
</p>
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>selectionAdapter</code>
</dd>
<dt>Default</dt>
<dd>
<code title="select2/selection/single">SingleSelection</code> or
<code title="select2/selection/multiple">MultipleSelection</code>
</dd>
<dt>Base</dt>
<dd>
<code title="select2/selection/base">BaseSelection</code>
</dd>
</dl>
<pre class="prettyprint linenums">
// Update the selected data.
//
// @param data An array of data objects that have been generated by the data
// adapter. If no objects should be selected, an empty array will be passed.
//
// Note: An array will always be passed into this method, even if Select2 is
// attached to a source which only accepts a single selection.
SelectionAdapter.update = function (data) { };
</pre>
<h2 id="dataAdapter">
Data set
</h2>
<p>
The data set is what Select2 uses to generate the possible results that
can be selected, as well as the currently selected results.
</p>
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>dataAdapter</code>
</dd>
<dt>Default</dt>
<dd>
<code title="select2/data/select">SelectAdapter</code>
</dd>
<dt>Base</dt>
<dd>
<code title="select2/data/base">BaseAdapter</code>
</dd>
</dl>
<pre class="prettyprint linenums">
// Get the currently selected options. This is called when trying to get the
// initial selection for Select2, as well as when Select2 needs to determine
// what options within the results are selected.
//
// @param callback A function that should be called when the current selection
// has been retrieved. The first parameter to the function should be an array
// of data objects.
DataAdapter.current = function (callback) {
callback(currentData);
}
// Get a set of options that are filtered based on the parameters that have
// been passed on in.
//
// @param params An object containing any number of parameters that the query
// could be affected by. Only the core parameters will be documented.
// @param params.term A user-supplied term. This is typically the value of the
// search box, if one exists, but can also be an empty string or null value.
// @param params.page The specific page that should be loaded. This is typically
// provided when working with remote data sets, which rely on pagination to
// determine what objects should be displayed.
// @param callback The function that should be called with the queried results.
DataAdapter.query = function (params, callback) {
callback(queryiedData);
}
</pre>
<h2 id="dropdownAdapter">
Dropdown
</h2>
<p>
The dropdown adapter defines the main container that the dropdown should
be held in. <strong>It does not define any extra methods that can be used
for decorators</strong>, but it is common for decorators to attach to the
<code>render</code> and <code>position</code> methods to alter how the
dropdown is altered and positioned.
</p>
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>dropdownAdapter</code>
</dd>
<dt>Default</dt>
<dd>
<code title="select2/dropdown">DropdownAdapter</code>
</dd>
</dl>
<h2 id="resultsAdapter">
Results
</h2>
<p>
The results adapter controls the list of results that the user can select
from. While the results adapter does not define any additional methods
that must be implemented, it makes extensive use of the Select2 event
system for controlling the display of results and messages.
</p>
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>resultsAdapter</code>
</dd>
<dt>Default</dt>
<dd>
<code title="select2/results">ResultsAdapter</code>
</dd>
</dl>
</section>

200
docs/_includes/options-old/backwards-compatibility.html
View File

@ -1,200 +0,0 @@
<section>
<div class="page-header">
<h1 id="compatibility">Backwards compatibility</h1>
</div>
<p>
Select2 offers limited backwards compatibility with the previously 3.5.x
release line, allowing people more efficiently transfer across releases
and get the latest features. For many of the larger changes, such as the
change in how custom data adapters work, compatibility modules were
created that will be used to assist in the upgrade process. It is not
recommended to rely on these compatibility modules, as they will not
always exist, but they make upgrading easier for major changes.
</p>
<p>
<strong>The compatibility modules are only included in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2</strong>. These files end in <code>.full.js</code>, and the
compatibility modules are prefixed with <code>select2/compat</code>.
</p>
<h2 id="compat-matcher">
Simplified function for matching data objects
</h2>
<p class="alert alert-info">
<a href="announcements-4.0.html#new-matcher" class="alert-link">Added in Select2 4.0.0.</a>
This method was added to make upgrading easier from earlier versions of
Select2.
</p>
<p>
During the <a href="announcements-4.0.html">Select2 4.0.0 release</a>, the
<code>matcher</code> function was changed to allow for more complex
matching of nested objects.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>matcher</code>
</dd>
<dt>Value</dt>
<dd>
A function taking a search <code>term</code> and the data object
<code>text</code>.
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/compat/matcher">oldMatcher</code>
</dd>
</dl>
</div>
</div>
<p>
The <a href="examples.html#matcher">custom matcher example</a> provides a
guide for how to use this in your own application. For those upgrading
from older versions of Select2, you just need to wrap your old
<code>matcher</code> with this function to maintain compatibility.
</p>
<h2 id="initSelection">
Old initial selections with <code>initSelection</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#removed-initselection" class="alert-link">Deprecated in Select2 4.0.</a>
This has been replaced by another option and is only available in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2.
</p>
<p>
In the past, Select2 required an option called <code>initSelection</code>
that was defined whenever a custom data source was being used, allowing
for the initial selection for the component to be determined. This has
been replaced by the <code>current</code> method on the
<a href="#dataAdapter">data adapter</a>.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>initSelection</code>
</dd>
<dt>Value</dt>
<dd>
A function taking a <code>callback</code>
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/initSelection">InitSelection</code>
</dd>
</dl>
</div>
</div>
<h2 id="query">
Querying old data with <code>query</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#query-to-data-adapter" class="alert-link">Deprecated in Select2 4.0.</a>
This has been replaced by another option and is only available in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2.
</p>
<p>
In the past, Select2 supported an option called <code>query</code> that
allowed for a custom data source to be used. This option has been replaced
by the <code>query</code> method on the
<a href="#dataAdapter">data adapter</a> and takes a very similar set of
parameters.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>query</code>
</dd>
<dt>Value</dt>
<dd>
A function taking <code>params</code> (including a <code>callback</code>)
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/query">Query</code>
</dd>
</dl>
</div>
</div>
<h2 id="input-fallback">
Compatibility with <code>&lt;input type="text" /&gt;</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#hidden-input" class="alert-link">Deprecated in Select2 4.0.</a>
It is now encouraged to use the <code>&lt;select&gt;</code> tag instead.
</p>
<p>
In past versions of Select2, a <code>&lt;select&gt;</code> element could
only be used with a limited subset of options. An
<code>&lt;input type="hidden" /&gt;</code> was required instead, which did
not allow for a graceful fallback for users who did not have JavaScript
enabled. Select2 now supports the <code>&lt;select&gt;</code> element for
all options, so it is no longer required to use <code>&lt;input /&gt;</code>
elements with Select2.
</p>
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/inputData">InputData</code>
</dd>
</dl>
</section>

790
docs/_includes/options-old/core-options.html
View File

@ -1,790 +0,0 @@
<section>
<h1 id="core-options" class="page-header">Core options</h1>
<p>
Select2 supports a small subset of options in every build that is
generated. Each option typically has a decorator that is required that
wraps an adapter, adding support for the option. This is only required
when a custom adapter is being used, as Select2 will build the required
adapters by default.
</p>
<p>
Select2 will automatically apply decorators to any adapters which have not
been manually overridden. The only time you need to decorate adapters is
when you are using third-party adapters not provided by Select2, or you
are using features not provided in the Select2 core. You can apply a
decorator to an adapter using the
<code title="select2/utils">Utils.Decorate</code> method provided with
Select2.
</p>
<pre class="prettyprint linenums">
$.fn.select2.amd.require(
["select2/utils", "select2/selection/single", "select2/selection/placeholder"],
function (Utils, SingleSelection, Placeholder) {
var CustomSelectionAdapter = Utils.Decorate(SingleSelection, Placeholder);
});
</pre>
<p>
All core options that use decorators or adapters will clearly state it
in the "Decorator" or "Adapter" part of the documentation. Decorators are
typically only compatible with a specific type of adapter, so make sure to
note what adapter is given.
</p>
<h2 id="data-attributes">
Declaring configuration in the <code>data-*</code> attributes
</h2>
<p>
It is recommended that you declare your configuration options for Select2
when initializing Select2. You can also define your configuration options
by using the HTML5 <code>data-*</code> attributes, which will override
any options set when initializing Select2 and any defaults.
</p>
<p>
This means that if you declare your <code>&lt;select&gt;</code> tag as...
</p>
<pre class="prettyprint">
&lt;select data-tags="true" data-placeholder="Select an option"&gt;&lt;/select&gt;
</pre>
<p>
Will be interpreted the same as initializing Select2 as...
</p>
<pre class="prettyprint linenums">
$("select").select2({
tags: "true",
placeholder: "Select an option"
});
</pre>
<p>
You can also define nested configurations, which are typically needed for
options such as AJAX. Each level of nesting should be separated by two
dashes (<code>--</code>) instead of one. Due to
<a href="https://github.com/jquery/jquery/issues/2070">a jQuery bug</a>,
nested options using <code>data-*</code> attributes
<a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>.
</p>
<pre class="prettyprint">
&lt;select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"&gt;&lt;/select&gt;
</pre>
<p>
Which will be interpreted the same as initializing Select2 with...
</p>
<pre class="prettyprint linenums">
$("select").select2({
ajax: {
url: "http://example.org/api/test",
cache: "true"
}
});
</pre>
<p>
The value of the option is subject to jQuery's
<a href="https://api.jquery.com/data/#data-html5">parsing rules</a> for
HTML5 data attributes.
</p>
<h2 id="amd">
AMD compatibility
</h2>
<p>
You can find more information on how to integrate Select2 with your
existing AMD-based project by
<a href="announcements-4.0.html#builds">viewing the 4.0 release notes</a>.
Select2 automatically loads some modules when the adapters are being
automatically constructed, so those who are using Select2 with a custom
AMD build using their own system may need to specify the paths that are
generated to the Select2 modules.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>amdBase</code>
</dd>
<dt>Default</dt>
<dd>
<code>select2/</code>
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>amdLanguageBase</code>
</dd>
<dt>Default</dt>
<dd>
<code>select2/i18n/</code>
</dd>
</dl>
</div>
</div>
<h2 id="core-options-display">
Displaying selections
</h2>
<p>
Select2 provides options that allow you to directly affect how the
container that holds the current selection is displayed.
</p>
<h3 id="placeholder">
Placeholders
</h3>
<p>
Select2 can display a placeholder for a single-value select that will
replace an option, or be shown when no options are selected for
multiple-value selects. You can find an example on the
<a href="examples.html#placeholders">example page</a>.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>placeholder</code>
</dd>
<dt>Value</dt>
<dd>string or object</dd>
</dl>
<hr />
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/selection/base">SelectionAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/selection/placeholder">Placeholder</code>
and
<code title="select2/dropdown/hidePlaceholder">HidePlaceholder</code>
</dd>
</dl>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
<strong>Heads up!</strong>
Because browsers assume that the first <code>option</code> in
single-value select boxes is selected, you should add an empty
<code>&lt;option&gt;&lt;/option&gt;</code> tag that the placeholder
should use or it may not work.
</div>
</div>
</div>
<p>
If the <strong>value is a string</strong>, the placeholder will be
displayed when a <strong>blank option</strong> is used as the placeholder.
The <strong>value</strong> will be the message to show to users as the
placeholders.
</p>
<pre class="prettyprint">
placeholder: "Select a repository"
</pre>
<p>
If the <strong>value is an object</strong>, the object should be
compatible with Select2's internal objects. The <code>id</code> should
be the id to look for when determining if the placeholder should be
displayed. The <code>text</code> should be the placeholder to display
when that option is selected.
</p>
<pre class="prettyprint linenums">
placeholder: {
id: "-1",
text: "Select a repository"
}
</pre>
<div class="alert alert-info">
You should <strong>pass in an object</strong> when you are using a
framework that <strong>creates its own placeholder option</strong>. The
<strong>id</strong> should be the same as the <code>value</code>
attribute on the <code>option</code>.
</div>
<p id="allowClear">
You can allow a selected option to be cleared back to the placeholder by
enabling the <code>allowClear</code> option.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>allowClear</code></dd>
<dt>Value</dt>
<dd>boolean</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/selection/base">SelectionAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/selection/allowClear">AllowClear</code>
</dd>
</dl>
</div>
</div>
<p>
This will display an "x" that the user can click to clear the current
selection. It is designed to be used for cases where a single selection
can be made.
</p>
<h3 id="multiple">
Multiple selections
</h3>
<p>
Select2 can display either a single selection or multiple selections.
</p>
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>multiple</code></dd>
<dt>Value</dt>
<dd>boolean (<code>true</code> or <code>false</code>)</dd>
</dl>
<p>
This option will determine what the <code>SelectAdapter</code> (used by
default) should use to set the value of the underlying <code>select</code>
element. It will also determine if the <code>MultipleSelection</code>
adapter should be used.
</p>
<h3 id="width">
Container width
</h3>
<p>
Select2 will try to match the width of the original element as closely as
possible. Sometimes this isn't perfect, which is what you can tell Select2
how to determine the width.
</p>
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"element"</code></td>
<td>
Uses javascript to calculate the width of the source element.
</td>
</tr>
<tr>
<td><code>"style"</code></td>
<td>
Copies the value of the width <code>style</code> attribute set on the source element.
</td>
</tr>
<tr>
<td><code>"resolve"</code></td>
<td>
Tries to use <code>style</code> to determine the width, falling back to <code>element</code>.
</td>
</tr>
<tr>
<td>Anything else</td>
<td>
The value of the <code>width</code> option is directly set as the width of the container.
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>width</code></dd>
<dt>Value</dt>
<dd>string</dd>
</dl>
</div>
</div>
<h3 id="language">
Internationalization (Language support)
</h3>
<p>
Messages will be displayed to users when necessary, such as when no
search results were found or more characters need to be entered in order
for a search to be made. These messages have been
<a href="community.html#translations">translated into many languages</a>
by contributors to Select2, but you can also provide your own
translations.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>language</code></dd>
<dt>Value</dt>
<dd>object or string</dd>
</dl>
<hr />
<dl class="dl-horizontal">
<dt>Module</dt>
<dd>
<code title="select2/translation">Translation</code>
</dd>
</dl>
</div>
<div class="col-sm-6">
<p class="alert alert-warning">
<strong>Heads up!</strong> When using translations provided by Select2,
you must make sure to include the translation file in your page after
Select2.
</p>
</div>
</div>
<p>
When a string is passed in as the language, Select2 will try to resolve
it into a language file. This allows you to specify your own language
files, which must be defined as an AMD module. If the language file
cannot be found, Select2 will assume it is a language code controlled by
Select2, and it will try to load the translations for that language
instead.
</p>
<p>
You can include your own translations by providing an object similar to
the one below.
</p>
<pre class="prettyprint linenums">
language: {
// You can find all of the options in the language files provided in the
// build. They all must be functions that return the string that should be
// displayed.
inputTooShort: function () {
return "You must enter more characters...";
}
}
</pre>
<h3 id="templating">
Templating results and selections
</h3>
<p>
By default, Select2 will display the option text within the list of
results and when the option has been selected. Select2 comes with options
that allow you to further customize the display of results and selections,
allowing you to display them however you want.
</p>
<h4 id="templateSelection">
Customizing the display of selections
</h4>
<p>
When an option is displayed after it has been selected, it is passed
through a formatting function that determines what is displayed. By
default, the function only returns the <code>text</code> key of the data
object.
</p>
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>templateSelection</code></dd>
<dt>Value</dt>
<dd>A function taking a <code>selection</code> object</dd>
</dl>
<div class="alert alert-info">
<strong>Anything rendered as a selection is templated.</strong>
This includes placeholders and pre-existing selections that are displayed,
so you must ensure that your templating functions can support them.
</div>
<p>
The <code>templateSelection</code> function should return a string
containing the text to be displayed, or an object (such as a jQuery
object) that contains the data that should be displayed.
</p>
<p>
<strong>Strings are assumed to contain only text</strong> and will be
passed through the <code>escapeMarkup</code> function, which strips any
HTML markup.
</p>
<p>
<strong>
Anything else will be passed
<a href="https://api.jquery.com/append/">directly to <code>jQuery.fn.append</code></a>
</strong> and will be handled directly by jQuery. Any markup, such as
HTML, returned will not be escaped and it is up to you to escape any
malicious input provided by users.
</p>
<h4 id="templateResult">
Customizing the display of results
</h4>
<p>
When an option is displayed after it has been selected, it is passed
through a formatting function that determines what is displayed. By
default, the function only returns the <code>text</code> key of the data
object.
</p>
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>templateResult</code></dd>
<dt>Value</dt>
<dd>A function taking a <code>result</code> object</dd>
</dl>
<div class="alert alert-info">
<strong>Anything rendered in the results is templated.</strong>
This includes results such as the "Searching..." and "Loading more..."
text which will periodically be displayed, which allows you to add more
advanced formatting to these automatically generated options.
</div>
<p>
The <code>templateResult</code> function should return a string
containing the text to be displayed, or an object (such as a jQuery
object) that contains the data that should be displayed. It can also
return <code>null</code>, which will prevent the option from being
displayed in the results list.
</p>
<p>
<strong>Strings are assumed to contain only text</strong> and will be
passed through the <code>escapeMarkup</code> function, which strips any
HTML markup.
</p>
<p>
<strong>
Anything else will be passed
<a href="https://api.jquery.com/append/">directly to <code>jQuery.fn.append</code></a>
</strong> and will be handled directly by jQuery. Any markup, such as
HTML, returned will not be escaped and it is up to you to escape any
malicious input provided by users.
</p>
<h2 id="core-options-results">
Returning and displaying results
</h2>
<p>
Select2 can work on many different data sets ranging from local options,
the same way that a <code>&lt;select&gt;</code> typically works, from
remote options where a server generates the results that users can select
from.
</p>
<h3 id="data">
Array
</h3>
<p>
Select2 allows creating the results based on an array of data objects that
is included when initializing Select2.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>data</code></dd>
<dt>Value</dt>
<dd>array of objects</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/array">ArrayAdapter</code>
</dd>
</dl>
</div>
</div>
<p>
The objects that the users can select from should be passed as an array
with each object containing <code>id</code> and <code>text</code>
properties.
</p>
<h3 id="ajax">
AJAX
</h3>
<p>
Select2 allows searching for results from remote data sources using AJAX
requests.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>ajax</code></dd>
<dt>Value</dt>
<dd>object</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/ajax">AjaxAdapter</code>
</dd>
</dl>
</div>
</div>
<p>
All options passed to this option will be directly passed to the
<code>$.ajax</code> function that executes AJAX requests. There are a few
custom options that Select2 will intercept, allowing you to customize the
request as it is being made.
<pre class="prettyprint linenums">
ajax: {
// The number of milliseconds to wait for the user to stop typing before
// issuing the ajax request.
delay: 250,
// You can craft a custom url based on the parameters that are passed into the
// request. This is useful if you are using a framework which has
// JavaScript-based functions for generating the urls to make requests to.
//
// @param params The object containing the parameters used to generate the
// request.
// @returns The url that the request should be made to.
url: function (params) {
return UrlGenerator.Random();
},
// You can pass custom data into the request based on the parameters used to
// make the request. For `GET` requests, the default method, these are the
// query parameters that are appended to the url. For `POST` requests, this
// is the form data that will be passed into the request. For other requests,
// the data returned from here should be customized based on what jQuery and
// your server are expecting.
//
// @param params The object containing the parameters used to generate the
// request.
// @returns Data to be directly passed into the request.
data: function (params) {
var queryParameters = {
q: params.term
}
return queryParameters;
},
// You can modify the results that are returned from the server, allowing you
// to make last-minute changes to the data, or find the correct part of the
// response to pass to Select2. Keep in mind that results should be passed as
// an array of objects.
//
// @param data The data as it is returned directly by jQuery.
// @returns An object containing the results data as well as any required
// metadata that is used by plugins. The object should contain an array of
// data objects as the `results` key.
processResults: function (data) {
return {
results: data
};
},
// You can use a custom AJAX transport function if you do not want to use the
// default one provided by jQuery.
//
// @param params The object containing the parameters used to generate the
// request.
// @param success A callback function that takes `data`, the results from the
// request.
// @param failure A callback function that indicates that the request could
// not be completed.
// @returns An object that has an `abort` function that can be called to abort
// the request if needed.
transport: function (params, success, failure) {
var $request = $.ajax(params);
$request.then(success);
$request.fail(failure);
return $request;
}
}
</pre>
</p>
<h3 id="tags">
Tags
</h3>
<p>
Users can create their own options based on the text that they have
entered.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>tags</code></dd>
<dt>Value</dt>
<dd>boolean / array of objects</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/data/tags">Tags</code>
</dd>
</dl>
</div>
</div>
<p>
If the <code>tags</code> option is passed into Select2, if a user types
anything into the search box which doesn't already exist, it will be
displayed at the top and the user will be able to select it.
</p>
<p>
<strong>For backwards compatibility</strong>, if an array of objects is
passed in with the <code>tags</code> option, the options will be
automatically created and the user will be able to select from them.
This is the <strong>same as how <a href="#data">array data</a>
works</strong>, and has similar limitations.
</p>
<h3 id="matcher">
Change how options are matched when searching
</h3>
<p>
When users filter down the results by entering search terms into the
search box, Select2 uses an internal "matcher" to match search terms to
results. <strong>When a remote data set is used, Select2 expects that the
returned results have already been filtered.</strong>
</p>
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>matcher</code>
</dd>
<dt>Value</dt>
<dd>
A function taking search <code>params</code> and the
<code>data</code> object.
</dd>
</dl>
<p>
Select2 will pass the individual data objects that have been passed back
from the data adapter into the <code>matcher</code> individually to
determine if they should be displayed. Only the first-level objects will
be passed in, so <strong>if you are working with nested data, you need to
match those individually</strong>.
</p>
<pre class="prettyprint linenums">
matcher: function (params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}
// `params.term` should be the term that is used for searching
// `data.text` is the text that is displayed for the data object
if (data.text.indexOf(params.term) > -1) {
var modifiedData = $.extend({}, data, true);
modifiedData.text += ' (matched)';
// You can return modified objects from here
// This includes matching the `children` how you want in nested data sets
return modifiedData;
}
// Return `null` if the term should not be displayed
return null;
}
</pre>
<p>
This allows for more advanced matching when working with nested objects,
allowing you to handle them however you want. For those who are not
looking to implement highly customized matching, but instead are just
looking to change the matching algorithm for the text, a
<a href="#compat-matcher">compatibility modules</a> has been created to
make it easier.
</p>
</section>

308
docs/_includes/options-old/dropdown.html
View File

@ -1,308 +0,0 @@
<section>
<div class="page-header">
<h1 id="dropdown">Dropdown</h1>
</div>
<p>
Select2 allows you to change the way that the dropdown works, allowing you
to do anything from attach it to a different location in the document or
add a search box.
</p>
<h2 id="dropdownParent">
Attached to body
</h2>
<p>
By default, Select2 will attach the dropdown to the end of the body and
will absolutely position it to appear below the selection container.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>dropdownParent</code></dd>
<dt>Value</dt>
<dd>jQuery element or DOM node</dd>
<hr />
<dt>Adapter</dt>
<dd>
<code title="select2/dropdown">DropdownAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/dropdown/attachBody">AttachBody</code>
</dd>
</dl>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
<strong>Heads up!</strong>
This will cause DOM events to be raised outside of the standard
Select2 DOM container. This can cause issues with
third-party components such as modals.
</div>
</div>
</div>
<p>
When the dropdown is attached to the body, you are not limited to just
displaying the dropdown below the container. Select2 will display above
the container if there is not enough space below the container, but there
is enough space above it. You are also not limited to displaying the
dropdown within the parent container, which means Select2 will render
correctly inside of modals and other small containers.
</p>
<h2 id="dropdown-attachContainer">
Attached below the container
</h2>
<p>
Select2 can place the dropdown directly after the selection container, so
it will appear in the same location within the DOM as the rest of Select2.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/dropdown">DropdownAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/dropdown/attachContainer">AttachContainer</code>
</dd>
</dl>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
<strong>Check your build.</strong> This module is only included in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2.
</div>
</div>
</div>
<div class="alert alert-info">
<strong>
<a href="https://harvesthq.github.io/chosen/">Harvest Chosen</a>
migrators!
</strong>
If you are migrating to Select2 from Chosen, this option will cause
Select2 to position the dropdown in a similar way.
</div>
<h2 id="dropdown-search">
Search
</h2>
<p>
Users can filter down the results by typing a search term into a box that
is displayed at the top of the dropdown.
</p>
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/dropdown">DropdownAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/dropdown/search">DropdownSearch</code>
</dd>
</dl>
<p>
A search box is added to the top of the dropdown automatically for select
boxes where only a single option can be selected.
</p>
<h3 id="dropdown-minimumInputLength">
Minimum search term length to filter results
</h3>
<p>
Sometimes when working with large data sets, it is more efficient to start
filtering the results when the search term is a certain length. This is
very common when working with remote data sets, as allows for only
significant search terms to be used.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>minimumInputLength</code></dd>
<dt>Value</dt>
<dd>integer</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/data/minimumInputLength">MinimumInputLength</code>
</dd>
</dl>
</div>
</div>
<h3 id="dropdown-maximumInputLength">
Maximum search term length to filter results
</h3>
<p>
In some cases, search terms need to be limited to a certain range. Select2
allows you to limit the length of the search term such that it does not
exceed a certain length.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>maximumInputLength</code></dd>
<dt>Value</dt>
<dd>integer</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/data/maximumInputLength">MaximumInputLength</code>
</dd>
</dl>
</div>
</div>
<h3 id="dropdown-maximumInputLength">
Minimum results to display the search box
</h3>
<p>
When working with smaller data sets, the search box can take up more space
that is necessary, as there are not enough results for filtering to be
effective. Select2 allows you to only display the search box when the
number of search results reaches a certain threshold.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>minimumResultsForSearch</code></dd>
<dt>Value</dt>
<dd>integer</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/dropdown">DropdownAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/dropdown/minimumResultsForSearch">MinimumResultsForSearch</code>
</dd>
</dl>
</div>
</div>
<h2 id="dropdown-select-on-close">
Select the highlighted option on close
</h2>
<p>
When users close the dropdown, the last highlighted option can be
automatically selected. This is commonly used in combination with
<a href="#tags">tagging</a> and <a href="#placeholder">placeholders</a>
and other situations where the user is required to select an option, or
they need to be able to quickly select multiple options.
</p>
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/results">ResultsAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/dropdown/selectOnClose">SelectOnClose</code>
</dd>
</dl>
<h2 id="closeOnSelect">
Close the dropdown when a result is selected
</h2>
<p>
Select2 will automatically close the dropdown when an element is selected,
similar to what is done with a normal select box. This behavior can be
changed though to keep the dropdown open when results are selected,
allowing for multiple options to be selected quickly.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd><code>closeOnSelect</code></dd>
<dt>Default</dt>
<dd><code>true</code></dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/dropdown">DropdownAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/dropdown/closeOnSelect">CloseOnSelect</code>
</dd>
</dl>
</div>
</div>
<p>
If this decorator is not used (or <code>closeOnSelect</code> is set to
<code>false</code>), the dropdown will not automatically close when a
result is selected. The dropdown will also never close if the
<kbd>ctrl</kbd> key is held down when the result is selected.
</p>
</section>

50
docs/_includes/options-old/events.html
View File

@ -1,50 +0,0 @@
<section>
<div id="events" class="page-header">
<h1>Events</h1>
</div>
<p>
Select2 has an internal event system that is used to notify parts of the
component that state has changed, as well as an adapter that allows some
of these events to be relayed to the outside word.
</p>
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/selection">SelectionAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/selection/eventRelay">EventRelay</code>
</dd>
</dl>
<h2 id="events-public">
Public events
</h2>
<p>
All public events are relayed using the jQuery event system, and they are
triggered on the <code>&lt;select&gt;</code> element that Select2 is
attached to. You can attach to them using the
<a href="https://api.jquery.com/on/"><code>.on</code> method</a> provided
by jQuery.
</p>
<h2 id="events-internal">
Internal events
</h2>
<p>
Select2 triggers internal events using its own internal event system,
which allows adapters to communicate with each other. These events are not
accessible through the jQuery event system.
</p>
<p>
You can find more information on the public events triggered by individual
adapters in <a href="#adapters">the individual adapter documentation</a>.
</p>
</section>

37
docs/_includes/options-old/setting-default-options.html
View File

@ -1,37 +0,0 @@
<section>
<h1 id="setting-default-options">Setting default options</h1>
<p>
In some cases, you need to set the default options for all instances of
Select2 in your web application. This is especially useful when you are
migrating from past versions of Select2, or you are using non-standard
options <a href="#amd">like custom AMD builds</a>. Select2 exposes the
default options through <code>$.fn.select2.defaults</code>, which allows
you to set them globally.
</p>
<p>
When setting options globally, any past defaults that have been set will
be overriden. Default options are only used when an option is requested
that has not been set during initialization.
</p>
<p>
<strong>You can set default options</strong> by calling
<code>$.fn.select2.defaults.set("key", "value")</code>. The key that is
set should take the same format as keys set using
<a href="#data-attributes">HTML <code>data-*</code> attributes</a> which
means that two dashes (<code>--</code>) will be replaced by a level of
nesting, and a single dash (<code>-</code>) will convert it to a camelCase
string.
</p>
<pre class="prettyprint">
$.fn.select2.defaults.set("theme", "classic");
</pre>
<p>
<strong>You can reset the default options</strong> by calling
<code>$.fn.select2.defaults.reset()</code>.
</p>
</section>

10
docs/_includes/options/compatibility.html
View File

@ -1,10 +0,0 @@
<section>
<h1>
Backwards compatibility
</h1>
{% include options/compatibility/matcher.html %}
{% include options/compatibility/initial-selection.html %}
{% include options/compatibility/query-function.html %}
{% include options/compatibility/text-input.html %}
</section>

50
docs/_includes/options/compatibility/initial-selection.html
View File

@ -1,50 +0,0 @@
<section>
<h2 id="initSelection">
Old initial selections with <code>initSelection</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#removed-initselection" class="alert-link">Deprecated in Select2 4.0.</a>
This has been replaced by another option and is only available in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2.
</p>
<p>
In the past, Select2 required an option called <code>initSelection</code>
that was defined whenever a custom data source was being used, allowing
for the initial selection for the component to be determined. This has
been replaced by the <code>current</code> method on the
<a href="#dataAdapter">data adapter</a>.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>initSelection</code>
</dd>
<dt>Value</dt>
<dd>
A function taking a <code>callback</code>
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/initSelection">InitSelection</code>
</dd>
</dl>
</div>
</div>
</section>

18
docs/_includes/options/compatibility/introduction.html
View File

@ -1,18 +0,0 @@
<section>
<p>
Select2 offers limited backwards compatibility with the previously 3.5.x
release line, allowing people more efficiently transfer across releases
and get the latest features. For many of the larger changes, such as the
change in how custom data adapters work, compatibility modules were
created that will be used to assist in the upgrade process. It is not
recommended to rely on these compatibility modules, as they will not
always exist, but they make upgrading easier for major changes.
</p>
<p>
<strong>The compatibility modules are only included in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2</strong>. These files end in <code>.full.js</code>, and the
compatibility modules are prefixed with <code>select2/compat</code>.
</p>
</section>

50
docs/_includes/options/compatibility/matcher.html
View File

@ -1,50 +0,0 @@
<section>
<h2 id="compat-matcher">
Simplified function for matching data objects
</h2>
<p class="alert alert-info">
<a href="announcements-4.0.html#new-matcher" class="alert-link">Added in Select2 4.0.0.</a>
This method was added to make upgrading easier from earlier versions of
Select2.
</p>
<p>
During the <a href="announcements-4.0.html">Select2 4.0.0 release</a>, the
<code>matcher</code> function was changed to allow for more complex
matching of nested objects.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>matcher</code>
</dd>
<dt>Value</dt>
<dd>
A function taking a search <code>term</code> and the data object
<code>text</code>.
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/compat/matcher">oldMatcher</code>
</dd>
</dl>
</div>
</div>
<p>
The <a href="examples.html#matcher">custom matcher example</a> provides a
guide for how to use this in your own application. For those upgrading
from older versions of Select2, you just need to wrap your old
<code>matcher</code> with this function to maintain compatibility.
</p>
</section>

50
docs/_includes/options/compatibility/query-function.html
View File

@ -1,50 +0,0 @@
<section>
<h2 id="query">
Querying old data with <code>query</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#query-to-data-adapter" class="alert-link">Deprecated in Select2 4.0.</a>
This has been replaced by another option and is only available in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2.
</p>
<p>
In the past, Select2 supported an option called <code>query</code> that
allowed for a custom data source to be used. This option has been replaced
by the <code>query</code> method on the
<a href="#dataAdapter">data adapter</a> and takes a very similar set of
parameters.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>query</code>
</dd>
<dt>Value</dt>
<dd>
A function taking <code>params</code> (including a <code>callback</code>)
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/query">Query</code>
</dd>
</dl>
</div>
</div>
</section>

32
docs/_includes/options/compatibility/text-input.html
View File

@ -1,32 +0,0 @@
<section>
<h2 id="input-fallback">
Compatibility with <code>&lt;input type="text" /&gt;</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#hidden-input" class="alert-link">Deprecated in Select2 4.0.</a>
It is now encouraged to use the <code>&lt;select&gt;</code> tag instead.
</p>
<p>
In past versions of Select2, a <code>&lt;select&gt;</code> element could
only be used with a limited subset of options. An
<code>&lt;input type="hidden" /&gt;</code> was required instead, which did
not allow for a graceful fallback for users who did not have JavaScript
enabled. Select2 now supports the <code>&lt;select&gt;</code> element for
all options, so it is no longer required to use <code>&lt;input /&gt;</code>
elements with Select2.
</p>
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/inputData">InputData</code>
</dd>
</dl>
</section>

9
docs/_includes/options/core.html
View File

@ -1,9 +0,0 @@
<section>
<h1>
Core options
</h1>
{% include options/core/options.html %}
{% include options/core/data-attributes.html %}
{% include options/core/amd-support.html %}
</section>

46
docs/_includes/options/core/amd-support.html
View File

@ -1,46 +0,0 @@
<section>
<h2 id="amd">
Can I use Select2 with my AMD or CommonJS loader?
</h2>
<p>
Select2 should work with most AMD- or CommonJS-compliant module loaders, including <a href="http://requirejs.org/">RequireJS</a> and <a href="https://github.com/jrburke/almond">almond</a>. Select2 ships with a modified version of the <a href="https://github.com/umdjs/umd/blob/f208d385768ed30cd0025d5415997075345cd1c0/templates/jqueryPlugin.js">UMD jQuery template</a> that supports both CommonJS and AMD environments.
</p>
<h3>
How do I tell Select2 where to look for modules?
</h3>
<p>
For most AMD and CommonJS setups, the location of the data files used by Select2 will be automatically determined and handled without you needing to do anything.
</p>
<p>
If you are using Select2 in a build environment where preexisting module names are changed during a build step, Select2 may not be able to find optional dependencies or language files. You can manually set the prefixes to use for these files using the <code>amdBase</code> and <code>amdLanguageBase</code> options.
</p>
{% highlight js linenos %}
$.fn.select2.defaults.set('amdBase', 'select2/');
$.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/');
{% endhighlight %}
<h3>
Select2 is being placed before jQuery in my JavaScript file
</h3>
<p>
Due to <a href="https://github.com/jrburke/requirejs/issues/1342">a bug in older versions</a> of the r.js build tool, Select2 was sometimes placed before jQuery in then compiled build file. Because of this, Select2 will trigger an error because it won't be able to find or load jQuery.
</p>
<p>
By upgrading to version 2.1.18 or higher of the r.js build tool, you will be able to fix the issue.
</p>
<h3>
Should I point to the files in <code>dist</code> or <code>src</code>?
</h3>
<p>
Select2 internally uses AMD and the r.js build tool to build the files located in the <code>dist</code> folder. These are built using the files in the <code>src</code> folder, so <em>you can</em> just point your modules to the Select2 source and load in <code>jquery.select2</code> or <code>select2/core</code> when you want to use Select2. The files located in the <code>dist</code> folder are also AMD-compatible, so you can point to that file if you want to load in all of the default Select2 modules.
</p>
</section>

76
docs/_includes/options/core/data-attributes.html
View File

@ -1,76 +0,0 @@
<section>
<h2 id="data-attributes">
Can I declare my configuration within the HTML?
</h2>
<p>
It is recommended that you declare your configuration options for Select2
when initializing Select2. You can also define your configuration options
by using the HTML5 <code>data-*</code> attributes, which will override
any options set when initializing Select2 and any defaults.
</p>
<h3>
How should <code>camelCase</code> options be written?
</h3>
<p>
HTML data attributes are case-insensitive, so any options which contain capital letters will be parsed as if they were all lowercase. Because Select2 has many options which are camelCase, where words are separated by uppercase letters, you must write these options out with dashes instead. So an option that would normally be called <code>allowClear</code> should instead be defined as <code>allow-clear</code>.
</p>
<p>
This means that if you declare your <code>&lt;select&gt;</code> tag as...
</p>
{% highlight html linenos %}
<select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"></select>
{% endhighlight %}
<p>
Will be interpreted the same as initializing Select2 as...
</p>
{% highlight js linenos %}
$("select").select2({
tags: "true",
placeholder: "Select an option",
allowClear: true
});
{% endhighlight %}
<h3>
Are options with nested configurations supported?
</h3>
<p>
You can also define nested configurations, which are typically needed for
options such as AJAX. Each level of nesting should be separated by two
dashes (<code>--</code>) instead of one. Due to
<a href="https://github.com/jquery/jquery/issues/2070">a jQuery bug</a>,
nested options using <code>data-*</code> attributes
<a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>.
</p>
{% highlight html linenos %}
<select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"></select>
{% endhighlight %}
<p>
Which will be interpreted the same as initializing Select2 with...
</p>
{% highlight js linenos %}
$("select").select2({
ajax: {
url: "http://example.org/api/test",
cache: true
}
});
{% endhighlight %}
<p>
The value of the option is subject to jQuery's
<a href="https://api.jquery.com/data/#data-html5">parsing rules</a> for
HTML5 data attributes.
</p>
</section>

80
docs/_includes/options/core/options.html
View File

@ -1,80 +0,0 @@
<section>
<h2 id="options">
How should Select2 be initialized?
</h2>
<p>
Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call <code>.select2()</code> on any jQuery element where you would like to initialize Select2.
</p>
{% highlight js linenos %}
$('select').select2();
{% endhighlight %}
<p>
You can optionally pass an object containing all of the options that you would like to initialize Select2 with.
</p>
{% highlight js linenos %}
$('select').select2({
placeholder: 'Select an option'
});
{% endhighlight %}
<h3 id="setting-default-options">
Can default options be set for all dropdowns?
</h3>
<p>
In some cases, you need to set the default options for all instances of
Select2 in your web application. This is especially useful when you are
migrating from past versions of Select2, or you are using non-standard
options <a href="#amd">like custom AMD builds</a>. Select2 exposes the
default options through <code>$.fn.select2.defaults</code>, which allows
you to set them globally.
</p>
<p>
When setting options globally, any past defaults that have been set will
be overridden. Default options are only used when an option is requested
that has not been set during initialization.
</p>
<p>
<strong>You can set default options</strong> by calling
<code>$.fn.select2.defaults.set("key", "value")</code>.
</p>
{% highlight js linenos %}
$.fn.select2.defaults.set("theme", "classic");
{% endhighlight %}
<h3>
How can I set a default value for a nested option?
</h3>
<p>
The key that is
set should take the same format as keys set using
<a href="#data-attributes">HTML <code>data-*</code> attributes</a> which
means that two dashes (<code>--</code>) will be replaced by a level of
nesting, and a single dash (<code>-</code>) will convert it to a camelCase
string.
</p>
{% highlight js linenos %}
$.fn.select2.defaults.set("ajax--cache", false);
{% endhighlight %}
<h3>
How can I reset all of the global default options?
</h3>
<p>
You can reset the default options to their initial values by calling
</p>
{% highlight js linenos %}
$.fn.select2.defaults.reset();
{% endhighlight %}
</section>

10
docs/_includes/options/data.html
View File

@ -1,10 +0,0 @@
<section>
<h1>
Data adapters
</h1>
{% include options/data/select.html %}
{% include options/data/array.html %}
{% include options/data/ajax.html %}
{% include options/data/selection-access.html %}
</section>

213
docs/_includes/options/data/ajax.html
View File

@ -1,213 +0,0 @@
<section>
<h2 id="ajax">
Can Select2 be connected to a remote data source?
</h2>
<p>
Select2 supports connecting to a remote data source using the <code>ajax</code> option.
</p>
<h3>
How can I set the initially selected options when using AJAX?
</h3>
<p>
You can refer to the following Stack Overflow answer if you want to set the initial value for AJAX requests: <a href="http://stackoverflow.com/q/30316586/359284#30328989">Select2 4.0.0 initial value with AJAX</a>
</p>
<h3>
What should the results returned to Select2 look like?
</h3>
<p>
The data returned by the data provider or by <code>processResults</code> should be a JSON object containing an array of objects keyed by the <code>results</code> key.
</p>
<p>
Each object should contain, <em>at a minimum</em>, an <code>id</code> and a <code>text</code> property. The text property will be displayed by default, unless you are using <code>templateResult</code> and <code>templateSelection</code> to customize the way options and selections are rendered.
</p>
<p>
The response object may also contain <a href="examples.html#data-ajax">pagination data</a>, if you would like to use the "infinite scroll" feature. See <a href="#what-properties-are-required-on-the-objects-passed-in-to-the-ar">"What properties are required on the objects passed in to the array?"</a> for more information. A complete example is as follows:
</p>
{% highlight json linenos %}
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2"
}
],
"pagination": {
"more": true
}
}
{% endhighlight %}
<h4>Results for grouped options</h4>
<p>
When options are to be generated in <code>&lt;optgroup&gt;</code> sections, options should be nested under the <code>children</code> attribute of each group object:
{% highlight json linenos %}
{
"results": [
{
"text": "Group 1",
"children" : [
{
"id": 1,
"text": "Option 1.1"
}
{
"id": 2,
"text": "Option 1.2"
}
]
},
{
"text": "Group 2",
"children" : [
{
"id": 3,
"text": "Option 2.1"
}
{
"id": 4,
"text": "Option 2.2"
}
]
}
],
"paginate": {
"more": true
}
}
{% endhighlight %}
<h3>
Is there a way to modify the response before passing it back to Select2?
</h3>
<p>
You can use the <code>ajax.processResults</code> option to modify the data returned from the server before passing it to Select2. The data structure returned by <code>processResults</code> should match the format as specified above.
</p>
{% highlight js linenos %}
$('select').select2({
ajax: {
url: '/example/api',
processResults: function (data) {
return {
results: data.items
};
}
}
});
{% endhighlight %}
<h3>
A request is being triggered on every key stroke, can I delay this?
</h3>
<p>
By default, Select2 will trigger a new AJAX request whenever the user changes their search term. You can set a time limit for debouncing requests using the <code>ajax.delay</code> option.
</p>
{% highlight js linenos %}
$('select').select2({
ajax: {
url: '/example/api',
delay: 250
}
});
{% endhighlight %}
<p>
This will tell Select2 to wait 250 milliseconds before sending the request out to your API.
</p>
<h3>
How do I tell Select2 which URL to get the results from?
</h3>
<p>
When connecting Select2 to a remote data source, you have the option of using either a single endpoint (a single page which handles all requests) or a dynamic endpoint (one of many pages). You can point Select2 to a single endpoint during initialization by specifying a string for the <code>ajax.url</code> option.
</p>
{% highlight js linenos %}
$('select').select2({
ajax: {
url: '/path/to/search/endpoint'
}
});
{% endhighlight %}
<p>
If there isn't a single url for your search results, or you need to call a function to determine the url to use, you can specify a function for the <code>ajax.url</code> option, and this will be used instead. The query parameters will be passed in through the <code>params</code> option.
</p>
{% highlight js linenos %}
$('select').select2({
ajax: {
url: function (params) {
return '/some/url/' + params.term;
}
}
});
{% endhighlight %}
<h3>
I want to add more query parameters to the request, where can this be done?
</h3>
<p>
By default, Select2 will send the query term as well as the pagination data as query parameters in requests. You can override the data that is sent to your API, or change any of the query parameters, by overriding the <code>ajax.data</codE> option.
</p>
{% highlight js linenos %}
$('select').select2({
ajax: {
data: function (params) {
var query = {
search: params.term,
page: params.page
}
// Query parameters will be ?search=[term]&page=[page]
return query;
}
}
});
{% endhighlight %}
<h3>
The results that I am seeing never change
</h3>
<p>
Select2 expects that the results that are returned from the remote endpoint are already filtered ahead of time based on the search term. If your remote endpoint just returns the list of all possible options, you may be interested in using Select2's <a href="examples.html#data-array">support for data arrays</a>.
</p>
<h3>
Can an AJAX plugin other than <code>jQuery.ajax</code> be used?
</h3>
<p>
Select2 uses the transport method defined in <code>ajax.transport</code> to send requests to your API. By default, this transport method is <code>jQuery.ajax</code> but this can be changed.
</p>
{% highlight js linenos %}
$('select').select2({
ajax: {
transport: function (params, success, failure) {
var request = new AjaxRequest(params.url, params);
request.on('success', success);
request.on('failure', failure);
}
}
});
{% endhighlight %}
</section>

150
docs/_includes/options/data/array.html
View File

@ -1,150 +0,0 @@
<section>
<h2 id="data">
Can I load data into Select2 using an array?
</h2>
<p>
While Select2 is designed to be used with a <code>&lt;select&gt;</code> tag
the data that is used to search through and display the results can be
loaded from a JavaScript array using the <code>data</code> option. This
option should be passed in during the initialization of Select2.
</p>
{% highlight js linenos %}
$('select').select2({
data: [
{
id: 'value',
text: 'Text to display'
},
// ... more data objects ...
]
});
{% endhighlight %}
<h3>
What properties are required on the objects passed in to the array?
</h3>
<p>
The <code>id</code> and <code>text</code> properties are required on each
object, and these are the properties that Select2 uses for the internal
data objects. Any additional paramters passed in with data objects will be
included on the data objects that Select2 exposes.
</p>
<h3>
Do the <code>id</code> properties have to be strings?
</h3>
<p>
Because the <code>value</code> attributes on a <code>&lt;select&gt;</code>
tag must be strings, the <code>id</code> property on the data objects must
also be strings. Select2 will attempt to convert anything that is not a
string to a string, which will work for most situations, but it is
recommended to force all of your ids to strings ahead of time.
</p>
<h3>
I can't select results with blank ids or an id of <code>0</code>!
</h3>
<p>
See <a href="#do-the-id-properties-have-to-be-strings">Do the <code>id</code> properties have to be strings?</a>.
</p>
<h3>
How should nested results be formatted?
</h3>
<p>
Nested results should be specified using the <code>children</code> property
on the data objects that are passed in. This <code>children</code> property
should be an array of data objects that are grouped under this option, and
the label for the group should be specified as the <code>text</code>
property on the root data object.
</p>
{% highlight js linenos %}
{
text: 'Group label',
children: [
{
id: 'nested-1',
text: 'First nested option'
},
// ... more data objects ...
]
}
{% endhighlight %}
<h3>
How many levels of nesting are allowed?
</h3>
<p>
Because Select2 falls back to an <code>&lt;optgroup&gt;</code> when
creating nested options, only
<a href="#how-many-levels-of-nesting-can-there-be">a single level of nesting</a>
is supported. Any additional levels of nesting is not guaranteed to be
displayed properly across all browsers and devices.
</p>
<h3>
Why are <code>&lt;option&gt;</code> tags being created?
</h3>
<p>
The <code>data</code> option is a shortcut that Select2 provides which
allows you to load options into your <code>select</code> from a data array.
</p>
{% include options/not-written.html %}
<h3>
My objects don&apos;t use <code>id</code> for their unique identifiers,
what can I do?
</h3>
<p>
Select2 requires that the <code>id</code> property is used to uniquely
identify the options that are displayed in the results list. If you use a
property other than <code>id</code> (like <code>pk</code>) to uniquely
identify an option, you need to map your old property to <code>id</code>
before passing it to Select2.
</p>
<p>
If you cannot do this on your server or you are in a situation where the
identifier cannot be changed, you can do this in JavaScript before passing
it to Select2.
</p>
{% highlight js linenos %}
var data = $.map(yourArrayData, function (obj) {
obj.id = obj.id || obj.pk; // replace pk with your identifier
return obj;
});
{% endhighlight %}
<h3>
My objects use a property other than <code>text</code> for the text that
needs to be displayed
</h3>
<p>
Just like with the <code>id</code> property, Select2 requires that the text
that should be displayed for an option is stored in the <code>text</code>
property. You can map this property from any existing property using the
following JavaScript.
</p>
{% highlight js linenos %}
var data = $.map(yourArrayData, function (obj) {
obj.text = obj.text || obj.name; // replace name with the property used for the text
return obj;
});
{% endhighlight %}
</section>

69
docs/_includes/options/data/select.html
View File

@ -1,69 +0,0 @@
<section>
<h2 id="data-adapters-select-tag">
Can Select2 be used with a <code>&lt;select&gt;</code> tag?
</h2>
<p>
Select2 was designed to be a replacement for the standard <code>&lt;select&gt;</code> boxes that are displayed by the browser, so by default it supports all options and operations that are available in a standard select box, but with added flexibility. There is no special configuration required to make Select2 work with a <code>&lt;select&gt;</code> tag.
</p>
<h3>
Does Select2 support nesting options?
</h3>
<p>
A standard <code>&lt;select&gt;</code> box can display nested options by wrapping them with in an <code>&lt;optgroup&gt;</code> tag.
</p>
{% highlight html linenos %}
<select>
<optgroup label="Group Name">
<option>Nested option</option>
</optgroup>
</select>
{% endhighlight %}
<h3>
How many levels of nesting can there be?
</h3>
<p>
Only a single level of nesting is allowed per the HTML specification. If you nest an <code>&lt;optgroup&gt;</code> within another <code>&lt;optgroup&gt;</code>, Select2 will not be able to detect the extra level of nesting and errors may be triggered as a result.
</p>
<h3>
Can <code>&lt;optgroup&gt;</code> tags be made selectable?
</h3>
<p>
No. This is a limitation of the HTML specification and is not a limitation that Select2 can overcome. You can emulate grouping by using an <code>&lt;option&gt;</code> instead of an <code>&lt;optgroup&gt;</code> and <a href="http://stackoverflow.com/q/30820215/359284#30948247">changing the style by using CSS</a>, but this is not recommended as it is not fully accessible.
</p>
<h3>
How are <code>&lt;option&gt;</code> and <code>&lt;optgroup&gt;</code> tags serialized into data objects?
</h3>
<p>
Select2 will convert the <code>&lt;option&gt;</code> tag into a data object based on the following rules.
</p>
{% highlight txt linenos %}
{
"id": "value attribute" || "option text",
"text": "label attribute" || "option text",
"element": HTMLOptionElement
}
{% endhighlight %}
<p>
And <code>&lt;optgroup&gt;</code> tags will be converted into data objects using the following rules
</p>
{% highlight txt linenos %}
{
"text": "label attribute",
"children": [ option data object, ... ],
"element": HTMLOptGroupElement
}
{% endhighlight %}
</section>

49
docs/_includes/options/data/selection-access.html
View File

@ -1,49 +0,0 @@
<section>
<h2 id="selection-api-access">
How to programmatically access a selection data?
</h2>
<p>
There are few ways to programmatically access the selection data. Calling <code>select2('data')</code> will return the JavaScript array of an objects representing the current selection. Each object will have properties/values which was in the source data objects passed through <code>processResults</code> and <code>templateResult</code> functions (as in <a href="#data">Loading data from an array</a> and <a href="#ajax">Connecting to a remote data source</a>).
</p>
{% highlight js linenos %}
$('select').select2('data');
{% endhighlight %}
<p>
As Select2 uses the HTML <code>&lt;SELECT&gt;</code> element to store the selection result, the selection data are represented by <code>&lt;OPTION&gt;</code> elements and can be accessed in the plain jQuery/DOM manner:
</p>
{% highlight js linenos %}
$('select').find(':selected');
{% endhighlight %}
<p>
It is possible to extend the <code>&lt;OPTION&gt;</code> elements representing selection with the HTML data-* attributes containing arbitrary data from the source data objects:
</p>
{% highlight js linenos %}
$('select').select2({
// ...
templateSelection: function (data, container) {
$(data.element).attr('data-custom-attribute', data.customValue);
return data.text;
}
});
// Retrieve custom attribute value of the first selected element
$('select').find(':selected').attr('data-custom-attribute')
{% endhighlight %}
<p>
In addition, properties/values from source data objects can ba accessed from within an event handler:
</p>
{% highlight js linenos %}
$('select').on('select2:select', function (event) {
console.log(event.params.data)
});
{% endhighlight %}
</section>

10
docs/_includes/options/dropdown.html
View File

@ -1,10 +0,0 @@
<section>
<h1 id="results">
Displaying results
</h1>
{% include options/dropdown/filtering.html %}
{% include options/dropdown/selections.html %}
{% include options/dropdown/tagging.html %}
{% include options/dropdown/placement.html %}
</section>

55
docs/_includes/options/dropdown/filtering.html
View File

@ -1,55 +0,0 @@
<section>
<h2>
Can I change when search results are loaded?
</h2>
<h3>
Can Select2 wait until the user has typed a search term before triggering the request?
</h3>
{% highlight js linenos %}
$('select').select2({
ajax: {
delay: 250 // wait 250 milliseconds before triggering the request
}
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
Select2 is allowing long search terms, can this be prevented?
</h3>
{% highlight js linenos %}
$('select').select2({
maximumInputLength: 20 // only allow terms up to 20 characters long
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
I only want the search box if there are enough results
</h3>
{% highlight js linenos %}
$('select').select2({
minimumResultsForSearch: 20 // at least 20 results must be displayed
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
How can I permanently hide the search box?
</h3>
{% highlight js linenos %}
$('select').select2({
minimumResultsForSearch: Infinity
});
{% endhighlight %}
{% include options/not-written.html %}
</section>

39
docs/_includes/options/dropdown/placement.html
View File

@ -1,39 +0,0 @@
<section>
<h2>
Can I change how the dropdown is placed?
</h2>
<h3 id="dropdown-attachContainer">
Can the dropdown be placed directly after the selection container?
</h3>
{% include options/not-written.html %}
<h3 id="dropdownParent">
Can I pick an element for the dropdown to be appended to?
</h3>
{% highlight js linenos %}
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
I&apos;m using a Bootstrap modal and I can&apos;t use the search box
</h3>
<p>
Use the <code>dropdownParent</code> option, setting it to the modal.
</p>
{% include options/not-written.html %}
<h3>
I&apos;m using jQuery UI and I can&apos;t use the search box
</h3>
{% include options/not-written.html %}
</section>

29
docs/_includes/options/dropdown/selections.html
View File

@ -1,29 +0,0 @@
<section>
<h2>
Can I change how selecting results works?
</h2>
<h3>
Can I select the highlighted result when the dropdown is closed?
</h3>
{% highlight js linenos %}
$('select').select2({
selectOnClose: true
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
Can I prevent the dropdown from closing when a result is selected?
</h3>
{% highlight js linenos %}
$('select').select2({
closeOnSelect: false
});
{% endhighlight %}
{% include options/not-written.html %}
</section>

89
docs/_includes/options/dropdown/tagging.html
View File

@ -1,89 +0,0 @@
<section>
<h2>
Can options be created based on the search term?
</h2>
<h3>
How do I enable tagging?
</h3>
{% highlight js linenos %}
$('select').select2({
tags: true
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
Does tagging work with a single select?
</h3>
<p>
Yes.
</p>
{% include options/not-written.html %}
<h3>
How do I add extra properties to the tag?
</h3>
{% highlight js linenos %}
$('select').select2({
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
newTag: true // add additional parameters
}
}
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
Can I control when tags are created?
</h3>
{% highlight js linenos %}
$('select').select2({
createTag: function (params) {
// Don't offset to create a tag if there is no @ symbol
if (params.term.indexOf('@') === -1) {
// Return null to disable tag creation
return null;
}
return {
id: params.term,
text: params.term
}
}
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
How do I control the placement of the option?
</h3>
{% highlight js linenos %}
$('select').select2({
insertTag: function (data, tag) {
// Insert the tag at the end of the results
data.push(tag);
}
});
{% endhighlight %}
{% include options/not-written.html %}
</section>

8
docs/_includes/options/events.html
View File

@ -1,8 +0,0 @@
<section>
<h1>
Events
</h1>
{% include options/events/jquery.html %}
{% include options/events/internal.html %}
</section>

9
docs/_includes/options/events/internal.html
View File

@ -1,9 +0,0 @@
<section>
<h2 id="events-internal">
Internal Select2 events
</h2>
<p>
Select2 has an internal event system that works independently of the DOM event system. This internal event system is only accessible from plugins and adapters that are connected to Select2.
</p>
</section>

101
docs/_includes/options/events/jquery.html
View File

@ -1,101 +0,0 @@
<section>
<h2 id="events-public">
Public jQuery events
</h2>
<h3>
What events will Select2 trigger?
</h3>
<p>
Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions.
</p>
<dl class="s2-docs-panels">
<dt>change</dt>
<dd>Triggered whenever an option is selected or removed.</dd>
<dt>select2:close</dt>
<dd>Triggered whenever the dropdown is closed.</dd>
<dt>select2:closing</dt>
<dd>Triggered before the dropdown is closed. This event can be prevented.</dd>
<dt>select2:open</dt>
<dd>Triggered whenever the dropdown is opened.</dd>
<dt>select2:opening</dt>
<dd>Triggered before the dropdown is opened. This event can be prevented.</dd>
<dt>select2:select</dt>
<dd>Triggered whenever a result is selected.</dd>
<dt>select2:selecting</dt>
<dd>Triggered before a result is selected. This event can be prevented.</dd>
<dt>select2:unselect</dt>
<dd>Triggered whenever a selection is removed.</dd>
<dt>select2:unselecting</dt>
<dd>Triggered before a selection is removed. This event can be prevented.</dd>
</dl>
<h3>
Does Select2 include extra information in these events?
</h3>
{% include options/not-written.html %}
<h3>
How can I attach listeners for these events?
</h3>
{% highlight js linenos %}
$('select').on('select2:select', function (evt) {
// Do something
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
What events does Select2 listen for?
</h3>
<p>
Select2 will listen for the <code>change</code> event on the
<code>&lt;select&gt;</code> that it is attached to. If you make any
external changes that need to be reflected in Select2 (such as changing the
value), you should trigger this event.
</p>
{% highlight js linenos %}
$('select').val('US'); // Select the option with a value of 'US'
$('select').trigger('change'); // Notify any JS components that the value changed
{% endhighlight %}
<h3>
Can I trigger an event other than <code>change</code> to notify Select2 of changes?
</h3>
<p>
It's common for other components to be listening to the <code>change</code>
event, or for custom event handlers to be attached that may have side
effects. Select2 does not have a custom event (like
<code>select2:update</code>) that can be triggered other than
<code>change</code>. You can rely on jQuery's event namespacing to limit
the scope to Select2 though by triggering the <code>change.select2</code>
event.
</p>
{% highlight js linenos %}
$('select').val('US'); // Change the value or make some change to the internal state
$('select').trigger('change.select2'); // Notify only Select2 of changes
{% endhighlight %}
<h3>
What events can be prevented? How can I prevent a selection from being made?
</h3>
{% include options/not-written.html %}
</section>

9
docs/_includes/options/introduction.html
View File

@ -1,9 +0,0 @@
<section>
<div class="alert alert-warning">
This page of the documentation is currently <strong>undergoing a rewrite and may be incomplete</strong>. If you do not find the answer you are looking for on this page, you may have better luck looking at <a href="options-old.html">the old options page</a>.
</div>
<p>
This documentation is set up in the form of a FAQ and covers the most common questions. If you do not find the answer to your question here, you may want to <a href="community.html">reach out to the community</a> to see if someone else can answer it.
</p>
</section>

3
docs/_includes/options/not-written.html
View File

@ -1,3 +0,0 @@
<div class="alert alert-info">
This answer to this question has not yet been written. You can <a href="https://github.com/select2/select2/blob/master/docs/README.md#how-can-i-fix-an-issue-in-these-docs">improve this documentation</a> by creating a pull request with an answer to this question.
</div>

10
docs/_includes/options/selections.html
View File

@ -1,10 +0,0 @@
<section>
<h1 id="selections">
Displaying selections
</h1>
{% include options/selections/multiple.html %}
{% include options/selections/placeholder.html %}
{% include options/selections/clearing-selections.html %}
{% include options/selections/templating.html %}
</section>

44
docs/_includes/options/selections/clearing-selections.html
View File

@ -1,44 +0,0 @@
<section>
<h2 id="allowClear">
Can I allow users to clear their selections?
</h2>
<p>
You can allow people to clear their current selections with the <code>allowClear</code> option when initializing Select2. Setting this option to <code>true</code> will enable an "x" icon that will reset the selection to the placeholder.
</p>
{% highlight js linenos %}
$('select').select2({
placeholder: 'This is my placeholder',
allowClear: true
});
{% endhighlight %}
<h3>
Why is a placeholder required?
</h3>
{% include options/not-written.html %}
<h3>
The "x" icon is not clearing the selection
</h3>
{% include options/not-written.html %}
<h3>
Can users remove all of their selections in a multiple select at once?
</h3>
<p>
Yes, by setting the value of the control to <code>null</code>:
</p>
{% highlight js linenos %}
$('select').val(null).trigger('change');
{% endhighlight %}
<p>
See <a href="examples.html#programmatic">https://select2.github.io/examples.html#programmatic</a> for a working example.
</p>
</section>

17
docs/_includes/options/selections/multiple.html
View File

@ -1,17 +0,0 @@
<section>
<h2 id="multiple">
Can I allow users to make multiple selections?
</h2>
<p>
Yes, Select2 supports making multiple selections through the use of the <code>multiple</code> option that can be passed in when initializing Select2.
</p>
<h3>
Can the <code>multiple</code> attribute be used on my <code>&lt;select&gt;</code> element?
</h3>
<p>
Yes, Select2 will automatically map the value of the <code>multiple</code> attribute to the <code>multiple</code> option during initialization.
</p>
</section>

84
docs/_includes/options/selections/placeholder.html
View File

@ -1,84 +0,0 @@
<section>
<h2 id="placeholder">
How can I have Select2 display a placeholder?
</h2>
<p>
Select2 supports displaying a placeholder by default using the <code>placeholder</code> option. This can be either a data object matching the placeholder option, or a string to display as the placeholder if you are using a blank placeholder option.
</p>
{% highlight js linenos %}
$('select').select2({
placeholder: 'Select an option'
});
{% endhighlight %}
<h3>
My first option is being displayed instead of my placeholder
</h3>
<p>
This usually means that you do not have a blank <code>&lt;option&gt;&lt;/option&gt;</code> as the first option in your <code>&lt;select&gt;</code>.
</p>
<p>
Note that this does not apply to multiple selects, as the browser does not select the first option by default when multiple selections can be made.
</p>
<h3>
I am using AJAX, can I still show a placeholder?
</h3>
<p>
Yes, Select2 supports placeholders for all configurations. You will still need to add in the placeholder option if you are using a single select.
</p>
<h3>
Can I use an option without a blank value as my placeholder?
</h3>
<p>
The <code>placeholder</code> option allows you to pass in a data object instead of just a string if you need more flexibility. The <code>id</code> of the data object should match the <code>value</code> of the placeholder option.
</p>
{% highlight js linenos %}
$('select').select2({
placeholder: {
id: '-1', // the value of the option
text: 'Select an option'
}
});
{% endhighlight %}
<h3>
Can I change how the placeholder looks?
</h3>
<p>
When using Select2 <strong>when only a single selection can be made</strong>, the placeholder option will be passed through the standard templating methods, including the <code>templateSelection</code> option, so you are able to change how it is displayed.
</p>
{% highlight js linenos %}
$('select').select2({
templateResult: function (data) {
if (data.id === '') { // adjust for custom placeholder values
return 'Custom styled placeholder text';
}
return data.text;
}
});
{% endhighlight %}
<p>
<strong>When multiple selections are allowed</strong>, the placeholder will be displayed using the <code>placeholder</code> attribute on the search box. You can customize the display of this placeholder using CSS, as explained in the following Stack Overflow answer: <a href="http://stackoverflow.com/q/2610497/359284">Change an input's HTML5 placeholder color with CSS</a>
</p>
<h3>
My placeholders aren&apos;t being displayed in Internet Explorer
</h3>
<p>
Select2 uses the native <code>placeholder</code> attribute on input boxes for the multiple select, and that attribute is not supported in older versions of Internet Explorer. You need to include <a href="https://github.com/jamesallardice/Placeholders.js">Placeholders.js</a> on your page, or use the full build, in order to add <code>placeholder</code> attribute support to input boxes.
</p>
</section>

50
docs/_includes/options/selections/templating.html
View File

@ -1,50 +0,0 @@
<section>
<h2 id="templateSelection">
How can I customize the way selections are displayed?
</h2>
<p>
When a selection is made by the user Select2 will display the text of the option by default, just like how it is displayed in a standard select box. You can override the display of the selection by setting the <code>templateSelection</code> option to a JavaScript function.
</p>
{% highlight js linenos %}
function template(data, container) {
return data.text;
}
$('select').select2({
templateSelection: template
});
{% endhighlight %}
<h3>
Nothing is being displayed when I select an option
</h3>
{% include options/not-written.html %}
<h3>
I am using HTML in my selection template but it isn't displaying it
</h3>
<p>
If you want to use HTML in your selection template, you will need to return a jQuery object. Otherwise, Select2 will assume that your template only returns text and will escape it.
</p>
{% highlight js linenos %}
function template(data, container) {
return $('<strong></strong>')
.text(data.text);
}
$('select').select2({
templateSelection: template
});
{% endhighlight %}
<h3>
How can I access the container where the selection is displayed?
</h3>
{% include options/not-written.html %}
</section>

10
docs/_includes/social-buttons.html
View File

@ -1,10 +0,0 @@
<div class="s2-docs-social">
<ul class="s2-docs-social-buttons">
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=select2&amp;repo=select2&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li>
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=select2&amp;repo=select2&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li>
</ul>
</div>

57
docs/_layouts/default.html
View File

@ -1,57 +0,0 @@
<!doctype html>
<html>
<head>
{% include head.html %}
</head>
<body>
{% include navigation.html %}
{{ content }}
{% include footer.html %}
<script>
(function ($) {
'use strict';
$(function () {
var $window = $(window);
var $body = $(document.body);
var $sidebar = $('.s2-docs-sidebar');
$body.scrollspy({
target: '.s2-docs-sidebar',
offset: 40
});
$window.on('load', function () {
$body.scrollspy('refresh');
});
$sidebar.affix({
offset: {
top: function () {
var offsetTop = $sidebar.offset().top;
var navOuterHeight = $('.s2-docs-nav').height();
return (this.top = offsetTop - navOuterHeight);
},
bottom: function () {
return (this.bottom = $('.s2-docs-footer').outerHeight(true));
}
}
});
});
})(jQuery);
(function () {
'use strict';
anchors.options.placement = 'left';
anchors.add('.s2-docs-container h1, .s2-docs-container h2, .s2-docs-container h3, .s2-docs-container h4, .s2-docs-container h5');
})();
</script>
{% include ga.html %}
</body>
</html>

23
docs/_layouts/home.html
View File

@ -1,23 +0,0 @@
<!doctype html>
<html class="s2-docs-home">
<head>
{% include head.html %}
</head>
<body>
{% include navigation.html %}
{{ content }}
{% include footer.html %}
<script>
(function () {
'use strict';
prettyPrint();
})();
</script>
{% include ga.html %}
</body>
</html>

47
docs/_sass/_alert.scss
View File

@ -1,47 +0,0 @@
// Alerts
//
// Modify Bootstrap's default alert styles to mimick
// the `.bs-callout` styles from Bootstrap's docs.
//
// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L711
// @see https://github.com/twbs/bootstrap/blob/master/less/alerts.less
.alert {
background: #fff;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
color: #333;
margin: 20px 0;
padding: 20px;
h4 {
font-size: 18px;
margin-top: 0;
margin-bottom: 5px;
}
&-danger {
border-left-color: #ce4844;
h4 {
color: #ce4844;
}
}
&-info {
border-left-color: #1b809e;
h4 {
color: #1b809e;
}
}
&-warning {
border-left-color: #aa6708;
h4 {
color: #aa6708;
}
}
}

27
docs/_sass/_anchorjs.scss
View File

@ -1,27 +0,0 @@
// AnchorJS Styles
.anchorjs-link {
color: inherit;
transition: all .16s linear;
text-decoration: none;
&:link,
&:visited {
text-decoration: none;
color: inherit;
}
@media (max-width: 480px) {
display: none;
}
}
*:hover > .anchorjs-link {
opacity: .5;
margin-left: -0.9em !important;
}
*:hover > .anchorjs-link:hover,
.anchorjs-link:focus {
opacity: 1;
}

20
docs/_sass/_buttons.scss
View File

@ -1,20 +0,0 @@
// Buttons
.btn-outline-inverse {
color: #428BCA;
background-color: transparent;
border-color: #428BCA;
padding: 15px 30px;
font-size: 20px;
transition: all .1s ease-in-out;
&:hover {
color: #fff;
border-color: #428BCA;
background-color: #428BCA;
}
}
.btn-toolbar {
margin-bottom: 20px;
}

16
docs/_sass/_code.scss
View File

@ -1,16 +0,0 @@
// Code (inline and block)
// Inline code within headings retain the heading's background-color
h2 code,
h3 code,
h4 code {
background-color: inherit;
}
// Modify Bootstrap's styles for blocks of code
pre.prettyprint {
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}

24
docs/_sass/_dl-panels.scss
View File

@ -1,24 +0,0 @@
.s2-docs-panels {
dt, dd {
border: 1px solid $panel-default-border;
}
dt {
background-color: $panel-default-heading-bg;
border-top-left-radius: $panel-border-radius;
border-top-right-radius: $panel-border-radius;
padding: 5px 7.5px;
}
dd {
background-color: $panel-bg;
border-bottom-left-radius: $panel-border-radius;
border-bottom-right-radius: $panel-border-radius;
margin-bottom: 0.75em;
padding: 7.5px;
}
dt + dd {
border-top: none;
}
}

91
docs/_sass/_examples.scss
View File

@ -1,91 +0,0 @@
// Examples
//
// Styles for the Select2 examples, largely copied
// from Bootstrap's docs styles.
//
// @see https://github.com/twbs/bootstrap/blob/master/docs/assets/css/src/docs.css#L533
.s2-example {
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
&:after {
content: "Example";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (min-width: 768px) {
margin-left: 0;
margin-right: 0;
background-color: #fff;
border-width: 1px;
border-color: #eee;
border-radius: 4px 4px 0 0;
box-shadow: none;
}
}
// styles for the event log in the "DOM events" section of the docs
.s2-event-log {
background: #002451;
color: white;
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
margin: 0 -15px 15px;
padding: 45px 15px 15px;
position: relative;
&:after {
content: "Event Log";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #BBB;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (min-width: 768px) {
margin-left: 0;
margin-right: 0;
margin-top: -15px;
border-width: 1px;
border-color: #eee;
box-shadow: none;
}
}
.s2-example + pre,
.s2-example + figure,
.s2-event-log + pre {
margin: -15px -15px 15px;
border-radius: 0;
border-width: 0 0 1px;
@media (min-width: 768px) {
margin-top: -16px;
margin-left: 0;
margin-right: 0;
border-width: 1px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.s2-example + .s2-event-log {
margin-top: -15px;
}

16
docs/_sass/_featurette.scss
View File

@ -1,16 +0,0 @@
// Homepage featurettes
.s2-docs-featurette {
color: #777;
padding: 15px 0;
text-align: center;
h4 {
margin: 30px 0 15px;
}
.fa {
font-size: 28px;
color: #777;
}
}

42
docs/_sass/_footer.scss
View File

@ -1,42 +0,0 @@
// Footer
.s2-docs-footer {
border-top: 1px solid #eee;
color: #767676;
padding-top: 40px;
padding-bottom: 40px;
margin-top: 100px;
text-align: center;
&-links {
padding-left: 0;
margin-top: 20px;
}
&-links li {
display: inline;
padding: 0 2px;
&:after {
content: "·";
padding-left: 8px;
}
&:first-child {
padding-left: 0;
}
&:last-child:after {
content: "";
padding-left: 0;
}
}
@media (min-width: 768px) {
p {
margin-bottom: 0;
}
}
}

49
docs/_sass/_hamburger.scss
View File

@ -1,49 +0,0 @@
// Animated hamburger icon
//
// Add an animation to Bootstrap's `.navbar-toggle` hamburger icon,
// courtesy of Julien Melissas.
//
// @see http://codepen.io/JulienMelissas/pen/LEBGLj
// @see http://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/
.navbar-toggle {
border: none;
background: transparent !important;
&:hover {
background: transparent !important;
}
.icon-bar {
width: 22px;
transition: all 0.2s;
}
.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.middle-bar {
opacity: 0;
}
.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
&.collapsed {
.top-bar {
transform: rotate(0);
}
.middle-bar {
opacity: 1;
}
.bottom-bar {
transform: rotate(0);
}
}
}

31
docs/_sass/_home.scss
View File

@ -1,31 +0,0 @@
// Homepage-specific styles
.s2-docs-home {
.jumbotron {
margin-bottom: 0;
color: #000;
h1 {
color: #000;
margin-top: 20px;
}
}
.lead {
text-align: center;
max-width: 800px;
margin: 0 auto 40px;
}
.notice-previous {
background: #f6f6f6;
color: #666;
border-bottom: 1px solid #eee;
padding: 15px 20px;
}
.half-rule {
width: 100px;
margin: 40px auto;
}
}

24
docs/_sass/_jumbotron.scss
View File

@ -1,24 +0,0 @@
// Jumbotron
//
// Modify Bootstrap's default `.jumbotron` styles.
.jumbotron {
background-color: #F6F6F6;
border-bottom: 1px solid #eee;
color: #777;
padding-left: 0;
padding-right: 0;
h1 {
color: #777;
font-size: 36px;
margin-top: 10px;
}
.version {
color: #999;
font-size: 14px;
font-weight: normal;
margin-bottom: 30px;
}
}

14
docs/_sass/_layout.scss
View File

@ -1,14 +0,0 @@
// Layout
.s2-docs-container {
line-height: 1.6;
}
section {
margin-bottom: 40px;
}
.page-header {
padding-bottom: 19px;
margin-bottom: 29px;
}

59
docs/_sass/_nav.scss
View File

@ -1,59 +0,0 @@
// Main navigation
//
// Styles for the top `.navbar` and its dropdowns.
.s2-docs-nav {
margin-bottom: 0;
border-color: #eee;
background-color: #f6f6f6;
.navbar-brand {
font-weight: 500;
> img {
display: inline;
margin-right: 4px;
}
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
background-color: #f0f0f0;
color: #000;
}
@media (min-width: 768px) {
.navbar-nav > li > .dropdown-menu:before {
position: absolute;
top: -21px;
left: 24px;
display: block;
width: 0;
height: 0;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0.1);
border-style: solid;
border-width: 10px;
content: "";
}
.navbar-nav > li > .dropdown-menu:after {
position: absolute;
top: -20px;
left: 24px;
display: block;
width: 0;
height: 0;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF;
border-style: solid;
border-width: 10px;
content: '';
}
.navbar-nav .dropdown-menu {
border-radius: 4px;
border-color: #ddd;
margin-top: -1px;
}
}
}

50
docs/_sass/_prettify.scss
View File

@ -1,50 +0,0 @@
// Google Code Prettify styles
.com {
color: #999;
}
.lit {
color: #195f91;
}
.pun, .opn, .clo {
color: #93a1a1;
}
.fun {
color: #dc322f;
}
.str, .atv {
color: #C7254E;
}
.kwd, .prettyprint .tag {
color: #2F6F9F;
}
.typ, .atn, .dec, .var {
color: #428BCA;
}
.pln {
color: #333;
}
.prettyprint {
padding: 9px 14px;
margin-bottom: 20px;
margin-top: 20px;
border: 1px solid #eee;
&.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
-moz-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
}
}
// Specify class=linenums on a pre to get line numbering
ol.linenums {
margin: 0 0 0 -12px;
li {
padding-left: 12px;
color: #bebebe;
line-height: 18px;
}
}

62
docs/_sass/_result-repository.scss
View File

@ -1,62 +0,0 @@
// Styles accompanying the "Loading remote data" example `templateResult
.select2-result-repository {
padding-top: 4px;
padding-bottom: 3px;
&__avatar {
float: left;
width: 60px;
margin-right: 10px;
img {
width: 100%;
height: auto;
border-radius: 2px;
}
}
&__meta {
margin-left: 70px;
}
&__title {
color: black;
font-weight: bold;
word-wrap: break-word;
line-height: 1.1;
margin-bottom: 4px;
}
&__forks,
&__stargazers {
margin-right: 1em;
}
&__forks,
&__stargazers,
&__watchers {
display: inline-block;
color: #aaa;
font-size: 11px;
}
&__description {
font-size: 13px;
color: #777;
margin-top: 4px;
}
.select2-results__option--highlighted & {
&__title {
color: white;
}
&__forks,
&__stargazers,
&__description,
&__watchers {
color: mix(#428BCA, white, 30%);
}
}
}

152
docs/_sass/_sidenav.scss
View File

@ -1,152 +0,0 @@
// Side navigation
//
// Scrollspy and affixed enhanced navigation to
// highlight sections and secondary sections of docs content`.
.s2-docs-sidebar {
// By default it is not affixed in mobile views, so undo that
&.affix {
position: static;
}
@media (min-width: 768px) {
padding-left: 20px;
}
}
// First level of nav
.s2-docs-sidenav {
margin-top: 20px;
margin-bottom: 20px;
}
// All levels of nav
.s2-docs-sidebar .nav {
> li > a {
margin-left: -1px;
display: block;
padding: 4px 20px;
font-size: 13px;
font-weight: 500;
color: #767676;
border-left: 1px solid transparent;
transition: color .2s, border-color .2s;
}
> li > a code {
background-color: inherit;
color: inherit;
}
> li > a:hover,
> li > a:focus {
color: #428BCA;
text-decoration: none;
background-color: transparent;
border-left-color: #428BCA;
}
> .active > a,
> .active:hover > a,
> .active:focus > a {
padding-left: 19px;
font-weight: bold;
color: #428BCA;
background-color: transparent;
border-left: 2px solid #428BCA;
}
// Nav: second level (shown on .active)
.nav {
display: none; // Hide by default, but at >768px, show it
padding-bottom: 10px;
}
.nav > li > a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
font-size: 12px;
font-weight: normal;
}
.nav > li > a:hover,
.nav > li > a:focus {
padding-left: 30px;
}
.nav > .active > a,
.nav > .active:hover > a,
.nav > .active:focus > a {
padding-left: 29px;
font-weight: 400;
}
}
// Show and affix the side nav when space allows it
@media (min-width: 992px) {
.s2-docs-sidebar .s2-docs-sidenav {
padding-top: 40px;
transition: border-color .2s;
border-left: 1px solid transparent;
}
.s2-docs-sidebar.affix .s2-docs-sidenav {
border-left-color: #eee;
}
.s2-docs-sidebar .nav > .active > ul {
display: block;
}
// Widen the fixed sidebar
.s2-docs-sidebar.affix,
.s2-docs-sidebar.affix-bottom {
width: 213px;
}
// Undo the static from mobile first approach
.s2-docs-sidebar.affix {
position: fixed;
top: 0px;
}
// Undo the static from mobile first approach
.s2-docs-sidebar.affix-bottom {
position: absolute;
}
.s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
.s2-docs-sidebar.affix .s2-docs-sidenav {
margin-top: 0;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
// Widen the fixed sidebar again
.s2-docs-sidebar.affix-bottom,
.s2-docs-sidebar.affix {
width: 263px;
}
}
/* Back to top (hidden on mobile) */
.back-to-top {
display: none;
padding: 4px 10px;
margin-top: 10px;
margin-left: 10px;
font-size: 12px;
font-weight: 400;
color: #999;
&:hover {
color: #428BCA;
text-decoration: none;
}
@media (min-width: 768px) {
display: block;
}
}

35
docs/_sass/_social.scss
View File

@ -1,35 +0,0 @@
// Social buttons
//
// Twitter and GitHub social action buttons.
.s2-docs-social {
margin-bottom: 20px;
text-align: center;
}
.s2-docs-social-buttons {
display: inline-block;
padding-left: 0;
margin-bottom: 0;
list-style: none;
li {
display: inline-block;
padding: 5px 8px;
line-height: 1;
}
.twitter-follow-button {
width: 225px !important;
}
.twitter-share-button {
width: 98px !important;
}
}
// Style the GitHub buttons via CSS instead of inline attributes
.github-btn {
overflow: hidden;
border: 0;
}

117
docs/_sass/_syntax-highlighting.scss
View File

@ -1,117 +0,0 @@
// Jekyll syntax highlighting styles adjusted to match Google Code Prettify
.highlight {
background: #fff;
// Text
.nx {
color: #333;
}
// Keywords and operators
.k, .o {
font-weight: bold;
}
// Attribute name
.na {
color: #428BCA;
}
// Strings
.s, .s1, .s2, .sb, .sc, .sd, .se, .sh, .si, .sx {
color: #C7254E;
}
// Literals
.m, .mf, mh, .mi, .mo {
color: #195f91;
}
// Parentheses
.p {
color: #93a1a1;
}
// Tag
.nt {
color: #2F6F9F;
}
// Comments
.c {
color: #999;
font-style: italic;
}
// Error
.err {
background-color: #e3d2d2;
color: #a61717;
}
// Generic error
.gr {
color: #a00;
}
// Container styles
pre {
border: none;
margin: 0;
}
& > pre {
border: 1px solid #eee;
padding: 0;
margin-bottom: 14px;
}
// Line numbers
.lineno {
background-color: #fbfbfb;
color: #bebebe;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
}
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

6
docs/_sass/_typography.scss
View File

@ -1,6 +0,0 @@
// Typography
h1[id] {
padding-top: 20px;
margin-top: 0;
}

73
docs/_sass/vendor/bootstrap/_alerts.scss vendored
View File

@ -1,73 +0,0 @@
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: $alert-padding;
margin-bottom: $line-height-computed;
border: 1px solid transparent;
border-radius: $alert-border-radius;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
.alert-dismissible {
padding-right: ($alert-padding + 20);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}
.alert-info {
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}

68
docs/_sass/vendor/bootstrap/_badges.scss vendored
View File

@ -1,68 +0,0 @@
//
// Badges
// --------------------------------------------------
// Base class
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: $font-size-small;
font-weight: $badge-font-weight;
color: $badge-color;
line-height: $badge-line-height;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: $badge-bg;
border-radius: $badge-border-radius;
// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for badges in buttons
.btn & {
position: relative;
top: -1px;
}
.btn-xs &,
.btn-group-xs > .btn & {
top: 0;
padding: 1px 5px;
}
// [converter] extracted a& to a.badge
// Account for badges in navs
.list-group-item.active > &,
.nav-pills > .active > a > & {
color: $badge-active-color;
background-color: $badge-active-bg;
}
.list-group-item > & {
float: right;
}
.list-group-item > & + & {
margin-right: 5px;
}
.nav-pills > li > a > & {
margin-left: 3px;
}
}
// Hover state, but only for links
a.badge {
&:hover,
&:focus {
color: $badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}

28
docs/_sass/vendor/bootstrap/_breadcrumbs.scss vendored
View File

@ -1,28 +0,0 @@
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
margin-bottom: $line-height-computed;
list-style: none;
background-color: $breadcrumb-bg;
border-radius: $border-radius-base;
> li {
display: inline-block;
+ li:before {
// [converter] Workaround for https://github.com/sass/libsass/issues/1115
$nbsp: "\00a0";
content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: $breadcrumb-color;
}
}
> .active {
color: $breadcrumb-active-color;
}
}

244
docs/_sass/vendor/bootstrap/_button-groups.scss vendored
View File

@ -1,244 +0,0 @@
//
// Button groups
// --------------------------------------------------
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
margin-left: -5px; // Offset the first child's margin
@include clearfix;
.btn,
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
margin-left: 5px;
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
@include border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-right-radius(0);
}
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
@include border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { @extend .btn-xs; }
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@include box-shadow(none);
}
}
// Reposition the caret
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
border-width: $caret-width-large $caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 $caret-width-large $caret-width-large;
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
> .btn,
> .btn-group,
> .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
@include clearfix;
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
@include border-top-radius($btn-border-radius-base);
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
@include border-top-radius(0);
@include border-bottom-radius($btn-border-radius-base);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
@include border-top-radius(0);
}
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}
> .btn-group .dropdown-menu {
left: auto;
}
}
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
[data-toggle="buttons"] {
> .btn,
> .btn-group > .btn {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}
}
}

168
docs/_sass/vendor/bootstrap/_buttons.scss vendored
View File

@ -1,168 +0,0 @@
//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: $btn-font-weight;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
white-space: nowrap;
@include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
@include user-select(none);
&,
&:active,
&.active {
&:focus,
&.focus {
@include tab-focus;
}
}
&:hover,
&:focus,
&.focus {
color: $btn-default-color;
text-decoration: none;
}
&:active,
&.active {
outline: 0;
background-image: none;
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: $cursor-disabled;
@include opacity(.65);
@include box-shadow(none);
}
// [converter] extracted a& to a.btn
}
a.btn {
&.disabled,
fieldset[disabled] & {
pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
}
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
// Success appears as green
.btn-success {
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
// Info appears as blue-green
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
// Warning appears as orange
.btn-warning {
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
color: $link-color;
font-weight: normal;
border-radius: 0;
&,
&:active,
&.active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
@include box-shadow(none);
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
}
&:hover,
&:focus {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
background-color: transparent;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: $btn-link-disabled-color;
text-decoration: none;
}
}
}
// Button Sizes
// --------------------------------------------------
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
}
.btn-xs {
@include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
}
// Block button
// --------------------------------------------------
.btn-block {
display: block;
width: 100%;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}

270
docs/_sass/vendor/bootstrap/_carousel.scss vendored
View File

@ -1,270 +0,0 @@
//
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
> .item {
display: none;
position: relative;
@include transition(.6s ease-in-out left);
// Account for jankitude on images
> img,
> a > img {
@include img-responsive;
line-height: 1;
}
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
@include transition-transform(0.6s ease-in-out);
@include backface-visibility(hidden);
@include perspective(1000px);
&.next,
&.active.right {
@include translate3d(100%, 0, 0);
left: 0;
}
&.prev,
&.active.left {
@include translate3d(-100%, 0, 0);
left: 0;
}
&.next.left,
&.prev.right,
&.active {
@include translate3d(0, 0, 0);
left: 0;
}
}
}
> .active,
> .next,
> .prev {
display: block;
}
> .active {
left: 0;
}
> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}
> .next {
left: 100%;
}
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
// Left/right controls for nav
// ---------------------------
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: $carousel-control-width;
@include opacity($carousel-control-opacity);
font-size: $carousel-control-font-size;
color: $carousel-control-color;
text-align: center;
text-shadow: $carousel-text-shadow;
background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
// We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left {
@include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
}
&.right {
left: auto;
right: 0;
@include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
}
// Hover/focus state
&:hover,
&:focus {
outline: 0;
color: $carousel-control-color;
text-decoration: none;
@include opacity(.9);
}
// Toggles
.icon-prev,
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right {
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 5;
display: inline-block;
}
.icon-prev,
.glyphicon-chevron-left {
left: 50%;
margin-left: -10px;
}
.icon-next,
.glyphicon-chevron-right {
right: 50%;
margin-right: -10px;
}
.icon-prev,
.icon-next {
width: 20px;
height: 20px;
line-height: 1;
font-family: serif;
}
.icon-prev {
&:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&:before {
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid $carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
// IE8-9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
}
.active {
margin: 0;
width: 12px;
height: 12px;
background-color: $carousel-indicator-active-bg;
}
}
// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: $carousel-caption-color;
text-align: center;
text-shadow: $carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
// Scale up controls for tablets and up
@media screen and (min-width: $screen-sm-min) {
// Scale up the controls a smidge
.carousel-control {
.glyphicon-chevron-left,
.glyphicon-chevron-right,
.icon-prev,
.icon-next {
width: ($carousel-control-font-size * 1.5);
height: ($carousel-control-font-size * 1.5);
margin-top: ($carousel-control-font-size / -2);
font-size: ($carousel-control-font-size * 1.5);
}
.glyphicon-chevron-left,
.icon-prev {
margin-left: ($carousel-control-font-size / -2);
}
.glyphicon-chevron-right,
.icon-next {
margin-right: ($carousel-control-font-size / -2);
}
}
// Show and left align the captions
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
}

36
docs/_sass/vendor/bootstrap/_close.scss vendored
View File

@ -1,36 +0,0 @@
//
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: ($font-size-base * 1.5);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
@include opacity(.2);
&:hover,
&:focus {
color: $close-color;
text-decoration: none;
cursor: pointer;
@include opacity(.5);
}
// [converter] extracted button& to button.close
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}

69
docs/_sass/vendor/bootstrap/_code.scss vendored
View File

@ -1,69 +0,0 @@
//
// Code (inline and block)
// --------------------------------------------------
// Inline and block code styles
code,
kbd,
pre,
samp {
font-family: $font-family-monospace;
}
// Inline code
code {
padding: 2px 4px;
font-size: 90%;
color: $code-color;
background-color: $code-bg;
border-radius: $border-radius-base;
}
// User input typically entered via keyboard
kbd {
padding: 2px 4px;
font-size: 90%;
color: $kbd-color;
background-color: $kbd-bg;
border-radius: $border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
box-shadow: none;
}
}
// Blocks of code
pre {
display: block;
padding: (($line-height-computed - 1) / 2);
margin: 0 0 ($line-height-computed / 2);
font-size: ($font-size-base - 1); // 14px to 13px
line-height: $line-height-base;
word-break: break-all;
word-wrap: break-word;
color: $pre-color;
background-color: $pre-bg;
border: 1px solid $pre-border-color;
border-radius: $border-radius-base;
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}

37
docs/_sass/vendor/bootstrap/_component-animations.scss vendored
View File

@ -1,37 +0,0 @@
//
// Component animations
// --------------------------------------------------
// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
.fade {
opacity: 0;
@include transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
.collapse {
display: none;
&.in { display: block; }
// [converter] extracted tr&.in to tr.collapse.in
// [converter] extracted tbody&.in to tbody.collapse.in
}
tr.collapse.in { display: table-row; }
tbody.collapse.in { display: table-row-group; }
.collapsing {
position: relative;
height: 0;
overflow: hidden;
@include transition-property(height, visibility);
@include transition-duration(.35s);
@include transition-timing-function(ease);
}

216
docs/_sass/vendor/bootstrap/_dropdowns.scss vendored
View File

@ -1,216 +0,0 @@
//
// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: $caret-width-base dashed;
border-top: $caret-width-base solid \9; // IE8
border-right: $caret-width-base solid transparent;
border-left: $caret-width-base solid transparent;
}
// The dropdown wrapper (div)
.dropup,
.dropdown {
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: $font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: $dropdown-bg;
border: 1px solid $dropdown-fallback-border; // IE8 fallback
border: 1px solid $dropdown-border;
border-radius: $border-radius-base;
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Aligns the dropdown menu to right
//
// Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
@include nav-divider($dropdown-divider-bg);
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height-base;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: $dropdown-link-hover-color;
background-color: $dropdown-link-hover-bg;
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: $dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: $dropdown-link-active-bg;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: $dropdown-link-disabled-color;
}
// Nuke hover/focus effects
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter;
cursor: $cursor-disabled;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
left: 0;
right: auto;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: $font-size-small;
line-height: $line-height-base;
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: ($zindex-dropdown - 10);
}
// Right aligned dropdowns
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: $caret-width-base dashed;
border-bottom: $caret-width-base solid \9; // IE8
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: $grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
right: 0; left: auto;
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
left: 0; right: auto;
}
}
}

617
docs/_sass/vendor/bootstrap/_forms.scss vendored
View File

@ -1,617 +0,0 @@
//
// Forms
// --------------------------------------------------
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
fieldset {
padding: 0;
margin: 0;
border: 0;
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359.
min-width: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: $line-height-computed;
font-size: ($font-size-base * 1.5);
line-height: inherit;
color: $legend-color;
border: 0;
border-bottom: 1px solid $legend-border-color;
}
label {
display: inline-block;
max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
margin-bottom: 5px;
font-weight: bold;
}
// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
@include box-sizing(border-box);
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9; // IE8-9
line-height: normal;
}
input[type="file"] {
display: block;
}
// Make range inputs behave like textual form controls
input[type="range"] {
display: block;
width: 100%;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
@include tab-focus;
}
// Adjust output element
output {
display: block;
padding-top: ($padding-base-vertical + 1);
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
}
// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]
.form-control {
display: block;
width: 100%;
height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
background-color: $input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid $input-border;
border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus;
// Placeholder
@include placeholder;
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: $input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
}
&[disabled],
fieldset[disabled] & {
cursor: $cursor-disabled;
}
// [converter] extracted textarea& to textarea.form-control
}
// Reset height for `textarea`s
textarea.form-control {
height: auto;
}
// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
input[type="search"] {
-webkit-appearance: none;
}
// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: $input-height-base;
}
&.input-sm,
.input-group-sm & {
line-height: $input-height-small;
}
&.input-lg,
.input-group-lg & {
line-height: $input-height-large;
}
}
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: $form-group-margin-bottom;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.radio,
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
label {
min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: $cursor-disabled;
}
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
cursor: $cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
&.disabled,
fieldset[disabled] & {
label {
cursor: $cursor-disabled;
}
}
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
// Size it appropriately next to real form controls
padding-top: ($padding-base-vertical + 1);
padding-bottom: ($padding-base-vertical + 1);
// Remove default margin from `p`
margin-bottom: 0;
min-height: ($line-height-computed + $font-size-base);
&.input-lg,
&.input-sm {
padding-left: 0;
padding-right: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);
.form-group-sm {
.form-control {
height: $input-height-small;
padding: $padding-small-vertical $padding-small-horizontal;
font-size: $font-size-small;
line-height: $line-height-small;
border-radius: $input-border-radius-small;
}
select.form-control {
height: $input-height-small;
line-height: $input-height-small;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: $input-height-small;
min-height: ($line-height-computed + $font-size-small);
padding: ($padding-small-vertical + 1) $padding-small-horizontal;
font-size: $font-size-small;
line-height: $line-height-small;
}
}
@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $input-border-radius-large);
.form-group-lg {
.form-control {
height: $input-height-large;
padding: $padding-large-vertical $padding-large-horizontal;
font-size: $font-size-large;
line-height: $line-height-large;
border-radius: $input-border-radius-large;
}
select.form-control {
height: $input-height-large;
line-height: $input-height-large;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: $input-height-large;
min-height: ($line-height-computed + $font-size-large);
padding: ($padding-large-vertical + 1) $padding-large-horizontal;
font-size: $font-size-large;
line-height: $line-height-large;
}
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
.has-feedback {
// Enable absolute positioning
position: relative;
// Ensure icons don't overlap text
.form-control {
padding-right: ($input-height-base * 1.25);
}
}
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2; // Ensure icon is above input groups
display: block;
width: $input-height-base;
height: $input-height-base;
line-height: $input-height-base;
text-align: center;
pointer-events: none;
}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
width: $input-height-large;
height: $input-height-large;
line-height: $input-height-large;
}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
width: $input-height-small;
height: $input-height-small;
line-height: $input-height-small;
}
// Feedback states
.has-success {
@include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
}
.has-warning {
@include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
}
.has-error {
@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}
// Reposition feedback icon if input has visible label above
.has-feedback label {
& ~ .form-control-feedback {
top: ($line-height-computed + 5); // Height of the `label` and its margin
}
&.sr-only ~ .form-control-feedback {
top: 0;
}
}
// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 10px;
color: lighten($text-color, 25%); // lighten the text some for contrast
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
// [converter] extracted from `.form-inline` for libsass compatibility
@mixin form-inline {
// Kick in the inline
@media (min-width: $screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Make static controls behave like regular ones
.form-control-static {
display: inline-block;
}
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
}
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
.control-label {
margin-bottom: 0;
vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.radio,
.checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
label {
padding-left: 0;
}
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
// Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;
}
}
}
// [converter] extracted as `@mixin form-inline` for libsass compatibility
.form-inline {
@include form-inline;
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal {
// Consistent vertical alignment of radios and checkboxes
//
// Labels also get some reset styles, but that is scoped to a media query below.
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: ($padding-base-vertical + 1); // Default padding plus a border
}
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
.radio,
.checkbox {
min-height: ($line-height-computed + ($padding-base-vertical + 1));
}
// Make form groups behave like rows
.form-group {
@include make-row;
}
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
@media (min-width: $screen-sm-min) {
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: ($padding-base-vertical + 1); // Default padding plus a border
}
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
right: floor(($grid-gutter-width / 2));
}
// Form group sizes
//
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
@media (min-width: $screen-sm-min) {
.control-label {
padding-top: ($padding-large-vertical + 1);
font-size: $font-size-large;
}
}
}
.form-group-sm {
@media (min-width: $screen-sm-min) {
.control-label {
padding-top: ($padding-small-vertical + 1);
font-size: $font-size-small;
}
}
}
}

307
docs/_sass/vendor/bootstrap/_glyphicons.scss vendored
View File

@ -1,307 +0,0 @@
//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
@at-root {
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}
}
// Catchall baseclass
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Individual icons
.glyphicon-asterisk { &:before { content: "\002a"; } }
.glyphicon-plus { &:before { content: "\002b"; } }
.glyphicon-euro,
.glyphicon-eur { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } }
.glyphicon-pencil { &:before { content: "\270f"; } }
.glyphicon-glass { &:before { content: "\e001"; } }
.glyphicon-music { &:before { content: "\e002"; } }
.glyphicon-search { &:before { content: "\e003"; } }
.glyphicon-heart { &:before { content: "\e005"; } }
.glyphicon-star { &:before { content: "\e006"; } }
.glyphicon-star-empty { &:before { content: "\e007"; } }
.glyphicon-user { &:before { content: "\e008"; } }
.glyphicon-film { &:before { content: "\e009"; } }
.glyphicon-th-large { &:before { content: "\e010"; } }
.glyphicon-th { &:before { content: "\e011"; } }
.glyphicon-th-list { &:before { content: "\e012"; } }
.glyphicon-ok { &:before { content: "\e013"; } }
.glyphicon-remove { &:before { content: "\e014"; } }
.glyphicon-zoom-in { &:before { content: "\e015"; } }
.glyphicon-zoom-out { &:before { content: "\e016"; } }
.glyphicon-off { &:before { content: "\e017"; } }
.glyphicon-signal { &:before { content: "\e018"; } }
.glyphicon-cog { &:before { content: "\e019"; } }
.glyphicon-trash { &:before { content: "\e020"; } }
.glyphicon-home { &:before { content: "\e021"; } }
.glyphicon-file { &:before { content: "\e022"; } }
.glyphicon-time { &:before { content: "\e023"; } }
.glyphicon-road { &:before { content: "\e024"; } }
.glyphicon-download-alt { &:before { content: "\e025"; } }
.glyphicon-download { &:before { content: "\e026"; } }
.glyphicon-upload { &:before { content: "\e027"; } }
.glyphicon-inbox { &:before { content: "\e028"; } }
.glyphicon-play-circle { &:before { content: "\e029"; } }
.glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-lock { &:before { content: "\e033"; } }
.glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } }
.glyphicon-volume-down { &:before { content: "\e037"; } }
.glyphicon-volume-up { &:before { content: "\e038"; } }
.glyphicon-qrcode { &:before { content: "\e039"; } }
.glyphicon-barcode { &:before { content: "\e040"; } }
.glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-bookmark { &:before { content: "\e044"; } }
.glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-camera { &:before { content: "\e046"; } }
.glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } }
.glyphicon-text-height { &:before { content: "\e050"; } }
.glyphicon-text-width { &:before { content: "\e051"; } }
.glyphicon-align-left { &:before { content: "\e052"; } }
.glyphicon-align-center { &:before { content: "\e053"; } }
.glyphicon-align-right { &:before { content: "\e054"; } }
.glyphicon-align-justify { &:before { content: "\e055"; } }
.glyphicon-list { &:before { content: "\e056"; } }
.glyphicon-indent-left { &:before { content: "\e057"; } }
.glyphicon-indent-right { &:before { content: "\e058"; } }
.glyphicon-facetime-video { &:before { content: "\e059"; } }
.glyphicon-picture { &:before { content: "\e060"; } }
.glyphicon-map-marker { &:before { content: "\e062"; } }
.glyphicon-adjust { &:before { content: "\e063"; } }
.glyphicon-tint { &:before { content: "\e064"; } }
.glyphicon-edit { &:before { content: "\e065"; } }
.glyphicon-share { &:before { content: "\e066"; } }
.glyphicon-check { &:before { content: "\e067"; } }
.glyphicon-move { &:before { content: "\e068"; } }
.glyphicon-step-backward { &:before { content: "\e069"; } }
.glyphicon-fast-backward { &:before { content: "\e070"; } }
.glyphicon-backward { &:before { content: "\e071"; } }
.glyphicon-play { &:before { content: "\e072"; } }
.glyphicon-pause { &:before { content: "\e073"; } }
.glyphicon-stop { &:before { content: "\e074"; } }
.glyphicon-forward { &:before { content: "\e075"; } }
.glyphicon-fast-forward { &:before { content: "\e076"; } }
.glyphicon-step-forward { &:before { content: "\e077"; } }
.glyphicon-eject { &:before { content: "\e078"; } }
.glyphicon-chevron-left { &:before { content: "\e079"; } }
.glyphicon-chevron-right { &:before { content: "\e080"; } }
.glyphicon-plus-sign { &:before { content: "\e081"; } }
.glyphicon-minus-sign { &:before { content: "\e082"; } }
.glyphicon-remove-sign { &:before { content: "\e083"; } }
.glyphicon-ok-sign { &:before { content: "\e084"; } }
.glyphicon-question-sign { &:before { content: "\e085"; } }
.glyphicon-info-sign { &:before { content: "\e086"; } }
.glyphicon-screenshot { &:before { content: "\e087"; } }
.glyphicon-remove-circle { &:before { content: "\e088"; } }
.glyphicon-ok-circle { &:before { content: "\e089"; } }
.glyphicon-ban-circle { &:before { content: "\e090"; } }
.glyphicon-arrow-left { &:before { content: "\e091"; } }
.glyphicon-arrow-right { &:before { content: "\e092"; } }
.glyphicon-arrow-up { &:before { content: "\e093"; } }
.glyphicon-arrow-down { &:before { content: "\e094"; } }
.glyphicon-share-alt { &:before { content: "\e095"; } }
.glyphicon-resize-full { &:before { content: "\e096"; } }
.glyphicon-resize-small { &:before { content: "\e097"; } }
.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-fire { &:before { content: "\e104"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-calendar { &:before { content: "\e109"; } }
.glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } }
.glyphicon-chevron-up { &:before { content: "\e113"; } }
.glyphicon-chevron-down { &:before { content: "\e114"; } }
.glyphicon-retweet { &:before { content: "\e115"; } }
.glyphicon-shopping-cart { &:before { content: "\e116"; } }
.glyphicon-folder-close { &:before { content: "\e117"; } }
.glyphicon-folder-open { &:before { content: "\e118"; } }
.glyphicon-resize-vertical { &:before { content: "\e119"; } }
.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-bell { &:before { content: "\e123"; } }
.glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } }
.glyphicon-hand-right { &:before { content: "\e127"; } }
.glyphicon-hand-left { &:before { content: "\e128"; } }
.glyphicon-hand-up { &:before { content: "\e129"; } }
.glyphicon-hand-down { &:before { content: "\e130"; } }
.glyphicon-circle-arrow-right { &:before { content: "\e131"; } }
.glyphicon-circle-arrow-left { &:before { content: "\e132"; } }
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-wrench { &:before { content: "\e136"; } }
.glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-briefcase { &:before { content: "\e139"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-paperclip { &:before { content: "\e142"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-pushpin { &:before { content: "\e146"; } }
.glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } }
.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } }
.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } }
.glyphicon-sort-by-order { &:before { content: "\e153"; } }
.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } }
.glyphicon-sort-by-attributes { &:before { content: "\e155"; } }
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
.glyphicon-unchecked { &:before { content: "\e157"; } }
.glyphicon-expand { &:before { content: "\e158"; } }
.glyphicon-collapse-down { &:before { content: "\e159"; } }
.glyphicon-collapse-up { &:before { content: "\e160"; } }
.glyphicon-log-in { &:before { content: "\e161"; } }
.glyphicon-flash { &:before { content: "\e162"; } }
.glyphicon-log-out { &:before { content: "\e163"; } }
.glyphicon-new-window { &:before { content: "\e164"; } }
.glyphicon-record { &:before { content: "\e165"; } }
.glyphicon-save { &:before { content: "\e166"; } }
.glyphicon-open { &:before { content: "\e167"; } }
.glyphicon-saved { &:before { content: "\e168"; } }
.glyphicon-import { &:before { content: "\e169"; } }
.glyphicon-export { &:before { content: "\e170"; } }
.glyphicon-send { &:before { content: "\e171"; } }
.glyphicon-floppy-disk { &:before { content: "\e172"; } }
.glyphicon-floppy-saved { &:before { content: "\e173"; } }
.glyphicon-floppy-remove { &:before { content: "\e174"; } }
.glyphicon-floppy-save { &:before { content: "\e175"; } }
.glyphicon-floppy-open { &:before { content: "\e176"; } }
.glyphicon-credit-card { &:before { content: "\e177"; } }
.glyphicon-transfer { &:before { content: "\e178"; } }
.glyphicon-cutlery { &:before { content: "\e179"; } }
.glyphicon-header { &:before { content: "\e180"; } }
.glyphicon-compressed { &:before { content: "\e181"; } }
.glyphicon-earphone { &:before { content: "\e182"; } }
.glyphicon-phone-alt { &:before { content: "\e183"; } }
.glyphicon-tower { &:before { content: "\e184"; } }
.glyphicon-stats { &:before { content: "\e185"; } }
.glyphicon-sd-video { &:before { content: "\e186"; } }
.glyphicon-hd-video { &:before { content: "\e187"; } }
.glyphicon-subtitles { &:before { content: "\e188"; } }
.glyphicon-sound-stereo { &:before { content: "\e189"; } }
.glyphicon-sound-dolby { &:before { content: "\e190"; } }
.glyphicon-sound-5-1 { &:before { content: "\e191"; } }
.glyphicon-sound-6-1 { &:before { content: "\e192"; } }
.glyphicon-sound-7-1 { &:before { content: "\e193"; } }
.glyphicon-copyright-mark { &:before { content: "\e194"; } }
.glyphicon-registration-mark { &:before { content: "\e195"; } }
.glyphicon-cloud-download { &:before { content: "\e197"; } }
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }
.glyphicon-cd { &:before { content: "\e201"; } }
.glyphicon-save-file { &:before { content: "\e202"; } }
.glyphicon-open-file { &:before { content: "\e203"; } }
.glyphicon-level-up { &:before { content: "\e204"; } }
.glyphicon-copy { &:before { content: "\e205"; } }
.glyphicon-paste { &:before { content: "\e206"; } }
// The following 2 Glyphicons are omitted for the time being because
// they currently use Unicode codepoints that are outside the
// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
// Notably, the bug affects some older versions of the Android Browser.
// More info: https://github.com/twbs/bootstrap/issues/10106
// .glyphicon-door { &:before { content: "\1f6aa"; } }
// .glyphicon-key { &:before { content: "\1f511"; } }
.glyphicon-alert { &:before { content: "\e209"; } }
.glyphicon-equalizer { &:before { content: "\e210"; } }
.glyphicon-king { &:before { content: "\e211"; } }
.glyphicon-queen { &:before { content: "\e212"; } }
.glyphicon-pawn { &:before { content: "\e213"; } }
.glyphicon-bishop { &:before { content: "\e214"; } }
.glyphicon-knight { &:before { content: "\e215"; } }
.glyphicon-baby-formula { &:before { content: "\e216"; } }
.glyphicon-tent { &:before { content: "\26fa"; } }
.glyphicon-blackboard { &:before { content: "\e218"; } }
.glyphicon-bed { &:before { content: "\e219"; } }
.glyphicon-apple { &:before { content: "\f8ff"; } }
.glyphicon-erase { &:before { content: "\e221"; } }
.glyphicon-hourglass { &:before { content: "\231b"; } }
.glyphicon-lamp { &:before { content: "\e223"; } }
.glyphicon-duplicate { &:before { content: "\e224"; } }
.glyphicon-piggy-bank { &:before { content: "\e225"; } }
.glyphicon-scissors { &:before { content: "\e226"; } }
.glyphicon-bitcoin { &:before { content: "\e227"; } }
.glyphicon-btc { &:before { content: "\e227"; } }
.glyphicon-xbt { &:before { content: "\e227"; } }
.glyphicon-yen { &:before { content: "\00a5"; } }
.glyphicon-jpy { &:before { content: "\00a5"; } }
.glyphicon-ruble { &:before { content: "\20bd"; } }
.glyphicon-rub { &:before { content: "\20bd"; } }
.glyphicon-scale { &:before { content: "\e230"; } }
.glyphicon-ice-lolly { &:before { content: "\e231"; } }
.glyphicon-ice-lolly-tasted { &:before { content: "\e232"; } }
.glyphicon-education { &:before { content: "\e233"; } }
.glyphicon-option-horizontal { &:before { content: "\e234"; } }
.glyphicon-option-vertical { &:before { content: "\e235"; } }
.glyphicon-menu-hamburger { &:before { content: "\e236"; } }
.glyphicon-modal-window { &:before { content: "\e237"; } }
.glyphicon-oil { &:before { content: "\e238"; } }
.glyphicon-grain { &:before { content: "\e239"; } }
.glyphicon-sunglasses { &:before { content: "\e240"; } }
.glyphicon-text-size { &:before { content: "\e241"; } }
.glyphicon-text-color { &:before { content: "\e242"; } }
.glyphicon-text-background { &:before { content: "\e243"; } }
.glyphicon-object-align-top { &:before { content: "\e244"; } }
.glyphicon-object-align-bottom { &:before { content: "\e245"; } }
.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
.glyphicon-object-align-left { &:before { content: "\e247"; } }
.glyphicon-object-align-vertical { &:before { content: "\e248"; } }
.glyphicon-object-align-right { &:before { content: "\e249"; } }
.glyphicon-triangle-right { &:before { content: "\e250"; } }
.glyphicon-triangle-left { &:before { content: "\e251"; } }
.glyphicon-triangle-bottom { &:before { content: "\e252"; } }
.glyphicon-triangle-top { &:before { content: "\e253"; } }
.glyphicon-console { &:before { content: "\e254"; } }
.glyphicon-superscript { &:before { content: "\e255"; } }
.glyphicon-subscript { &:before { content: "\e256"; } }
.glyphicon-menu-left { &:before { content: "\e257"; } }
.glyphicon-menu-right { &:before { content: "\e258"; } }
.glyphicon-menu-down { &:before { content: "\e259"; } }
.glyphicon-menu-up { &:before { content: "\e260"; } }

84
docs/_sass/vendor/bootstrap/_grid.scss vendored
View File

@ -1,84 +0,0 @@
//
// Grid system
// --------------------------------------------------
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
@include container-fixed;
@media (min-width: $screen-sm-min) {
width: $container-sm;
}
@media (min-width: $screen-md-min) {
width: $container-md;
}
@media (min-width: $screen-lg-min) {
width: $container-lg;
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
@include container-fixed;
}
// Row
//
// Rows contain and clear the floats of your columns.
.row {
@include make-row;
}
// Columns
//
// Common styles for small and large grid columns
@include make-grid-columns;
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include make-grid(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
@include make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
@include make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
@include make-grid(lg);
}

171
docs/_sass/vendor/bootstrap/_input-groups.scss vendored
View File

@ -1,171 +0,0 @@
//
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
// Ensure that the input is always above the *appended* addon button for
// proper border colors.
position: relative;
z-index: 2;
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
margin-bottom: 0;
&:focus {
z-index: 3;
}
}
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
@extend .input-lg;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
@extend .input-sm;
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Text input groups
// -------------------------
.input-group-addon {
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
font-weight: normal;
line-height: 1;
color: $input-color;
text-align: center;
background-color: $input-group-addon-bg;
border: 1px solid $input-group-addon-border-color;
border-radius: $input-border-radius;
// Sizing
&.input-sm {
padding: $padding-small-vertical $padding-small-horizontal;
font-size: $font-size-small;
border-radius: $input-border-radius-small;
}
&.input-lg {
padding: $padding-large-vertical $padding-large-horizontal;
font-size: $font-size-large;
border-radius: $input-border-radius-large;
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
// Negative margin to only have a 1px border between the two
&:first-child {
> .btn,
> .btn-group {
margin-right: -1px;
}
}
&:last-child {
> .btn,
> .btn-group {
z-index: 2;
margin-left: -1px;
}
}
}

54
docs/_sass/vendor/bootstrap/_jumbotron.scss vendored
View File

@ -1,54 +0,0 @@
//
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding-top: $jumbotron-padding;
padding-bottom: $jumbotron-padding;
margin-bottom: $jumbotron-padding;
color: $jumbotron-color;
background-color: $jumbotron-bg;
h1,
.h1 {
color: $jumbotron-heading-color;
}
p {
margin-bottom: ($jumbotron-padding / 2);
font-size: $jumbotron-font-size;
font-weight: 200;
}
> hr {
border-top-color: darken($jumbotron-bg, 10%);
}
.container &,
.container-fluid & {
border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
.container {
max-width: 100%;
}
@media screen and (min-width: $screen-sm-min) {
padding-top: ($jumbotron-padding * 1.6);
padding-bottom: ($jumbotron-padding * 1.6);
.container &,
.container-fluid & {
padding-left: ($jumbotron-padding * 2);
padding-right: ($jumbotron-padding * 2);
}
h1,
.h1 {
font-size: $jumbotron-heading-font-size;
}
}
}

66
docs/_sass/vendor/bootstrap/_labels.scss vendored
View File

@ -1,66 +0,0 @@
//
// Labels
// --------------------------------------------------
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: $label-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
// [converter] extracted a& to a.label
// Empty labels collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for labels in buttons
.btn & {
position: relative;
top: -1px;
}
}
// Add hover effects, but only for links
a.label {
&:hover,
&:focus {
color: $label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
@include label-variant($label-default-bg);
}
.label-primary {
@include label-variant($label-primary-bg);
}
.label-success {
@include label-variant($label-success-bg);
}
.label-info {
@include label-variant($label-info-bg);
}
.label-warning {
@include label-variant($label-warning-bg);
}
.label-danger {
@include label-variant($label-danger-bg);
}

Some files were not shown because too many files have changed in this diff Show More