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   padding-top: 10px;
 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 .react-autosuggest__suggestions-containerCopy {
 123   display: none;
 124   display: block;
 125   position: absolute;
 126   top: 30px;
 127   width: 655px;
 128   border: 1px solid $search-border-color1;
 129   background-color: $primary-background-color;
 130   border-bottom-left-radius: 4px;
 131   border-bottom-right-radius: 4px;
 132   z-index: 90;
 133   overflow-y: hidden;
 134 }
 135
 136 .react-autosuggest__container--open .react-autosuggest__suggestions-container {
 137   display: block;
 138   position: absolute;
 139   top: 30px;
 140   width: 655px;
 141   border: 1px solid $search-border-color1;
 142   background-color: $primary-background-color;
 143   border-bottom-left-radius: 4px;
 144   border-bottom-right-radius: 4px;
 145   z-index: 99;
 146   overflow-x: hidden;
 147 }
 148
 149 .react-autosuggest__suggestions-list {
 150   margin: 0;
 151   padding: 0;
 152   list-style-type: none;
 153   width: 646px;
 154
 155 }
 156
 157 .react-autosuggest__suggestion {
 158   cursor: pointer;
 159   padding: 10px 20px;
 160 }
 161
 162 .react-autosuggest__suggestion--focused {
 163   background-color: $search-background-color3;
 164 }
 165
 166 .react-autosuggest__section-title {
 167   padding: 10px 0 0 10px;
 168   font-size: 12px;
 169   color: $search-background-color2;
 170   border-top: 1px dashed $search-border-color1;
 171 }
 172
 173 .react-autosuggest__section-container:first-child .react-autosuggest__section-title {
 174   border-top: 0;
 175 }
 176
 177
 178 .suggestionFlexContainer {
 179   display: flex;
 180   font-family: Arial;
 181 }
 182
 183 .suggestionColumnOne {
 184   flex: 20;
 185 }
 186
 187 .suggestionColumnTwo {
 188   flex: 80;
 189 }
 190
 191 .highlight {
 192   font-weight: bolder;
 193   background-color:inherit;
 194   padding: 0px;
 195 }