/** * ============LICENSE_START======================================================= * org.onap.aai * ================================================================================ * Copyright © 2017 AT&T Intellectual Property. All rights reserved. * Copyright © 2017 Amdocs * ================================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * 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; } .auto-complete-search-text { float: left; } .auto-complete-search-button-group{ position: absolute; width: 90px; } .auto-complete-search input.form-control { width: 350px; } .auto-complete-search-button, .auto-complete-search-button:focus { background-color: $light-gray; padding-bottom: 8px; width: 45px; height: 30px; border: solid 1px $gray; } .auto-complete-search button:hover { background-color: $blue; } .auto-complete-search .fa-lg { font-size: 1em; line-height: 1em; background-color: $light-gray; } .auto-complete-search button:hover .fa-search { color: $white; background-color: $blue; } .auto-complete-search .btn-group .auto-complete-clear-button { border: none; margin-left: -35px; margin-top: 2px; padding: 5px 12px 8px 12px; i { color: #009fdb; opacity: 0.3; filter: alpha(opacity=30); background-color: transparent; } } .auto-complete-search .auto-complete-clear-button:hover { background-color: transparent; i.fa-times { color: #009fdb; opacity: 1; background-color: transparent; } } .auto-complete-search button:hover .fa-times { color: $white; background-color: $blue; } .react-autosuggest__container { display: inline-block; position: relative; } .react-autosuggest__input{ width: 655px; height: 30px; display: inline-block; } .react-autosuggest__input:focus { outline: none; } .react-autosuggest__container--open .react-autosuggest__input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .react-autosuggest__suggestions-container { display: none; overflow-y: scroll; height: 200px; border:1px ; } .react-autosuggest__suggestions-containerCopy{ display: none; display: block; position: absolute; top: 30px; width: 655px; border: 1px solid #aaa; background-color: #fff; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; z-index: 2; overflow-y: hidden; } .react-autosuggest__container--open .react-autosuggest__suggestions-container { display: block; position: absolute; top: 30px; width: 655px; border: 1px solid #aaa; background-color: #fff; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; z-index: 2; overflow-x: hidden; } .react-autosuggest__suggestions-list { margin: 0; padding: 0; list-style-type: none; width: 646px; } .react-autosuggest__suggestion { cursor: pointer; padding: 10px 20px; } .react-autosuggest__suggestion--focused { background-color: #ddd; } .react-autosuggest__section-title { padding: 10px 0 0 10px; font-size: 12px; color: #777; border-top: 1px dashed #ccc; } .react-autosuggest__section-container:first-child .react-autosuggest__section-title { border-top: 0; } .suggestionFlexContainer { display: flex; font-family: Arial; } .suggestionColumnOne { flex: 20; } .suggestionColumnTwo{ flex: 80; } .highlight{ font-weight: bolder; background-color:inherit; padding: 0px; }