X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=resources%2Fscss%2Ftier-support%2F_search.scss;h=fc1537170a9e56cea161efc28653313b99f038e3;hp=6c349afa6cb8dc0a00ea3c9d3ee7120460deaf40;hb=5ee7367a101143715c2869d72ea4a6fbf55f5af6;hpb=c1917730a648ddbb6cd51307cea9464a697700d8

diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss
index 6c349af..fc15371 100644
--- a/resources/scss/tier-support/_search.scss
+++ b/resources/scss/tier-support/_search.scss
@@ -2,8 +2,8 @@
  * ============LICENSE_START=======================================================
  * org.onap.aai
  * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
+ * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017-2018 Amdocs
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,11 +17,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
 .auto-complete-search {
   display: inline-block;
   vertical-align: text-bottom;
@@ -31,9 +27,10 @@
   float: left;
 }
 
-.auto-complete-search-button-group{
-  position: absolute;
-  width: 90px;
+.auto-complete-search-button-group {
+  position: inherit !important;
+  display: inline-block !important;
+  vertical-align: bottom !important;
 }
 
 .auto-complete-search input.form-control {
@@ -41,36 +38,53 @@
 }
 
 .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 $search-border-color1;
+}
+
+.auto-complete-help-button, .auto-complete-help-button:focus {
+  background-color: $white;
   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 .fa-question-circle {
+  font-size: 1em;
+  line-height: 1em;
+  background-color: $white;
 }
 
 .auto-complete-search button:hover .fa-search {
-  color: $white;
-  background-color: $blue;
+  color: $primary-background-color;
+  background-color: $search-background-color1;
+}
+
+.auto-complete-search button:hover .fa-question-circle {
+  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,23 +95,24 @@
   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;
@@ -117,20 +132,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 +153,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 +175,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,11 +199,21 @@
   flex: 20;
 }
 
-.suggestionColumnTwo{
+.suggestionColumnTwo {
   flex: 80;
 }
-.highlight{
+
+.highlight {
   font-weight: bolder;
   background-color:inherit;
   padding: 0px;
 }
+
+.modal-searchable {
+  height: 500px !important;
+  margin: 15px 0;
+  overflow-y: scroll;
+}
+.modal-searchable:hover {
+  overflow-y: scroll;
+}