tom-select-rails 2.2.1 → 2.3.1

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

@@ -1,19 +1,17 @@
 /**
- * Tom Select bootstrap 4
+ * Tom Select Bootstrap 4
  */
 
-//Import Boostrap 4 functions and variables
-
+// Import Bootstrap 4 functions and variables
 $state-valid: map-get($form-validation-states,'valid') !default;
 $state-invalid: map-get($form-validation-states,'invalid') !default;
-
 $enable-shadows: true !default;
 $select-font-family: inherit !default;
 $select-font-size: inherit !default;
-$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
+$select-line-height: $input-btn-line-height !default; // formerly line-height-computed
 
-$select-color-text: gray("800") !default; //$gray-800
-$select-color-highlight: rgba(255,237,40,0.4) !default;
+$select-color-text: gray("800") !default; // $gray-800
+$select-color-highlight: rgba(255, 237, 40, 40%) !default;
 $select-color-input: $input-bg !default;
 $select-color-input-full: $input-bg !default;
 $select-color-input-error: map-get($state-invalid,'color') !default;
@@ -23,21 +21,19 @@ $select-color-item: #efefef !default;
 $select-color-item-border: $border-color !default;
 $select-color-item-active: $component-active-bg !default;
 $select-color-item-active-text: #fff !default;
-$select-color-item-active-border: rgba(0,0,0,0) !default;
+$select-color-item-active-border: rgba(0, 0, 0, 0%) !default;
 $select-color-optgroup: $dropdown-bg !default;
 $select-color-optgroup-text: $dropdown-header-color !default;
 $select-color-optgroup-border: $dropdown-divider-bg !default;
 $select-color-dropdown: $dropdown-bg !default;
-$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
+$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 80%) !default;
 $select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
 $select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
 $select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
 $select-opacity-disabled: 0.5 !default;
-
 $select-border: 1px solid $input-border-color !default;
 $select-border-radius: $input-border-radius !default;
-
-$select-width-item-border: 0px !default;
+$select-width-item-border: 0 !default;
 $select-padding-x: $input-btn-padding-x !default;
 $select-padding-y: $input-btn-padding-y !default;
 $select-padding-dropdown-item-x: $input-btn-padding-x !default;
@@ -46,17 +42,15 @@ $select-padding-item-x: 5px !default;
 $select-padding-item-y: 1px !default;
 $select-margin-item-x: 3px !default;
 $select-margin-item-y: 3px !default;
-
 $select-arrow-size: 5px !default;
 $select-arrow-color: $select-color-text !default;
 $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 
-
 @import "tom-select";
-@include ts-caret();
+@include ts-caret;
 
 .#{$select-ns}-wrapper.form-control,
-.#{$select-ns}-wrapper.form-select{
+.#{$select-ns}-wrapper.form-select {
 	padding:0 !important;
 }
 
@@ -66,9 +60,9 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	padding: 0;
 	z-index: $zindex-dropdown;
 	background: $select-color-dropdown;
-	border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
+	border: 1px solid $dropdown-border-color; // $dropdown-fallback-border
 	border-radius: $border-radius;
-	box-shadow: 0 6px 12px rgba(0,0,0,.175);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 17.5%);
 }
 
 .#{$select-ns}-dropdown {
@@ -76,10 +70,12 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 		font-size: $font-size-sm;
 		line-height: $line-height-base;
 	}
-	.optgroup:first-child:before {
+
+	.optgroup:first-child::before {
 		display: none;
 	}
-	.optgroup:before {
+
+	.optgroup::before {
 		content: ' ';
 		display: block;
 		height: 0;
@@ -103,6 +99,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	min-height: $input-height;
 	@include box-shadow($input-box-shadow);
 	@include transition($input-transition);
+
 	display:flex;
 	align-items: center;
 
@@ -127,9 +124,8 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	}
 }
 
-.is-valid .#{$select-ns}-control{
+.is-valid .#{$select-ns}-control {
 	$_color: map-get($state-valid,'color');
-	//$_icon: map-get($state-valid,'icon');
 
 	border-color: $_color;
 
@@ -140,41 +136,41 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 }
 
 .#{$select-ns}-wrapper {
-
 	.input-group-sm > &,
-	&.form-control-sm{
+	&.form-control-sm {
 
-		.#{$select-ns}-control{
+		.#{$select-ns}-control {
 			min-height: $input-height-sm;
 			padding: 0 .75rem;
-			//padding: $input-padding-y-sm $input-padding-x-sm;
+
+			// padding: $input-padding-y-sm $input-padding-x-sm;
 			@include border-radius($input-border-radius-sm);
 			@include font-size($input-font-size-sm);
 		}
 
-		&.has-items .#{$select-ns}-control{
+		&.has-items .#{$select-ns}-control {
 			min-height: $input-height-sm !important;
 			font-size: $input-font-size-sm;
 			padding-bottom: 0;
 		}
 	}
 
-
 	.input-group-sm > &.multi.has-items,
-	&.form-control-sm.multi.has-items{
-		.#{$select-ns}-control{
+	&.form-control-sm.multi.has-items {
+		.#{$select-ns}-control {
 			// padding-top = ($input-height-sm - border-width - item-height) / 2;
 			// item-height = ($select-line-height * $input-font-size-sm) + ($select-padding-item-y * 2)
 			$border-and-padding: add($input-border-width,$select-padding-item-y) * 2;
 			$ts-select-padding-sm: calc( (#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
+
 			padding-top: $ts-select-padding-sm !important;
 		}
 	}
 
-
 	&.multi {
 		&.has-items .#{$select-ns}-control {
 			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
+
 			--ts-pr-min: calc(#{$select-padding-x} - #{$select-padding-item-x});
 		}
 		.#{$select-ns}-control > div {
@@ -183,8 +179,8 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	}
 
 	.input-group-lg > & >,
-	&.form-control-lg{
-	.#{$select-ns}-control{
+	&.form-control-lg {
+	.#{$select-ns}-control {
 			min-height: $input-height-lg;
 			@include border-radius($input-border-radius-lg);
 			@include font-size($input-font-size-lg);
@@ -197,22 +193,20 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	height: auto;
 	border: none;
 	background: none;
-	//box-shadow: none;
 	border-radius: 0;
 }
 
-.input-group{
-
-	& > .#{$select-ns}-wrapper{
+.input-group {
+	& > .#{$select-ns}-wrapper {
 		flex-grow: 1;
 	}
 
-	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control{
+	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control {
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 
-	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control{
+	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control {
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}

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

@@ -1,43 +1,37 @@
 /**
- * Tom Select bootstrap 5
+ * Tom Select Bootstrap 5
  */
 
-//Import Boostrap 5 functions and variables
+// Import Bootstrap 5 functions and variables
 $state-valid: map-get($form-validation-states,'valid') !default;
 $state-invalid: map-get($form-validation-states,'invalid') !default;
-
-
 $enable-shadows: true !default;
 $select-font-family: inherit !default;
 $select-font-size: inherit !default;
-$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
+$select-line-height: $input-btn-line-height !default; // formerly line-height-computed
 
 $select-color-text: $gray-800 !default;
-$select-color-highlight: rgba(255,237,40,0.4) !default;
+$select-color-highlight: rgba(255, 237, 40, 40%) !default;
 $select-color-input: $input-bg !default;
 $select-color-input-full: $input-bg !default;
-
-
 $select-color-disabled: $input-disabled-bg !default;
 $select-color-item: #efefef !default;
 $select-color-item-border: $border-color !default;
 $select-color-item-active: $component-active-bg !default;
 $select-color-item-active-text: #fff !default;
-$select-color-item-active-border: rgba(0,0,0,0) !default;
+$select-color-item-active-border: rgba(0, 0, 0, 0%) !default;
 $select-color-optgroup: $dropdown-bg !default;
 $select-color-optgroup-text: $dropdown-header-color !default;
 $select-color-optgroup-border: $dropdown-divider-bg !default;
 $select-color-dropdown: $dropdown-bg !default;
-$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
+$select-color-dropdown-border-top: color-mix($input-border-color, $input-bg, 80%) !default;
 $select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
 $select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
 $select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
 $select-opacity-disabled: 0.5 !default;
-
 $select-border: 1px solid $input-border-color !default;
 $select-border-radius: $input-border-radius !default;
-
-$select-width-item-border: 0px !default;
+$select-width-item-border: 0 !default;
 $select-padding-x: $input-padding-x !default;
 $select-padding-y: $input-padding-y !default;
 $select-padding-dropdown-item-x: $input-btn-padding-x !default;
@@ -46,69 +40,55 @@ $select-padding-item-x: 5px !default;
 $select-padding-item-y: 1px !default;
 $select-margin-item-x: 3px !default;
 $select-margin-item-y: 3px !default;
-
 $select-arrow-size: 5px !default;
 $select-arrow-color: $select-color-text !default;
 $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 
-
 @import "tom-select";
 
-
 @mixin ts-form-validation-state-selector($state) {
-
 	$state-map: map-get($form-validation-states,$state);
 
 	.#{$select-ns}-wrapper.is-#{$state},
 	.was-validated .#{$state},
-	.was-validated :#{$state} + .#{$select-ns}-wrapper{
-
+	.was-validated :#{$state} + .#{$select-ns}-wrapper {
 		$color: map-get($state-map,'color');
 		$icon: map-get($state-map,'icon');
 
 		border-color: $color;
 
-		&:not(.single){
+		&:not(.single) {
 			background-image: escape-svg($icon);
 			background-position: right $input-height-inner-quarter center;
 			background-size: $input-height-inner-half $input-height-inner-half;
 			background-repeat: no-repeat;
 		}
 
-		&.single{
+		&.single {
 			background-image: escape-svg($form-select-indicator), escape-svg($icon);
 			background-position: $form-select-bg-position, $form-select-feedback-icon-position;
 			background-size: $form-select-bg-size, $form-select-feedback-icon-size;
 			background-repeat: no-repeat;
 		}
 
-		&.focus .#{$select-ns}-control{
+		&.focus .#{$select-ns}-control {
 			border-color: $color;
-	        box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity);
+			box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity);
 		}
-
 	}
 }
 
 
-.#{$select-ns}-wrapper.form-control,
-.#{$select-ns}-wrapper.form-select{
-	padding:0 !important;
-	height: auto;
-	box-shadow: none;
-	display: flex;
-}
-
 .#{$select-ns}-dropdown,
 .#{$select-ns}-dropdown.form-control,
-.#{$select-ns}-dropdown.form-select{
+.#{$select-ns}-dropdown.form-select {
 	height: auto;
 	padding: 0;
 	z-index: $zindex-dropdown;
 	background: $select-color-dropdown;
-	border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
+	border: 1px solid $dropdown-border-color; // $dropdown-fallback-border
 	border-radius: $border-radius;
-	box-shadow: 0 6px 12px rgba(0,0,0,.175);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 17.5%);
 }
 
 .#{$select-ns}-dropdown {
@@ -116,10 +96,12 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 		font-size: $font-size-sm;
 		line-height: $line-height-base;
 	}
-	.optgroup:first-child:before {
+
+	.optgroup:first-child::before {
 		display: none;
 	}
-	.optgroup:before {
+
+	.optgroup::before {
 		content: ' ';
 		display:	 block;
 		height: 0;
@@ -142,14 +124,11 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 .#{$select-ns}-control {
 	@include box-shadow($input-box-shadow);
 	@include transition($input-transition);
+
 	display:flex;
 	align-items: center;
 
-	&.dropdown	-active {
-		border-radius: $select-border-radius;
-	}
-
-	.focus &{
+	.focus & {
 		border-color: $input-focus-border-color;
 		outline: 0;
 		@if $enable-shadows {
@@ -159,55 +138,52 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 		}
 	}
 
-	.item{
+	.item {
 		display:	flex;
 		align-items: center;
 	}
 }
 
-
 @include ts-form-validation-state-selector('invalid');
 @include ts-form-validation-state-selector('valid');
 
-
 .#{$select-ns}-wrapper {
 	min-height: $input-height;
 	display:flex;
-
+	
 	.input-group-sm > &,
 	&.form-select-sm,
-	&.form-control-sm{
+	&.form-control-sm {
 		min-height: $input-height-sm;
 
-		.#{$select-ns}-control{
-				//padding: $input-padding-y-sm $input-padding-x-sm;
+		.#{$select-ns}-control {
 			@include border-radius($input-border-radius-sm);
 			@include font-size($input-font-size-sm);
 		}
 
-		&.has-items .#{$select-ns}-control{
+		&.has-items .#{$select-ns}-control {
 			font-size: $input-font-size-sm;
 			padding-bottom: 0;
 		}
 	}
 
-
 	.input-group-sm > &.multi.has-items,
 	&.form-select-sm.multi.has-items,
-	&.form-control-sm.multi.has-items{
-		.#{$select-ns}-control{
+	&.form-control-sm.multi.has-items {
+		.#{$select-ns}-control {
 			// padding-top = ($input-height-sm - border-width - item-height) / 2;
 			// item-height = ($select-line-height * $input-font-size-sm) + ($select-padding-item-y * 2)
-			$border-and-padding: add($input-border-width,$select-padding-item-y) * 2;
-			$ts-select-padding-sm: calc( (#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
+			$border-and-padding: calc(($input-border-width + $select-padding-item-y) * 2);
+			$ts-select-padding-sm: calc((#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
+
 			padding-top: $ts-select-padding-sm !important;
 		}
 	}
 
-
 	&.multi {
 		&.has-items .#{$select-ns}-control {
 			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
+
 			--ts-pr-min: calc(#{$select-padding-x} - #{$select-padding-item-x});
 		}
 		.#{$select-ns}-control > div {
@@ -217,26 +193,22 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 
 	.input-group-lg > &,
 	&.form-control-lg,
-	&.form-select-lg{
+	&.form-select-lg {
 		min-height: $input-height-lg;
 		.#{$select-ns}-control{
 			@include border-radius($input-border-radius-lg);
 			@include font-size($input-font-size-lg);
 		}
 	}
-}
-
 
-.#{$select-ns}-wrapper{
-
-	&:not(.form-control):not(.form-select){
+	&:not(.form-control, .form-select) {
 		padding: 0;
 		border: none;
 		height: auto;
 		box-shadow: none;
 		background: none;
 
-		&.single .#{$select-ns}-control{
+		&.single .#{$select-ns}-control {
 			background-image: escape-svg($form-select-indicator);
 			background-repeat: no-repeat;
 			background-position: $form-select-bg-position;
@@ -245,39 +217,41 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	}
 
 	&.form-select,
-	&.single{
+	&.single {
 		--ts-pr-caret: #{$form-select-indicator-padding};
 	}
 
-}
-
-.#{$select-ns}-wrapper.form-control,
-.#{$select-ns}-wrapper.form-select{
+	&.form-control, 
+	&.form-select {
+		padding:0 !important;
+		height: auto;
+		box-shadow: none;
+		display: flex;
 
-	.#{$select-ns}-control,
-	&.single.input-active .#{$select-ns}-control{
-		border:		none !important;
-	}
+		.#{$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
+		&:not(.disabled) .#{$select-ns}-control,
+		&:not(.disabled).single.input-active .#{$select-ns}-control {
+			background: transparent !important; // let the background of .form-select show through
+		}
 	}
-
 }
 
 .input-group{
-
-	& > .#{$select-ns}-wrapper{
+	& > .#{$select-ns}-wrapper {
 		flex-grow: 1;
+		width: 1%;
 	}
 
-	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control{
+	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control {
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 
-	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control{
+	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control {
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}

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

@@ -1,38 +1,37 @@
-
-
 $select-color-item:					#1da7ee;
-$select-color-item-text:				#fff;
+$select-color-item-text:			#fff;
 $select-color-item-active-text:		#fff;
 $select-color-item-border:			#0073bb;
 $select-color-item-active:			#92c836;
 $select-color-item-active-border:	#00578d;
 $select-width-item-border:			1px;
-
-$select-shadow-input:				inset 0 1px 1px rgba(0,0,0,0.1) !default;
-$select-shadow-input-focus:			inset 0 1px 2px rgba(0,0,0,0.15) !default;
-
+$select-shadow-input:				inset 0 1px 1px rgba(0, 0, 0, 10%) !default;
+$select-shadow-input-focus:			inset 0 1px 2px rgba(0, 0, 0, 15%) !default;
 
 @import "tom-select";
-@include ts-caret();
+@include ts-caret;
 
 .#{$select-ns}-wrapper {
 	display:flex;
 	min-height:$select-line-height + ($select-padding-y*2) + ($select-border-width *2);
 
 	&.multi {
-
 		&.has-items .#{$select-ns}-control {
 			$padding-x: $select-padding-x - 3px;
+
 			padding-left: $padding-x;
-			--ts-pr-min:$padding-x;
+
+			--ts-pr-min: $padding-x;
 		}
 
 		.#{$select-ns}-control {
 			[data-value] {
-				text-shadow: 0 1px 0 rgba(0,51,83,0.3);
+				text-shadow: 0 1px 0 rgba(0, 51, 83, 30%);
 				border-radius: 3px;
 				@include selectize-vertical-gradient(#1da7ee, #178ee9);
-				box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
+
+				box-shadow: 0 1px 0 rgba(0, 0, 0, 20%),inset 0 1px rgba(255, 255, 255, 3%);
+
 				&.active {
 					@include selectize-vertical-gradient(#008fd8, #0075cf);
 				}
@@ -48,15 +47,16 @@ $select-shadow-input-focus:			inset 0 1px 2px rgba(0,0,0,0.15) !default;
 			&, .remove {
 				border-color: #e6e6e6;
 			}
+
 			.remove {
 				background: none;
 			}
 		}
-
 	}
+
 	&.single {
 		.#{$select-ns}-control {
-			box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
+			box-shadow: 0 1px 0 rgba(0, 0, 0, 5%), inset 0 1px 0 rgba(255, 255, 255, 80%);
 			@include selectize-vertical-gradient(#fefefe, #f2f2f2);
 		}
 	}
@@ -78,8 +78,10 @@ $select-shadow-input-focus:			inset 0 1px 2px rgba(0,0,0,0.15) !default;
 		font-weight: bold;
 		font-size: 0.85em;
 	}
+
 	.optgroup {
 		border-top: 1px solid $select-color-dropdown-border-top;
+
 		&:first-child {
 			border-top: 0 none;
 		}