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