resources/scss/tier-support/_search.scss

   1 /*
   2 * ============LICENSE_START=======================================================
   3 * SPARKY (AAI UI service)
   4 * ================================================================================
   5 * Copyright © 2017 AT&T Intellectual Property.
   6 * Copyright © 2017 Amdocs
   7 * All rights reserved.
   8 * ================================================================================
   9 * Licensed under the Apache License, Version 2.0 (the "License");
  10 * you may not use this file except in compliance with the License.
  11 * You may obtain a copy of the License at
  12 *
  13 *      http://www.apache.org/licenses/LICENSE-2.0
  14 *
  15 * Unless required by applicable law or agreed to in writing, software
  16 * distributed under the License is distributed on an "AS IS" BASIS,
  17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18 * See the License for the specific language governing permissions and
  19 * limitations under the License.
  20 * ============LICENSE_END=========================================================
  21 *
  22 * ECOMP and OpenECOMP are trademarks
  23 * and service marks of AT&T Intellectual Property.
  24 */
  25
  26 .auto-complete-search {
  27   display: inline-block;
  28   vertical-align: text-bottom;
  29 }
  30
  31 .auto-complete-search-text {
  32   float: left;
  33 }
  34
  35 .auto-complete-search-button-group{
  36   position: absolute;
  37   width: 90px;
  38 }
  39
  40 .auto-complete-search input.form-control {
  41   width: 350px;
  42 }
  43
  44 .auto-complete-search-button, .auto-complete-search-button:focus {
  45   background-color: $light-gray;
  46   padding-bottom: 8px;
  47   width: 45px;
  48   height: 30px;
  49   border: solid 1px $gray;
  50 }
  51
  52 .auto-complete-search button:hover {
  53   background-color: $blue;
  54 }
  55
  56 .auto-complete-search .fa-lg {
  57   font-size: 1em;
  58   line-height: 1em;
  59   background-color: $light-gray;
  60 }
  61
  62 .auto-complete-search button:hover .fa-search {
  63   color: $white;
  64   background-color: $blue;
  65 }
  66
  67 .auto-complete-search .btn-group .auto-complete-clear-button {
  68   border: none;
  69   margin-left: -35px;
  70   margin-top: 2px;
  71   padding: 5px 12px 8px 12px;
  72
  73   i {
  74     color: #009fdb;
  75     opacity: 0.3;
  76     filter: alpha(opacity=30);
  77     background-color: transparent;
  78   }
  79 }
  80
  81 .auto-complete-search .auto-complete-clear-button:hover {
  82   background-color: transparent;
  83
  84   i.fa-times {
  85     color: #009fdb;
  86     opacity: 1;
  87     background-color: transparent;
  88   }
  89 }
  90
  91 .auto-complete-search button:hover .fa-times {
  92   color: $white;
  93   background-color: $blue;
  94 }
  95
  96 .react-autosuggest__container {
  97   display: inline-block;
  98   position: relative;
  99 }
 100
 101 .react-autosuggest__input{
 102   width: 655px;
 103   height: 30px;
 104   display: inline-block;
 105 }
 106
 107 .react-autosuggest__input:focus {
 108   outline: none;
 109 }
 110
 111 .react-autosuggest__container--open .react-autosuggest__input {
 112   border-bottom-left-radius: 0;
 113   border-bottom-right-radius: 0;
 114 }
 115
 116 .react-autosuggest__suggestions-container {
 117   display: none;
 118   overflow-y: scroll;
 119   height: 200px;
 120   border:1px ;
 121
 122 }
 123
 124 .react-autosuggest__suggestions-containerCopy{
 125   display: none;
 126   display: block;
 127   position: absolute;
 128   top: 30px;
 129   width: 655px;
 130   border: 1px solid #aaa;
 131   background-color: #fff;
 132   border-bottom-left-radius: 4px;
 133   border-bottom-right-radius: 4px;
 134   z-index: 2;
 135   overflow-y: hidden;
 136 }
 137
 138 .react-autosuggest__container--open .react-autosuggest__suggestions-container {
 139   display: block;
 140   position: absolute;
 141   top: 30px;
 142   width: 655px;
 143   border: 1px solid #aaa;
 144   background-color: #fff;
 145   border-bottom-left-radius: 4px;
 146   border-bottom-right-radius: 4px;
 147   z-index: 2;
 148   overflow-x: hidden;
 149 }
 150
 151 .react-autosuggest__suggestions-list {
 152   margin: 0;
 153   padding: 0;
 154   list-style-type: none;
 155   width: 646px;
 156
 157 }
 158
 159 .react-autosuggest__suggestion {
 160   cursor: pointer;
 161   padding: 10px 20px;
 162 }
 163
 164 .react-autosuggest__suggestion--focused {
 165   background-color: #ddd;
 166 }
 167
 168 .react-autosuggest__section-title {
 169   padding: 10px 0 0 10px;
 170   font-size: 12px;
 171   color: #777;
 172   border-top: 1px dashed #ccc;
 173 }
 174
 175 .react-autosuggest__section-container:first-child .react-autosuggest__section-title {
 176   border-top: 0;
 177 }
 178
 179
 180 .suggestionFlexContainer {
 181   display: flex;
 182   font-family: Arial;
 183 }
 184
 185 .suggestionColumnOne {
 186   flex: 20;
 187 }
 188
 189 .suggestionColumnTwo{
 190   flex: 80;
 191 }
 192 .highlight{
 193   font-weight: bolder;
 194   background-color:inherit;
 195   padding: 0px;
 196 }