resources/scss/tier-support/_search.scss

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