tom-select-rails 0.2.0 → 2.2.0

data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/clear_button.scss

@@ -1,14 +1,14 @@
 
 .plugin-clear_button{
 
-	.#{$select-ns}-control{
-		padding-right: calc( 1em + (3 * #{$select-padding-item-x}) ) !important;
-	}
+	--ts-pr-clear-button: 1em;
+
 
 	.clear-button{
 		opacity:		0;
 		position:		absolute;
-		top:			$select-padding-y;
+		top:			50%;
+		transform:		translateY(-50%);
 		right:			calc(#{$select-padding-x} - #{$select-padding-item-x});
 		margin-right:	0 !important;
 		background:		transparent !important;
@@ -16,8 +16,15 @@
 		cursor:			pointer;
 	}
 
+	&.form-select .clear-button,
 	&.single .clear-button{
-		right:			calc(#{$select-padding-x} - #{$select-padding-item-x} +  2rem);
+
+		@if variable-exists(select-padding-dropdown-item-x) {
+			right:		max( var(--ts-pr-caret), #{$select-padding-dropdown-item-x});
+		}
+		@else{
+			right:		max( var(--ts-pr-caret), calc(#{$select-padding-x} - #{$select-padding-item-x}) );
+		}
 	}
 
 	&.focus.has-items .clear-button,

data/vendor/assets/stylesheets/tom-select-rails/scss/plugins/remove_button.scss

@@ -12,27 +12,19 @@
 		vertical-align:		middle;
 		display:			inline-block;
 		padding:			0 $select-padding-item-x;
-		border-left:		1px solid $select-color-item-border;
 		border-radius:		0 2px 2px 0;
 		box-sizing:			border-box;
-		margin-left:		$select-padding-item-x;
 	}
 
 	.item .remove:hover {
 		background: rgba(0,0,0,0.05);
 	}
 
-	.item.active .remove {
-		border-left-color: $select-color-item-active-border;
-	}
 
 	&.disabled .item .remove:hover {
 		background: none;
 	}
 
-	&.disabled .item .remove {
-		border-left-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
-	}
 
 	.remove-single {
 		position: absolute;
@@ -42,3 +34,37 @@
 	}
 
 }
+
+.#{$select-ns}-wrapper.plugin-remove_button:not(.rtl){
+
+	.item .remove {
+		border-left:		1px solid $select-color-item-border;
+		margin-left:		$select-padding-item-x;
+	}
+
+	.item.active .remove {
+		border-left-color: $select-color-item-active-border;
+	}
+
+	&.disabled .item .remove {
+		border-left-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+	}
+
+}
+
+.#{$select-ns}-wrapper.plugin-remove_button.rtl {
+
+	.item .remove {
+		border-right: 1px solid $select-color-item-border;
+		margin-right: $select-padding-item-x;
+	}
+
+	.item.active .remove {
+		border-right-color: $select-color-item-active-border;
+	}
+
+	&.disabled .item .remove {
+		border-right-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+	}
+
+}

data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.bootstrap4.scss

@@ -175,7 +175,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	&.multi {
 		&.has-items .#{$select-ns}-control {
 			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
-			padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+			--ts-pr-min: calc(#{$select-padding-x} - #{$select-padding-item-x});
 		}
 		.#{$select-ns}-control > div {
 			border-radius: calc(#{$select-border-radius} - 1px);

data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.bootstrap5.scss

@@ -180,7 +180,6 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 		min-height: $input-height-sm;
 
 		.#{$select-ns}-control{
-			padding: 0 .75rem;
 				//padding: $input-padding-y-sm $input-padding-x-sm;
 			@include border-radius($input-border-radius-sm);
 			@include font-size($input-font-size-sm);
@@ -209,7 +208,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	&.multi {
 		&.has-items .#{$select-ns}-control {
 			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
-			padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+			--ts-pr-min: calc(#{$select-padding-x} - #{$select-padding-item-x});
 		}
 		.#{$select-ns}-control > div {
 			border-radius: calc(#{$select-border-radius} - 1px);
@@ -228,19 +227,26 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 }
 
 
-.#{$select-ns}-wrapper:not(.form-control):not(.form-select){
-	padding: 0;
+.#{$select-ns}-wrapper{
+
+	&:not(.form-control):not(.form-select){
+		padding: 0;
 		border: none;
 		height: auto;
 		box-shadow: none;
 		background: none;
 
-	&.single .#{$select-ns}-control{
-		background-image: escape-svg($form-select-indicator);
-		background-repeat: no-repeat;
-		background-position: $form-select-bg-position;
-		background-size: $form-select-bg-size;
-		padding-right: 2rem;
+		&.single .#{$select-ns}-control{
+			background-image: escape-svg($form-select-indicator);
+			background-repeat: no-repeat;
+			background-position: $form-select-bg-position;
+			background-size: $form-select-bg-size;
+		}
+	}
+
+	&.form-select,
+	&.single{
+		--ts-pr-caret: #{$form-select-indicator-padding};
 	}
 
 }
@@ -251,6 +257,10 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	.#{$select-ns}-control,
 	&.single.input-active .#{$select-ns}-control{
 		border:		none !important;
+	}
+
+	&:not(.disabled) .#{$select-ns}-control,
+	&:not(.disabled).single.input-active .#{$select-ns}-control{
 		background: transparent !important; // let the background of .form-select show through
 	}
 

data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.default.scss

@@ -24,7 +24,7 @@ $select-shadow-input-focus:			inset 0 1px 2px rgba(0,0,0,0.15) !default;
 		&.has-items .#{$select-ns}-control {
 			$padding-x: $select-padding-x - 3px;
 			padding-left: $padding-x;
-			padding-right: $padding-x;
+			--ts-pr-min:$padding-x;
 		}
 
 		.#{$select-ns}-control {

data/vendor/assets/stylesheets/tom-select-rails/scss/tom-select.scss

@@ -1,5 +1,5 @@
 /**
- * tom-select.css (v2.1.0)
+ * tom-select.css (v2.2.0)
  * Copyright (c) contributors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -77,6 +77,12 @@ $select-spinner-size:							30px !default;
 $select-spinner-border-size:					5px !default;
 $select-spinner-border-color:					$select-color-border !default;
 
+:root{
+	--ts-pr-clear-button:						0;
+	--ts-pr-caret:								0;
+	--ts-pr-min:								.75rem;
+}
+
 @mixin selectize-vertical-gradient($color-top, $color-bottom) {
     background-color: mix($color-top, $color-bottom, 60%);
     background-image: linear-gradient(to bottom, $color-top, $color-bottom);
@@ -92,13 +98,16 @@ $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;
+}
 
 @mixin ts-caret(){
 
 	.#{$select-ns}-wrapper.single{
 
 		.#{$select-ns}-control {
-			padding-right: 2rem;
+			--ts-pr-caret: 2rem;
 
 			&:after {
 				content: ' ';

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tom-select-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 2.2.0
 platform: ruby
 authors:
 - Tyson Gach
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-07-12 00:00:00.000000000 Z
+date: 2022-11-10 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: tyson@tysongach.com
@@ -188,7 +188,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.15
+rubygems_version: 3.1.6
 signing_key: 
 specification_version: 4
 summary: Integrate Tom Select with the asset pipeline in Rails.