fix: School text-box dropdown in manage/questionnaires/edit missing background (#296)

* fix(questionnaire): fixed background in school autocomplete

fixed the questionnaire edit page so that it was blank in the management
edit page

* fix(questionnaire): sperated autocomplete sass into its own file

seperated the sass for the autocomplete into its own file so that manage
could use it without the other sass in forms.sass

* Use grays for manage backgrouind

Co-authored-by: Chris Baudouin, Jr <[email protected]>
Co-authored-by: Peter Kos <[email protected]>

Author: 3 people

app/assets/stylesheets/application.sass

@@ -25,6 +25,7 @@
 @import general/table
 @import forms/forms
 @import forms/confirmation
+@import forms/autocomplete
 
 @import general/theming-editor
 

app/assets/stylesheets/forms/_autocomplete.sass

@@ -0,0 +1,24 @@
+
+// jquery ui override
+.ui-autocomplete
+  @include css4
+    background: var(--input--background--focus)
+    border: 1px solid var(--input--border-color--focus)
+    color: var(--input--text--focus)
+  list-style: none
+  padding: 0
+  .ui-menu-item div
+    padding: 2px 5px
+    display: block
+    cursor: pointer
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    &:hover
+      @include css4
+        background: var(--primary)
+      @include css4
+        color: var(--white)
+// needed for ellipsis in text to work and acts as a min-width
+.ui-menu
+  width: 50px

app/assets/stylesheets/forms/_forms.sass

@@ -258,30 +258,6 @@ input[type=submit]
   margin-bottom: 3px
 
 
-// jquery ui override
-.ui-autocomplete
-  @include css4
-    background: var(--input--background--focus)
-    border: 1px solid var(--input--border-color--focus)
-    color: var(--input--text--focus)
-  list-style: none
-  padding: 0
-  .ui-menu-item div
-    padding: 2px 5px
-    display: block
-    cursor: pointer
-    overflow: hidden
-    text-overflow: ellipsis
-    white-space: nowrap
-    &:hover
-      @include css4
-        background: var(--primary)
-      @include css4
-        color: var(--white)
-// needed for ellipsis in text to work and acts as a min-width
-.ui-menu
-  width: 50px
-
 // form wizard
 .wizard-stage
   display: none

app/assets/stylesheets/manage.sass

@@ -3,6 +3,9 @@
 @import manage/selectize-fix
 @import vendor/simplemde.min
 @import vendor/codemirror
+@import general/variables
+@import general/css4
+@import manage/autocomplete
 
 $grey-dark: #555
 $grey-med: #999
@@ -172,6 +175,7 @@ $grey-med: #999
 .sidebar-mobile .sidebar-sticky
   height: auto
 
+
 /*
  * Datatable changes
  */

app/assets/stylesheets/manage/_autocomplete.sass

@@ -0,0 +1,12 @@
+
+@import ../forms/autocomplete
+
+// jquery ui override
+.ui-autocomplete
+  background: white
+  border: 1px solid #333
+  color: #222
+  .ui-menu-item div
+    &:hover
+      background: #999
+      color: white