2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017-2018 Amdocs
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END=========================================================
21 .auto-complete-search {
22 display: inline-block;
23 vertical-align: text-bottom;
26 .auto-complete-search-text {
30 .auto-complete-search-button-group {
31 position: absolute !important;
35 .auto-complete-search input.form-control {
39 .auto-complete-search-button, .auto-complete-search-button:focus {
40 background-color: $search-button-background-color;
43 border: solid 1px $search-border-color1;
46 .auto-complete-search button:hover {
47 background-color: $search-background-color1;
50 .auto-complete-search .fa-lg {
53 background-color: $search-button-background-color;
56 .auto-complete-search button:hover .fa-search {
57 color: $primary-background-color;
58 background-color: $search-background-color1;
61 .auto-complete-search .btn-group .auto-complete-clear-button {
63 margin-left: -35px !important;
65 background-color: transparent;
68 color: $search-text-color1;
70 filter: alpha(opacity=30);
71 background-color: transparent;
75 .auto-complete-search .auto-complete-clear-button:hover {
76 background-color: transparent;
79 color: $search-text-color1;
81 background-color: transparent;
85 .auto-complete-search button:hover .fa-times {
86 color: $primary-background-color;
87 background-color: $search-background-color1;
90 .react-autosuggest__container {
91 display: inline-block;
96 .react-autosuggest__input {
99 display: inline-block;
102 .react-autosuggest__input:focus {
106 .react-autosuggest__container--open .react-autosuggest__input {
107 border-bottom-left-radius: 0;
108 border-bottom-right-radius: 0;
111 .react-autosuggest__suggestions-container {
118 .react-autosuggest__suggestions-containerCopy {
124 border: 1px solid $search-border-color1;
125 background-color: $primary-background-color;
126 border-bottom-left-radius: 4px;
127 border-bottom-right-radius: 4px;
132 .react-autosuggest__container--open .react-autosuggest__suggestions-container {
137 border: 1px solid $search-border-color1;
138 background-color: $primary-background-color;
139 border-bottom-left-radius: 4px;
140 border-bottom-right-radius: 4px;
145 .react-autosuggest__suggestions-list {
148 list-style-type: none;
153 .react-autosuggest__suggestion {
158 .react-autosuggest__suggestion--focused {
159 background-color: $search-background-color3;
162 .react-autosuggest__section-title {
163 padding: 10px 0 0 10px;
165 color: $search-background-color2;
166 border-top: 1px dashed $search-border-color1;
169 .react-autosuggest__section-container:first-child .react-autosuggest__section-title {
174 .suggestionFlexContainer {
179 .suggestionColumnOne {
183 .suggestionColumnTwo {
189 background-color:inherit;