diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 335b76cd..1787f5c1 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -2,7 +2,7 @@ @import "bootstrap-markdown/css/bootstrap-markdown.min"; @import "font-awesome"; @import "select2/dist/css/select2"; -@import "select2-bootstrap-theme/dist/select2-bootstrap.min"; +@import "select2-theme-bootstrap4/dist/select2-bootstrap"; @import "dragula-with-animation/dist/dragula"; $footer-height: 60px; @@ -111,3 +111,32 @@ textarea.post-content { .d-none, .d-block { transition: all 3s; } + +/* Select2 Bootstrap4 Validation */ + +.was-validated { + .form-control { + &:invalid { + ~ .select2-container--bootstrap { + border: 1px solid #dc3545; + border-radius: 0.25rem; + + .select2-dropdown { + border: 1px solid #dc3545; + border-radius: 0.25rem; + } + } + } + &:valid { + ~ .select2-container--bootstrap { + border: 1px solid #28a745; + border-radius: 0.25rem; + + .select2-dropdown { + border: 1px solid #28a745; + border-radius: 0.25rem; + } + } + } + } +} diff --git a/package.json b/package.json index 6de28d74..fb021188 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "popper.js": "^1.12.9", "select2": "4.0.5", "select2-bootstrap-theme": "https://github.com/angel-vladov/select2-bootstrap-theme", + "select2-theme-bootstrap4": "^0.2.0-beta.2", "table-dragger": "^1.0.2" } } diff --git a/yarn.lock b/yarn.lock index 93ef77d3..694bf3f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -137,6 +137,10 @@ rx@^4.1.0: version "0.1.0-beta.10" resolved "https://github.com/angel-vladov/select2-bootstrap-theme#4fb604838e79150161fc636dbeb3b3022c034cda" +select2-theme-bootstrap4@^0.2.0-beta.2: + version "0.2.0-beta.2" + resolved "https://registry.yarnpkg.com/select2-theme-bootstrap4/-/select2-theme-bootstrap4-0.2.0-beta.2.tgz#4295be07585939d6094b37ce65168d77be99c24b" + select2@4.0.5: version "4.0.5" resolved "https://registry.yarnpkg.com/select2/-/select2-4.0.5.tgz#7aac50692561985b34d3b82ec55e226f8960d40a"