Initial coomit for AAI-UI(sparky-fe)

[aai/sparky-fe.git] / resources / scss / tier-support / _search.scss

diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss
new file mode 100644 (file)
index 0000000..834f090
--- /dev/null
+++ b/resources/scss/tier-support/_search.scss
@@ -0,0 +1,196 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* 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 and OpenECOMP are trademarks
+* and service marks 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;
+}