initial commit

frontend/src/styles/_tom-select.scss

@@ -0,0 +1,45 @@
+@import "tom-select/dist/css/tom-select.bootstrap5.min.css";
+@import "_variables.scss";
+
+/* FIX BOOTSTRAP STYLING FOR TOM SELECT */
+.ts-dropdown, .ts-control, .ts-control input {
+  color: var(--bs-body-color);
+}
+.ts-wrapper.plugin-remove_button .item .remove {
+  color: $red;
+}
+.plugin-clear_button .clear-button {
+  color: $red;
+  right: 60px;
+}
+
+.ts-wrapper.multi .ts-control > div.active {
+  background: $primary;
+  color: $body-color;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+
+.focus .ts-control {
+  color: $input-focus-color;
+  background-color: $input-focus-bg;
+  border-color: $input-focus-border-color;
+  //border-color: $form-select-focus-border-color;
+  outline: 0;
+  @if $enable-shadows {
+    @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+  } @else {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    box-shadow: $input-focus-box-shadow;
+  }
+}
+
+.focus.ts-wrapper {
+  border-color: $form-select-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
+    }
+}