diff --git a/build/npm/Plugins.js b/build/npm/Plugins.js
index 7c9713f22..b7cf25070 100644
--- a/build/npm/Plugins.js
+++ b/build/npm/Plugins.js
@@ -182,6 +182,10 @@ const Plugins = [
from: 'node_modules/select2/dist/',
to : 'plugins/select2'
},
+ {
+ from: 'node_modules/@ttskch/select2-bootstrap4-theme/dist/',
+ to : 'plugins/select2-bootstrap4-theme'
+ },
// Sparklines
{
from: 'node_modules/sparklines/source/',
diff --git a/build/scss/plugins/_select2.scss b/build/scss/plugins/_select2.scss
index 41b092da0..4b9a850a9 100644
--- a/build/scss/plugins/_select2.scss
+++ b/build/scss/plugins/_select2.scss
@@ -18,108 +18,111 @@
}
}
-.select2-container--default.select2-container--open {
- border-color: theme-color("primary");
-}
-
-.select2-dropdown {
- border: 1px solid $gray-x-light;
- //border-radius: $input-radius;
-}
-
-.select2-container--default .select2-results__option--highlighted[aria-selected] {
- background-color: theme-color("primary");
- color: white;
-}
-
-.select2-results__option {
- padding: 6px 12px;
- user-select: none;
- -webkit-user-select: none;
-}
-
-.select2-container .select2-selection--single .select2-selection__rendered {
- padding-left: 0;
- padding-right: 0;
- height: auto;
- margin-top: -3px;
-}
-
-.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
- padding-right: 6px;
- padding-left: 20px;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow {
- height: 31px;
- right: 6px;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow b {
- margin-top: 0;
-}
-
-.select2-dropdown,
-.select2-search--inline {
- .select2-search__field {
- border: 1px solid $gray-x-light;
- &:focus {
- outline: none;
- border: 1px solid theme-color("primary");
- }
- }
-}
-
-.select2-container--default .select2-results__option[aria-disabled=true] {
- color: #999;
-}
-
-.select2-container--default .select2-results__option[aria-selected=true] {
- background-color: #ddd;
- &,
- &:hover {
- color: #444;
- }
-}
-
-//Multiple select
.select2-container--default {
- .select2-selection--multiple {
- min-height: $input-height;
+ &.select2-container--open {
+ border-color: theme-color("primary");
+ }
+
+ & .select2-dropdown {
border: 1px solid $gray-x-light;
//border-radius: $input-radius;
- &:focus {
- border-color: theme-color("primary");
- }
+ }
- .select2-selection__rendered li:first-child.select2-search.select2-search--inline {
- width: 100%;
+ & .select2-results__option--highlighted[aria-selected] {
+ background-color: theme-color("primary");
+ color: white;
+ }
- .select2-search__field {
- width: 100% !important;
+ & .select2-results__option {
+ padding: 6px 12px;
+ user-select: none;
+ -webkit-user-select: none;
+ }
+
+ & .select2-selection--single .select2-selection__rendered {
+ padding-left: 0;
+ padding-right: 0;
+ height: auto;
+ margin-top: -3px;
+ }
+
+ &[dir="rtl"] .select2-selection--single .select2-selection__rendered {
+ padding-right: 6px;
+ padding-left: 20px;
+ }
+
+ & .select2-selection--single .select2-selection__arrow {
+ height: 31px;
+ right: 6px;
+ }
+
+ & .select2-selection--single .select2-selection__arrow b {
+ margin-top: 0;
+ }
+
+ .select2-dropdown,
+ .select2-search--inline {
+ .select2-search__field {
+ border: 1px solid $gray-x-light;
+ &:focus {
+ outline: none;
+ border: 1px solid theme-color("primary");
}
}
}
- &.select2-container--focus .select2-selection--multiple {
- border-color: $gray-x-light;
+
+ & .select2-results__option[aria-disabled=true] {
+ color: #999;
}
-}
-.select2-container--default .select2-selection--multiple .select2-selection__choice {
- background-color: theme-color("primary");
- border-color: darken(theme-color("primary"), 5%);
- padding: 0 10px;
- color: $white;
-}
+ & .select2-results__option[aria-selected=true] {
+ background-color: #ddd;
+ &,
+ &:hover {
+ color: #444;
+ }
+ }
-.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
- margin-right: 5px;
- color: rgba(255, 255, 255, 0.7);
- &:hover {
+ //Multiple select
+ & {
+ .select2-selection--multiple {
+ min-height: $input-height;
+ border: 1px solid $gray-x-light;
+ //border-radius: $input-radius;
+ &:focus {
+ border-color: theme-color("primary");
+ }
+
+ .select2-selection__rendered li:first-child.select2-search.select2-search--inline {
+ width: 100%;
+
+ .select2-search__field {
+ width: 100% !important;
+ }
+ }
+ }
+ &.select2-container--focus .select2-selection--multiple {
+ border-color: $gray-x-light;
+ }
+ }
+
+ & .select2-selection--multiple .select2-selection__choice {
+ background-color: theme-color("primary");
+ border-color: darken(theme-color("primary"), 5%);
+ padding: 0 10px;
color: $white;
}
-}
-.select2-container .select2-selection--single .select2-selection__rendered li {
- padding-right: 10px;
+ & .select2-selection--multiple .select2-selection__choice__remove {
+ margin-right: 5px;
+ color: rgba(255, 255, 255, 0.7);
+ &:hover {
+ color: $white;
+ }
+ }
+
+ & .select2-selection--single .select2-selection__rendered li {
+ padding-right: 10px;
+ }
+
}
diff --git a/package-lock.json b/package-lock.json
index 68a938e59..a29310e31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2532,6 +2532,11 @@
"resolved": "https://registry.npmjs.org/@sweetalert2/theme-bootstrap-4/-/theme-bootstrap-4-2.1.0.tgz",
"integrity": "sha512-Ji33Ixo45EjGrGUX0Z+RqsI0X45r3NW464MigYhA9olUy4uOlwfTkumKpeudrY+tMZYDM2OP0LR9ndHBcyArbw=="
},
+ "@ttskch/select2-bootstrap4-theme": {
+ "version": "1.2.3",
+ "resolved": "https://registry.npmjs.org/@ttskch/select2-bootstrap4-theme/-/select2-bootstrap4-theme-1.2.3.tgz",
+ "integrity": "sha512-cVH3yrBBmkNrkqKPvHbt8dzP7NysAQfzJULxXlzkdf7NicoSUWbpjDjDGqMtUIIldDByrf2uC1HKKFRelWunQQ=="
+ },
"@types/estree": {
"version": "0.0.39",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
diff --git a/package.json b/package.json
index c5ed92260..5f596f0d4 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"@fullcalendar/timegrid": "^4.2.0",
"@lgaitan/pace-progress": "^1.0.7",
"@sweetalert2/theme-bootstrap-4": "^2.1.0",
+ "@ttskch/select2-bootstrap4-theme": "^1.2.3",
"bootstrap": "^4.3.1",
"bootstrap-colorpicker": "^3.1.2",
"bootstrap-slider": "^10.6.1",
diff --git a/pages/forms/advanced.html b/pages/forms/advanced.html
index 98f7e916f..62bffb517 100644
--- a/pages/forms/advanced.html
+++ b/pages/forms/advanced.html
@@ -21,6 +21,7 @@
+
@@ -1117,7 +1118,9 @@