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