From 0f76ec947395e688d0f64957e13a12467929c577 Mon Sep 17 00:00:00 2001
From: Jacob Rief <jacob.rief@gmail.com>
Date: Thu, 20 Jul 2023 14:14:55 +0200
Subject: [PATCH] fix #82 colors for Selectize widget

---
 client/django-formset/DjangoSelectize.scss | 11 +++++------
 client/django-formset/DjangoSelectize.ts   |  6 +++++-
 client/django-formset/_colors.scss         |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/django-formset/DjangoSelectize.scss b/client/django-formset/DjangoSelectize.scss
index 4a8193d2..78597afd 100644
--- a/client/django-formset/DjangoSelectize.scss
+++ b/client/django-formset/DjangoSelectize.scss
@@ -64,10 +64,6 @@
 						color: inherit;
 					}
 				}
-
-				&.active {
-					background-color: $active-items-background-color;
-				}
 			}
 		}
 		&.full .ts-control > input {
@@ -122,8 +118,11 @@
 			cursor: pointer;
 			overflow: hidden;
 
-			&:hover {
-				background-color: $select-color-hover;
+			&[aria-selected="true"] {
+				background-color: $active-items-background-color;
+			}
+			&.selected {
+				background-color: $selected-items-background-color;
 			}
 			.highlight {
 				background: $select-color-highlight;
diff --git a/client/django-formset/DjangoSelectize.ts b/client/django-formset/DjangoSelectize.ts
index ad273f25..1569e7a1 100644
--- a/client/django-formset/DjangoSelectize.ts
+++ b/client/django-formset/DjangoSelectize.ts
@@ -202,7 +202,7 @@ class DjangoSelectize extends IncompleteSelect {
 					break;
 				case '.ts-wrapper .ts-dropdown':
 					extraStyles = StyleHelpers.extractStyles(tomInput, [
-						'border-right', 'border-bottom', 'border-left', 'color', 'padding-left'])
+						'border-right', 'border-bottom', 'border-left', 'color'])
 						.concat(parseFloat(lineHeight) > 0 ? `line-height: calc(${lineHeight} * 1.2);` : 'line-height: 1.4em;');
 					sheet.insertRule(`${cssRule.selectorText}{${extraStyles}}`, ++index);
 					break;
@@ -214,6 +214,10 @@ class DjangoSelectize extends IncompleteSelect {
 					}
 					sheet.insertRule(`${cssRule.selectorText}{${extraStyles}}`, ++index);
 					break;
+				case '.ts-wrapper .ts-dropdown [data-selectable]':
+					extraStyles = StyleHelpers.extractStyles(tomInput, ['padding-left']);
+					sheet.insertRule(`${cssRule.selectorText}{${extraStyles}}`, ++index);
+					break;
 				case ':host-context([role="group"].dj-submitted) .ts-wrapper.invalid.focus .ts-control':
 					tomInput.style.transition = 'none';
 					tomInput.classList.add('-focus-', '-invalid-', 'is-invalid');  // is-invalid is a Bootstrap hack
diff --git a/client/django-formset/_colors.scss b/client/django-formset/_colors.scss
index 93b85a01..3752772c 100644
--- a/client/django-formset/_colors.scss
+++ b/client/django-formset/_colors.scss
@@ -6,8 +6,8 @@ $django-formset-success: #007a00;
 // Selectize
 $select-color-highlight: rgba(255, 237, 40, 0.4);
 $select-color-dropdown: rgb(244, 244, 244);
-$select-color-hover: rgb(224, 236, 244);
 $selected-items-border-color: rgba(0, 0, 0, 0.15);
+$selected-items-background-color: rgb(224, 236, 244);
 $active-items-background-color: rgba(0, 0, 0, 0.05);
 
 // RichTextArea