Updating versions of Sparky FE files

[aai/sparky-fe.git] / resources / scss / tier-support / _search.scss

diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss
index 6c349af..b65cb57 100644 (file)
--- a/resources/scss/tier-support/_search.scss
+++ b/resources/scss/tier-support/_search.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .auto-complete-search {
   display: inline-block;
   vertical-align: text-bottom;
@@ -31,9 +30,9 @@
   float: left;
 }
 
-.auto-complete-search-button-group{
-  position: absolute;
-  width: 90px;
+.auto-complete-search-button-group {
+  position: absolute !important;
+  padding-top: 3px;
 }
 
 .auto-complete-search input.form-control {
@@ -41,36 +40,35 @@
 }
 
 .auto-complete-search-button, .auto-complete-search-button:focus {
-  background-color: $light-gray;
-  padding-bottom: 8px;
+  background-color: $search-button-background-color;
   width: 45px;
   height: 30px;
-  border: solid 1px $gray;
+  border: solid 1px $search-border-color1;
 }
 
 .auto-complete-search button:hover {
-  background-color: $blue;
+  background-color: $search-background-color1;
 }
 
 .auto-complete-search .fa-lg {
   font-size: 1em;
   line-height: 1em;
-  background-color: $light-gray;
+  background-color: $search-button-background-color;
 }
 
 .auto-complete-search button:hover .fa-search {
-  color: $white;
-  background-color: $blue;
+  color: $primary-background-color;
+  background-color: $search-background-color1;
 }
 
 .auto-complete-search .btn-group .auto-complete-clear-button {
   border: none;
-  margin-left: -35px;
-  margin-top: 2px;
-  padding: 5px 12px 8px 12px;
+  margin-left: -35px !important;
+  height: 30px;
+  background-color: transparent;
 
   i {
-    color: #009fdb;
+    color: $search-text-color1;
     opacity: 0.3;
     filter: alpha(opacity=30);
     background-color: transparent;
@@ -81,26 +79,28 @@
   background-color: transparent;
 
   i.fa-times {
-    color: #009fdb;
+    color: $search-text-color1;
     opacity: 1;
     background-color: transparent;
   }
 }
 
 .auto-complete-search button:hover .fa-times {
-  color: $white;
-  background-color: $blue;
+  color: $primary-background-color;
+  background-color: $search-background-color1;
 }
 
 .react-autosuggest__container {
   display: inline-block;
   position: relative;
+  padding-top: 3px;
 }
 
-.react-autosuggest__input{
+.react-autosuggest__input {
   width: 655px;
   height: 30px;
   display: inline-block;
+  padding-top: 10px;
 }
 
 .react-autosuggest__input:focus {
@@ -117,20 +117,19 @@
   overflow-y: scroll;
   height: 200px;
   border:1px ;
-
 }
 
-.react-autosuggest__suggestions-containerCopy{
+.react-autosuggest__suggestions-containerCopy {
   display: none;
   display: block;
   position: absolute;
   top: 30px;
   width: 655px;
-  border: 1px solid #aaa;
-  background-color: #fff;
+  border: 1px solid $search-border-color1;
+  background-color: $primary-background-color;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  z-index: 2;
+  z-index: 90;
   overflow-y: hidden;
 }
 
@@ -139,11 +138,11 @@
   position: absolute;
   top: 30px;
   width: 655px;
-  border: 1px solid #aaa;
-  background-color: #fff;
+  border: 1px solid $search-border-color1;
+  background-color: $primary-background-color;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  z-index: 2;
+  z-index: 99;
   overflow-x: hidden;
 }
 
@@ -161,14 +160,14 @@
 }
 
 .react-autosuggest__suggestion--focused {
-  background-color: #ddd;
+  background-color: $search-background-color3;
 }
 
 .react-autosuggest__section-title {
   padding: 10px 0 0 10px;
   font-size: 12px;
-  color: #777;
-  border-top: 1px dashed #ccc;
+  color: $search-background-color2;
+  border-top: 1px dashed $search-border-color1;
 }
 
 .react-autosuggest__section-container:first-child .react-autosuggest__section-title {
@@ -185,10 +184,11 @@
   flex: 20;
 }
 
-.suggestionColumnTwo{
+.suggestionColumnTwo {
   flex: 80;
 }
-.highlight{
+
+.highlight {
   font-weight: bolder;
   background-color:inherit;
   padding: 0px;