├── .browserslistrc ├── .github └── workflows │ └── compile.yml ├── .gitignore ├── .stylelintrc ├── LICENSE ├── README.md ├── composer.json ├── dist ├── select2-bootstrap-5-theme.css ├── select2-bootstrap-5-theme.min.css ├── select2-bootstrap-5-theme.rtl.css └── select2-bootstrap-5-theme.rtl.min.css ├── docs ├── .gitignore ├── 404.html ├── Gemfile ├── Gemfile.lock ├── _config.yml ├── _config_dev.yml ├── _includes │ ├── clipboard.html │ ├── example.html │ ├── layout │ │ ├── footer.html │ │ ├── nav.html │ │ ├── scripts.html │ │ ├── sidebar.html │ │ ├── styles.html │ │ ├── subnav.html │ │ └── toc.html │ └── svgs │ │ ├── bootstrap.svg │ │ ├── collapse.svg │ │ ├── expand.svg │ │ ├── github.svg │ │ ├── npm.svg │ │ ├── packagist.svg │ │ ├── s2bs5.svg │ │ └── select2.svg ├── _layouts │ ├── default.html │ ├── redirect.html │ └── testing.html ├── _sass │ ├── _anchor.scss │ ├── _bootstrap.scss │ ├── _buttons.scss │ ├── _clipboard.scss │ ├── _content.scss │ ├── _examples.scss │ ├── _footer.scss │ ├── _layout.scss │ ├── _navbar.scss │ ├── _sidebar.scss │ ├── _subnav.scss │ ├── _syntax.scss │ ├── _toc.scss │ ├── _variables.scss │ ├── docs.scss │ ├── rtl.scss │ └── testing.scss ├── about │ ├── contributing.html │ ├── index.html │ └── license.html ├── assets │ ├── css │ │ ├── docs.css │ │ ├── rtl.css │ │ ├── testing.css │ │ └── testing.rtl.css │ └── js │ │ └── docs.js ├── examples │ ├── 4.0 │ │ ├── index.html │ │ ├── input-groups.html │ │ ├── multiple-select.html │ │ ├── single-select.html │ │ ├── sizing.html │ │ └── validation.html │ ├── index.html │ ├── input-groups.html │ ├── multiple-select.html │ ├── single-select.html │ ├── sizing.html │ └── validation.html ├── getting-started │ ├── basic-usage.html │ ├── build-tools.html │ ├── download-install.html │ └── index.html ├── index.html ├── testing-4.0.html └── testing.html ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── _disabled.scss ├── _dropdown.scss ├── _include-all.scss ├── _input-group.scss ├── _layout.scss ├── _multiple.scss ├── _single.scss ├── _sizing.scss ├── _validation.scss ├── _variables.scss └── select2-bootstrap-5-theme.scss /.browserslistrc: -------------------------------------------------------------------------------- 1 | # https://github.com/browserslist/browserslist#readme 2 | # List pulled from Bootstrap v5 3 | 4 | >= 0.5% 5 | last 2 major versions 6 | not dead 7 | Chrome >= 60 8 | Firefox >= 60 9 | Firefox ESR 10 | iOS >= 12 11 | Safari >= 12 12 | not Explorer <= 11 -------------------------------------------------------------------------------- /.github/workflows/compile.yml: -------------------------------------------------------------------------------- 1 | name: Compile CSS 2 | 3 | on: 4 | push: 5 | pull_request: 6 | 7 | env: 8 | NODE: 14 9 | 10 | jobs: 11 | css: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Clone repository 15 | uses: actions/checkout@v2 16 | 17 | - name: Set up Node.js 18 | uses: actions/setup-node@v2 19 | with: 20 | node-version: "${{ env.NODE }}" 21 | 22 | - name: Install dependencies 23 | run: npm ci 24 | 25 | - name: Compile CSS with Gulp.js 26 | run: npm run compile -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-twbs-bootstrap" 4 | ], 5 | "rules": { 6 | "color-hex-length": "long", 7 | "declaration-no-important": null, 8 | "declaration-property-value-disallowed-list": { 9 | "border": ["none"], 10 | "outline": ["none"] 11 | }, 12 | "function-disallowed-list": [ 13 | "calc", 14 | "lighten", 15 | "darken" 16 | ], 17 | "indentation": 4, 18 | "property-disallowed-list": [ 19 | "border-radius", 20 | "border-top-left-radius", 21 | "border-top-right-radius", 22 | "border-bottom-right-radius", 23 | "border-bottom-left-radius", 24 | "transition" 25 | ], 26 | "scss/dollar-variable-default": [ 27 | true, 28 | { 29 | "ignore": "local" 30 | } 31 | ], 32 | "scss/selector-no-union-class-name": true, 33 | "selector-class-pattern": null, 34 | "selector-max-class": null, 35 | "selector-max-combinators": null, 36 | "selector-max-compound-selectors": null, 37 | "selector-no-qualifying-type": null 38 | } 39 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Andrew Palfrey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Select2 Bootstrap 5 Theme 2 | 3 | [![GitHub](https://img.shields.io/github/v/release/apalfrey/select2-bootstrap-5-theme?style=flat-square)](https://github.com/apalfrey/select2-bootstrap-5-theme) 4 | [![npm](https://img.shields.io/npm/v/select2-bootstrap-5-theme?style=flat-square)](https://www.npmjs.com/package/select2-bootstrap-5-theme) 5 | [![Packagist Version](https://img.shields.io/packagist/v/apalfrey/select2-bootstrap-5-theme?style=flat-square)](https://packagist.org/packages/apalfrey/select2-bootstrap-5-theme) 6 | [![License](https://img.shields.io/github/license/apalfrey/select2-bootstrap-5-theme?style=flat-square)](LICENSE) 7 | 8 | [Select2](https://github.com/select2/select2) v4 theme for Bootstrap 5, inspired by [select2-bootstrap4-theme](https://github.com/ttskch/select2-bootstrap4-theme) 9 | 10 | **Works with Select2 v4.0 and v4.1** 11 | 12 | ## Docs 13 | https://apalfrey.github.io/select2-bootstrap-5-theme/ 14 | 15 | ## Installation 16 | 17 | ### CDN 18 | 19 | #### Select2 v4.0 20 | ```html 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | #### Select2 v4.1 35 | ```html 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | ``` 48 | 49 | ### Package Managers 50 | 51 | ```bash 52 | # npm 53 | $ npm install select2-bootstrap-5-theme 54 | 55 | # yarn 56 | $ yarn add select2-bootstrap-5-theme 57 | 58 | # composer 59 | $ composer require apalfrey/select2-bootstrap-5-theme 60 | ``` 61 | 62 | #### HTML 63 | ```html 64 | 65 | 66 | 67 | 68 | ``` 69 | 70 | #### SCSS 71 | ```scss 72 | @import "node_modules/select2/src/scss/core"; 73 | // If you need to import Bootstrap as well: 74 | @import "node_modules/select2-bootstrap-5-theme/src/select2-bootstrap-5-theme"; 75 | // Or if you have already imported Bootstrap: 76 | @import "node_modules/select2-bootstrap-5-theme/src/include-all"; 77 | ``` 78 | 79 | ## Usage 80 | 81 | ```js 82 | // Basic 83 | $("select").select2({ 84 | theme: "bootstrap-5", 85 | }); 86 | 87 | // Small using Select2 properties 88 | $("#form-select-sm").select2({ 89 | theme: "bootstrap-5", 90 | containerCssClass: "select2--small", // For Select2 v4.0 91 | selectionCssClass: "select2--small", // For Select2 v4.1 92 | dropdownCssClass: "select2--small", 93 | }); 94 | 95 | // Small using Bootstrap 5 classes 96 | $("#form-select-sm").select2({ 97 | theme: "bootstrap-5", 98 | dropdownParent: $("#form-select-sm").parent(), // Required for dropdown styling 99 | }); 100 | 101 | // Large using Select2 properties 102 | $("select").select2({ 103 | theme: "bootstrap-5", 104 | containerCssClass: "select2--large", // For Select2 v4.0 105 | selectionCssClass: "select2--large", // For Select2 v4.1 106 | dropdownCssClass: "select2--large", 107 | }); 108 | 109 | // Large using Bootstrap 5 classes 110 | $("#form-select-lg").select2({ 111 | theme: "bootstrap-5", 112 | dropdownParent: $("#form-select-lg").parent(), // Required for dropdown styling 113 | }); 114 | ``` 115 | 116 | ## Build tools 117 | This repo uses Gulp to compile the assets, see below for the included npm scripts and Gulp tasks and what they do; 118 | 119 | | npm script | Gulp task | Description | 120 | |---------------------|---------------------|----------------------------------------------------------------------------------------------------------------------------------| 121 | | `start` | `default` | Cleans the `dist` directory, lints the SCSS, compiles the dev and min versions and starts watching the SCSS for changes | 122 | | `start:full` | N/A | Cleans, lints, compiles and watches the SCSS (theme & docs) and serves the docs for development | 123 | | `clean` | `clean` | Cleans the `dist` directory, removing the directory and it's contents | 124 | | `lint` | `lint` | Lints the SCSS files using [Stylelint](https://stylelint.io/), see [.stylelintrc](.stylelintrc) and [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap) for linting rules | 125 | | `compile` | `compile` | Cleans the `dist` directory, lints the SCSS, compiles the LTR and RTL dev and min versions. Does the same for the docs | 126 | | `compile:main` | `compile:main` | Compiles all LTR versions | 127 | | `compile:rtl` | `compile:rtl` | Compiles all RTL versions | 128 | | `watch` | `watch` | Watches all files in `src`, compiling the SCSS when changes are detected | 129 | | `docs` | `docs` | Cleans the `docs/assets/css` directory, lints the docs SCSS, compiles the docsSCSS and starts watching the docs SCSS for changes | 130 | | `docs:clean` | `docs:clean` | Cleans the `docs/assets/css` directory, removing the directory and it's contents | 131 | | `docs:lint` | `docs:lint` | Lints the docs SCSS files using [Stylelint](https://stylelint.io/), see [.stylelintrc](.stylelintrc) and [stylelint-config-twbs-bootstrap](https://github.com/twbs/stylelint-config-twbs-bootstrap) for linting rules | 132 | | `docs:compile` | `docs:compile` | Cleans the `docs/assets/css` directory, lints the docs SCSS and compiles the LTR and RTL versions | 133 | | `docs:compile:main` | `docs:compile:main` | Compiles the LTR version of the docs SCSS | 134 | | `docs:compile:rtl` | `docs:compile:rtl` | Compiles the RTL version of the docs SCSS | 135 | | `docs:watch` | `docs:watch` | Watches all files in docs/_sass, compiling the SCSS when changes are detected | 136 | | `docs:build` | N/A | Builds the docs using Jekyll | 137 | | `docs:serve` | N/A | Serves the docs using Jekyll for development | 138 | 139 | ## Contributing 140 | If you have ideas for improvements or changes, feel free to submit an [issue](https://github.com/apalfrey/select2-bootstrap-5-theme/issues/new), or if you have changes you'd like in the project, feel free to [submit a pull request](https://github.com/apalfrey/select2-bootstrap-5-theme/compare). Make sure you run `gulp compile` or `npm run compile` before submitting a pull request to ensure the styles are compiled. 141 | 142 | [Find out more about contributing here](https://apalfrey.github.io/select2-bootstrap-5-theme/about/contributing/) 143 | 144 | ## License 145 | 146 | ``` 147 | MIT License 148 | 149 | Copyright (c) 2022 Andrew Palfrey 150 | 151 | Permission is hereby granted, free of charge, to any person obtaining a copy 152 | of this software and associated documentation files (the "Software"), to deal 153 | in the Software without restriction, including without limitation the rights 154 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 155 | copies of the Software, and to permit persons to whom the Software is 156 | furnished to do so, subject to the following conditions: 157 | 158 | The above copyright notice and this permission notice shall be included in all 159 | copies or substantial portions of the Software. 160 | 161 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 162 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 163 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 164 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 165 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 166 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 167 | SOFTWARE. 168 | ``` 169 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "apalfrey/select2-bootstrap-5-theme", 3 | "description": "Select2 theme for Bootstrap 5", 4 | "homepage": "https://github.com/apalfrey/select2-bootstrap-5-theme", 5 | "keywords": [ 6 | "select2", 7 | "theme", 8 | "bootstrap", 9 | "bootstrap5", 10 | "bootstrap-5", 11 | "css", 12 | "scss" 13 | ], 14 | "type": "library", 15 | "license": "MIT", 16 | "authors": [ 17 | { 18 | "name": "Andrew Palfrey", 19 | "email": "apalfrey@apalfrey.me" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-cache 4 | .jekyll-metadata 5 | vendor 6 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Page not found 4 | title_tag: true 5 | permalink: /404 6 | sitemap: false 7 | toc: false 8 | error: true 9 | --- 10 | 11 |
12 |
13 |

404

14 |

Page not found

15 |
16 |
17 | -------------------------------------------------------------------------------- /docs/Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | # gem "jekyll", "~> 4.2.0" 4 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and 5 | # uncomment the line below. To upgrade, run `bundle update github-pages`. 6 | gem "github-pages", group: :jekyll_plugins 7 | # If you have any plugins, put them here! 8 | group :jekyll_plugins do 9 | gem "jekyll-sitemap" 10 | end 11 | 12 | # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem 13 | # and associated library. 14 | platforms :mingw, :x64_mingw, :mswin, :jruby do 15 | gem "tzinfo", "~> 1.2" 16 | gem "tzinfo-data" 17 | end 18 | 19 | # Performance-booster for watching directories on Windows 20 | gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin] 21 | 22 | -------------------------------------------------------------------------------- /docs/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (6.0.4.8) 5 | concurrent-ruby (~> 1.0, >= 1.0.2) 6 | i18n (>= 0.7, < 2) 7 | minitest (~> 5.1) 8 | tzinfo (~> 1.1) 9 | zeitwerk (~> 2.2, >= 2.2.2) 10 | addressable (2.8.0) 11 | public_suffix (>= 2.0.2, < 5.0) 12 | coffee-script (2.4.1) 13 | coffee-script-source 14 | execjs 15 | coffee-script-source (1.11.1) 16 | colorator (1.1.0) 17 | commonmarker (0.23.4) 18 | concurrent-ruby (1.1.10) 19 | dnsruby (1.61.9) 20 | simpleidn (~> 0.1) 21 | em-websocket (0.5.3) 22 | eventmachine (>= 0.12.9) 23 | http_parser.rb (~> 0) 24 | ethon (0.15.0) 25 | ffi (>= 1.15.0) 26 | eventmachine (1.2.7-x64-mingw32) 27 | execjs (2.8.1) 28 | faraday (1.10.0) 29 | faraday-em_http (~> 1.0) 30 | faraday-em_synchrony (~> 1.0) 31 | faraday-excon (~> 1.1) 32 | faraday-httpclient (~> 1.0) 33 | faraday-multipart (~> 1.0) 34 | faraday-net_http (~> 1.0) 35 | faraday-net_http_persistent (~> 1.0) 36 | faraday-patron (~> 1.0) 37 | faraday-rack (~> 1.0) 38 | faraday-retry (~> 1.0) 39 | ruby2_keywords (>= 0.0.4) 40 | faraday-em_http (1.0.0) 41 | faraday-em_synchrony (1.0.0) 42 | faraday-excon (1.1.0) 43 | faraday-httpclient (1.0.1) 44 | faraday-multipart (1.0.3) 45 | multipart-post (>= 1.2, < 3) 46 | faraday-net_http (1.0.1) 47 | faraday-net_http_persistent (1.2.0) 48 | faraday-patron (1.0.0) 49 | faraday-rack (1.0.0) 50 | faraday-retry (1.0.3) 51 | ffi (1.15.5-x64-mingw32) 52 | forwardable-extended (2.6.0) 53 | gemoji (3.0.1) 54 | github-pages (226) 55 | github-pages-health-check (= 1.17.9) 56 | jekyll (= 3.9.2) 57 | jekyll-avatar (= 0.7.0) 58 | jekyll-coffeescript (= 1.1.1) 59 | jekyll-commonmark-ghpages (= 0.2.0) 60 | jekyll-default-layout (= 0.1.4) 61 | jekyll-feed (= 0.15.1) 62 | jekyll-gist (= 1.5.0) 63 | jekyll-github-metadata (= 2.13.0) 64 | jekyll-include-cache (= 0.2.1) 65 | jekyll-mentions (= 1.6.0) 66 | jekyll-optional-front-matter (= 0.3.2) 67 | jekyll-paginate (= 1.1.0) 68 | jekyll-readme-index (= 0.3.0) 69 | jekyll-redirect-from (= 0.16.0) 70 | jekyll-relative-links (= 0.6.1) 71 | jekyll-remote-theme (= 0.4.3) 72 | jekyll-sass-converter (= 1.5.2) 73 | jekyll-seo-tag (= 2.8.0) 74 | jekyll-sitemap (= 1.4.0) 75 | jekyll-swiss (= 1.0.0) 76 | jekyll-theme-architect (= 0.2.0) 77 | jekyll-theme-cayman (= 0.2.0) 78 | jekyll-theme-dinky (= 0.2.0) 79 | jekyll-theme-hacker (= 0.2.0) 80 | jekyll-theme-leap-day (= 0.2.0) 81 | jekyll-theme-merlot (= 0.2.0) 82 | jekyll-theme-midnight (= 0.2.0) 83 | jekyll-theme-minimal (= 0.2.0) 84 | jekyll-theme-modernist (= 0.2.0) 85 | jekyll-theme-primer (= 0.6.0) 86 | jekyll-theme-slate (= 0.2.0) 87 | jekyll-theme-tactile (= 0.2.0) 88 | jekyll-theme-time-machine (= 0.2.0) 89 | jekyll-titles-from-headings (= 0.5.3) 90 | jemoji (= 0.12.0) 91 | kramdown (= 2.3.2) 92 | kramdown-parser-gfm (= 1.1.0) 93 | liquid (= 4.0.3) 94 | mercenary (~> 0.3) 95 | minima (= 2.5.1) 96 | nokogiri (>= 1.13.4, < 2.0) 97 | rouge (= 3.26.0) 98 | terminal-table (~> 1.4) 99 | github-pages-health-check (1.17.9) 100 | addressable (~> 2.3) 101 | dnsruby (~> 1.60) 102 | octokit (~> 4.0) 103 | public_suffix (>= 3.0, < 5.0) 104 | typhoeus (~> 1.3) 105 | html-pipeline (2.14.1) 106 | activesupport (>= 2) 107 | nokogiri (>= 1.4) 108 | http_parser.rb (0.8.0) 109 | i18n (0.9.5) 110 | concurrent-ruby (~> 1.0) 111 | jekyll (3.9.2) 112 | addressable (~> 2.4) 113 | colorator (~> 1.0) 114 | em-websocket (~> 0.5) 115 | i18n (~> 0.7) 116 | jekyll-sass-converter (~> 1.0) 117 | jekyll-watch (~> 2.0) 118 | kramdown (>= 1.17, < 3) 119 | liquid (~> 4.0) 120 | mercenary (~> 0.3.3) 121 | pathutil (~> 0.9) 122 | rouge (>= 1.7, < 4) 123 | safe_yaml (~> 1.0) 124 | jekyll-avatar (0.7.0) 125 | jekyll (>= 3.0, < 5.0) 126 | jekyll-coffeescript (1.1.1) 127 | coffee-script (~> 2.2) 128 | coffee-script-source (~> 1.11.1) 129 | jekyll-commonmark (1.4.0) 130 | commonmarker (~> 0.22) 131 | jekyll-commonmark-ghpages (0.2.0) 132 | commonmarker (~> 0.23.4) 133 | jekyll (~> 3.9.0) 134 | jekyll-commonmark (~> 1.4.0) 135 | rouge (>= 2.0, < 4.0) 136 | jekyll-default-layout (0.1.4) 137 | jekyll (~> 3.0) 138 | jekyll-feed (0.15.1) 139 | jekyll (>= 3.7, < 5.0) 140 | jekyll-gist (1.5.0) 141 | octokit (~> 4.2) 142 | jekyll-github-metadata (2.13.0) 143 | jekyll (>= 3.4, < 5.0) 144 | octokit (~> 4.0, != 4.4.0) 145 | jekyll-include-cache (0.2.1) 146 | jekyll (>= 3.7, < 5.0) 147 | jekyll-mentions (1.6.0) 148 | html-pipeline (~> 2.3) 149 | jekyll (>= 3.7, < 5.0) 150 | jekyll-optional-front-matter (0.3.2) 151 | jekyll (>= 3.0, < 5.0) 152 | jekyll-paginate (1.1.0) 153 | jekyll-readme-index (0.3.0) 154 | jekyll (>= 3.0, < 5.0) 155 | jekyll-redirect-from (0.16.0) 156 | jekyll (>= 3.3, < 5.0) 157 | jekyll-relative-links (0.6.1) 158 | jekyll (>= 3.3, < 5.0) 159 | jekyll-remote-theme (0.4.3) 160 | addressable (~> 2.0) 161 | jekyll (>= 3.5, < 5.0) 162 | jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0) 163 | rubyzip (>= 1.3.0, < 3.0) 164 | jekyll-sass-converter (1.5.2) 165 | sass (~> 3.4) 166 | jekyll-seo-tag (2.8.0) 167 | jekyll (>= 3.8, < 5.0) 168 | jekyll-sitemap (1.4.0) 169 | jekyll (>= 3.7, < 5.0) 170 | jekyll-swiss (1.0.0) 171 | jekyll-theme-architect (0.2.0) 172 | jekyll (> 3.5, < 5.0) 173 | jekyll-seo-tag (~> 2.0) 174 | jekyll-theme-cayman (0.2.0) 175 | jekyll (> 3.5, < 5.0) 176 | jekyll-seo-tag (~> 2.0) 177 | jekyll-theme-dinky (0.2.0) 178 | jekyll (> 3.5, < 5.0) 179 | jekyll-seo-tag (~> 2.0) 180 | jekyll-theme-hacker (0.2.0) 181 | jekyll (> 3.5, < 5.0) 182 | jekyll-seo-tag (~> 2.0) 183 | jekyll-theme-leap-day (0.2.0) 184 | jekyll (> 3.5, < 5.0) 185 | jekyll-seo-tag (~> 2.0) 186 | jekyll-theme-merlot (0.2.0) 187 | jekyll (> 3.5, < 5.0) 188 | jekyll-seo-tag (~> 2.0) 189 | jekyll-theme-midnight (0.2.0) 190 | jekyll (> 3.5, < 5.0) 191 | jekyll-seo-tag (~> 2.0) 192 | jekyll-theme-minimal (0.2.0) 193 | jekyll (> 3.5, < 5.0) 194 | jekyll-seo-tag (~> 2.0) 195 | jekyll-theme-modernist (0.2.0) 196 | jekyll (> 3.5, < 5.0) 197 | jekyll-seo-tag (~> 2.0) 198 | jekyll-theme-primer (0.6.0) 199 | jekyll (> 3.5, < 5.0) 200 | jekyll-github-metadata (~> 2.9) 201 | jekyll-seo-tag (~> 2.0) 202 | jekyll-theme-slate (0.2.0) 203 | jekyll (> 3.5, < 5.0) 204 | jekyll-seo-tag (~> 2.0) 205 | jekyll-theme-tactile (0.2.0) 206 | jekyll (> 3.5, < 5.0) 207 | jekyll-seo-tag (~> 2.0) 208 | jekyll-theme-time-machine (0.2.0) 209 | jekyll (> 3.5, < 5.0) 210 | jekyll-seo-tag (~> 2.0) 211 | jekyll-titles-from-headings (0.5.3) 212 | jekyll (>= 3.3, < 5.0) 213 | jekyll-watch (2.2.1) 214 | listen (~> 3.0) 215 | jemoji (0.12.0) 216 | gemoji (~> 3.0) 217 | html-pipeline (~> 2.2) 218 | jekyll (>= 3.0, < 5.0) 219 | kramdown (2.3.2) 220 | rexml 221 | kramdown-parser-gfm (1.1.0) 222 | kramdown (~> 2.0) 223 | liquid (4.0.3) 224 | listen (3.7.1) 225 | rb-fsevent (~> 0.10, >= 0.10.3) 226 | rb-inotify (~> 0.9, >= 0.9.10) 227 | mercenary (0.3.6) 228 | minima (2.5.1) 229 | jekyll (>= 3.5, < 5.0) 230 | jekyll-feed (~> 0.9) 231 | jekyll-seo-tag (~> 2.1) 232 | minitest (5.15.0) 233 | multipart-post (2.1.1) 234 | nokogiri (1.13.5-x64-mingw32) 235 | racc (~> 1.4) 236 | octokit (4.22.0) 237 | faraday (>= 0.9) 238 | sawyer (~> 0.8.0, >= 0.5.3) 239 | pathutil (0.16.2) 240 | forwardable-extended (~> 2.6) 241 | public_suffix (4.0.7) 242 | racc (1.6.0) 243 | rb-fsevent (0.11.1) 244 | rb-inotify (0.10.1) 245 | ffi (~> 1.0) 246 | rexml (3.2.5) 247 | rouge (3.26.0) 248 | ruby2_keywords (0.0.5) 249 | rubyzip (2.3.2) 250 | safe_yaml (1.0.5) 251 | sass (3.7.4) 252 | sass-listen (~> 4.0.0) 253 | sass-listen (4.0.0) 254 | rb-fsevent (~> 0.9, >= 0.9.4) 255 | rb-inotify (~> 0.9, >= 0.9.7) 256 | sawyer (0.8.2) 257 | addressable (>= 2.3.5) 258 | faraday (> 0.8, < 2.0) 259 | simpleidn (0.2.1) 260 | unf (~> 0.1.4) 261 | terminal-table (1.8.0) 262 | unicode-display_width (~> 1.1, >= 1.1.1) 263 | thread_safe (0.3.6) 264 | typhoeus (1.4.0) 265 | ethon (>= 0.9.0) 266 | tzinfo (1.2.9) 267 | thread_safe (~> 0.1) 268 | tzinfo-data (1.2022.1) 269 | tzinfo (>= 1.0.0) 270 | unf (0.1.4) 271 | unf_ext 272 | unf_ext (0.0.8.1-x64-mingw32) 273 | unicode-display_width (1.8.0) 274 | wdm (0.1.1) 275 | zeitwerk (2.5.4) 276 | 277 | PLATFORMS 278 | x64-mingw32 279 | 280 | DEPENDENCIES 281 | github-pages 282 | jekyll-sitemap 283 | tzinfo (~> 1.2) 284 | tzinfo-data 285 | wdm (~> 0.1.1) 286 | 287 | BUNDLED WITH 288 | 2.3.9 289 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | # Site settings 2 | title: Select2 Bootstrap 5 Theme # the title for the site 3 | description: >- # ignore newlines until "baseurl:" 4 | Write an awesome description for your new site here. You can edit this 5 | line in _config.yml. It will appear in your document head meta (for 6 | Google search results) and in your feed.xml site description. 7 | baseurl: /select2-bootstrap-5-theme # the subpath of the site 8 | url: https://apalfrey.github.io # the base hostname & protocol for the site 9 | version: 1.3.0 10 | 11 | # Build settings 12 | theme: null # prevents style.css from being generated 13 | plugins: 14 | - jekyll-sitemap 15 | 16 | # Exclude from processing. 17 | exclude: 18 | - _sass/ 19 | - .sass-cache/ 20 | - .jekyll-cache/ 21 | - gemfiles/ 22 | - Gemfile 23 | - Gemfile.lock 24 | - node_modules/ 25 | - vendor/bundle/ 26 | - vendor/cache/ 27 | - vendor/gems/ 28 | - vendor/ruby/ 29 | - testing.html 30 | - testing-4.0.html 31 | - assets/css/testing.css 32 | - assets/css/testing.rtl.css 33 | - _config_dev.yml 34 | 35 | # Site styles 36 | styles: 37 | bootstrap: https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css 38 | select2: 39 | old: https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css 40 | new: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css 41 | s2bs5: 42 | ltr: https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css 43 | rtl: https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css 44 | docs: 45 | ltr: /assets/css/docs.css 46 | rtl: /assets/css/rtl.css 47 | 48 | # Site scripts 49 | scripts: 50 | jquery: https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.slim.min.js 51 | bootstrap: https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js 52 | select2: 53 | old: https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js 54 | new: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js 55 | clipboardjs: https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js 56 | anchorjs: https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js 57 | docs: /assets/js/docs.js 58 | 59 | # Header links 60 | links: 61 | github: https://github.com/apalfrey/select2-bootstrap-5-theme/ 62 | npm: https://www.npmjs.com/package/select2-bootstrap-5-theme/ 63 | packagist: https://packagist.org/packages/apalfrey/select2-bootstrap-5-theme/ 64 | select2: https://select2.org/ 65 | bootstrap: https://getbootstrap.com/ 66 | download: /getting-started/download-install/ 67 | old: /examples/single-select/4.0/ 68 | new: /examples/single-select/ 69 | 70 | # Sidebar 71 | sidebar: 72 | - name: introduction 73 | label: Introduction 74 | version-switch: false 75 | dropdown: false 76 | permalink: / 77 | - name: getting-started 78 | label: Getting started 79 | version-switch: false 80 | dropdown: true 81 | pages: 82 | - /getting-started/download-install/ 83 | - /getting-started/basic-usage/ 84 | - /getting-started/build-tools/ 85 | - name: examples 86 | label: Examples 87 | version-switch: true 88 | dropdown: true 89 | pages: 90 | - /examples/single-select/ 91 | - /examples/multiple-select/ 92 | - /examples/input-groups/ 93 | - /examples/sizing/ 94 | - /examples/validation/ 95 | - name: about 96 | label: About 97 | version-switch: false 98 | dropdown: true 99 | pages: 100 | - /about/contributing/ 101 | - /about/license/ 102 | -------------------------------------------------------------------------------- /docs/_config_dev.yml: -------------------------------------------------------------------------------- 1 | # Site settings 2 | title: Select2 Bootstrap 5 Theme # the title for the site 3 | description: >- # ignore newlines until "baseurl:" 4 | Write an awesome description for your new site here. You can edit this 5 | line in _config.yml. It will appear in your document head meta (for 6 | Google search results) and in your feed.xml site description. 7 | baseurl: /select2-bootstrap-5-theme # the subpath of the site 8 | url: https://apalfrey.github.io # the base hostname & protocol for the site 9 | version: 1.3.0 10 | 11 | # Build settings 12 | theme: null # prevents style.css from being generated 13 | plugins: 14 | - jekyll-sitemap 15 | 16 | # Exclude from processing. 17 | exclude: 18 | - _sass/ 19 | - .sass-cache/ 20 | - .jekyll-cache/ 21 | - gemfiles/ 22 | - Gemfile 23 | - Gemfile.lock 24 | - node_modules/ 25 | - vendor/bundle/ 26 | - vendor/cache/ 27 | - vendor/gems/ 28 | - vendor/ruby/ 29 | - _config.yml 30 | 31 | # Site styles 32 | styles: 33 | bootstrap: https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css 34 | select2: 35 | old: https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css 36 | new: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css 37 | s2bs5: 38 | ltr: https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css 39 | rtl: https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css 40 | docs: 41 | ltr: /assets/css/docs.css 42 | rtl: /assets/css/rtl.css 43 | 44 | # Site scripts 45 | scripts: 46 | jquery: https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.slim.min.js 47 | bootstrap: https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js 48 | select2: 49 | old: https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js 50 | new: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js 51 | clipboardjs: https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js 52 | anchorjs: https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js 53 | docs: /assets/js/docs.js 54 | 55 | # Header links 56 | links: 57 | github: https://github.com/apalfrey/select2-bootstrap-5-theme/ 58 | npm: https://www.npmjs.com/package/select2-bootstrap-5-theme/ 59 | packagist: https://packagist.org/packages/apalfrey/select2-bootstrap-5-theme/ 60 | select2: https://select2.org/ 61 | bootstrap: https://getbootstrap.com/ 62 | download: /getting-started/download-install/ 63 | old: /examples/single-select/4.0/ 64 | new: /examples/single-select/ 65 | 66 | # Sidebar 67 | sidebar: 68 | - name: introduction 69 | label: Introduction 70 | version-switch: false 71 | dropdown: false 72 | permalink: / 73 | - name: getting-started 74 | label: Getting started 75 | version-switch: false 76 | dropdown: true 77 | pages: 78 | - /getting-started/download-install/ 79 | - /getting-started/basic-usage/ 80 | - /getting-started/build-tools/ 81 | - name: examples 82 | label: Examples 83 | version-switch: true 84 | dropdown: true 85 | pages: 86 | - /examples/single-select/ 87 | - /examples/multiple-select/ 88 | - /examples/input-groups/ 89 | - /examples/sizing/ 90 | - /examples/validation/ 91 | - name: about 92 | label: About 93 | version-switch: false 94 | dropdown: true 95 | pages: 96 | - /about/contributing/ 97 | - /about/license/ 98 | -------------------------------------------------------------------------------- /docs/_includes/clipboard.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /docs/_includes/example.html: -------------------------------------------------------------------------------- 1 | 9 |
10 |
11 |
12 | {{ example_html }} 13 |
14 | 17 |
18 |
19 | {%- assign rtl_name = field_name | append: "-rtl" -%} 20 |
21 | {{ example_html | replace: field_name, rtl_name }} 22 |
23 | 26 |
27 |
28 | 36 |
37 |
38 |
39 | {% include clipboard.html %} 40 | {% highlight html %}{{ example_html }}{% endhighlight %} 41 |
42 |
43 |
44 |
45 | {% include clipboard.html %} 46 | {% highlight js %}{{ example_js }}{% endhighlight %} 47 |
48 |
49 |
50 | -------------------------------------------------------------------------------- /docs/_includes/layout/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{% include svgs/s2bs5.svg %}

4 |

Select2 Bootstrap 5 Theme

5 |
    6 |
  • The look of Bootstrap 5, with the functionality of Select2.
    • 7 |
  • Code licensed under MIT
    • 8 |
  • Docs licensed under CC BY 4.0.
    • 9 |
  • Currently v{{ site.version }}.
    • 10 |
11 |
12 |
13 | -------------------------------------------------------------------------------- /docs/_includes/layout/nav.html: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /docs/_includes/layout/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% if page.permalink contains "4.0" %} 4 | 5 | {% else %} 6 | 7 | {% endif %} 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/_includes/layout/sidebar.html: -------------------------------------------------------------------------------- 1 | {% capture sidebar_workspace %} 2 | {% capture sidebar_links %}{% endcapture %} 3 | {% for section in site.sidebar %} 4 | {% assign current_url = page.permalink | absolute_url %} 5 | {% assign base_btn_class = "btn d-inline-flex align-items-center rounded" %} 6 | {% assign base_collapse_class = "collapse" %} 7 | {% assign base_list_class = "d-inline-flex align-items-center rounded" %} 8 | 9 | {% if section.dropdown %} 10 | {% assign active_dropdown = false %} 11 | {% assign btn_class = base_btn_class %} 12 | {% assign collapse_class = base_collapse_class %} 13 | {% assign collapse_id = section.name | append: "-collapse" %} 14 | {% if current_url contains section.name | append: "/" | prepend: "/" %} 15 | {% assign active_dropdown = true %} 16 | {% assign btn_class = btn_class | append: " active" %} 17 | {% assign collapse_class = collapse_class | append: " show" %} 18 | {% endif %} 19 | 20 | {% capture sidebar_links %}{{ sidebar_links }} 21 |
  • 22 | 23 |
    24 |
      {% endcapture %} 25 | 26 | {% for section_page in section.pages %} 27 | {% assign page_url = section_page | absolute_url %} 28 | {% if section.version-switch and page.permalink contains "4.0" %} 29 | {% assign page_url = page_url | append: "4.0/" %} 30 | {% endif %} 31 | 32 | {% assign class = base_list_class %} 33 | {% if page_url == current_url %} 34 | {% assign class = class | append: " active" %} 35 | {% endif %} 36 | 37 | {% assign page_label = "" %} 38 | {% for item in site.pages %} 39 | {% if item.permalink == section_page and item.title %} 40 | {% assign page_label = item.title %} 41 | {% endif %} 42 | {% endfor %} 43 | 44 | {% capture sidebar_links %}{{ sidebar_links }} 45 |
    • 46 | {{ page_label }} 47 |
      • {% endcapture %} 48 | {% endfor %} 49 | 50 | {% capture sidebar_links %}{{ sidebar_links }} 51 |
    52 |
    53 |
    • {% endcapture %} 54 | {% else %} 55 | {% assign section_url = section.permalink | absolute_url %} 56 | {% if section.version-switch and page.permalink contains "4.0" %} 57 | {% assign section_url = section_url | append: "4.0/" %} 58 | {% endif %} 59 | 60 | {% assign class = base_list_class %} 61 | {% if section_url == current_url %} 62 | {% assign class = class | append: " active" %} 63 | {% endif %} 64 | 65 | {% capture sidebar_links %}{{ sidebar_links }} 66 |
  • 67 | {{ section.label }} 68 |
    • {% endcapture %} 69 | {% endif %} 70 | {% endfor %} 71 | {% endcapture %} 72 | 73 | 80 | -------------------------------------------------------------------------------- /docs/_includes/layout/styles.html: -------------------------------------------------------------------------------- 1 | {% if page.permalink contains "4.0" %} 2 | 3 | {% else %} 4 | 5 | {% endif %} 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/_includes/layout/subnav.html: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /docs/_includes/layout/toc.html: -------------------------------------------------------------------------------- 1 | {% capture tocWorkspace %} 2 | {% comment %} 3 | Copyright (c) 2017 Vladimir "allejo" Jimenez 4 | 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | {% endcomment %} 26 | {% comment %} 27 | Version 1.1.0 28 | https://github.com/allejo/jekyll-toc 29 | 30 | "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe 31 | 32 | Usage: 33 | {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %} 34 | 35 | Parameters: 36 | * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll 37 | 38 | Optional Parameters: 39 | * sanitize (bool) : false - when set to true, the headers will be stripped of any HTML in the TOC 40 | * class (string) : '' - a CSS class assigned to the TOC 41 | * id (string) : '' - an ID to assigned to the TOC 42 | * h_min (int) : 1 - the minimum TOC header level to use; any header lower than this value will be ignored 43 | * h_max (int) : 6 - the maximum TOC header level to use; any header greater than this value will be ignored 44 | * ordered (bool) : false - when set to true, an ordered list will be outputted instead of an unordered list 45 | * item_class (string) : '' - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level 46 | * submenu_class (string) : '' - add custom class(es) for each child group of headings; has support for '%level%' placeholder which is the current "submenu" heading level 47 | * base_url (string) : '' - add a base url to the TOC links for when your TOC is on another page than the actual content 48 | * anchor_class (string) : '' - add custom class(es) for each anchor element 49 | * skip_no_ids (bool) : false - skip headers that do not have an `id` attribute 50 | 51 | Output: 52 | An ordered or unordered list representing the table of contents of a markdown block. This snippet will only 53 | generate the table of contents and will NOT output the markdown given to it 54 | {% endcomment %} 55 | 56 | {% capture newline %} 57 | {% endcapture %} 58 | {% assign newline = newline | rstrip %} 59 | 60 | {% capture deprecation_warnings %}{% endcapture %} 61 | 62 | {% if include.baseurl %} 63 | {% capture deprecation_warnings %}{{ deprecation_warnings }}{{ newline }}{% endcapture %} 64 | {% endif %} 65 | 66 | {% if include.skipNoIDs %} 67 | {% capture deprecation_warnings %}{{ deprecation_warnings }}{{ newline }}{% endcapture %} 68 | {% endif %} 69 | 70 | {% capture jekyll_toc %}{% endcapture %} 71 | {% assign orderedList = include.ordered | default: false %} 72 | {% assign baseURL = include.base_url | default: include.baseurl | default: '' %} 73 | {% assign skipNoIDs = include.skip_no_ids | default: include.skipNoIDs | default: false %} 74 | {% assign minHeader = include.h_min | default: 1 %} 75 | {% assign maxHeader = include.h_max | default: 6 %} 76 | {% assign nodes = include.html | strip | split: ' maxHeader %} 92 | {% continue %} 93 | {% endif %} 94 | 95 | {% assign _workspace = node | split: '' | first }}>{% endcapture %} 114 | {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %} 115 | 116 | {% if include.item_class and include.item_class != blank %} 117 | {% capture listItemClass %} class="{{ include.item_class | replace: '%level%', currLevel | split: '.' | join: ' ' }}"{% endcapture %} 118 | {% endif %} 119 | 120 | {% if include.submenu_class and include.submenu_class != blank %} 121 | {% assign subMenuLevel = currLevel | minus: 1 %} 122 | {% capture subMenuClass %} class="{{ include.submenu_class | replace: '%level%', subMenuLevel | split: '.' | join: ' ' }}"{% endcapture %} 123 | {% endif %} 124 | 125 | {% capture anchorBody %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %} 126 | 127 | {% if htmlID %} 128 | {% capture anchorAttributes %} href="{% if baseURL %}{{ baseURL }}{% endif %}#{{ htmlID }}"{% endcapture %} 129 | 130 | {% if include.anchor_class %} 131 | {% capture anchorAttributes %}{{ anchorAttributes }} class="{{ include.anchor_class | split: '.' | join: ' ' }}"{% endcapture %} 132 | {% endif %} 133 | 134 | {% capture listItem %}{{ anchorBody }}{% endcapture %} 135 | {% elsif skipNoIDs == true %} 136 | {% continue %} 137 | {% else %} 138 | {% capture listItem %}{{ anchorBody }}{% endcapture %} 139 | {% endif %} 140 | 141 | {% if currLevel > lastLevel %} 142 | {% capture jekyll_toc %}{{ jekyll_toc }}<{{ listModifier }}{{ subMenuClass }}>{% endcapture %} 143 | {% elsif currLevel < lastLevel %} 144 | {% assign repeatCount = lastLevel | minus: currLevel %} 145 | 146 | {% for i in (1..repeatCount) %} 147 | {% capture jekyll_toc %}{{ jekyll_toc }}{% endcapture %} 148 | {% endfor %} 149 | 150 | {% capture jekyll_toc %}{{ jekyll_toc }}{% endcapture %} 151 | {% else %} 152 | {% capture jekyll_toc %}{{ jekyll_toc }}{% endcapture %} 153 | {% endif %} 154 | 155 | {% capture jekyll_toc %}{{ jekyll_toc }}{{ listItem }}{% endcapture %} 156 | 157 | {% assign lastLevel = currLevel %} 158 | {% assign firstHeader = false %} 159 | {% endfor %} 160 | 161 | {% assign repeatCount = minHeader | minus: 1 %} 162 | {% assign repeatCount = lastLevel | minus: repeatCount %} 163 | {% for i in (1..repeatCount) %} 164 | {% capture jekyll_toc %}{{ jekyll_toc }}{% endcapture %} 165 | {% endfor %} 166 | 167 | {% if jekyll_toc != '' %} 168 | {% assign rootAttributes = '' %} 169 | {% if include.class and include.class != blank %} 170 | {% capture rootAttributes %} class="{{ include.class | split: '.' | join: ' ' }}"{% endcapture %} 171 | {% endif %} 172 | 173 | {% if include.id and include.id != blank %} 174 | {% capture rootAttributes %}{{ rootAttributes }} id="{{ include.id }}"{% endcapture %} 175 | {% endif %} 176 | 177 | {% if rootAttributes %} 178 | {% assign nodes = jekyll_toc | split: '>' %} 179 | {% capture jekyll_toc %}<{{ listModifier }}{{ rootAttributes }}>{{ nodes | shift | join: '>' }}>{% endcapture %} 180 | {% endif %} 181 | {% endif %} 182 | {% endcapture %}{% assign tocWorkspace = '' %}{{ deprecation_warnings }}{{ jekyll_toc }} 183 | -------------------------------------------------------------------------------- /docs/_includes/svgs/bootstrap.svg: -------------------------------------------------------------------------------- 1 | Bootstrap 5 -------------------------------------------------------------------------------- /docs/_includes/svgs/collapse.svg: -------------------------------------------------------------------------------- 1 | Collapse -------------------------------------------------------------------------------- /docs/_includes/svgs/expand.svg: -------------------------------------------------------------------------------- 1 | Expand -------------------------------------------------------------------------------- /docs/_includes/svgs/github.svg: -------------------------------------------------------------------------------- 1 | GitHub -------------------------------------------------------------------------------- /docs/_includes/svgs/npm.svg: -------------------------------------------------------------------------------- 1 | npm -------------------------------------------------------------------------------- /docs/_includes/svgs/packagist.svg: -------------------------------------------------------------------------------- 1 | Packagist -------------------------------------------------------------------------------- /docs/_includes/svgs/s2bs5.svg: -------------------------------------------------------------------------------- 1 | Select2 Bootstrap 5 theme -------------------------------------------------------------------------------- /docs/_includes/svgs/select2.svg: -------------------------------------------------------------------------------- 1 | Select2 -------------------------------------------------------------------------------- /docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {% if page.title_tag and page.title %}{{ page.title }} - {% endif %}{{ site.title }} 8 | {% if layout.redirect %} 9 | 10 | 11 | 12 | {% endif %} 13 | {% include layout/styles.html %} 14 | {% include layout/scripts.html %} 15 | 16 | 17 |
    18 | {% include layout/nav.html %} 19 |
    20 | {% include layout/subnav.html %} 21 |
    22 | {% include layout/sidebar.html %} 23 |
    24 | {% if page.layout != "redirect" and page.error != true and page.toc != false %} 25 | {%- capture toc -%} 26 | {% include layout/toc.html html=content sanitize=true %} 27 | {%- endcapture -%} 28 | {% assign toc_test = toc | strip_newlines %} 29 |
    30 | {% if toc_test != "" %} 31 | On this page 32 | 35 | {% endif %} 36 |
    37 | {% endif %} 38 |
    39 | {% if page.title and page.layout != "redirect" and page.error != true %}

    {{ page.title }}

    {% endif %} 40 | {{ content }} 41 |
    42 |
    43 |
    44 | {% include layout/footer.html %} 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/_layouts/redirect.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | redirect: true 4 | --- 5 | 6 |
    7 |
    8 |

    Redirecting...

    9 |

    Click here if you are not redirected.

    10 |
    11 |
    12 | -------------------------------------------------------------------------------- /docs/_sass/_anchor.scss: -------------------------------------------------------------------------------- 1 | .anchorjs-link { 2 | font-weight: 400; 3 | color: rgba($s2bs5-primary, .5); 4 | @include transition(color .15s ease-in-out); 5 | 6 | &:focus, 7 | &:hover { 8 | color: $s2bs5-primary; 9 | text-decoration: none; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /docs/_sass/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v5.1.3 (https://getbootstrap.com/) 3 | * Copyright 2011-2021 The Bootstrap Authors 4 | * Copyright 2011-2021 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | 8 | // Configuration 9 | @import "node_modules/bootstrap/scss/functions"; 10 | @import "node_modules/bootstrap/scss/variables"; 11 | @import "node_modules/bootstrap/scss/mixins"; 12 | @import "node_modules/bootstrap/scss/utilities"; 13 | 14 | // Layout & components 15 | @import "node_modules/bootstrap/scss/root"; 16 | @import "node_modules/bootstrap/scss/reboot"; 17 | @import "node_modules/bootstrap/scss/type"; 18 | @import "node_modules/bootstrap/scss/containers"; 19 | @import "node_modules/bootstrap/scss/grid"; 20 | @import "node_modules/bootstrap/scss/tables"; 21 | @import "node_modules/bootstrap/scss/forms"; 22 | @import "node_modules/bootstrap/scss/buttons"; 23 | @import "node_modules/bootstrap/scss/transitions"; 24 | @import "node_modules/bootstrap/scss/dropdown"; 25 | @import "node_modules/bootstrap/scss/nav"; 26 | @import "node_modules/bootstrap/scss/navbar"; 27 | @import "node_modules/bootstrap/scss/tooltip"; 28 | 29 | // Helpers 30 | @import "node_modules/bootstrap/scss/helpers"; 31 | 32 | // Utilities 33 | @import "node_modules/bootstrap/scss/utilities/api"; 34 | -------------------------------------------------------------------------------- /docs/_sass/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn-dropdown { 2 | @include button-outline-variant($s2bs5-primary-light, $s2bs5-primary, $white, $s2bs5-primary, $s2bs5-primary); 3 | } 4 | 5 | .btn-clipboard { 6 | z-index: 10; 7 | display: block; 8 | padding: .25rem .5rem; 9 | margin-top: .65rem; 10 | margin-right: .65rem; 11 | @include font-size(.65rem); 12 | @include button-outline-variant($s2bs5-primary); 13 | } 14 | 15 | .btn-s2bs5-primary { 16 | @include button-variant($s2bs5-primary, $s2bs5-primary); 17 | } 18 | 19 | .btn-outline-s2bs5-primary { 20 | @include button-outline-variant($s2bs5-primary, $white); 21 | } 22 | -------------------------------------------------------------------------------- /docs/_sass/_clipboard.scss: -------------------------------------------------------------------------------- 1 | .s2bs5-clipboard { 2 | position: relative; 3 | display: none; 4 | float: right; 5 | 6 | + .highlight { 7 | margin-top: 0; 8 | } 9 | 10 | @include media-breakpoint-up(md) { 11 | display: block; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /docs/_sass/_content.scss: -------------------------------------------------------------------------------- 1 | // Offset for the sticky header 2 | @include media-breakpoint-up(md) { 3 | :root { 4 | scroll-padding-top: 4rem; 5 | } 6 | } 7 | 8 | .s2bs5-content { 9 | > h2:not(:first-child) { 10 | margin-top: 3rem; 11 | } 12 | 13 | > h3 { 14 | margin-top: 2rem; 15 | } 16 | 17 | > ul li, 18 | > ol li { 19 | margin-bottom: .25rem; 20 | 21 | // stylelint-disable selector-max-type 22 | > ul { 23 | margin-top: -.5rem; 24 | margin-bottom: 1rem; 25 | } 26 | // stylelint-enable selector-max-type 27 | } 28 | 29 | // Override Bootstrap defaults 30 | > .table { 31 | max-width: 100%; 32 | margin-bottom: 1.5rem; 33 | @include font-size(.875rem); 34 | 35 | @include media-breakpoint-down(lg) { 36 | display: block; 37 | overflow-x: auto; 38 | 39 | &.table-bordered { 40 | border: 0; 41 | } 42 | } 43 | 44 | th, 45 | td { 46 | &:first-child { 47 | padding-left: 0; 48 | } 49 | 50 | &:not(:last-child) { 51 | padding-right: 1.5rem; 52 | } 53 | } 54 | 55 | // Prevent breaking of code 56 | td:first-child > code { 57 | white-space: nowrap; 58 | } 59 | } 60 | } 61 | 62 | .s2bs5-title { 63 | font-weight: 300; 64 | @include font-size(3rem); 65 | } 66 | 67 | .s2bs5-lead { 68 | @include font-size(1.5rem); 69 | font-weight: 300; 70 | } 71 | -------------------------------------------------------------------------------- /docs/_sass/_examples.scss: -------------------------------------------------------------------------------- 1 | .nav-tabs { 2 | .nav-link { 3 | color: $s2bs5-primary; 4 | 5 | &:hover, 6 | &:focus { 7 | color: $s2bs5-primary-dark; 8 | } 9 | } 10 | } 11 | 12 | .s2bs5-example { 13 | position: relative; 14 | padding: 1rem; 15 | margin: 0 (-$grid-gutter-width * .5); 16 | border: solid $gray-300; 17 | border-width: 1px 0 0; 18 | @include clearfix(); 19 | 20 | @include media-breakpoint-up(sm) { 21 | padding: 1.5rem; 22 | margin-right: 0; 23 | margin-left: 0; 24 | border-width: 1px 1px 0; 25 | } 26 | 27 | + nav { 28 | margin: 0 (-$grid-gutter-width * .5); 29 | 30 | @include media-breakpoint-up(sm) { 31 | margin-right: 0; 32 | margin-left: 0; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /docs/_sass/_footer.scss: -------------------------------------------------------------------------------- 1 | .s2bs5-footer { 2 | li { 3 | color: $gray-500; 4 | } 5 | 6 | a { 7 | color: $white; 8 | text-decoration: none; 9 | 10 | &:hover, 11 | &:focus { 12 | color: $s2bs5-primary-light; 13 | text-decoration: underline; 14 | } 15 | } 16 | 17 | .footer-icon { 18 | svg { 19 | width: 5rem; 20 | height: 5rem; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/_sass/_layout.scss: -------------------------------------------------------------------------------- 1 | .s2bs5-layout { 2 | @include media-breakpoint-up(md) { 3 | display: grid; 4 | grid-template-areas: "sidebar main"; 5 | grid-template-columns: 1fr 3fr; 6 | gap: $grid-gutter-width; 7 | } 8 | 9 | @include media-breakpoint-up(lg) { 10 | grid-template-columns: 1fr 5fr; 11 | } 12 | } 13 | 14 | .s2bs5-sidebar { 15 | grid-area: sidebar; 16 | } 17 | 18 | .s2bs5-main { 19 | grid-area: main; 20 | 21 | @include media-breakpoint-up(md) { 22 | display: grid; 23 | grid-template-areas: 24 | "toc" 25 | "content"; 26 | grid-template-rows: auto auto 1fr; 27 | gap: inherit; 28 | } 29 | 30 | @include media-breakpoint-up(lg) { 31 | grid-template-areas: "content toc"; 32 | grid-template-rows: auto 1fr; 33 | grid-template-columns: 4fr 1fr; 34 | } 35 | } 36 | 37 | .s2bs5-toc { 38 | grid-area: toc; 39 | } 40 | 41 | .s2bs5-content { 42 | grid-area: content; 43 | min-width: 1px; 44 | } 45 | -------------------------------------------------------------------------------- /docs/_sass/_navbar.scss: -------------------------------------------------------------------------------- 1 | .s2bs5-navbar { 2 | padding: .75rem 0; 3 | background-color: $s2bs5-primary; 4 | 5 | .navbar-nav { 6 | flex-direction: row; 7 | 8 | .nav-link { 9 | color: rgba($white, .85); 10 | 11 | &:hover, 12 | &:focus { 13 | color: $white; 14 | } 15 | } 16 | } 17 | 18 | .navbar-nav-svg { 19 | width: 2rem; 20 | height: 2rem; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docs/_sass/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .s2bs5-sidebar { 2 | @include media-breakpoint-down(md) { 3 | margin: 0 -.75rem 1rem; 4 | } 5 | } 6 | 7 | .s2bs5-links { 8 | overflow: auto; 9 | font-weight: 600; 10 | 11 | @include media-breakpoint-up(md) { 12 | position: sticky; 13 | top: 5rem; 14 | // Override collapse behaviors 15 | // stylelint-disable-next-line declaration-no-important 16 | display: block !important; 17 | height: subtract(100vh, 7.875rem); 18 | // Prevent focus styles to be cut off: 19 | padding-left: .25rem; 20 | margin-left: -.25rem; 21 | overflow-y: auto; 22 | } 23 | 24 | > ul { 25 | @include media-breakpoint-down(md) { 26 | padding: 1.5rem .75rem; 27 | background-color: $gray-100; 28 | border-bottom: 1px solid $gray-200; 29 | } 30 | } 31 | 32 | a { 33 | padding: .1875rem .5rem; 34 | margin-top: .125rem; 35 | margin-left: 1.25rem; 36 | color: rgba($black, .85); 37 | text-decoration: if($link-decoration == none, null, none); 38 | 39 | &:hover, 40 | &:focus { 41 | color: $s2bs5-primary; 42 | text-decoration: if($link-hover-decoration == underline, none, null); 43 | background-color: rgba($s2bs5-primary-light, .15); 44 | } 45 | } 46 | 47 | .btn { 48 | // Custom styles (as we don't have a completely neutral button style) 49 | padding: .25rem .5rem; 50 | font-weight: 600; 51 | color: rgba($black, .85); 52 | background-color: transparent; 53 | border: 0; 54 | 55 | &:hover, 56 | &:focus { 57 | color: $s2bs5-primary; 58 | background-color: rgba($s2bs5-primary-light, .15); 59 | } 60 | 61 | &:focus { 62 | box-shadow: 0 0 0 1px rgba($s2bs5-primary-light, .75); 63 | } 64 | 65 | // Add chevron if there's a submenu 66 | &::before { 67 | width: 1.25em; 68 | line-height: 0; // Align in the middle 69 | content: escape-svg($sidebar-collapse-icon); 70 | @include transition(transform .35s ease); 71 | transform-origin: .5em 50%; 72 | } 73 | 74 | &[aria-expanded="true"] { 75 | color: $s2bs5-primary; 76 | 77 | &::before { 78 | transform: rotate(90deg); 79 | } 80 | } 81 | } 82 | 83 | .active { 84 | font-weight: 600; 85 | color: $s2bs5-primary; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /docs/_sass/_subnav.scss: -------------------------------------------------------------------------------- 1 | .s2bs5-subnavbar { 2 | // The position and z-index are needed for the dropdown to stay on top of the content 3 | position: relative; 4 | z-index: $zindex-sticky; 5 | background-color: rgba($white, .95); 6 | box-shadow: 0 .5rem 1rem rgba($black, .05), inset 0 -1px 0 rgba($black, .15); 7 | 8 | .dropdown-menu { 9 | @include font-size(.875rem); 10 | box-shadow: 0 .5rem 1rem rgba($black, .05); 11 | } 12 | 13 | .dropdown-item { 14 | &:active { 15 | color: color-contrast($s2bs5-primary-light); 16 | background-color: $s2bs5-primary-light; 17 | } 18 | 19 | &.active { 20 | color: color-contrast($s2bs5-primary); 21 | background-color: $s2bs5-primary; 22 | } 23 | } 24 | 25 | @include media-breakpoint-up(md) { 26 | position: sticky; 27 | top: 0; 28 | } 29 | } 30 | 31 | .s2bs5-sidebar-toggle { 32 | color: $text-muted; 33 | 34 | &:hover, 35 | &:focus { 36 | color: $s2bs5-primary; 37 | } 38 | 39 | &:focus { 40 | box-shadow: 0 0 0 3px rgba($s2bs5-primary, .25); 41 | } 42 | 43 | .bi-collapse { 44 | display: none; 45 | } 46 | 47 | &:not(.collapsed) { 48 | .bi-expand { 49 | display: none; 50 | } 51 | 52 | .bi-collapse { 53 | display: inline-block; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /docs/_sass/_syntax.scss: -------------------------------------------------------------------------------- 1 | .highlight-container { 2 | margin: 0 (-$grid-gutter-width * .5) 1rem; 3 | background-color: $gray-100; 4 | border: solid $gray-300; 5 | border-width: 0 0 1px; 6 | 7 | @include media-breakpoint-up(sm) { 8 | margin-right: 0; 9 | margin-left: 0; 10 | border-width: 0 1px 1px; 11 | @include border-bottom-radius(.25rem); 12 | } 13 | } 14 | 15 | .simple-highlight { 16 | .highlight { 17 | background-color: $gray-100; 18 | @include border-radius(.25rem); 19 | } 20 | } 21 | 22 | .highlight { 23 | padding: 1rem; 24 | 25 | @include media-breakpoint-up(sm) { 26 | padding: 1rem 1.5rem; 27 | } 28 | 29 | @at-root .tab-pane & { 30 | margin-bottom: 0; 31 | } 32 | 33 | pre { 34 | width: 100%; 35 | padding: 0; 36 | margin-top: .65rem; 37 | margin-bottom: .65rem; 38 | white-space: pre; 39 | background-color: transparent; 40 | border: 0; 41 | 42 | code { 43 | @include font-size(inherit); 44 | color: $gray-900; // Effectively the base text color 45 | word-wrap: normal; 46 | } 47 | } 48 | 49 | .language-bash, 50 | .language-sh { 51 | &::before { 52 | color: #000099; 53 | content: "$ "; 54 | user-select: none; 55 | } 56 | } 57 | 58 | .language-powershell::before { 59 | color: #000099; 60 | content: "PM> "; 61 | user-select: none; 62 | } 63 | 64 | .c { 65 | color: #727272; 66 | } 67 | 68 | .ch { 69 | font-style: italic; 70 | color: #60a0b0; 71 | } 72 | 73 | .cm { 74 | color: #727272; 75 | } 76 | 77 | .cp { 78 | color: #008085; 79 | } 80 | 81 | .cpf { 82 | color: #007020; 83 | } 84 | 85 | .c1 { 86 | color: #727272; 87 | } 88 | 89 | .cs { 90 | color: #727272; 91 | } 92 | 93 | .gd { 94 | background-color: #ffcccc; 95 | border: 1px solid #cc0000; 96 | } 97 | 98 | .ge { 99 | font-style: italic; 100 | } 101 | 102 | .gr { 103 | color: #ff0000; 104 | } 105 | 106 | .gh { 107 | color: #003300; 108 | } 109 | 110 | .gi { 111 | background-color: #ccffcc; 112 | border: 1px solid #00cc00; 113 | } 114 | 115 | .go { 116 | color: #aaaaaa; 117 | } 118 | 119 | .gp { 120 | color: #000099; 121 | } 122 | 123 | .gs { 124 | font-weight: 700; 125 | } 126 | 127 | .gu { 128 | color: #003300; 129 | } 130 | 131 | .gt { 132 | color: #99cc66; 133 | } 134 | 135 | .gl { 136 | text-decoration: underline; 137 | } 138 | 139 | .k { 140 | color: #006699; 141 | } 142 | 143 | .kc { 144 | color: #006699; 145 | } 146 | 147 | .kd { 148 | color: #006699; 149 | } 150 | 151 | .kn { 152 | color: #006699; 153 | } 154 | 155 | .kp { 156 | color: #006699; 157 | } 158 | 159 | .kr { 160 | color: #006699; 161 | } 162 | 163 | .kt { 164 | color: #007788; 165 | } 166 | 167 | .m { 168 | color: #c24f19; 169 | } 170 | 171 | .mb { 172 | color: #40a070; 173 | } 174 | 175 | .mf { 176 | color: #c24f19; 177 | } 178 | 179 | .mh { 180 | color: #c24f19; 181 | } 182 | 183 | .mi { 184 | color: #c24f19; 185 | } 186 | 187 | .il { 188 | color: #c24f19; 189 | } 190 | 191 | .mo { 192 | color: #c24f19; 193 | } 194 | 195 | .s { 196 | color: #d73038; 197 | } 198 | 199 | .sa { 200 | color: #4070a0; 201 | } 202 | 203 | .sb { 204 | color: #cc3300; 205 | } 206 | 207 | .sc { 208 | color: #cc3300; 209 | } 210 | 211 | .dl { 212 | color: #cc3300; 213 | } 214 | 215 | .sd { 216 | font-style: italic; 217 | color: #cc3300; 218 | } 219 | 220 | .s2 { 221 | color: #cc3300; 222 | } 223 | 224 | .se { 225 | color: #cc3300; 226 | } 227 | 228 | .sh { 229 | color: #cc3300; 230 | } 231 | 232 | .si { 233 | color: #aa0000; 234 | } 235 | 236 | .sx { 237 | color: #cc3300; 238 | } 239 | 240 | .sr { 241 | color: #337e7e; 242 | } 243 | 244 | .s1 { 245 | color: #cc3300; 246 | } 247 | 248 | .ss { 249 | color: #ffcc33; 250 | } 251 | 252 | .na { 253 | color: #006ee0; 254 | } 255 | 256 | .nb { 257 | color: #336666; 258 | } 259 | 260 | .nc { 261 | color: #168174; 262 | } 263 | 264 | .no { 265 | color: #336600; 266 | } 267 | 268 | .nd { 269 | color: #6b62de; 270 | } 271 | 272 | .ni { 273 | color: #727272; 274 | } 275 | 276 | .ne { 277 | color: #cc0000; 278 | } 279 | 280 | .nf { 281 | color: #b715f4; 282 | } 283 | 284 | .nl { 285 | color: #6b62de; 286 | } 287 | 288 | .nn { 289 | color: #007ca5; 290 | } 291 | 292 | .nt { 293 | color: #2f6f9f; 294 | } 295 | 296 | .nv { 297 | color: #003333; 298 | } 299 | 300 | .o { 301 | color: #555555; 302 | } 303 | 304 | .ow { 305 | color: #000000; 306 | } 307 | 308 | .w { 309 | color: #bbbbbb; 310 | } 311 | } 312 | -------------------------------------------------------------------------------- /docs/_sass/_toc.scss: -------------------------------------------------------------------------------- 1 | .s2bs5-toc { 2 | @include media-breakpoint-up(lg) { 3 | position: sticky; 4 | top: 5rem; 5 | right: 0; 6 | z-index: 2; 7 | height: subtract(100vh, 7.875rem); 8 | overflow-y: auto; 9 | } 10 | 11 | nav { 12 | @include font-size(.875rem); 13 | 14 | ul { 15 | padding-left: 0; 16 | list-style: none; 17 | 18 | // stylelint-disable selector-max-type 19 | ul { 20 | padding-left: 1rem; 21 | margin-top: .25rem; 22 | } 23 | // stylelint-enable selector-max-type 24 | } 25 | 26 | li { 27 | margin-bottom: .25rem; 28 | } 29 | 30 | a { 31 | color: rgba($black, .85); 32 | text-decoration: none; 33 | 34 | &:hover { 35 | color: $s2bs5-primary; 36 | text-decoration: underline; 37 | } 38 | 39 | // stylelint-disable selector-max-type 40 | code { 41 | font: inherit; 42 | } 43 | // stylelint-enable selector-max-type 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /docs/_sass/_variables.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable scss/dollar-variable-default 2 | $s2bs5-primary: $indigo; 3 | $s2bs5-primary-light: lighten(saturate($s2bs5-primary, 5%), 25%); // stylelint-disable-line function-disallowed-list 4 | $s2bs5-primary-dark: darken(saturate($s2bs5-primary, 5%), 25%); // stylelint-disable-line function-disallowed-list 5 | $sidebar-collapse-icon: url("data:image/svg+xml,"); 6 | -------------------------------------------------------------------------------- /docs/_sass/docs.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable no-invalid-position-at-import-rule 2 | @import "bootstrap"; 3 | @import "src/select2-bootstrap-5-theme"; 4 | 5 | @import "variables"; 6 | 7 | // Structure 8 | @import "navbar"; 9 | @import "subnav"; 10 | @import "layout"; 11 | @import "sidebar"; 12 | @import "content"; 13 | @import "toc"; 14 | @import "footer"; 15 | 16 | // Components 17 | @import "anchor"; 18 | @import "clipboard"; 19 | @import "buttons"; 20 | @import "syntax"; 21 | @import "examples"; 22 | // stylelint-enable no-invalid-position-at-import-rule 23 | -------------------------------------------------------------------------------- /docs/_sass/rtl.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable no-invalid-position-at-import-rule, property-disallowed-list, no-duplicate-selectors, comment-whitespace-inside, comment-empty-line-before 2 | @import "node_modules/bootstrap/scss/functions"; 3 | @import "node_modules/bootstrap/scss/variables"; 4 | @import "node_modules/bootstrap/scss/mixins"; 5 | 6 | [dir="rtl"] { 7 | @import "src/include-all"; 8 | } 9 | 10 | /*rtl:begin:ignore*/ 11 | [dir="rtl"] { 12 | .input-group { 13 | > .form-control, 14 | > .form-select, 15 | > .input-group-text, 16 | > .btn, 17 | > .select2-container--bootstrap-5 .select2-selection { 18 | border-radius: $input-border-radius !important; 19 | } 20 | } 21 | 22 | .input-group-lg { 23 | > .form-control, 24 | > .form-select, 25 | > .input-group-text, 26 | > .btn, 27 | > .select2-container--bootstrap-5 .select2-selection { 28 | border-radius: $input-border-radius-lg !important; 29 | } 30 | } 31 | 32 | .input-group-sm { 33 | > .form-control, 34 | > .form-select, 35 | > .input-group-text, 36 | > .btn, 37 | > .select2-container--bootstrap-5 .select2-selection { 38 | border-radius: $input-border-radius-sm !important; 39 | } 40 | } 41 | 42 | .input-group { 43 | &:not(.has-validation) { 44 | > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), 45 | > .dropdown-toggle:nth-last-child(n+3), 46 | > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu).select2-container--bootstrap-5 .select2-selection { 47 | border-top-left-radius: 0 !important; 48 | border-bottom-left-radius: 0 !important; 49 | } 50 | } 51 | 52 | &.has-validation { 53 | > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu), 54 | > .dropdown-toggle:nth-last-child(n+4), 55 | > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu), 56 | > .dropdown-toggle:nth-last-child(n+4), 57 | > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu).select2-container--bootstrap-5 .select2-selection { 58 | border-top-left-radius: 0 !important; 59 | border-bottom-left-radius: 0 !important; 60 | } 61 | } 62 | 63 | > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { 64 | margin-right: -1px; 65 | margin-left: 0; 66 | border-top-right-radius: 0 !important; 67 | border-bottom-right-radius: 0 !important; 68 | } 69 | 70 | > .input-group-text ~ .select2-container--bootstrap-5 .select2-selection, 71 | > .btn ~ .select2-container--bootstrap-5 .select2-selection, 72 | > .dropdown-menu ~ .select2-container--bootstrap-5 .select2-selection { 73 | border-top-right-radius: 0 !important; 74 | border-bottom-right-radius: 0 !important; 75 | } 76 | 77 | .select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection { 78 | border-bottom-right-radius: 0 !important; 79 | border-bottom-left-radius: 0 !important; 80 | } 81 | 82 | .select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection { 83 | border-top-left-radius: 0 !important; 84 | border-top-right-radius: 0 !important; 85 | } 86 | } 87 | 88 | .dropdown-toggle { 89 | &::after { 90 | margin-left: 0; 91 | } 92 | 93 | &:not(.dropdown-toggle-split)::after { 94 | margin-right: $caret-spacing; 95 | } 96 | } 97 | 98 | } 99 | /*rtl:end:ignore*/ 100 | // stylelint-enable no-invalid-position-at-import-rule 101 | -------------------------------------------------------------------------------- /docs/_sass/testing.scss: -------------------------------------------------------------------------------- 1 | @import "docs"; 2 | 3 | @import "node_modules/bootstrap/scss/close"; 4 | @import "node_modules/bootstrap/scss/modal"; 5 | 6 | // Testing override 7 | .s2bs5-layout { 8 | display: block !important; 9 | } 10 | -------------------------------------------------------------------------------- /docs/about/contributing.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Contributing 4 | permalink: /about/contributing/ 5 | --- 6 | 7 |

    Find out how you can contribute to the Select2 Bootstrap 5 theme with bug reports, feature requests and pull requests.

    8 | 9 |

    Please follow these guidelines in order to keep the process simple and prevent any possible confusions.

    10 | 11 |

    Issues

    12 |

    The issue tracker is a useful way to report bugs and request features. However, we do have some rules that you should follow;

    13 | 14 |
      15 |
    • Be civil and polite. It should be a welcoming place, ensuring nobody feels alienated.
      • 16 |
    • Make sure your bug report or feature request doesn't already exist. This helps prevents duplication, if an issue already exists and you're able to provide more insight, feel free to comment on the existing issue.
      • 17 |
    • Stick to the issue templates. These templates help us gather all the information needed to fix the issue or implement the feature.
      • 18 |
    • Format any code snippets. If your bug report/feature request has any code snippets, please make sure you use code blocks to highlight and format your code.
      • 19 |
    • Use screenshots & code examples where possible. This will further help us to understand what the bug or feature request is.
      • 20 |
    21 | 22 |

    Labels

    23 |

    The bug tracker utilises several labels in order to organise and identify all issues submitted. Here's what labels we currently use;

    24 | 25 |
    26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
    LabelUse
    bugBug reports that need to be fixed.
    dependenciesIssues stemming from, or that will alter, any dependencies used.
    documentationIssues that require documentation to be changed.
    duplicateIssues that have already been created, these issues get closed and linked to the original issue.
    enhancementFeature requests that need to be implemented.
    help wantedIssues we need some help in resolving.
    on holdIssues that will be tackled at a later date, a reason should always be given in the comments.
    pending releaseThe issue has been resolved, but is pending release in the next version.
    questionMore information is needed on these issues.
    wontfixIssues that are out of our remit (e.g. issues related to Bootstrap or Select2) or non-issues (e.g. support requests).
    76 |
    77 | 78 |

    Bug reports

    79 |

    Found a bug? Please open a bug report, however please try and take the following steps:

    80 | 81 |
      82 |
    • Make sure the bug hasn't already been reported. Search the issues (both open and closed).
      • 83 |
    • Make sure the issue isn't with Select2:
      • 84 |
        85 |
      • Check the Select2 Github issues page to make sure it hasn't been reported there.
        • 86 |
      • Disable the Select2 Bootstrap 5 Theme to see if the issue goes away or not.
        • 87 |
      88 |
    • Provide an example of the issue. Images are always helpful, however an example of the issue would be preferrable. Here's some tools that would help with this:
      • 89 | 94 |
    95 | 96 |

    Feature requests

    97 |

    Got an idea to expand the functionality? Feel free to submit a feature request, or fork the repo and submit a pull request. If you're submitting a feature request, please be aware of the following:

    98 | 99 |
      100 |
    • Make sure the feature hasn't already been requested. Search the issues (both open and closed).
      • 101 |
    • Make sure the feature is related to the styling. Functionality for Select2 cannot be altered, this theme simply styles it to fit with Bootstrap 5.
      • 102 |
    103 | 104 |

    Pull requests

    105 |

    Fixed a bug or implemented a new feature? Please submit a pull request to the repo so we can include it in the theme. Please be aware of the following when submitting a pull request:

    106 | 107 |
      108 |
    • Merge any changes from the master branch to ensure you have the latest version and prevent merge conflicts.
      • 109 |
    • Run the compile scripts npm run compile and npm run docs:compile so that a compiled version is available.
      • 110 |
    • Make sure the title and description are clear as to what was changed and why. Screenshots of the changes are welcome.
      • 111 |
    • Tag any relevant issues so that we can easily see what the pull request relates to.
      • 112 |
    113 | 114 |

    License

    115 |

    By contributing, you agree that your code falls under the MIT License.

    116 | 117 |

    By contributing to the documentation, you agree that your contribution falls under the Creative Commons Attribution 4.0 International Public License.

    118 | -------------------------------------------------------------------------------- /docs/about/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | title: Redirecting... 4 | permalink: /about/ 5 | sitemap: false 6 | redirect_to: /about/contributing/ 7 | --- 8 | -------------------------------------------------------------------------------- /docs/about/license.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: License 4 | permalink: /about/license/ 5 | toc: false 6 | --- 7 | 8 |

    Information about the Select2 Bootstrap 5 theme license.

    9 | 10 |

    The Select2 Bootstrap 5 theme is released under the MIT license.

    11 | 12 |

    It requires you to:

    13 |
      14 |
    • Keep the copyright notice and license included with the Select2 Bootstrap 5 theme when you include it in your projects
      • 15 |
    16 | 17 |

    It allows you to:

    18 |
      19 |
    • Freely download and use the Select2 Bootstrap 5 theme in your personal, public, private or commercial projects
      • 20 |
    • Modify the source code
      • 21 |
    • Distribute the compiled and/or source code
      • 22 |
    • Sublicense the Select2 Bootstrap 5 theme by incorporating the code into other licenses
      • 23 |
    24 | 25 |

    It forbids you to:

    26 |
      27 |
    • Hold the author or contributors liable for any damages. The Select2 Bootstrap 5 theme is provided "as is", without warranty
      • 28 |
    29 | 30 |

    The full Select2 Bootstrap 5 license is located in the project repository.

    31 | 32 |

    For more information about the MIT license, here are some useful links about it;

    33 | 38 | -------------------------------------------------------------------------------- /docs/assets/js/docs.js: -------------------------------------------------------------------------------- 1 | window.addEventListener( 'DOMContentLoaded', function () { 2 | anchors.options = { 3 | icon: '#' 4 | } 5 | anchors.add('.s2bs5-content > h2, .s2bs5-content > h3, .s2bs5-content > h4, .s2bs5-content > h5') 6 | 7 | document.querySelectorAll( '.btn-clipboard' ).forEach( function ( btn ) { 8 | var tooltipBtn = new bootstrap.Tooltip( btn ) 9 | 10 | btn.addEventListener( 'mouseleave', function () { 11 | // Explicitly hide tooltip, since after clicking it remains 12 | // focused (as it's a button), so tooltip would otherwise 13 | // remain visible until focus is moved away 14 | tooltipBtn.hide() 15 | } ) 16 | } ) 17 | 18 | var clipboard = new ClipboardJS( '.btn-clipboard', { 19 | target: function ( trigger ) { 20 | return trigger.parentNode.nextElementSibling 21 | } 22 | } ) 23 | 24 | clipboard.on( 'success', function ( e ) { 25 | var tooltipBtn = bootstrap.Tooltip.getInstance( e.trigger ) 26 | 27 | e.trigger.setAttribute( 'data-bs-original-title', 'Copied!' ) 28 | tooltipBtn.show() 29 | 30 | e.trigger.setAttribute( 'data-bs-original-title', 'Copy to clipboard' ) 31 | e.clearSelection() 32 | } ) 33 | 34 | clipboard.on( 'error', function ( e ) { 35 | var modifierKey = /mac/i.test( navigator.userAgent ) ? '\u2318' : 'Ctrl-' 36 | var fallbackMsg = 'Press ' + modifierKey + 'C to copy' 37 | var tooltipBtn = bootstrap.Tooltip.getInstance( e.trigger ) 38 | 39 | e.trigger.setAttribute( 'data-bs-original-title', fallbackMsg ) 40 | tooltipBtn.show() 41 | 42 | e.trigger.setAttribute( 'data-bs-original-title', 'Copy to clipboard' ) 43 | } ) 44 | } ) -------------------------------------------------------------------------------- /docs/examples/4.0/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | title: Redirecting... 4 | title_tag: true 5 | permalink: /examples/4.0/ 6 | sitemap: false 7 | redirect_to: /examples/single-select/4.0/ 8 | --- 9 | -------------------------------------------------------------------------------- /docs/examples/4.0/multiple-select.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Multiple select 4 | title_tag: true 5 | permalink: /examples/multiple-select/4.0/ 6 | --- 7 | 8 |

    Basic multiple select

    9 | {% assign field_name = "multiple-select" %} 10 | 11 | {% capture example_html %} 12 | 34 | {% endcapture %} 35 | 36 | {% capture example_js %} 37 | $( '#{{ field_name }}-field' ).select2( { 38 | theme: "bootstrap-5", 39 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 40 | placeholder: $( this ).data( 'placeholder' ), 41 | closeOnSelect: false, 42 | } ); 43 | {% endcapture %} 44 | 45 | {% include example.html %} 46 | 47 |

    Multiple select w/ optgroup

    48 | {% assign field_name = "multiple-select-optgroup" %} 49 | 50 | {% capture example_html %} 51 | 79 | {% endcapture %} 80 | 81 | {% capture example_js %} 82 | $( '#{{ field_name }}-field' ).select2( { 83 | theme: "bootstrap-5", 84 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 85 | placeholder: $( this ).data( 'placeholder' ), 86 | closeOnSelect: false, 87 | } ); 88 | {% endcapture %} 89 | 90 | {% include example.html %} 91 | 92 |

    Multiple select w/ allow clear

    93 | {% assign field_name = "multiple-select-clear" %} 94 | 95 | {% capture example_html %} 96 | 118 | {% endcapture %} 119 | 120 | {% capture example_js %} 121 | $( '#{{ field_name }}-field' ).select2( { 122 | theme: "bootstrap-5", 123 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 124 | placeholder: $( this ).data( 'placeholder' ), 125 | closeOnSelect: false, 126 | allowClear: true, 127 | } ); 128 | {% endcapture %} 129 | 130 | {% include example.html %} 131 | 132 |

    Multiple select w/ custom entries

    133 | {% assign field_name = "multiple-select-custom" %} 134 | 135 | {% capture example_html %} 136 | 158 | {% endcapture %} 159 | 160 | {% capture example_js %} 161 | $( '#{{ field_name }}-field' ).select2( { 162 | theme: "bootstrap-5", 163 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 164 | placeholder: $( this ).data( 'placeholder' ), 165 | closeOnSelect: false, 166 | tags: true 167 | } ); 168 | {% endcapture %} 169 | 170 | {% include example.html %} 171 | 172 |

    Disabled multiple select

    173 | {% assign field_name = "multiple-select-disabled" %} 174 | 175 | {% capture example_html %} 176 | 198 | {% endcapture %} 199 | 200 | {% capture example_js %} 201 | $( '#{{ field_name }}-field' ).select2( { 202 | theme: "bootstrap-5", 203 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 204 | placeholder: $( this ).data( 'placeholder' ), 205 | closeOnSelect: false, 206 | } ); 207 | {% endcapture %} 208 | 209 | {% include example.html %} 210 | -------------------------------------------------------------------------------- /docs/examples/4.0/single-select.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Single select 4 | title_tag: true 5 | permalink: /examples/single-select/4.0/ 6 | --- 7 | 8 |

    Basic single select

    9 | {% assign field_name = "single-select" %} 10 | 11 | {% capture example_html %} 12 | 20 | {% endcapture %} 21 | 22 | {% capture example_js %} 23 | $( '#{{ field_name }}-field' ).select2( { 24 | theme: "bootstrap-5", 25 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 26 | placeholder: $( this ).data( 'placeholder' ), 27 | } ); 28 | {% endcapture %} 29 | 30 | {% include example.html %} 31 | 32 |

    Single select w/ optgroup

    33 | {% assign field_name = "single-select-optgroup" %} 34 | 35 | {% capture example_html %} 36 | 48 | {% endcapture %} 49 | 50 | {% capture example_js %} 51 | 52 | $( '#{{ field_name }}-field' ).select2( { 53 | theme: "bootstrap-5", 54 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 55 | placeholder: $( this ).data( 'placeholder' ), 56 | } ); 57 | {% endcapture %} 58 | 59 | {% include example.html %} 60 | 61 |

    Single select w/ allow clear

    62 | {% assign field_name = "single-select-clear" %} 63 | 64 | {% capture example_html %} 65 | 73 | {% endcapture %} 74 | 75 | {% capture example_js %} 76 | $( '#{{ field_name }}-field' ).select2( { 77 | theme: "bootstrap-5", 78 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 79 | placeholder: $( this ).data( 'placeholder' ), 80 | allowClear: true 81 | } ); 82 | {% endcapture %} 83 | 84 | {% include example.html %} 85 | 86 |

    Disabled single select

    87 | {% assign field_name = "single-select-disabled" %} 88 | 89 | {% capture example_html %} 90 | 98 | {% endcapture %} 99 | 100 | {% capture example_js %} 101 | $( '#{{ field_name }}-field' ).select2( { 102 | theme: "bootstrap-5", 103 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 104 | placeholder: $( this ).data( 'placeholder' ), 105 | } ); 106 | {% endcapture %} 107 | 108 | {% include example.html %} 109 | -------------------------------------------------------------------------------- /docs/examples/4.0/sizing.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Sizing 4 | title_tag: true 5 | permalink: /examples/sizing/4.0/ 6 | --- 7 | 8 | {%- capture single_select -%} 9 |
    10 | 18 |
    19 | {%- endcapture -%} 20 | 21 | {%- capture multiple_select -%} 22 |
    23 | 45 |
    46 | {%- endcapture -%} 47 | 48 |

    Small

    49 |

    Select2 Options

    50 | {% assign field_name = "small-select2-options" %} 51 | 52 | {% capture example_html %} 53 | {{ single_select | replace: "single-select", field_name }} 54 | 55 | {{ multiple_select | replace: "multiple-select", field_name }} 56 | {% endcapture %} 57 | 58 | {% capture example_js %} 59 | $( '#{{ field_name }}-single-field' ).select2( { 60 | theme: "bootstrap-5", 61 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 62 | placeholder: $( this ).data( 'placeholder' ), 63 | containerCssClass: 'select2--small', 64 | dropdownCssClass: 'select2--small', 65 | } ); 66 | 67 | $( '#{{ field_name }}-multiple-field' ).select2( { 68 | theme: "bootstrap-5", 69 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 70 | placeholder: $( this ).data( 'placeholder' ), 71 | closeOnSelect: false, 72 | containerCssClass: 'select2--small', 73 | dropdownCssClass: 'select2--small', 74 | } ); 75 | {% endcapture %} 76 | 77 | {% include example.html %} 78 | 79 |

    Bootstrap 5 Class

    80 | {% assign field_name = "small-bootstrap-class" %} 81 | 82 | {% capture example_html %} 83 | {{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select form-select-sm" }} 84 | 85 | {{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select form-select-sm" }} 86 | {% endcapture %} 87 | 88 | {% capture example_js %} 89 | $( '#{{ field_name }}-single-field' ).select2( { 90 | theme: "bootstrap-5", 91 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 92 | placeholder: $( this ).data( 'placeholder' ), 93 | dropdownParent: $( '#{{ field_name }}-single-field' ).parent(), 94 | } ); 95 | 96 | $( '#{{ field_name }}-multiple-field' ).select2( { 97 | theme: "bootstrap-5", 98 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 99 | placeholder: $( this ).data( 'placeholder' ), 100 | closeOnSelect: false, 101 | dropdownParent: $( '#{{ field_name }}-multiple-field' ).parent(), 102 | } ); 103 | {% endcapture %} 104 | 105 | {% include example.html %} 106 | 107 |

    Large

    108 |

    Select2 Options

    109 | {% assign field_name = "large-select2-options" %} 110 | 111 | {% capture example_html %} 112 | {{ single_select | replace: "single-select", field_name }} 113 | 114 | {{ multiple_select | replace: "multiple-select", field_name }} 115 | {% endcapture %} 116 | 117 | {% capture example_js %} 118 | $( '#{{ field_name }}-single-field' ).select2( { 119 | theme: "bootstrap-5", 120 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 121 | placeholder: $( this ).data( 'placeholder' ), 122 | containerCssClass: 'select2--large', 123 | dropdownCssClass: 'select2--large', 124 | } ); 125 | 126 | $( '#{{ field_name }}-multiple-field' ).select2( { 127 | theme: "bootstrap-5", 128 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 129 | placeholder: $( this ).data( 'placeholder' ), 130 | closeOnSelect: false, 131 | containerCssClass: 'select2--large', 132 | dropdownCssClass: 'select2--large', 133 | } ); 134 | {% endcapture %} 135 | 136 | {% include example.html %} 137 | 138 |

    Bootstrap 5 Class

    139 | {% assign field_name = "large-bootstrap-class" %} 140 | 141 | {% capture example_html %} 142 | {{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select form-select-lg" }} 143 | 144 | {{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select form-select-lg" }} 145 | {% endcapture %} 146 | 147 | {% capture example_js %} 148 | $( '#{{ field_name }}-single-field' ).select2( { 149 | theme: "bootstrap-5", 150 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 151 | placeholder: $( this ).data( 'placeholder' ), 152 | dropdownParent: $( '#{{ field_name }}-single-field' ).parent(), 153 | } ); 154 | 155 | $( '#{{ field_name }}-multiple-field' ).select2( { 156 | theme: "bootstrap-5", 157 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 158 | placeholder: $( this ).data( 'placeholder' ), 159 | closeOnSelect: false, 160 | dropdownParent: $( '#{{ field_name }}-multiple-field' ).parent(), 161 | } ); 162 | {% endcapture %} 163 | 164 | {% include example.html %} -------------------------------------------------------------------------------- /docs/examples/4.0/validation.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Validation 4 | title_tag: true 5 | permalink: /examples/validation/4.0/ 6 | --- 7 | 8 | {%- capture single_select -%} 9 | 17 | {%- endcapture -%} 18 | 19 | {%- capture multiple_select -%} 20 | 42 | {%- endcapture -%} 43 | 44 |

    Valid fields

    45 |

    .was-validated

    46 | {% assign field_name = "valid-was-validated" %} 47 | 48 | {% capture example_html %} 49 |
    50 | {{ single_select | replace: "single-select", field_name }} 51 |
    52 | 53 |
    54 | {{ multiple_select | replace: "multiple-select", field_name }} 55 |
    56 | {% endcapture %} 57 | 58 | {% capture example_js %} 59 | $( '#{{ field_name }}-single-field' ).select2( { 60 | theme: "bootstrap-5", 61 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 62 | placeholder: $( this ).data( 'placeholder' ), 63 | } ); 64 | 65 | $( '#{{ field_name }}-multiple-field' ).select2( { 66 | theme: "bootstrap-5", 67 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 68 | placeholder: $( this ).data( 'placeholder' ), 69 | closeOnSelect: false, 70 | } ); 71 | {% endcapture %} 72 | 73 | {% include example.html %} 74 | 75 |

    .is-valid

    76 | {% assign field_name = "valid-is-valid" %} 77 | 78 | {% capture example_html %} 79 |
    80 | {{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select is-valid" }} 81 |
    82 | 83 |
    84 | {{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select is-valid" }} 85 |
    86 | {% endcapture %} 87 | 88 | {% capture example_js %} 89 | $( '#{{ field_name }}-single-field' ).select2( { 90 | theme: "bootstrap-5", 91 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 92 | placeholder: $( this ).data( 'placeholder' ), 93 | } ); 94 | 95 | $( '#{{ field_name }}-multiple-field' ).select2( { 96 | theme: "bootstrap-5", 97 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 98 | placeholder: $( this ).data( 'placeholder' ), 99 | closeOnSelect: false, 100 | } ); 101 | {% endcapture %} 102 | 103 | {% include example.html %} 104 | 105 |

    Invalid fields

    106 |

    .was-validated

    107 | {% assign field_name = "invalid-was-validated" %} 108 | 109 | {% capture example_html %} 110 |
    111 | {{ single_select | replace: "single-select", field_name | replace: 'thing">', 'thing" required>' }} 112 |
    113 | 114 |
    115 | {{ multiple_select | replace: "multiple-select", field_name | replace: "multiple>", "multiple required>" }} 116 |
    117 | {% endcapture %} 118 | 119 | {% capture example_js %} 120 | $( '#{{ field_name }}-single-field' ).select2( { 121 | theme: "bootstrap-5", 122 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 123 | placeholder: $( this ).data( 'placeholder' ), 124 | } ); 125 | 126 | $( '#{{ field_name }}-multiple-field' ).select2( { 127 | theme: "bootstrap-5", 128 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 129 | placeholder: $( this ).data( 'placeholder' ), 130 | closeOnSelect: false, 131 | } ); 132 | {% endcapture %} 133 | 134 | {% include example.html %} 135 | 136 |

    .is-invalid

    137 | {% assign field_name = "invalid-is-invalid" %} 138 | 139 | {% capture example_html %} 140 |
    141 | {{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select is-invalid" }} 142 |
    143 | 144 |
    145 | {{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select is-invalid" }} 146 |
    147 | {% endcapture %} 148 | 149 | {% capture example_js %} 150 | $( '#{{ field_name }}-single-field' ).select2( { 151 | theme: "bootstrap-5", 152 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 153 | placeholder: $( this ).data( 'placeholder' ), 154 | } ); 155 | 156 | $( '#{{ field_name }}-multiple-field' ).select2( { 157 | theme: "bootstrap-5", 158 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 159 | placeholder: $( this ).data( 'placeholder' ), 160 | closeOnSelect: false, 161 | } ); 162 | {% endcapture %} 163 | 164 | {% include example.html %} 165 | -------------------------------------------------------------------------------- /docs/examples/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | title: Redirecting... 4 | title_tag: true 5 | permalink: /examples/ 6 | sitemap: false 7 | redirect_to: /examples/single-select/ 8 | --- 9 | -------------------------------------------------------------------------------- /docs/examples/multiple-select.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Multiple select 4 | title_tag: true 5 | permalink: /examples/multiple-select/ 6 | --- 7 | 8 |

    Basic multiple select

    9 | {% assign field_name = "multiple-select" %} 10 | 11 | {% capture example_html %} 12 | 34 | {% endcapture %} 35 | 36 | {% capture example_js %} 37 | $( '#{{ field_name }}-field' ).select2( { 38 | theme: "bootstrap-5", 39 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 40 | placeholder: $( this ).data( 'placeholder' ), 41 | closeOnSelect: false, 42 | } ); 43 | {% endcapture %} 44 | 45 | {% include example.html %} 46 | 47 |

    Multiple select w/ optgroup

    48 | {% assign field_name = "multiple-select-optgroup" %} 49 | 50 | {% capture example_html %} 51 | 79 | {% endcapture %} 80 | 81 | {% capture example_js %} 82 | $( '#{{ field_name }}-field' ).select2( { 83 | theme: "bootstrap-5", 84 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 85 | placeholder: $( this ).data( 'placeholder' ), 86 | closeOnSelect: false, 87 | } ); 88 | {% endcapture %} 89 | 90 | {% include example.html %} 91 | 92 |

    Multiple select w/ allow clear

    93 | {% assign field_name = "multiple-select-clear" %} 94 | 95 | {% capture example_html %} 96 | 118 | {% endcapture %} 119 | 120 | {% capture example_js %} 121 | $( '#{{ field_name }}-field' ).select2( { 122 | theme: "bootstrap-5", 123 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 124 | placeholder: $( this ).data( 'placeholder' ), 125 | closeOnSelect: false, 126 | allowClear: true, 127 | } ); 128 | {% endcapture %} 129 | 130 | {% include example.html %} 131 | 132 |

    Multiple select w/ custom entries

    133 | {% assign field_name = "multiple-select-custom" %} 134 | 135 | {% capture example_html %} 136 | 158 | {% endcapture %} 159 | 160 | {% capture example_js %} 161 | $( '#{{ field_name }}-field' ).select2( { 162 | theme: "bootstrap-5", 163 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 164 | placeholder: $( this ).data( 'placeholder' ), 165 | closeOnSelect: false, 166 | tags: true 167 | } ); 168 | {% endcapture %} 169 | 170 | {% include example.html %} 171 | 172 |

    Disabled multiple select

    173 | {% assign field_name = "multiple-select-disabled" %} 174 | 175 | {% capture example_html %} 176 | 198 | {% endcapture %} 199 | 200 | {% capture example_js %} 201 | $( '#{{ field_name }}-field' ).select2( { 202 | theme: "bootstrap-5", 203 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 204 | placeholder: $( this ).data( 'placeholder' ), 205 | closeOnSelect: false, 206 | } ); 207 | {% endcapture %} 208 | 209 | {% include example.html %} 210 | -------------------------------------------------------------------------------- /docs/examples/single-select.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Single select 4 | title_tag: true 5 | permalink: /examples/single-select/ 6 | --- 7 | 8 |

    Basic single select

    9 | {% assign field_name = "single-select" %} 10 | 11 | {% capture example_html %} 12 | 20 | {% endcapture %} 21 | 22 | {% capture example_js %} 23 | $( '#{{ field_name }}-field' ).select2( { 24 | theme: "bootstrap-5", 25 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 26 | placeholder: $( this ).data( 'placeholder' ), 27 | } ); 28 | {% endcapture %} 29 | 30 | {% include example.html %} 31 | 32 |

    Single select w/ optgroup

    33 | {% assign field_name = "single-select-optgroup" %} 34 | 35 | {% capture example_html %} 36 | 48 | {% endcapture %} 49 | 50 | {% capture example_js %} 51 | 52 | $( '#{{ field_name }}-field' ).select2( { 53 | theme: "bootstrap-5", 54 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 55 | placeholder: $( this ).data( 'placeholder' ), 56 | } ); 57 | {% endcapture %} 58 | 59 | {% include example.html %} 60 | 61 |

    Single select w/ allow clear

    62 | {% assign field_name = "single-select-clear" %} 63 | 64 | {% capture example_html %} 65 | 73 | {% endcapture %} 74 | 75 | {% capture example_js %} 76 | $( '#{{ field_name }}-field' ).select2( { 77 | theme: "bootstrap-5", 78 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 79 | placeholder: $( this ).data( 'placeholder' ), 80 | allowClear: true 81 | } ); 82 | {% endcapture %} 83 | 84 | {% include example.html %} 85 | 86 |

    Disabled single select

    87 | {% assign field_name = "single-select-disabled" %} 88 | 89 | {% capture example_html %} 90 | 98 | {% endcapture %} 99 | 100 | {% capture example_js %} 101 | $( '#{{ field_name }}-field' ).select2( { 102 | theme: "bootstrap-5", 103 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 104 | placeholder: $( this ).data( 'placeholder' ), 105 | } ); 106 | {% endcapture %} 107 | 108 | {% include example.html %} 109 | -------------------------------------------------------------------------------- /docs/examples/sizing.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Sizing 4 | title_tag: true 5 | permalink: /examples/sizing/ 6 | --- 7 | 8 | {%- capture single_select -%} 9 |
    10 | 18 |
    19 | {%- endcapture -%} 20 | 21 | {%- capture multiple_select -%} 22 |
    23 | 45 |
    46 | {%- endcapture -%} 47 | 48 |

    Small

    49 |

    Select2 Options

    50 | {% assign field_name = "small-select2-options" %} 51 | 52 | {% capture example_html %} 53 | {{ single_select | replace: "single-select", field_name }} 54 | 55 | {{ multiple_select | replace: "multiple-select", field_name }} 56 | {% endcapture %} 57 | 58 | {% capture example_js %} 59 | $( '#{{ field_name }}-single-field' ).select2( { 60 | theme: "bootstrap-5", 61 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 62 | placeholder: $( this ).data( 'placeholder' ), 63 | selectionCssClass: 'select2--small', 64 | dropdownCssClass: 'select2--small', 65 | } ); 66 | 67 | $( '#{{ field_name }}-multiple-field' ).select2( { 68 | theme: "bootstrap-5", 69 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 70 | placeholder: $( this ).data( 'placeholder' ), 71 | closeOnSelect: false, 72 | selectionCssClass: 'select2--small', 73 | dropdownCssClass: 'select2--small', 74 | } ); 75 | {% endcapture %} 76 | 77 | {% include example.html %} 78 | 79 |

    Bootstrap 5 Class

    80 | {% assign field_name = "small-bootstrap-class" %} 81 | 82 | {% capture example_html %} 83 | {{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select form-select-sm" }} 84 | 85 | {{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select form-select-sm" }} 86 | {% endcapture %} 87 | 88 | {% capture example_js %} 89 | $( '#{{ field_name }}-single-field' ).select2( { 90 | theme: "bootstrap-5", 91 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 92 | placeholder: $( this ).data( 'placeholder' ), 93 | dropdownParent: $( '#{{ field_name }}-single-field' ).parent(), 94 | } ); 95 | 96 | $( '#{{ field_name }}-multiple-field' ).select2( { 97 | theme: "bootstrap-5", 98 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 99 | placeholder: $( this ).data( 'placeholder' ), 100 | closeOnSelect: false, 101 | dropdownParent: $( '#{{ field_name }}-multiple-field' ).parent(), 102 | } ); 103 | {% endcapture %} 104 | 105 | {% include example.html %} 106 | 107 |

    Large

    108 |

    Select2 Options

    109 | {% assign field_name = "large-select2-options" %} 110 | 111 | {% capture example_html %} 112 | {{ single_select | replace: "single-select", field_name }} 113 | 114 | {{ multiple_select | replace: "multiple-select", field_name }} 115 | {% endcapture %} 116 | 117 | {% capture example_js %} 118 | $( '#{{ field_name }}-single-field' ).select2( { 119 | theme: "bootstrap-5", 120 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 121 | placeholder: $( this ).data( 'placeholder' ), 122 | selectionCssClass: 'select2--large', 123 | dropdownCssClass: 'select2--large', 124 | } ); 125 | 126 | $( '#{{ field_name }}-multiple-field' ).select2( { 127 | theme: "bootstrap-5", 128 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 129 | placeholder: $( this ).data( 'placeholder' ), 130 | closeOnSelect: false, 131 | selectionCssClass: 'select2--large', 132 | dropdownCssClass: 'select2--large', 133 | } ); 134 | {% endcapture %} 135 | 136 | {% include example.html %} 137 | 138 |

    Bootstrap 5 Class

    139 | {% assign field_name = "large-bootstrap-class" %} 140 | 141 | {% capture example_html %} 142 | {{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select form-select-lg" }} 143 | 144 | {{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select form-select-lg" }} 145 | {% endcapture %} 146 | 147 | {% capture example_js %} 148 | $( '#{{ field_name }}-single-field' ).select2( { 149 | theme: "bootstrap-5", 150 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 151 | placeholder: $( this ).data( 'placeholder' ), 152 | dropdownParent: $( '#{{ field_name }}-single-field' ).parent(), 153 | } ); 154 | 155 | $( '#{{ field_name }}-multiple-field' ).select2( { 156 | theme: "bootstrap-5", 157 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 158 | placeholder: $( this ).data( 'placeholder' ), 159 | closeOnSelect: false, 160 | dropdownParent: $( '#{{ field_name }}-multiple-field' ).parent(), 161 | } ); 162 | {% endcapture %} 163 | 164 | {% include example.html %} -------------------------------------------------------------------------------- /docs/examples/validation.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Validation 4 | title_tag: true 5 | permalink: /examples/validation/ 6 | --- 7 | 8 | {%- capture single_select -%} 9 | 17 | {%- endcapture -%} 18 | 19 | {%- capture multiple_select -%} 20 | 42 | {%- endcapture -%} 43 | 44 |

    Valid fields

    45 |

    .was-validated

    46 | {% assign field_name = "valid-was-validated" %} 47 | 48 | {% capture example_html %} 49 |
    50 | {{ single_select | replace: "single-select", field_name }} 51 |
    52 | 53 |
    54 | {{ multiple_select | replace: "multiple-select", field_name }} 55 |
    56 | {% endcapture %} 57 | 58 | {% capture example_js %} 59 | $( '#{{ field_name }}-single-field' ).select2( { 60 | theme: "bootstrap-5", 61 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 62 | placeholder: $( this ).data( 'placeholder' ), 63 | } ); 64 | 65 | $( '#{{ field_name }}-multiple-field' ).select2( { 66 | theme: "bootstrap-5", 67 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 68 | placeholder: $( this ).data( 'placeholder' ), 69 | closeOnSelect: false, 70 | } ); 71 | {% endcapture %} 72 | 73 | {% include example.html %} 74 | 75 |

    .is-valid

    76 | {% assign field_name = "valid-is-valid" %} 77 | 78 | {% capture example_html %} 79 |
    80 | {{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select is-valid" }} 81 |
    82 | 83 |
    84 | {{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select is-valid" }} 85 |
    86 | {% endcapture %} 87 | 88 | {% capture example_js %} 89 | $( '#{{ field_name }}-single-field' ).select2( { 90 | theme: "bootstrap-5", 91 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 92 | placeholder: $( this ).data( 'placeholder' ), 93 | } ); 94 | 95 | $( '#{{ field_name }}-multiple-field' ).select2( { 96 | theme: "bootstrap-5", 97 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 98 | placeholder: $( this ).data( 'placeholder' ), 99 | closeOnSelect: false, 100 | } ); 101 | {% endcapture %} 102 | 103 | {% include example.html %} 104 | 105 |

    Invalid fields

    106 |

    .was-validated

    107 | {% assign field_name = "invalid-was-validated" %} 108 | 109 | {% capture example_html %} 110 |
    111 | {{ single_select | replace: "single-select", field_name | replace: 'thing">', 'thing" required>' }} 112 |
    113 | 114 |
    115 | {{ multiple_select | replace: "multiple-select", field_name | replace: "multiple>", "multiple required>" }} 116 |
    117 | {% endcapture %} 118 | 119 | {% capture example_js %} 120 | $( '#{{ field_name }}-single-field' ).select2( { 121 | theme: "bootstrap-5", 122 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 123 | placeholder: $( this ).data( 'placeholder' ), 124 | } ); 125 | 126 | $( '#{{ field_name }}-multiple-field' ).select2( { 127 | theme: "bootstrap-5", 128 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 129 | placeholder: $( this ).data( 'placeholder' ), 130 | closeOnSelect: false, 131 | } ); 132 | {% endcapture %} 133 | 134 | {% include example.html %} 135 | 136 |

    .is-invalid

    137 | {% assign field_name = "invalid-is-invalid" %} 138 | 139 | {% capture example_html %} 140 |
    141 | {{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select is-invalid" }} 142 |
    143 | 144 |
    145 | {{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select is-invalid" }} 146 |
    147 | {% endcapture %} 148 | 149 | {% capture example_js %} 150 | $( '#{{ field_name }}-single-field' ).select2( { 151 | theme: "bootstrap-5", 152 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 153 | placeholder: $( this ).data( 'placeholder' ), 154 | } ); 155 | 156 | $( '#{{ field_name }}-multiple-field' ).select2( { 157 | theme: "bootstrap-5", 158 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 159 | placeholder: $( this ).data( 'placeholder' ), 160 | closeOnSelect: false, 161 | } ); 162 | {% endcapture %} 163 | 164 | {% include example.html %} 165 | -------------------------------------------------------------------------------- /docs/getting-started/basic-usage.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Basic usage 4 | title_tag: true 5 | permalink: /getting-started/basic-usage/ 6 | --- 7 | 8 | {% assign field_name = "basic-usage" %} 9 | {% capture example_html %} 10 | 18 | {% endcapture %} 19 | 20 | {% capture example_js %} 21 | $( '#{{ field_name }}' ).select2( { 22 | theme: "bootstrap-5", 23 | width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', 24 | placeholder: $( this ).data( 'placeholder' ), 25 | } ); 26 | {% endcapture %} 27 | 28 | {% include example.html %} 29 | 30 |

    Select2 versions

    31 |

    There are 2 versions of Select2 which changed some options. The Select2 Bootstrap 5 theme supports both 4.0.x and 4.1.x-rc.x. Which version of Select2 you use will change some of the usage for the Select2 Bootstrap 5 theme.

    32 | 33 |

    Sizing

    34 |

    There are 2 ways to set the sizing of the Select2 element; using Select2 options, or using Bootstrap 5 classes and Select2 options. Between 4.0.x and 4.1.x-rc.x, Select2 changed the option name for adding classes to the main element (the one you see before opening the dropdown) from containerCssClass to selectionCssClass. See below for an example

    35 |
    36 | {% include clipboard.html %} 37 | {% highlight js %} 38 | // For Select2 4.0 39 | $("#form-select-sm").select2({ 40 | theme: "bootstrap-5", 41 | containerCssClass: "select2--small", 42 | dropdownCssClass: "select2--small", 43 | }); 44 | 45 | // For Select2 4.1 46 | $("#form-select-sm").select2({ 47 | theme: "bootstrap-5", 48 | selectionCssClass: "select2--small", 49 | dropdownCssClass: "select2--small", 50 | }); 51 | {% endhighlight %} 52 |
    53 | -------------------------------------------------------------------------------- /docs/getting-started/build-tools.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Build tools 4 | title_tag: true 5 | permalink: /getting-started/build-tools/ 6 | --- 7 | 8 |

    The Select2 Bootstrap 5 Theme uses Gulp to compile the assets, see below for the included npm scripts and Gulp tasks and what they do;

    9 | 10 |
    11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |
    npm scriptGulp taskDescription
    startdefaultCleans the dist directory, lints the SCSS, compiles the dev and min versions and starts watching the SCSS for changes
    start:fullN/ACleans, lints, compiles and watches the SCSS (theme & docs) and serves the docs for development
    cleancleanCleans the dist directory, removing the directory and it's contents
    lintlintLints the SCSS files using Stylelint, see .stylelintrc and stylelint-config-twbs-bootstrap for linting rules
    compilecompileCleans the dist directory, lints the SCSS, compiles the LTR and RTL dev and min versions. Does the same for the docs
    compile:maincompile:mainCompiles all LTR versions
    compile:rtlcompile:rtlCompiles all RTL versions
    watchwatchWatches all files in src, compiling the SCSS when changes are detected
    docsdocsCleans the docs/assets/css directory, lints the docs SCSS, compiles the docsSCSS and starts watching the docs SCSS for changes
    docs:cleandocs:cleanCleans the docs/assets/css directory, removing the directory and it's contents
    docs:lintdocs:lintLints the docs SCSS files using Stylelint, see .stylelintrc and stylelint-config-twbs-bootstrap for linting rules
    docs:compiledocs:compileCleans the docs/assets/css directory, lints the docs SCSS and compiles the LTR and RTL versions
    docs:compile:maindocs:compile:mainCompiles the LTR version of the docs SCSS
    docs:compile:rtldocs:compile:rtlCompiles the RTL version of the docs SCSS
    docs:watchdocs:watchWatches all files in docs/_sass, compiling the SCSS when changes are detected
    docs:buildN/ABuilds the docs using Jekyll
    docs:serveN/AServes the docs using Jekyll for development
    107 |
    108 | -------------------------------------------------------------------------------- /docs/getting-started/download-install.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Download & install 4 | title_tag: true 5 | permalink: /getting-started/download-install/ 6 | --- 7 | 8 |

    Download the compiled or source code of the Select2 Bootstrap 5 theme, or include it in your package manager of choice, currently supporting npm, yarn and Composer

    9 | 10 |

    Compiled code

    11 |

    Download the pre-compiled code for the Select2 Bootstrap 5 theme and easily include it in your project. This option ONLY includes the compiled files and does not include the documentation or the source files.

    12 | 13 | Download 14 | 15 |

    Source files

    16 |

    Download the original source files to compile it with any modifications you need. This option includes the source SCSS files, documentation and the compiled files.

    17 | 18 |

    We recommend checking out the build tools documentation to see how the build tools are set up for this project, along with alternatives that can be used.

    19 | 20 | Download source 21 | 22 |

    CDN via jsDelivr

    23 | 24 |

    Include the compiled files straight from jsDelivr by copying one of the following options below directly into your project.

    25 | 26 |

    Select2 v4.0.x

    27 |
    28 | {% include clipboard.html %} 29 | {% highlight html %} 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | {% endhighlight %} 42 |
    43 | 44 |

    Select2 v4.1.x

    45 |
    46 | {% include clipboard.html %} 47 | {% highlight html %} 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | {% endhighlight %} 60 |
    61 | 62 |

    Package managers

    63 |

    Include the Select2 Bootstrap 5 theme's source and compiled files directly into your project using either npm, yarn or Composer. Using the source files will require a Sass compiler as well as Autoprefixer in order to compile the code to match both the compiled files and the Bootstrap 5 compiled files. You can find more information in the build tools documentation.

    64 | 65 |

    You can import the source files into your project by using the following code:

    66 | 67 |
    68 | {% include clipboard.html %} 69 | {% highlight scss %} 70 | @import "node_modules/select2/src/scss/core"; 71 | // If you need to import Bootstrap as well: 72 | @import "node_modules/select2-bootstrap-5-theme/src/select2-bootstrap-5-theme"; 73 | // Or if you have already imported Bootstrap: 74 | @import "node_modules/select2-bootstrap-5-theme/src/include-all"; 75 | {% endhighlight %} 76 |
    77 | 78 |

    Note: you will need to include the select2 package into your project as well for the above code. Alternatively, simply remove the @import "node_modules/select2/src/scss/core"; line if you're already importing select2 elsewhere.

    79 | 80 |

    npm

    81 |

    Install the Select2 Bootstrap 5 theme into your Node.js powered apps with the npm package:

    82 | 83 |
    84 | {% include clipboard.html %} 85 | {% highlight sh %}npm install select2-bootstrap-5-theme{% endhighlight %} 86 |
    87 | 88 |

    The Select2 Bootstrap 5 theme's package.json includes some additional properties under the following keys:

    89 |
      90 |
    • sass - path to the Select2 Bootstrap 5 theme's main Sass source file
      • 91 |
    • style - path to the Select2 Bootstrap 5 theme's non-minified, pre-compiled CSS
      • 92 |
    93 | 94 |

    yarn

    95 |

    Install the Select2 Bootstrap 5 theme into your Node.js powered apps with the npm package:

    96 | 97 |
    98 | {% include clipboard.html %} 99 | {% highlight sh %}yarn add select2-bootstrap-5-theme{% endhighlight %} 100 |
    101 | 102 |

    The Select2 Bootstrap 5 theme's package.json includes some additional properties under the following keys:

    103 |
      104 |
    • sass - path to the Select2 Bootstrap 5 theme's main Sass source file
      • 105 |
    • style - path to the Select2 Bootstrap 5 theme's non-minified, pre-compiled CSS
      • 106 |
    107 | 108 |

    Composer

    109 |

    Install the Select2 Bootstrap 5 theme into your Composer based projects with the Composer package:

    110 | 111 |
    112 | {% include clipboard.html %} 113 | {% highlight sh %}composer require apalfrey/select2-bootstrap-5-theme{% endhighlight %} 114 |
    115 | 116 |

    RTL support

    117 |

    Like Bootstrap 5, the Select2 Bootstrap 5 theme includes RTL support using the gulp version of RTLCSS. Find out more about how to use the RTL version in the Bootstrap 5 docs.

    118 | -------------------------------------------------------------------------------- /docs/getting-started/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | title: Redirecting... 4 | title_tag: true 5 | permalink: /getting-started/ 6 | redirect_to: /getting-started/download-install/ 7 | sitemap: false 8 | --- 9 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | # Feel free to add content and custom Front Matter to this file. 3 | # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults 4 | 5 | layout: default 6 | title: Introduction 7 | title_tag: false 8 | permalink: / 9 | --- 10 | 11 |

    Get started with the Select2 Bootstrap 5 theme, the look of Bootstrap 5, with the functionality of Select2.

    12 | 13 |

    Quick start

    14 |

    Looking to quickly get started adding the Select2 Bootstrap 5 theme to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the download & install page.

    15 | 16 |

    Select2 v4.0.x

    17 |

    Copy the following link and script tags into your head to load Bootstrap 5, Select2 v4.0 and the Select2 Bootstrap 5 theme.

    18 |
    19 | {% include clipboard.html %} 20 | {% highlight html %} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | {% endhighlight %} 33 |
    34 | 35 |

    Select2 v4.1.x

    36 |

    Copy the following link and script tags into your head to load Bootstrap 5, Select2 v4.1 and the Select2 Bootstrap 5 theme.

    37 |
    38 | {% include clipboard.html %} 39 | {% highlight html %} 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | {% endhighlight %} 52 |
    53 | 54 |

    Initialise Select2

    55 |

    Once the necessary styles and scripts are imported, Select2 can be initialised with the Select2 Bootstrap 5 theme. Simply set the theme parameter to bootstrap-5 as seen below.

    56 |
    57 | {% include clipboard.html %} 58 | {% highlight js %} 59 | $( '#select-field' ).select2( { 60 | theme: 'bootstrap-5' 61 | } ); 62 | {% endhighlight %} 63 |
    64 | 65 |

    Browsers & devices

    66 |

    The Select2 Bootstrap 5 theme uses the same .browserlistrc specification that Bootstrap 5 uses, to ensure thorough compatibility between the browsers & devices supported by Bootstrap 5 and those supported by the Select2 Bootstrap 5 theme. For more information about what browsers and devices are supported, visit the Browsers and devices page in the Bootstrap 5 docs.

    67 | 68 |

    Accessibility

    69 |

    This Select2 theme is designed as much as possible to fit in with the accessibility features and limitations detailed by Bootstrap 5. This includes the guidance on color contrast and visually hidden content.

    70 | -------------------------------------------------------------------------------- /docs/testing-4.0.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: testing 3 | title: Testing page - 4.0 4 | permalink: /testing/4.0/ 5 | --- 6 | -------------------------------------------------------------------------------- /docs/testing.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: testing 3 | title: Testing page - 4.1 4 | permalink: /testing/ 5 | --- 6 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Core dependencies 2 | const gulp = require( "gulp" ) 3 | 4 | // External dependencies 5 | const autoprefixer = require( "autoprefixer" ) 6 | const cssnano = require( "cssnano" ) 7 | const del = require( "del" ) 8 | const gulpif = require( "gulp-if" ) 9 | const postcss = require( "gulp-postcss" ) 10 | const rename = require( "gulp-rename" ) 11 | const rtlcss = require( "rtlcss" ) 12 | const sass = require( "gulp-sass" )( require( "sass" ) ) 13 | const stylelint = require( "@ronilaukkarinen/gulp-stylelint" ) 14 | 15 | const config = { 16 | stylelint: { 17 | failAfterError: true, 18 | reporters: [ 19 | { 20 | formatter: "verbose", 21 | console: true, 22 | }, 23 | ], 24 | }, 25 | sass: { 26 | outputStyle: "expanded", 27 | }, 28 | autoprefixer: { 29 | cascade: true, 30 | }, 31 | cssnano: { 32 | preset: [ 33 | "default", 34 | { 35 | cssDeclarationSorter: false, 36 | svgo: false, 37 | } 38 | ], 39 | }, 40 | } 41 | 42 | /* Start docs tasks */ 43 | gulp.task( "docs:clean", () => { 44 | return del( [ 45 | "docs/assets/css" 46 | ] ) 47 | } ) 48 | 49 | gulp.task( "docs:lint", () => { 50 | return gulp.src( "docs/_sass/**/*.scss" ) 51 | .pipe( stylelint( config.stylelint ) ) 52 | } ) 53 | 54 | gulp.task( "docs:compile:main", () => { 55 | return gulp.src( "docs/_sass/docs.scss" ) 56 | .pipe( sass.sync( config.sass ).on( "error", sass.logError ) ) 57 | .pipe( postcss( [ 58 | autoprefixer( config.autoprefixer ), 59 | cssnano( config.cssnano ) 60 | ] ) ) 61 | .pipe( gulp.dest( "docs/assets/css" ) ) 62 | } ) 63 | 64 | gulp.task( "docs:compile:rtl", () => { 65 | return gulp.src( "docs/_sass/rtl.scss" ) 66 | .pipe( sass.sync( config.sass ).on( "error", sass.logError ) ) 67 | .pipe( postcss( [ 68 | autoprefixer( config.autoprefixer ), 69 | rtlcss(), 70 | cssnano( config.cssnano ) 71 | ] ) ) 72 | .pipe( gulp.dest( "docs/assets/css" ) ) 73 | } ) 74 | 75 | gulp.task( "docs:compile:testing", () => { 76 | return gulp.src( "docs/_sass/testing.scss" ) 77 | .pipe( sass.sync( config.sass ).on( "error", sass.logError ) ) 78 | .pipe( postcss( [ 79 | autoprefixer( config.autoprefixer ) 80 | ] ) ) 81 | .pipe( gulp.dest( "docs/assets/css" ) ) 82 | .pipe( postcss( [ 83 | rtlcss() 84 | ] ) ) 85 | .pipe( rename( { 86 | suffix: ".rtl" 87 | } ) ) 88 | .pipe( gulp.dest( "docs/assets/css" ) ) 89 | } ) 90 | 91 | gulp.task( "docs:watch", ( done ) => { 92 | gulp.watch( "docs/_sass/**/*.scss", gulp.series( "docs:compile" ) ) 93 | 94 | done() 95 | } ) 96 | 97 | gulp.task( "docs:compile", gulp.series( "docs:clean", "docs:lint", "docs:compile:main", "docs:compile:rtl", "docs:compile:testing" ) ) 98 | /* End docs tasks */ 99 | 100 | gulp.task( "clean", () => { 101 | return del( [ 102 | "dist" 103 | ] ) 104 | } ) 105 | 106 | gulp.task( "lint", () => { 107 | return gulp.src( "src/**/*.scss" ) 108 | .pipe( stylelint( config.stylelint ) ) 109 | } ) 110 | 111 | const compile = ( rtl = false ) => { 112 | let postcss_options = [ 113 | autoprefixer( config.autoprefixer ) 114 | ] 115 | 116 | if ( rtl ) { 117 | postcss_options.push( rtlcss() ) 118 | } 119 | 120 | return gulp.src( "src/select2-bootstrap-5-theme.scss" ) 121 | .pipe( sass.sync( config.sass ).on( "error", sass.logError ) ) 122 | .pipe( postcss( postcss_options ) ) 123 | .pipe( gulpif( rtl, rename( { 124 | suffix: ".rtl" 125 | } ) ) ) 126 | .pipe( gulp.dest( "dist" ) ) 127 | .pipe( postcss( [ 128 | cssnano( config.cssnano ) 129 | ] ) ) 130 | .pipe( rename( { 131 | suffix: ".min" 132 | } ) ) 133 | .pipe( gulp.dest( "dist" ) ) 134 | } 135 | 136 | gulp.task( "compile:main", () => { 137 | return compile( false ) 138 | } ) 139 | 140 | gulp.task( "compile:rtl", () => { 141 | return compile( true ) 142 | } ) 143 | 144 | gulp.task( "compile", gulp.series( "clean", "lint", "compile:main", "compile:rtl", "docs:compile" ) ) 145 | 146 | gulp.task( "watch", ( done ) => { 147 | gulp.watch( "src/*.scss", gulp.series( "compile" ) ) 148 | done() 149 | } ) 150 | 151 | gulp.task( "default", gulp.series( "compile", "watch" ) ) 152 | 153 | gulp.task( "docs", gulp.series( "docs:compile", "docs:watch" ) ) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "select2-bootstrap-5-theme", 3 | "description": "Select2 v4 theme for Bootstrap 5", 4 | "version": "1.3.0", 5 | "license": "MIT", 6 | "author": "Andrew Palfrey ", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/apalfrey/select2-bootstrap-5-theme.git" 10 | }, 11 | "bugs": "https://github.com/apalfrey/select2-bootstrap-5-theme/issues", 12 | "files": [ 13 | "dist/", 14 | "src/", 15 | "LICENSE", 16 | "README.md" 17 | ], 18 | "keywords": [ 19 | "select2", 20 | "theme", 21 | "select2-theme", 22 | "bootstrap", 23 | "bootstrap5", 24 | "css", 25 | "scss", 26 | "sass" 27 | ], 28 | "main": "", 29 | "style": "dist/select2-bootstrap-5-theme.css", 30 | "sass": "src/select2-bootstrap-5-theme.scss", 31 | "scripts": { 32 | "start": "gulp", 33 | "start:full": "npm-run-all -p start docs docs:serve", 34 | "clean": "gulp clean", 35 | "lint": "gulp lint", 36 | "compile": "gulp compile", 37 | "compile:main": "gulp compile:main", 38 | "compile:rtl": "gulp compile:rtl", 39 | "watch": "gulp watch", 40 | "docs": "gulp docs", 41 | "docs:clean": "gulp docs:clean", 42 | "docs:lint": "gulp docs:lint", 43 | "docs:compile": "gulp docs:compile", 44 | "docs:compile:main": "gulp docs:compile:main", 45 | "docs:compile:rtl": "gulp docs:compile:rtl", 46 | "docs:watch": "gulp docs:watch", 47 | "docs:build": "cd docs && bundle exec jekyll build", 48 | "docs:serve": "cd docs && bundle exec jekyll serve --config _config_dev.yml" 49 | }, 50 | "dependencies": { 51 | "bootstrap": "^5.1.3" 52 | }, 53 | "devDependencies": { 54 | "@ronilaukkarinen/gulp-stylelint": "^14.0.5", 55 | "autoprefixer": "^10.4.2", 56 | "cssnano": "^5.1.0", 57 | "del": "^6.0.0", 58 | "gulp": "^4.0.2", 59 | "gulp-if": "^3.0.0", 60 | "gulp-plumber": "^1.2.1", 61 | "gulp-postcss": "^9.0.1", 62 | "gulp-rename": "^2.0.0", 63 | "gulp-sass": "^5.1.0", 64 | "npm-run-all": "^4.1.5", 65 | "postcss": "^8.4.6", 66 | "rtlcss": "^3.5.0", 67 | "sass": "^1.49.8", 68 | "stylelint": "^14.5.2", 69 | "stylelint-config-twbs-bootstrap": "^3.0.1" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/_disabled.scss: -------------------------------------------------------------------------------- 1 | .select2-container--bootstrap-5 { 2 | &.select2-container--disabled, 3 | &.select2-container--disabled.select2-container--focus { 4 | // Base styling 5 | .select2-selection { 6 | color: $s2bs5-disabled-color; 7 | cursor: not-allowed; 8 | background-color: $s2bs5-disabled-bg; 9 | border-color: $s2bs5-disabled-border-color; 10 | box-shadow: none; 11 | } 12 | 13 | // Multiple 14 | .select2-selection--multiple { 15 | .select2-selection__clear { 16 | display: none; 17 | } 18 | 19 | // Items 20 | .select2-selection__choice { 21 | cursor: not-allowed; 22 | .select2-selection__choice__remove { 23 | display: none; 24 | } 25 | } 26 | 27 | // Remove search field if no items selected 28 | .select2-selection__rendered:not(:empty) { 29 | padding-bottom: 0; 30 | 31 | + .select2-search { 32 | display: none; 33 | } 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .select2-container--bootstrap-5 { 2 | + .select2-container--bootstrap-5 { 3 | z-index: $s2bs5-zindex; 4 | } 5 | 6 | // Dropdown 7 | .select2-dropdown { 8 | z-index: $s2bs5-zindex; 9 | overflow: hidden; 10 | color: $s2bs5-color; 11 | background-color: $s2bs5-bg; 12 | border-color: $s2bs5-focus-border-color; 13 | @include border-radius($s2bs5-border-radius); 14 | 15 | // Open Below 16 | &.select2-dropdown--below { 17 | border-top: 0 solid transparent; 18 | @include border-top-radius(0); 19 | } 20 | 21 | // Open Above 22 | &.select2-dropdown--above { 23 | border-bottom: 0 solid transparent; 24 | @include border-bottom-radius(0); 25 | } 26 | 27 | // Search box 28 | .select2-search { 29 | padding: $s2bs5-padding-y $s2bs5-padding-x; 30 | 31 | // Search field 32 | .select2-search__field { 33 | display: block; 34 | width: 100%; 35 | padding: $s2bs5-padding-y $s2bs5-padding-x; 36 | font-family: $s2bs5-font-family; 37 | @include font-size($s2bs5-font-size); 38 | font-weight: $s2bs5-font-weight; 39 | line-height: $s2bs5-line-height; 40 | color: $s2bs5-color; 41 | background-color: $s2bs5-bg; 42 | background-clip: padding-box; 43 | border: $s2bs5-border-width solid $s2bs5-border-color; 44 | appearance: none; 45 | 46 | @include border-radius($s2bs5-border-radius, 0); 47 | @include box-shadow($s2bs5-box-shadow); 48 | @include transition($s2bs5-transition); 49 | 50 | &:focus { 51 | border-color: $s2bs5-focus-border-color; 52 | box-shadow: $s2bs5-focus-box-shadow; 53 | } 54 | } 55 | } 56 | 57 | // Items 58 | .select2-results__options { 59 | &:not(.select2-results__options--nested) { 60 | max-height: $s2bs5-options-max-height; 61 | overflow-y: auto; 62 | } 63 | 64 | // Item 65 | .select2-results__option { 66 | padding: $s2bs5-item-padding-y $s2bs5-item-padding-x; 67 | @include font-size($s2bs5-font-size); 68 | font-weight: $s2bs5-font-weight; 69 | line-height: $s2bs5-line-height; 70 | 71 | // No results message 72 | &.select2-results__message { 73 | color: $s2bs5-placeholder-color; 74 | } 75 | 76 | // Highlighted Item 77 | &.select2-results__option--highlighted { 78 | color: color-contrast($s2bs5-item-hover-bg); 79 | background-color: $s2bs5-item-hover-bg; 80 | } 81 | 82 | // Selected Item 83 | &.select2-results__option--selected, 84 | &[aria-selected="true"]:not(.select2-results__option--highlighted) { 85 | color: color-contrast($s2bs5-item-active-bg); 86 | background-color: $s2bs5-item-active-bg; 87 | } 88 | 89 | // Disabled Item 90 | &.select2-results__option--disabled, 91 | &[aria-disabled="true"] { 92 | color: $s2bs5-disabled-color; 93 | } 94 | 95 | // Optgroup 96 | &[role="group"] { 97 | padding: 0; 98 | 99 | // Group Header 100 | .select2-results__group { 101 | padding: $s2bs5-group-padding-y $s2bs5-group-padding-x; 102 | font-weight: $s2bs5-group-font-weight; 103 | line-height: $s2bs5-line-height; 104 | color: $s2bs5-group-color; 105 | } 106 | 107 | // Group Item 108 | .select2-results__options--nested { 109 | .select2-results__option { 110 | padding: $s2bs5-item-padding-y $s2bs5-item-padding-x; 111 | } 112 | } 113 | } 114 | } 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/_include-all.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | 3 | @import "layout"; 4 | @import "dropdown"; 5 | @import "single"; 6 | @import "multiple"; 7 | @import "disabled"; 8 | @import "input-group"; 9 | @import "validation"; 10 | @import "sizing"; 11 | -------------------------------------------------------------------------------- /src/_input-group.scss: -------------------------------------------------------------------------------- 1 | // Duplicated & altered from Bootstrap 5 2 | .input-group { 3 | &:not(.has-validation) { 4 | > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { 5 | &.select2-container--bootstrap-5 { 6 | .select2-selection { 7 | @include border-end-radius(0); 8 | } 9 | } 10 | } 11 | } 12 | 13 | &.has-validation { 14 | > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu) { 15 | &.select2-container--bootstrap-5 { 16 | .select2-selection { 17 | @include border-end-radius(0); 18 | } 19 | } 20 | } 21 | } 22 | 23 | > .input-group-text ~ .select2-container--bootstrap-5, 24 | > .btn ~ .select2-container--bootstrap-5, 25 | > .dropdown-menu ~ .select2-container--bootstrap-5 { 26 | .select2-selection { 27 | @include border-start-radius(0); 28 | } 29 | } 30 | 31 | // Ensure container takes up remaining room 32 | .select2-container--bootstrap-5 { 33 | flex-grow: 1; 34 | .select2-selection { 35 | height: 100%; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/_layout.scss: -------------------------------------------------------------------------------- 1 | // Base layout 2 | .select2-container--bootstrap-5 { 3 | display: block; 4 | 5 | @at-root select + & { 6 | z-index: 1; 7 | } 8 | 9 | *:focus { 10 | outline: 0; 11 | } 12 | 13 | // Input 14 | .select2-selection { 15 | width: 100%; 16 | min-height: $s2bs5-height; 17 | padding: $s2bs5-padding-y $s2bs5-padding-x; 18 | font-family: $s2bs5-font-family; 19 | @include font-size($s2bs5-font-size); 20 | font-weight: $s2bs5-font-weight; 21 | line-height: $s2bs5-line-height; 22 | color: $s2bs5-color; 23 | background-color: $s2bs5-bg; 24 | border: $s2bs5-border-width solid $s2bs5-border-color; 25 | @include border-radius($s2bs5-border-radius, 0); 26 | @include box-shadow($s2bs5-box-shadow); 27 | @include transition($s2bs5-transition); 28 | appearance: none; 29 | } 30 | 31 | // Focused/Open Input 32 | &.select2-container--focus, 33 | &.select2-container--open { 34 | .select2-selection { 35 | border-color: $s2bs5-focus-border-color; 36 | box-shadow: $s2bs5-focus-box-shadow; 37 | } 38 | } 39 | 40 | // Hide bottom border when open and below 41 | &.select2-container--open.select2-container--below .select2-selection { 42 | border-bottom: 0 solid transparent; 43 | @include border-bottom-radius(0); 44 | } 45 | 46 | // Hide top border when open and above 47 | &.select2-container--open.select2-container--above .select2-selection { 48 | border-top: 0 solid transparent; 49 | @include border-top-radius(0); 50 | } 51 | 52 | // Placeholder Width 53 | .select2-search { 54 | width: 100%; 55 | } 56 | 57 | .select2-search--inline { 58 | .select2-search__field { 59 | vertical-align: top; 60 | } 61 | } 62 | 63 | // Clear Button 64 | .select2-selection--single, 65 | .select2-selection--multiple { 66 | .select2-selection__clear { 67 | position: absolute; 68 | top: 50%; 69 | right: $s2bs5-indicator-padding; 70 | width: $s2bs5-clear-width; 71 | height: $s2bs5-clear-height; 72 | padding: $s2bs5-clear-padding-y $s2bs5-clear-padding-x; 73 | overflow: hidden; 74 | text-indent: 100%; 75 | white-space: nowrap; 76 | background: $s2bs5-clear-bg; 77 | transform: translateY(-50%); 78 | 79 | // Change icon on hover 80 | &:hover { 81 | background: $s2bs5-clear-hover-bg; 82 | } 83 | 84 | // Hide children 85 | >span { 86 | display: none; 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/_multiple.scss: -------------------------------------------------------------------------------- 1 | .select2-container--bootstrap-5 { 2 | .select2-selection--multiple { 3 | // List items 4 | .select2-selection__rendered { 5 | display: flex; 6 | flex-direction: row; 7 | flex-wrap: wrap; 8 | padding-left: 0; 9 | margin: 0; 10 | list-style: none; 11 | 12 | // Items 13 | .select2-selection__choice { 14 | display: flex; 15 | flex-direction: row; 16 | align-items: center; 17 | padding: $s2bs5-multi-item-padding-y $s2bs5-multi-item-padding-x; 18 | margin-right: .375rem; 19 | margin-bottom: .375rem; 20 | @include font-size($s2bs5-font-size); 21 | color: $s2bs5-color; 22 | cursor: auto; 23 | border: $s2bs5-border-width solid $s2bs5-border-color; 24 | @include border-radius($s2bs5-border-radius); 25 | 26 | // Removal button 27 | .select2-selection__choice__remove { 28 | width: $s2bs5-clear-width; 29 | height: $s2bs5-clear-height; 30 | padding: $s2bs5-clear-padding-y $s2bs5-clear-padding-x; 31 | margin-right: .25rem; 32 | overflow: hidden; 33 | text-indent: 100%; 34 | white-space: nowrap; 35 | background: $s2bs5-clear-bg; 36 | border: 0; 37 | 38 | &:hover { 39 | background: $s2bs5-clear-hover-bg; 40 | } 41 | 42 | // Remove children 43 | >span { 44 | display: none; 45 | } 46 | } 47 | } 48 | } 49 | 50 | // Input area 51 | .select2-search { 52 | display: block; 53 | width: 100%; 54 | height: $s2bs5-height-inner; 55 | 56 | // Input field 57 | .select2-search__field { 58 | width: 100%; 59 | height: $s2bs5-height-inner; 60 | margin-top: 0; 61 | margin-left: 0; 62 | font-family: $s2bs5-font-family; 63 | line-height: $s2bs5-line-height; 64 | background-color: transparent; 65 | } 66 | } 67 | 68 | // Clear button override 69 | .select2-selection__clear { 70 | right: $s2bs5-padding-x; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/_single.scss: -------------------------------------------------------------------------------- 1 | .select2-container--bootstrap-5 { 2 | .select2-selection--single { 3 | padding: $s2bs5-padding-y $s2bs5-indicator-padding $s2bs5-padding-y $s2bs5-padding-x; 4 | background-image: escape-svg($s2bs5-indicator); 5 | background-repeat: no-repeat; 6 | background-position: $s2bs5-bg-position; 7 | background-size: $s2bs5-bg-size; 8 | 9 | // Rendered view 10 | .select2-selection__rendered { 11 | padding: 0; 12 | font-weight: $s2bs5-font-weight; 13 | line-height: $s2bs5-line-height; 14 | color: $s2bs5-color; 15 | 16 | // Placeholder 17 | .select2-selection__placeholder { 18 | font-weight: $s2bs5-font-weight; 19 | line-height: $s2bs5-line-height; 20 | color: $s2bs5-placeholder-color; 21 | } 22 | 23 | // Disable arrow 24 | .select2-selection__arrow { 25 | display: none; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/_sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin s2bs5-sizing($size-list: $s2bs5-small, $selector: "") { 2 | // Layout 3 | #{$selector}.select2-selection { 4 | min-height: map-get($size-list, height); 5 | padding: map-get($size-list, padding-y) map-get($size-list, padding-x); 6 | @include font-size(map-get($size-list, font-size)); 7 | @include border-radius(map-get($size-list, border-radius), 0); 8 | } 9 | 10 | #{$selector}.select2-selection--single, 11 | #{$selector}.select2-selection--multiple { 12 | .select2-selection__clear { 13 | width: map-get($size-list, clear-width); 14 | height: map-get($size-list, clear-height); 15 | padding: map-get($size-list, clear-padding-y) map-get($size-list, clear-padding-x); 16 | background: map-get($size-list, clear-bg); 17 | 18 | &:hover { 19 | background: map-get($size-list, clear-hover-bg); 20 | } 21 | } 22 | 23 | .select2-search { 24 | &, 25 | .select2-search__field { 26 | height: map-get($size-list, height-inner); 27 | } 28 | } 29 | } 30 | 31 | // Dropdown 32 | #{$selector}.select2-dropdown { 33 | @include border-radius(map-get($size-list, border-radius)); 34 | 35 | // Open Below 36 | &.select2-dropdown--below { 37 | @include border-top-radius(0); 38 | } 39 | 40 | // Open Above 41 | &.select2-dropdown--above { 42 | @include border-bottom-radius(0); 43 | } 44 | 45 | .select2-search { 46 | .select2-search__field { 47 | padding: map-get($size-list, padding-y) map-get($size-list, padding-x); 48 | @include font-size(map-get($size-list, font-size)); 49 | } 50 | } 51 | 52 | .select2-results__options { 53 | .select2-results__option { 54 | padding: map-get($size-list, item-padding-y) map-get($size-list, item-padding-x); 55 | @include font-size(map-get($size-list, font-size)); 56 | 57 | &[role="group"] { 58 | .select2-results__group { 59 | padding: map-get($size-list, group-padding-y) map-get($size-list, group-padding-x); 60 | } 61 | 62 | .select2-results__options--nested { 63 | .select2-results__option { 64 | padding: map-get($size-list, item-padding-y) map-get($size-list, item-padding-x); 65 | } 66 | } 67 | } 68 | } 69 | } 70 | } 71 | 72 | // Single 73 | #{$selector}.select2-selection--single { 74 | padding: map-get($size-list, padding-y) $s2bs5-indicator-padding map-get($size-list, padding-y) map-get($size-list, padding-x); 75 | } 76 | 77 | // Multiple 78 | #{$selector}.select2-selection--multiple { 79 | .select2-selection__rendered { 80 | .select2-selection__choice { 81 | padding: $s2bs5-multi-item-padding-y $s2bs5-multi-item-padding-x; 82 | @include font-size(map-get($size-list, font-size)); 83 | 84 | .select2-selection__choice__remove { 85 | width: map-get($size-list, clear-width); 86 | height: map-get($size-list, clear-height); 87 | padding: map-get($size-list, clear-padding-y) map-get($size-list, clear-padding-x); 88 | background: map-get($size-list, clear-bg); 89 | 90 | &:hover { 91 | background: map-get($size-list, clear-hover-bg); 92 | } 93 | } 94 | } 95 | } 96 | 97 | .select2-selection__clear { 98 | right: map-get($size-list, padding-x); 99 | } 100 | } 101 | } 102 | 103 | // Using options 104 | .select2-container--bootstrap-5 { 105 | // Small 106 | @include s2bs5-sizing($s2bs5-small, ".select2--small"); 107 | 108 | // Large 109 | @include s2bs5-sizing($s2bs5-large, ".select2--large"); 110 | } 111 | 112 | // Using bootstrap classes 113 | // Small 114 | .form-select-sm { 115 | ~ .select2-container--bootstrap-5 { 116 | @include s2bs5-sizing($s2bs5-small); 117 | } 118 | } 119 | 120 | // Large 121 | .form-select-lg { 122 | ~ .select2-container--bootstrap-5 { 123 | @include s2bs5-sizing($s2bs5-large); 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/_validation.scss: -------------------------------------------------------------------------------- 1 | .select2-container--bootstrap-5 { 2 | // Valid 3 | .is-valid + &, 4 | .was-validated select:valid + & { 5 | // Set border color 6 | .select2-selection { 7 | border-color: $s2bs5-valid-border-color; 8 | } 9 | 10 | &.select2-container--focus, 11 | &.select2-container--open { 12 | // Set border color & box shadow 13 | .select2-selection { 14 | border-color: $s2bs5-valid-border-color; 15 | box-shadow: $s2bs5-valid-focus-box-shadow; 16 | } 17 | } 18 | 19 | &.select2-container--open { 20 | // Hide bottom border when open and below 21 | &.select2-container--below .select2-selection { 22 | border-bottom: 0 solid transparent; 23 | } 24 | 25 | // Hide top border when open and above 26 | &.select2-container--above .select2-selection { 27 | border-top: 0 solid transparent; 28 | @include border-top-radius(0); 29 | } 30 | } 31 | } 32 | 33 | // Invalid 34 | .is-invalid + &, 35 | .was-validated select:invalid + & { 36 | // Set border color 37 | .select2-selection { 38 | border-color: $s2bs5-invalid-border-color; 39 | } 40 | 41 | &.select2-container--focus, 42 | &.select2-container--open { 43 | // Set border color & box shadow 44 | .select2-selection { 45 | border-color: $s2bs5-invalid-border-color; 46 | box-shadow: $s2bs5-invalid-focus-box-shadow; 47 | } 48 | } 49 | 50 | &.select2-container--open { 51 | // Hide bottom border when open and below 52 | &.select2-container--below .select2-selection { 53 | border-bottom: 0 solid transparent; 54 | } 55 | 56 | // Hide top border when open and above 57 | &.select2-container--above .select2-selection { 58 | border-top: 0 solid transparent; 59 | @include border-top-radius(0); 60 | } 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/_variables.scss: -------------------------------------------------------------------------------- 1 | // Height 2 | $s2bs5-height: $input-height !default; 3 | $s2bs5-height-inner: $input-line-height * 1rem !default; 4 | 5 | // Z-Index 6 | $s2bs5-zindex: $zindex-modal + 1 !default; 7 | 8 | // Padding 9 | $s2bs5-padding-y: $form-select-padding-y !default; 10 | $s2bs5-padding-x: $form-select-padding-x !default; 11 | 12 | // Font 13 | $s2bs5-font-family: inherit !default; 14 | $s2bs5-font-size: $form-select-font-size !default; 15 | $s2bs5-font-weight: $form-select-font-weight !default; 16 | $s2bs5-line-height: $form-select-line-height !default; 17 | 18 | // Color & background 19 | $s2bs5-color: $form-select-color !default; 20 | $s2bs5-placeholder-color: $input-placeholder-color !default; 21 | $s2bs5-bg: $form-select-bg !default; 22 | $s2bs5-bg-position: $form-select-bg-position !default; 23 | $s2bs5-bg-size: $form-select-bg-size !default; 24 | 25 | // Border & shadow 26 | $s2bs5-border-width: $form-select-border-width !default; 27 | $s2bs5-border-color: $form-select-border-color !default; 28 | $s2bs5-border-radius: $form-select-border-radius !default; 29 | $s2bs5-box-shadow: $form-select-box-shadow !default; 30 | $s2bs5-transition: $input-transition !default; 31 | 32 | // Indicator 33 | $s2bs5-indicator-padding: $form-select-indicator-padding !default; 34 | $s2bs5-indicator: $form-select-indicator !default; 35 | 36 | // Focus 37 | $s2bs5-focus-border-color: $form-select-focus-border-color !default; 38 | $s2bs5-focus-width: $form-select-focus-width !default; 39 | $s2bs5-focus-box-shadow: $form-select-focus-box-shadow !default; 40 | 41 | // Valid 42 | $s2bs5-valid-border-color: $form-feedback-valid-color !default; 43 | $s2bs5-valid-focus-box-shadow: 0 0 0 $s2bs5-focus-width rgba($s2bs5-valid-border-color, $input-btn-focus-color-opacity) !default; 44 | 45 | // Invalid 46 | $s2bs5-invalid-border-color: $form-feedback-invalid-color !default; 47 | $s2bs5-invalid-focus-box-shadow: 0 0 0 $s2bs5-focus-width rgba($s2bs5-invalid-border-color, $input-btn-focus-color-opacity) !default; 48 | 49 | // Disabled 50 | $s2bs5-disabled-color: $text-muted !default; 51 | $s2bs5-disabled-bg: $form-select-disabled-bg !default; 52 | $s2bs5-disabled-border-color: $s2bs5-border-color !default; 53 | 54 | // Items 55 | $s2bs5-item-padding-y: $s2bs5-padding-y !default; 56 | $s2bs5-item-padding-x: $s2bs5-padding-x !default; 57 | $s2bs5-item-active-bg: $primary !default; 58 | $s2bs5-item-hover-bg: $gray-200 !default; 59 | $s2bs5-item-focus-bg: $gray-200 !default; 60 | 61 | // Groups 62 | $s2bs5-group-padding-y: $s2bs5-padding-y !default; 63 | $s2bs5-group-padding-x: $s2bs5-padding-x * .5 !default; 64 | $s2bs5-group-color: $secondary !default; 65 | $s2bs5-group-font-weight: $headings-font-weight !default; 66 | 67 | // Multiple items 68 | $s2bs5-multi-item-padding-y: $badge-padding-y !default; 69 | $s2bs5-multi-item-padding-x: $badge-padding-x !default; 70 | 71 | $s2bs5-options-max-height: 15rem !default; 72 | 73 | // Clear/Remove 74 | $s2bs5-clear-width: .75rem !default; 75 | $s2bs5-clear-height: .75rem !default; 76 | $s2bs5-clear-padding-y: $btn-close-padding-y !default; 77 | $s2bs5-clear-padding-x: $btn-close-padding-x !default; 78 | $s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)}) !default; 79 | $s2bs5-clear-bg: transparent escape-svg($s2bs5-clear-icon) center / $s2bs5-clear-height auto no-repeat !default; 80 | $s2bs5-clear-hover-bg: transparent escape-svg($btn-close-bg) center / $s2bs5-clear-height auto no-repeat !default; 81 | 82 | // Small 83 | $s2bs5-height-sm: $input-height-sm !default; 84 | $s2bs5-height-inner-sm: $input-line-height * 1em !default; 85 | $s2bs5-padding-y-sm: $form-select-padding-y-sm !default; 86 | $s2bs5-padding-x-sm: $form-select-padding-x-sm !default; 87 | $s2bs5-font-size-sm: $form-select-font-size-sm !default; 88 | $s2bs5-border-radius-sm: $form-select-border-radius-sm !default; 89 | $s2bs5-item-padding-y-sm: $s2bs5-padding-y-sm !default; 90 | $s2bs5-item-padding-x-sm: $s2bs5-padding-x-sm !default; 91 | $s2bs5-group-padding-y-sm: $s2bs5-padding-y-sm !default; 92 | $s2bs5-group-padding-x-sm: $s2bs5-padding-x-sm * .5 !default; 93 | $s2bs5-clear-width-sm: .5rem !default; 94 | $s2bs5-clear-height-sm: .5rem !default; 95 | $s2bs5-clear-padding-y-sm: .125rem !default; 96 | $s2bs5-clear-padding-x-sm: .125rem !default; 97 | $s2bs5-clear-bg-sm: transparent escape-svg($s2bs5-clear-icon) center / $s2bs5-clear-height-sm auto no-repeat !default; 98 | $s2bs5-clear-hover-bg-sm: transparent escape-svg($btn-close-bg) center / $s2bs5-clear-height-sm auto no-repeat !default; 99 | 100 | $s2bs5-small: ( 101 | "height": $s2bs5-height-sm, 102 | "height-inner": $s2bs5-height-inner-sm, 103 | "padding-y": $s2bs5-padding-y-sm, 104 | "padding-x": $s2bs5-padding-x-sm, 105 | "font-size": $s2bs5-font-size-sm, 106 | "border-radius": $s2bs5-border-radius-sm, 107 | "item-padding-y": $s2bs5-item-padding-y-sm, 108 | "item-padding-x": $s2bs5-item-padding-x-sm, 109 | "group-padding-y": $s2bs5-group-padding-y-sm, 110 | "group-padding-x": $s2bs5-group-padding-x-sm, 111 | "clear-width": $s2bs5-clear-width-sm, 112 | "clear-height": $s2bs5-clear-height-sm, 113 | "clear-padding-y": $s2bs5-clear-padding-y-sm, 114 | "clear-padding-x": $s2bs5-clear-padding-x-sm, 115 | "clear-bg": $s2bs5-clear-bg-sm, 116 | "clear-hover-bg": $s2bs5-clear-hover-bg-sm, 117 | ) !default; 118 | 119 | // Large 120 | $s2bs5-height-lg: $input-height-lg !default; 121 | $s2bs5-height-inner-lg: $input-line-height * 1em !default; 122 | $s2bs5-padding-y-lg: $form-select-padding-y-lg !default; 123 | $s2bs5-padding-x-lg: $form-select-padding-x-lg !default; 124 | $s2bs5-font-size-lg: $form-select-font-size-lg !default; 125 | $s2bs5-border-radius-lg: $form-select-border-radius-lg !default; 126 | $s2bs5-item-padding-y-lg: $s2bs5-padding-y-lg !default; 127 | $s2bs5-item-padding-x-lg: $s2bs5-padding-x-lg !default; 128 | $s2bs5-group-padding-y-lg: $s2bs5-padding-y-lg !default; 129 | $s2bs5-group-padding-x-lg: $s2bs5-padding-x-lg * .5 !default; 130 | $s2bs5-clear-width-lg: 1rem !default; 131 | $s2bs5-clear-height-lg: 1rem !default; 132 | $s2bs5-clear-padding-y-lg: .5rem !default; 133 | $s2bs5-clear-padding-x-lg: .5rem !default; 134 | $s2bs5-clear-bg-lg: transparent escape-svg($s2bs5-clear-icon) center / $s2bs5-clear-height-lg auto no-repeat !default; 135 | $s2bs5-clear-hover-bg-lg: transparent escape-svg($btn-close-bg) center / $s2bs5-clear-height-lg auto no-repeat !default; 136 | 137 | $s2bs5-large: ( 138 | "height": $s2bs5-height-lg, 139 | "height-inner": $s2bs5-height-inner-lg, 140 | "padding-y": $s2bs5-padding-y-lg, 141 | "padding-x": $s2bs5-padding-x-lg, 142 | "font-size": $s2bs5-font-size-lg, 143 | "border-radius": $s2bs5-border-radius-lg, 144 | "item-padding-y": $s2bs5-item-padding-y-lg, 145 | "item-padding-x": $s2bs5-item-padding-x-lg, 146 | "group-padding-y": $s2bs5-group-padding-y-lg, 147 | "group-padding-x": $s2bs5-group-padding-x-lg, 148 | "clear-width": $s2bs5-clear-width-lg, 149 | "clear-height": $s2bs5-clear-height-lg, 150 | "clear-padding-y": $s2bs5-clear-padding-y-lg, 151 | "clear-padding-x": $s2bs5-clear-padding-x-lg, 152 | "clear-bg": $s2bs5-clear-bg-lg, 153 | "clear-hover-bg": $s2bs5-clear-hover-bg-lg, 154 | ) !default; 155 | -------------------------------------------------------------------------------- /src/select2-bootstrap-5-theme.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Select2 v4 Bootstrap 5 theme v1.3.0 3 | */ 4 | 5 | @import "node_modules/bootstrap/scss/functions"; 6 | @import "node_modules/bootstrap/scss/variables"; 7 | @import "node_modules/bootstrap/scss/mixins"; 8 | 9 | @import "include-all"; 10 | --------------------------------------------------------------------------------