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 }