b65cb57d0a28b08bef5704cae97137c54910d389
[aai/sparky-fe.git] / resources / scss / tier-support / _search.scss
1 /**
2  * ============LICENSE_START=======================================================
3  * org.onap.aai
4  * ================================================================================
5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6  * Copyright © 2017 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
11  *
12  *       http://www.apache.org/licenses/LICENSE-2.0
13  *
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=========================================================
20  *
21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
22  */
23
24 .auto-complete-search {
25   display: inline-block;
26   vertical-align: text-bottom;
27 }
28
29 .auto-complete-search-text {
30   float: left;
31 }
32
33 .auto-complete-search-button-group {
34   position: absolute !important;
35   padding-top: 3px;
36 }
37
38 .auto-complete-search input.form-control {
39   width: 350px;
40 }
41
42 .auto-complete-search-button, .auto-complete-search-button:focus {
43   background-color: $search-button-background-color;
44   width: 45px;
45   height: 30px;
46   border: solid 1px $search-border-color1;
47 }
48
49 .auto-complete-search button:hover {
50   background-color: $search-background-color1;
51 }
52
53 .auto-complete-search .fa-lg {
54   font-size: 1em;
55   line-height: 1em;
56   background-color: $search-button-background-color;
57 }
58
59 .auto-complete-search button:hover .fa-search {
60   color: $primary-background-color;
61   background-color: $search-background-color1;
62 }
63
64 .auto-complete-search .btn-group .auto-complete-clear-button {
65   border: none;
66   margin-left: -35px !important;
67   height: 30px;
68   background-color: transparent;
69
70   i {
71     color: $search-text-color1;
72     opacity: 0.3;
73     filter: alpha(opacity=30);
74     background-color: transparent;
75   }
76 }
77
78 .auto-complete-search .auto-complete-clear-button:hover {
79   background-color: transparent;
80
81   i.fa-times {
82     color: $search-text-color1;
83     opacity: 1;
84     background-color: transparent;
85   }
86 }
87
88 .auto-complete-search button:hover .fa-times {
89   color: $primary-background-color;
90   background-color: $search-background-color1;
91 }
92
93 .react-autosuggest__container {
94   display: inline-block;
95   position: relative;
96   padding-top: 3px;
97 }
98
99 .react-autosuggest__input {
100   width: 655px;
101   height: 30px;
102   display: inline-block;
103   padding-top: 10px;
104 }
105
106 .react-autosuggest__input:focus {
107   outline: none;
108 }
109
110 .react-autosuggest__container--open .react-autosuggest__input {
111   border-bottom-left-radius: 0;
112   border-bottom-right-radius: 0;
113 }
114
115 .react-autosuggest__suggestions-container {
116   display: none;
117   overflow-y: scroll;
118   height: 200px;
119   border:1px ;
120 }
121
122 .react-autosuggest__suggestions-containerCopy {
123   display: none;
124   display: block;
125   position: absolute;
126   top: 30px;
127   width: 655px;
128   border: 1px solid $search-border-color1;
129   background-color: $primary-background-color;
130   border-bottom-left-radius: 4px;
131   border-bottom-right-radius: 4px;
132   z-index: 90;
133   overflow-y: hidden;
134 }
135
136 .react-autosuggest__container--open .react-autosuggest__suggestions-container {
137   display: block;
138   position: absolute;
139   top: 30px;
140   width: 655px;
141   border: 1px solid $search-border-color1;
142   background-color: $primary-background-color;
143   border-bottom-left-radius: 4px;
144   border-bottom-right-radius: 4px;
145   z-index: 99;
146   overflow-x: hidden;
147 }
148
149 .react-autosuggest__suggestions-list {
150   margin: 0;
151   padding: 0;
152   list-style-type: none;
153   width: 646px;
154
155 }
156
157 .react-autosuggest__suggestion {
158   cursor: pointer;
159   padding: 10px 20px;
160 }
161
162 .react-autosuggest__suggestion--focused {
163   background-color: $search-background-color3;
164 }
165
166 .react-autosuggest__section-title {
167   padding: 10px 0 0 10px;
168   font-size: 12px;
169   color: $search-background-color2;
170   border-top: 1px dashed $search-border-color1;
171 }
172
173 .react-autosuggest__section-container:first-child .react-autosuggest__section-title {
174   border-top: 0;
175 }
176
177
178 .suggestionFlexContainer {
179   display: flex;
180   font-family: Arial;
181 }
182
183 .suggestionColumnOne {
184   flex: 20;
185 }
186
187 .suggestionColumnTwo {
188   flex: 80;
189 }
190
191 .highlight {
192   font-weight: bolder;
193   background-color:inherit;
194   padding: 0px;
195 }

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use