6c349afa6cb8dc0a00ea3c9d3ee7120460deaf40
[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
25 .auto-complete-search {
26   display: inline-block;
27   vertical-align: text-bottom;
28 }
29
30 .auto-complete-search-text {
31   float: left;
32 }
33
34 .auto-complete-search-button-group{
35   position: absolute;
36   width: 90px;
37 }
38
39 .auto-complete-search input.form-control {
40   width: 350px;
41 }
42
43 .auto-complete-search-button, .auto-complete-search-button:focus {
44   background-color: $light-gray;
45   padding-bottom: 8px;
46   width: 45px;
47   height: 30px;
48   border: solid 1px $gray;
49 }
50
51 .auto-complete-search button:hover {
52   background-color: $blue;
53 }
54
55 .auto-complete-search .fa-lg {
56   font-size: 1em;
57   line-height: 1em;
58   background-color: $light-gray;
59 }
60
61 .auto-complete-search button:hover .fa-search {
62   color: $white;
63   background-color: $blue;
64 }
65
66 .auto-complete-search .btn-group .auto-complete-clear-button {
67   border: none;
68   margin-left: -35px;
69   margin-top: 2px;
70   padding: 5px 12px 8px 12px;
71
72   i {
73     color: #009fdb;
74     opacity: 0.3;
75     filter: alpha(opacity=30);
76     background-color: transparent;
77   }
78 }
79
80 .auto-complete-search .auto-complete-clear-button:hover {
81   background-color: transparent;
82
83   i.fa-times {
84     color: #009fdb;
85     opacity: 1;
86     background-color: transparent;
87   }
88 }
89
90 .auto-complete-search button:hover .fa-times {
91   color: $white;
92   background-color: $blue;
93 }
94
95 .react-autosuggest__container {
96   display: inline-block;
97   position: relative;
98 }
99
100 .react-autosuggest__input{
101   width: 655px;
102   height: 30px;
103   display: inline-block;
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
123 .react-autosuggest__suggestions-containerCopy{
124   display: none;
125   display: block;
126   position: absolute;
127   top: 30px;
128   width: 655px;
129   border: 1px solid #aaa;
130   background-color: #fff;
131   border-bottom-left-radius: 4px;
132   border-bottom-right-radius: 4px;
133   z-index: 2;
134   overflow-y: hidden;
135 }
136
137 .react-autosuggest__container--open .react-autosuggest__suggestions-container {
138   display: block;
139   position: absolute;
140   top: 30px;
141   width: 655px;
142   border: 1px solid #aaa;
143   background-color: #fff;
144   border-bottom-left-radius: 4px;
145   border-bottom-right-radius: 4px;
146   z-index: 2;
147   overflow-x: hidden;
148 }
149
150 .react-autosuggest__suggestions-list {
151   margin: 0;
152   padding: 0;
153   list-style-type: none;
154   width: 646px;
155
156 }
157
158 .react-autosuggest__suggestion {
159   cursor: pointer;
160   padding: 10px 20px;
161 }
162
163 .react-autosuggest__suggestion--focused {
164   background-color: #ddd;
165 }
166
167 .react-autosuggest__section-title {
168   padding: 10px 0 0 10px;
169   font-size: 12px;
170   color: #777;
171   border-top: 1px dashed #ccc;
172 }
173
174 .react-autosuggest__section-container:first-child .react-autosuggest__section-title {
175   border-top: 0;
176 }
177
178
179 .suggestionFlexContainer {
180   display: flex;
181   font-family: Arial;
182 }
183
184 .suggestionColumnOne {
185   flex: 20;
186 }
187
188 .suggestionColumnTwo{
189   flex: 80;
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