fix #82 colors for Selectize widget

jrief · Jul 20, 2023 · 0f76ec9 · 0f76ec9
1 parent cb35d5e
commit 0f76ec9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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