diff options
| author | Antony Lesuisse <al@openerp.com> | 2014-01-31 01:51:57 +0100 |
|---|---|---|
| committer | Antony Lesuisse <al@openerp.com> | 2014-01-31 01:51:57 +0100 |
| commit | 4b30f1fcbd8701f82dbbe4e5c8386ee432b063ac (patch) | |
| tree | 93b17a03b45927c20fbb045cda8c8aa09d853409 /addons/website/static/lib/select2-bootstrap-css | |
| parent | ba2d4c90307661a79d78e6ce3b274b76b4c62717 (diff) | |
| parent | 1c283ddf242f0681c1d060f3b8658efa3fcaa0a8 (diff) | |
[MERGE] trunk-website-al
bzr revid: al@openerp.com-20140131005157-jkf8hz6fh2buml2c
Diffstat (limited to 'addons/website/static/lib/select2-bootstrap-css')
| -rw-r--r-- | addons/website/static/lib/select2-bootstrap-css/README.md | 16 | ||||
| -rw-r--r-- | addons/website/static/lib/select2-bootstrap-css/select2-bootstrap.css | 420 |
2 files changed, 436 insertions, 0 deletions
diff --git a/addons/website/static/lib/select2-bootstrap-css/README.md b/addons/website/static/lib/select2-bootstrap-css/README.md new file mode 100644 index 00000000000..c4d8fbdb675 --- /dev/null +++ b/addons/website/static/lib/select2-bootstrap-css/README.md @@ -0,0 +1,16 @@ +CSS for making Select2 fit in with Bootstrap a bit better, +**updated for Bootstrap v3.0.0**. + +http://fk.github.io/select2-bootstrap-css/ + +Tested with Bootstrap 3.0.0 and Select2 3.3.2, 3.4.1 and 3.4.2 and in latest Chrome, Safari, Firefox, Opera (Mac) and IE8-IE10. + +Known issues: + + * "Loading Remote Data" and "Infinite Scroll" not addressed yet, the loading indicator position probably needs some adjustments + * IE8/IE9/IE10, Firefox: Select2 in "Bootstrap input group with radio/checkbox addon" and .input-lg misses 1px in height (IE9/IE10, Firefox behave the same for Bootstrap 3's "input group sizing"-demo at http://getbootstrap.com/components/#input-groups-sizing) + * IE9/IE10: Select2 in "Bootstrap input group with button addon" (no height modifier, i. e. .input-sm, .input-lg) also misses 1px in height (bug _not_ inherited from Bootstrap 3) + * box-shadow for .select2-search input do not fit Bootstrap's defaults + * the Select2 dropdown could inherit look-and-feel from Bootstrap dropdowns and/or could honor Bootstrap height sizing classes + * border-radii for opened Select2 dropdowns could consistently be set to be … round ;-) + * checkboxes and radio-buttons in "Bootstrap input groups" could be vertically aligned to the top (instead of center) if combined with a multi Select2 to address variable height of the Select2 container diff --git a/addons/website/static/lib/select2-bootstrap-css/select2-bootstrap.css b/addons/website/static/lib/select2-bootstrap-css/select2-bootstrap.css new file mode 100644 index 00000000000..5497890f6fe --- /dev/null +++ b/addons/website/static/lib/select2-bootstrap-css/select2-bootstrap.css @@ -0,0 +1,420 @@ +/** + * Select2 Bootstrap CSS + * Compatible with Select2 3.3.2, 3.4.1, 3.4.2 and Twitter Bootstrap 3.0.0 + * MIT License + */ +/** + * Reset Bootstrap 3 .form-control styles which - if applied to the + * original <select>-element the Select2-plugin may be run against - + * are copied to the .select2-container. + */ +.select2-container.form-control { + background: transparent; + border: none; + margin: 0; + padding: 0; +} + +/** + * Adjust Select2 inputs to fit Bootstrap 3 default .form-control appearance. + */ +.select2-container .select2-choices .select2-search-field input, +.select2-container .select2-choice, +.select2-container .select2-choices { + background: none; + padding: 0; + border-color: #cccccc; + border-radius: 4px; + color: #555555; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: white; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.select2-search input { + border-color: #cccccc; + border-radius: 4px; + color: #555555; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: white; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.select2-container .select2-choices .select2-search-field input { + -webkit-box-shadow: none; + box-shadow: none; +} + +/** + * Adjust Select2 input heights to match the Bootstrap default. + */ +.select2-container .select2-choice { + height: 34px; + line-height: 1.42857; +} + +/** + * Address Multi Select2's height which - depending on how many elements have been selected - + * may grown higher than their initial size. + */ +.select2-container.select2-container-multi.form-control { + height: auto; +} + +/** + * Address Bootstrap 3 control sizing classes + * @see http://getbootstrap.com/css/#forms-control-sizes + */ +.select2-container.input-sm .select2-choice, +.input-group-sm .select2-container .select2-choice { + height: 30px; + line-height: 1.5; + border-radius: 3px; +} + +.select2-container.input-lg .select2-choice, +.input-group-lg .select2-container .select2-choice { + height: 45px; + line-height: 1.33; + border-radius: 6px; +} + +.select2-container-multi .select2-choices .select2-search-field input { + height: 32px; +} + +.select2-container-multi.input-sm .select2-choices .select2-search-field input, +.input-group-sm .select2-container-multi .select2-choices .select2-search-field input { + height: 28px; +} + +.select2-container-multi.input-lg .select2-choices .select2-search-field input, +.input-group-lg .select2-container-multi .select2-choices .select2-search-field input { + height: 43px; +} + +/** + * Adjust height and line-height for .select2-search-field amd multi-select Select2 widgets. + * + * 1. Class repetition to address missing .select2-chosen in Select2 < 3.3.2. + */ +.select2-container-multi .select2-choices .select2-search-field input { + margin: 0; +} + +.select2-chosen, +.select2-choice > span:first-child, +.select2-container .select2-choices .select2-search-field input { + padding: 6px 12px; +} + +.input-sm .select2-chosen, +.input-group-sm .select2-chosen, +.input-sm .select2-choice > span:first-child, +.input-group-sm .select2-choice > span:first-child, +.input-sm .select2-choices .select2-search-field input, +.input-group-sm .select2-choices .select2-search-field input { + padding: 5px 10px; +} + +.input-lg .select2-chosen, +.input-group-lg .select2-chosen, +.input-lg .select2-choice > span:first-child, +.input-group-lg .select2-choice > span:first-child, +.input-lg .select2-choices .select2-search-field input, +.input-group-lg .select2-choices .select2-search-field input { + padding: 10px 16px; +} + +.select2-container-multi .select2-choices .select2-search-choice { + margin-top: 5px; + margin-bottom: 3px; +} + +.select2-container-multi.input-sm .select2-choices .select2-search-choice, +.input-group-sm .select2-container-multi .select2-choices .select2-search-choice { + margin-top: 3px; + margin-bottom: 2px; +} + +.select2-container-multi.input-lg .select2-choices .select2-search-choice, +.input-group-lg .select2-container-multi .select2-choices .select2-search-choice { + line-height: 24px; +} + +/** + * Adjust the single Select2's dropdown arrow button appearance. + * + * 1. For Select2 v.3.3.2. + */ +.select2-container .select2-choice .select2-arrow, +.select2-container .select2-choice div { + border-left: 1px solid #cccccc; + background: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} + +.select2-dropdown-open .select2-choice .select2-arrow, +.select2-dropdown-open .select2-choice div { + border-left-color: transparent; + background: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} + +/** + * Adjust the dropdown arrow button icon position for the single-select Select2 elements + * to make it line up vertically now that we increased the height of .select2-container. + * + * 1. Class repetition to address missing .select2-chosen in Select2 v.3.3.2. + */ +.select2-container .select2-choice .select2-arrow b, +.select2-container .select2-choice div b { + background-position: 0 3px; +} + +.select2-dropdown-open .select2-choice .select2-arrow b, +.select2-dropdown-open .select2-choice div b { + background-position: -18px 3px; +} + +.select2-container.input-sm .select2-choice .select2-arrow b, +.input-group-sm .select2-container .select2-choice .select2-arrow b, +.select2-container.input-sm .select2-choice div b, +.input-group-sm .select2-container .select2-choice div b { + background-position: 0 1px; +} + +.select2-dropdown-open.input-sm .select2-choice .select2-arrow b, +.input-group-sm .select2-dropdown-open .select2-choice .select2-arrow b, +.select2-dropdown-open.input-sm .select2-choice div b, +.input-group-sm .select2-dropdown-open .select2-choice div b { + background-position: -18px 1px; +} + +.select2-container.input-lg .select2-choice .select2-arrow b, +.input-group-lg .select2-container .select2-choice .select2-arrow b, +.select2-container.input-lg .select2-choice div b, +.input-group-lg .select2-container .select2-choice div b { + background-position: 0 9px; +} + +.select2-dropdown-open.input-lg .select2-choice .select2-arrow b, +.input-group-lg .select2-dropdown-open .select2-choice .select2-arrow b, +.select2-dropdown-open.input-lg .select2-choice div b, +.input-group-lg .select2-dropdown-open .select2-choice div b { + background-position: -18px 9px; +} + +/** + * Address Bootstrap's validation states and change Select2's border colors and focus states. + * Apply .has-warning, .has-danger or .has-succes to #select2-drop to match Bootstraps' colors. + */ +.has-warning .select2-choice, +.has-warning .select2-choices { + border-color: #c09853; +} +.has-warning .select2-container-active .select2-choice, +.has-warning .select2-container-multi.select2-container-active .select2-choices { + border-color: #a47e3c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; +} +.has-warning.select2-drop-active { + border-color: #a47e3c; +} +.has-warning.select2-drop-active.select2-drop.select2-drop-above { + border-top-color: #a47e3c; +} + +.has-error .select2-choice, +.has-error .select2-choices { + border-color: #b94a48; +} +.has-error .select2-container-active .select2-choice, +.has-error .select2-container-multi.select2-container-active .select2-choices { + border-color: #953b39; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; +} +.has-error.select2-drop-active { + border-color: #953b39; +} +.has-error.select2-drop-active.select2-drop.select2-drop-above { + border-top-color: #953b39; +} + +.has-success .select2-choice, +.has-success .select2-choices { + border-color: #468847; +} +.has-success .select2-container-active .select2-choice, +.has-success .select2-container-multi.select2-container-active .select2-choices { + border-color: #356635; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; +} +.has-success.select2-drop-active { + border-color: #356635; +} +.has-success.select2-drop-active.select2-drop.select2-drop-above { + border-top-color: #356635; +} + +/** + * Make Select2's active-styles - applied to .select2-container when the widget receives focus - + * fit Bootstrap 3's .form-element:focus appearance. + */ +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + border-color: #66afe9; + outline: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} + +.select2-drop-active { + border-color: #66afe9; +} + +.select2-drop-auto-width, +.select2-drop.select2-drop-above.select2-drop-active { + border-top-color: #66afe9; +} + +/** + * Select2 widgets in Bootstrap Input Groups + * + * When Select2 widgets are combined with other elements using Bootstrap 3's + * "Input Group" component, we don't want specific edges of the Select2 container + * to have a border-radius. + * + * In Bootstrap 2, input groups required a markup where these style adjustments + * could be bound to a CSS-class identifying if the additional elements are appended, + * prepended or both. + * + * Bootstrap 3 doesn't rely on these classes anymore, so we have to use our own. + * Use .select2-bootstrap-prepend and .select2-bootstrap-append on a Bootstrap 3 .input-group + * to let the contained Select2 widget know which edges should not be rounded as they are + * directly followed by another element. + * + * @see http://getbootstrap.com/components/#input-groups + */ +.input-group.select2-bootstrap-prepend [class^="select2-choice"] { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; +} + +.input-group.select2-bootstrap-append [class^="select2-choice"] { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; +} + +.select2-dropdown-open [class^="select2-choice"] { + border-bottom-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-right-radius: 0 !important; + border-top-left-radius: 0 !important; +} + +/** + * Adjust Select2's choices hover and selected styles to match Bootstrap 3's default dropdown styles. + */ +.select2-results .select2-highlighted { + color: white; + background-color: #428bca; +} + +/** + * Adjust alignment of Bootstrap 3 buttons in Bootstrap 3 Input Groups to address + * Multi Select2's height which - depending on how many elements have been selected - + * may grown higher than their initial size. + */ +.select2-bootstrap-append .select2-container-multiple, +.select2-bootstrap-append .input-group-btn, +.select2-bootstrap-append .input-group-btn .btn, +.select2-bootstrap-prepend .select2-container-multiple, +.select2-bootstrap-prepend .input-group-btn, +.select2-bootstrap-prepend .input-group-btn .btn { + vertical-align: top; +} + +/** + * Make Multi Select2's choices match Bootstrap 3's default button styles. + */ +.select2-container-multi .select2-choices .select2-search-choice { + color: #555555; + background: white; + border-color: #cccccc; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + -webkit-box-shadow: none; + box-shadow: none; +} + +.select2-container-multi .select2-choices .select2-search-choice-focus { + background: #ebebeb; + border-color: #adadad; + color: #333333; + -webkit-box-shadow: none; + box-shadow: none; +} + +/** + * Address Multi Select2's choice close-button vertical alignment. + */ +.select2-search-choice-close { + margin-top: -7px; + top: 50%; +} + +/** + * Adjust the single Select2's clear button position (used to reset the select box + * back to the placeholder value and visible once a selection is made + * activated by Select2's "allowClear" option). + */ +.select2-container .select2-choice abbr { + top: 50%; +} + +/** + * Adjust "no results" and "selection limit" messages to make use + * of Bootstrap 3's default "Alert" style. + * + * @see http://getbootstrap.com/components/#alerts-default + */ +.select2-results .select2-no-results, +.select2-results .select2-searching, +.select2-results .select2-selection-limit { + background-color: #fcf8e3; + color: #c09853; +} + +/** + * Address disabled Select2 styles. + * + * 1. For Select2 v.3.3.2. + * 2. Revert border-left:0 inherited from Select2's CSS to prevent the arrow + * from jumping when switching from disabled to enabled state and vice versa. + */ +.select2-container.select2-container-disabled .select2-choice, +.select2-container.select2-container-disabled .select2-choices { + cursor: not-allowed; + background-color: #eeeeee; + border-color: #cccccc; +} +.select2-container.select2-container-disabled .select2-choice .select2-arrow, +.select2-container.select2-container-disabled .select2-choice div, +.select2-container.select2-container-disabled .select2-choices .select2-arrow, +.select2-container.select2-container-disabled .select2-choices div { + background-color: transparent; + border-left: 1px solid transparent; + /* 2 */ +} |
