Merge pull request #583 from OronDF343/patch-1

Fix padding/margin for RTL
orchidjs · Oct 19, 2023 · 492a26f · 492a26f
2 parents a8bd650 + df76748
commit 492a26f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git 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;
+	}
+}
diff --git a/src/plugins/remove_button/plugin.scss b/src/plugins/remove_button/plugin.scss
@@ -1,8 +1,8 @@
 .#{$select-ns}-wrapper.plugin-remove_button{
-	.item{
+
+  .item {
 		display: inline-flex;
 		align-items: center;
-		padding-right: 0 !important;
 	}
 
 	.item .remove {
@@ -33,7 +33,12 @@
 }
 
 .#{$select-ns}-wrapper.plugin-remove_button:not(.rtl){
-	.item .remove {
+
+	.item {
+		padding-right:	0 !important;
+	}
+
+  .item .remove {
 		border-left: 1px solid $select-color-item-border;
 		margin-left: $select-padding-item-x;
 	}
@@ -48,6 +53,11 @@
 }
 
 .#{$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;

diff --git a/src/scss/tom-select.scss b/src/scss/tom-select.scss
@@ -100,8 +100,12 @@ $select-spinner-border-color:					$select-color-border !default;
 	}
 }
 
-.#{$select-ns}-control {
-	padding-right:  max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var(--ts-pr-caret)) ) !important;
+.#{$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() {
@@ -114,14 +118,21 @@ $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;
 				border-style: solid;
 				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 {