From 472ebd0b19afe780a66cf0b6a486e91fe4b50a97 Mon Sep 17 00:00:00 2001 From: Oron Date: Tue, 18 Apr 2023 11:31:18 +0300 Subject: [PATCH 1/3] Fix remove_button padding for RTL Fixed incorrect margin for remove button when control is displayed in RTL layout --- src/plugins/remove_button/plugin.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/plugins/remove_button/plugin.scss b/src/plugins/remove_button/plugin.scss index faa46a2f..391d22cc 100644 --- a/src/plugins/remove_button/plugin.scss +++ b/src/plugins/remove_button/plugin.scss @@ -1,9 +1,8 @@ .#{$select-ns}-wrapper.plugin-remove_button{ - .item{ + .item { display: inline-flex; align-items: center; - padding-right: 0 !important; } .item .remove { @@ -37,6 +36,10 @@ .#{$select-ns}-wrapper.plugin-remove_button:not(.rtl){ + .item { + padding-right: 0 !important; + } + .item .remove { border-left: 1px solid $select-color-item-border; margin-left: $select-padding-item-x; @@ -54,6 +57,10 @@ .#{$select-ns}-wrapper.plugin-remove_button.rtl { + .item { + padding-left: 0 !important; + } + .item .remove { border-right: 1px solid $select-color-item-border; margin-right: $select-padding-item-x; From 097cdd4bba610b63a132ecf05b16ea8af2522753 Mon Sep 17 00:00:00 2001 From: Oron Feinerman Date: Tue, 18 Apr 2023 12:22:35 +0300 Subject: [PATCH 2/3] Update plugin.scss Fix RTL margin for checkbox_options --- src/plugins/checkbox_options/plugin.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/plugins/checkbox_options/plugin.scss b/src/plugins/checkbox_options/plugin.scss index 71f67e2d..2e058541 100644 --- a/src/plugins/checkbox_options/plugin.scss +++ b/src/plugins/checkbox_options/plugin.scss @@ -1,5 +1,11 @@ -.plugin-checkbox_options { - .option input{ +.plugin-checkbox_options:not(.rtl) { + .option input { margin-right: 0.5rem; } } + +.plugin-checkbox_options.rtl { + .option input { + margin-left: 0.5rem; + } +} From 9171f7dcba27cc676b1f3e3468db9e6714b681dc Mon Sep 17 00:00:00 2001 From: Oron Feinerman Date: Sun, 23 Apr 2023 19:14:12 +0300 Subject: [PATCH 3/3] Fix padding of main input Also fix single select arrow --- src/scss/tom-select.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/scss/tom-select.scss b/src/scss/tom-select.scss index a3e157c2..e0b05db6 100644 --- a/src/scss/tom-select.scss +++ b/src/scss/tom-select.scss @@ -98,10 +98,14 @@ $select-spinner-border-color: $select-color-border !default; } } -.#{$select-ns}-control { +.#{$select-ns}-control:not(.rtl) { padding-right: Max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var(--ts-pr-caret)) ) !important; } +.#{$select-ns}-control.rtl { + padding-left: Max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var(--ts-pr-caret)) ) !important; +} + @mixin ts-caret(){ .#{$select-ns}-wrapper.single{ @@ -114,7 +118,6 @@ $select-spinner-border-color: $select-color-border !default; display: block; position: absolute; top: 50%; - right: $select-arrow-offset; margin-top: round(-0.5 * $select-arrow-size); width: 0; height: 0; @@ -122,6 +125,14 @@ $select-spinner-border-color: $select-color-border !default; border-width: $select-arrow-size $select-arrow-size 0 $select-arrow-size; border-color: $select-arrow-color transparent transparent transparent; } + + &:not(.rtl):after { + right: $select-arrow-offset; + } + + &.rtl:after { + left: $select-arrow-offset; + } } &.dropdown-active .#{$select-ns}-control::after {