X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=resources%2Fscss%2Ftier-support%2F_search.scss;fp=resources%2Fscss%2Ftier-support%2F_search.scss;h=834f090d861dd73b9b95a8f62253b68fc46b7aa2;hp=0000000000000000000000000000000000000000;hb=ca007e933bcd9f63aa77801656ed9dd4142c432c;hpb=42b788b852f0604748828e9e325e4a0f01152c75 diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss new file mode 100644 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; +}