From 52f859ecfeae9c8806ff92f9155b8296a8f21700 Mon Sep 17 00:00:00 2001 From: Hamidreza Sadooghi Date: Sun, 3 Nov 2019 15:40:31 +0330 Subject: [PATCH 1/2] Add RTL support for single select --- .gitignore | 1 + dist/select2-bootstrap4.css | 164 +------------------------------- dist/select2-bootstrap4.min.css | 2 +- docs/index.html | 19 +++- docs/script.js | 11 ++- src/_single.scss | 15 +++ src/layout.scss | 12 +++ 7 files changed, 58 insertions(+), 166 deletions(-) diff --git a/.gitignore b/.gitignore index f530bc8..de40c6a 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ package-lock.json dist/*.js docs/select2-bootstrap4.css +yarn.lock diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css index 80a66ce..433b24a 100644 --- a/dist/select2-bootstrap4.css +++ b/dist/select2-bootstrap4.css @@ -1,163 +1 @@ -.select2-container--bootstrap4 .select2-selection--single { - height: calc(2.25rem + 2px) !important; } - .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder { - color: #757575; - line-height: 2.25rem; } - .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { - position: absolute; - top: 50%; - right: 3px; - width: 20px; } - .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { - top: 60%; - border-color: #343a40 transparent transparent transparent; - border-style: solid; - border-width: 5px 4px 0 4px; - width: 0; - height: 0; - left: 50%; - margin-left: -4px; - margin-top: -2px; - position: absolute; } - .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { - line-height: 2.25rem; } - -.select2-search--dropdown .select2-search__field { - border: 1px solid #ced4da; - border-radius: 0.25rem; } - -.select2-results__message { - color: #6c757d; } - -.select2-container--bootstrap4 .select2-selection--multiple { - min-height: calc(2.25rem + 2px) !important; } - .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered { - -webkit-box-sizing: border-box; - box-sizing: border-box; - list-style: none; - margin: 0; - padding: 0 5px; - width: 100%; } - .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { - color: #343a40; - border: 1px solid #bdc6d0; - border-radius: 0.2rem; - padding: 0; - padding-right: 5px; - cursor: pointer; - float: left; - margin-top: 0.3em; - margin-right: 5px; } - .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove { - color: #bdc6d0; - font-weight: bold; - margin-left: 3px; - margin-right: 1px; - padding-right: 3px; - padding-left: 3px; - float: left; } - .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover { - color: #343a40; } - -.select2-container { - display: block; } - .select2-container *:focus { - outline: 0; } - -.input-group .select2-container--bootstrap4 { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - -.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - -.input-group > .select2-container--bootstrap4:not(:last-child) .select2-selection { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - -.select2-container--bootstrap4 .select2-selection { - background-color: #fff; - border: 1px solid #ced4da; - border-radius: 0.25rem; - -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - width: 100%; } - @media screen and (prefers-reduced-motion: reduce) { - .select2-container--bootstrap4 .select2-selection { - -webkit-transition: none; - transition: none; } } - -.select2-container--bootstrap4.select2-container--focus .select2-selection { - border-color: #80bdff; - -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } - -.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection { - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } - -.select2-container--bootstrap4.select2-container--disabled .select2-selection, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection { - background-color: #e9ecef; - cursor: not-allowed; - border-color: #ced4da; - -webkit-box-shadow: none; - box-shadow: none; } - -.select2-container--bootstrap4.select2-container--disabled .select2-search__field, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field { - background-color: transparent; } - -select.is-invalid ~ .select2-container--bootstrap4 .select2-selection, -form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection { - border-color: #dc3545; } - -select.is-valid ~ .select2-container--bootstrap4 .select2-selection, -form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection { - border-color: #28a745; } - -.select2-container--bootstrap4 .select2-dropdown { - border-color: #ced4da; - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; } - .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above { - border-top: 1px solid #ced4da; - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; } - .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] { - background-color: #e9ecef; } - -.select2-container--bootstrap4 .select2-results__option--highlighted, -.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] { - background-color: #007bff; - color: #f8f9fa; } - -.select2-container--bootstrap4 .select2-results__option[role=group] { - padding: 0; } - -.select2-container--bootstrap4 .select2-results > .select2-results__options { - max-height: 15em; - overflow-y: auto; } - -.select2-container--bootstrap4 .select2-results__group { - padding: 6px; - display: list-item; - color: #6c757d; } - -.select2-container--bootstrap4 .select2-selection__clear { - width: 1.2em; - height: 1.2em; - line-height: 1.15em; - padding-left: 0.3em; - margin-top: 0.5em; - border-radius: 100%; - background-color: #6c757d; - color: #f8f9fa; - float: right; - margin-right: 0.3em; } - .select2-container--bootstrap4 .select2-selection__clear:hover { - background-color: #343a40; } +.select2-container--bootstrap4 .select2-selection--single{height:calc(1.5em + .75rem + 2px) !important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#757575;line-height:calc(1.5em + .75rem)}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;top:50%;right:3px;width:20px}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{top:60%;border-color:#343a40 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;width:0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{line-height:calc(1.5em + .75rem)}.select2-container--bootstrap4[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container--bootstrap4[dir="rtl"] .select2-selection--single .select2-selection__arrow{right:unset;left:3px}.select2-search--dropdown .select2-search__field{border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(1.5em + .75rem + 2px) !important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#343a40;border:1px solid #bdc6d0;border-radius:.2rem;padding:0;padding-right:5px;cursor:pointer;float:left;margin-top:0.3em;margin-right:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#bdc6d0;font-weight:bold;margin-left:3px;margin-right:1px;padding-right:3px;padding-left:3px;float:left}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container{display:block}.select2-container *:focus{outline:0}.input-group .select2-container--bootstrap4{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4:not(:last-child) .select2-selection{border-top-right-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4 .select2-selection{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;-webkit-transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;-webkit-transition:border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;width:100%}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{-webkit-transition:none;transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.25);box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection{background-color:#e9ecef;cursor:not-allowed;border-color:#ced4da;-webkit-box-shadow:none;box-shadow:none}.select2-container--bootstrap4.select2-container--disabled .select2-search__field,.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field{background-color:transparent}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{border-top:1px solid #ced4da;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true]{background-color:#e9ecef}.select2-container--bootstrap4 .select2-dropdown[dir="rtl"]{direction:rtl;text-align:right}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{background-color:#007bff;color:#f8f9fa}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{padding:6px;display:list-item;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{width:1.2em;height:1.2em;line-height:1.15em;padding-left:0.3em;margin-top:0.5em;border-radius:100%;background-color:#6c757d;color:#f8f9fa;float:right;margin-right:0.3em}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#343a40}.select2-container--bootstrap4[dir="rtl"] .selection .select2-selection .select2-selection__rendered .select2-selection__clear{float:left;padding-right:3.8px;padding-left:4.8px} diff --git a/dist/select2-bootstrap4.min.css b/dist/select2-bootstrap4.min.css index b997a4b..1eeb2f5 100644 --- a/dist/select2-bootstrap4.min.css +++ b/dist/select2-bootstrap4.min.css @@ -1 +1 @@ -.select2-container--bootstrap4 .select2-selection--single{height:calc(2.25rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#757575;line-height:2.25rem}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;top:50%;right:3px;width:20px}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{top:60%;border-color:#343a40 transparent transparent;border-style:solid;border-width:5px 4px 0;width:0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{line-height:2.25rem}.select2-search--dropdown .select2-search__field{border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(2.25rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#343a40;border:1px solid #bdc6d0;border-radius:.2rem;padding:0 5px 0 0;cursor:pointer;float:left;margin-top:.3em;margin-right:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#bdc6d0;font-weight:700;margin-left:3px;margin-right:1px;padding-right:3px;padding-left:3px;float:left}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container{display:block}.select2-container :focus{outline:0}.input-group .select2-container--bootstrap4{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.input-group-prepend~.select2-container--bootstrap4 .select2-selection{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4:not(:last-child) .select2-selection{border-top-right-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4 .select2-selection{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;width:100%}@media screen and (prefers-reduced-motion:reduce){.select2-container--bootstrap4 .select2-selection{-webkit-transition:none;transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,.25);box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-selection{background-color:#e9ecef;cursor:not-allowed;border-color:#ced4da;-webkit-box-shadow:none;box-shadow:none}.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field,.select2-container--bootstrap4.select2-container--disabled .select2-search__field{background-color:transparent}form.was-validated select:invalid~.select2-container--bootstrap4 .select2-selection,select.is-invalid~.select2-container--bootstrap4 .select2-selection{border-color:#dc3545}form.was-validated select:valid~.select2-container--bootstrap4 .select2-selection,select.is-valid~.select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{border-top:1px solid #ced4da;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true]{background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{background-color:#007bff;color:#f8f9fa}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{padding:6px;display:list-item;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{width:1.2em;height:1.2em;line-height:1.15em;padding-left:.3em;margin-top:.5em;border-radius:100%;background-color:#6c757d;color:#f8f9fa;float:right;margin-right:.3em}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#343a40} \ No newline at end of file +.select2-container--bootstrap4 .select2-selection--single{height:calc(1.5em + .75rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#757575;line-height:calc(1.5em + .75rem)}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{position:absolute;top:50%;right:3px;width:20px}.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{top:60%;border-color:#343a40 transparent transparent;border-style:solid;border-width:5px 4px 0;width:0;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{line-height:calc(1.5em + .75rem)}.select2-container--bootstrap4[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container--bootstrap4[dir=rtl] .select2-selection--single .select2-selection__arrow{right:unset;left:3px}.select2-search--dropdown .select2-search__field{border:1px solid #ced4da;border-radius:.25rem}.select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--multiple{min-height:calc(1.5em + .75rem + 2px)!important}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{color:#343a40;border:1px solid #bdc6d0;border-radius:.2rem;padding:0 5px 0 0;cursor:pointer;float:left;margin-top:.3em;margin-right:5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{color:#bdc6d0;font-weight:700;margin-left:3px;margin-right:1px;padding-right:3px;padding-left:3px;float:left}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:#343a40}.select2-container{display:block}.select2-container :focus{outline:0}.input-group .select2-container--bootstrap4{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.input-group-prepend~.select2-container--bootstrap4 .select2-selection{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4:not(:last-child) .select2-selection{border-top-right-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4 .select2-selection{background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;width:100%}@media (prefers-reduced-motion:reduce){.select2-container--bootstrap4 .select2-selection{-webkit-transition:none;transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,.25);box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-selection{background-color:#e9ecef;cursor:not-allowed;border-color:#ced4da;-webkit-box-shadow:none;box-shadow:none}.select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field,.select2-container--bootstrap4.select2-container--disabled .select2-search__field{background-color:transparent}form.was-validated select:invalid~.select2-container--bootstrap4 .select2-selection,select.is-invalid~.select2-container--bootstrap4 .select2-selection{border-color:#dc3545}form.was-validated select:valid~.select2-container--bootstrap4 .select2-selection,select.is-valid~.select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{border-top:1px solid #ced4da;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true]{background-color:#e9ecef}.select2-container--bootstrap4 .select2-dropdown[dir=rtl]{direction:rtl;text-align:right}.select2-container--bootstrap4 .select2-results__option--highlighted,.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true]{background-color:#007bff;color:#f8f9fa}.select2-container--bootstrap4 .select2-results__option[role=group]{padding:0}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{padding:6px;display:list-item;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{width:1.2em;height:1.2em;line-height:1.15em;padding-left:.3em;margin-top:.5em;border-radius:100%;background-color:#6c757d;color:#f8f9fa;float:right;margin-right:.3em}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#343a40} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index c8568e8..ce0ff39 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,6 +9,9 @@ + @@ -17,7 +20,7 @@

Example of @ttskch/select2-bootstrap4-theme

-
+
+ + + + + + + +
+
+ diff --git a/docs/script.js b/docs/script.js index c793c7b..a9b3b2a 100644 --- a/docs/script.js +++ b/docs/script.js @@ -1,5 +1,5 @@ $(function () { - $('select').each(function () { + $('#ltr-selects select').each(function () { $(this).select2({ theme: 'bootstrap4', width: 'style', @@ -7,4 +7,13 @@ $(function () { allowClear: Boolean($(this).data('allow-clear')), }); }); + $('#rtl-selects select').each(function () { + $(this).select2({ + theme: 'bootstrap4', + width: 'style', + dir: 'rtl', + placeholder: $(this).attr('placeholder'), + allowClear: Boolean($(this).data('allow-clear')), + }); + }); }); diff --git a/src/_single.scss b/src/_single.scss index 9a88973..52b51d0 100644 --- a/src/_single.scss +++ b/src/_single.scss @@ -37,6 +37,19 @@ line-height: $input-height-inner; } } + + &[dir="rtl"] { + .select2-selection--single { + .select2-selection__rendered { + padding-right: 8px; + padding-left: 20px; + } + .select2-selection__arrow { + right: unset; + left: 3px; + } + } + } } // search box @@ -49,3 +62,5 @@ .select2-results__message { color: $secondary; } + + diff --git a/src/layout.scss b/src/layout.scss index aab4362..4dd0f31 100644 --- a/src/layout.scss +++ b/src/layout.scss @@ -99,6 +99,12 @@ .select2-results__option[aria-selected=true] { background-color: darken($light, 5%); } + + + &[dir="rtl"] { + direction: rtl; + text-align: right; + } } // mouse hovered item @@ -144,3 +150,9 @@ } } } + +.select2-container--bootstrap4[dir="rtl"] .selection .select2-selection .select2-selection__rendered .select2-selection__clear { + float: left; + padding-right: 3.8px; + padding-left: 4.8px; +} \ No newline at end of file From aa2705bcf54f0211d511ecec299eefccdf6a9626 Mon Sep 17 00:00:00 2001 From: Hamidreza Sadooghi Date: Sun, 3 Nov 2019 15:47:41 +0330 Subject: [PATCH 2/2] Update readme.md to add RTL guide. --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index 370d879..5632ee0 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,19 @@ $('select').select2({ }); ``` +### RTL usage + +```js +$('select').select2({ + theme: 'bootstrap4', + dir: "rtl" +}); +``` + +Jus add option ``dir: "rtl"`` + +Single choose has been code in first step. Multi choose RTL support can be added later. + ## Getting involved 1. Fix [src/layout.scss](src/layout.scss), [src/_single.scss](src/_single.scss) or [src/_multiple.scss](src/_multiple.scss)