discovery-ui/src/main/resources/iui/microservices/js/tokenfield/css/bootstrap-tokenfield.css

   1 /**
   2  * Copyright 2016 ZTE, Inc. and others.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *     http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 @-webkit-keyframes blink {
  17   0% {
  18     border-color: #ededed;
  19   }
  20   100% {
  21     border-color: #b94a48;
  22   }
  23 }
  24 @-moz-keyframes blink {
  25   0% {
  26     border-color: #ededed;
  27   }
  28   100% {
  29     border-color: #b94a48;
  30   }
  31 }
  32 @keyframes blink {
  33   0% {
  34     border-color: #ededed;
  35   }
  36   100% {
  37     border-color: #b94a48;
  38   }
  39 }
  40 .tokenfield {
  41   height: auto;
  42   min-height: 34px;
  43   padding-bottom: 0px;
  44 }
  45 .tokenfield.focus {
  46   border-color: #66afe9;
  47   outline: 0;
  48   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
  49   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
  50 }
  51 .tokenfield .token {
  52   -webkit-box-sizing: border-box;
  53   -moz-box-sizing: border-box;
  54   box-sizing: border-box;
  55   -webkit-border-radius: 3px;
  56   -moz-border-radius: 3px;
  57   border-radius: 3px;
  58   display: inline-block;
  59   border: 1px solid #d9d9d9;
  60   background-color: #ededed;
  61   white-space: nowrap;
  62   margin: 2px 5px 5px 0;
  63   height: 22px;
  64   vertical-align: top;
  65   cursor: default;
  66 }
  67 .tokenfield .token:hover {
  68   border-color: #b9b9b9;
  69 }
  70 .tokenfield .token.active {
  71   border-color: #52a8ec;
  72   border-color: rgba(82, 168, 236, 0.8);
  73 }
  74 .tokenfield .token.duplicate {
  75   border-color: #ebccd1;
  76   -webkit-animation-name: blink;
  77   animation-name: blink;
  78   -webkit-animation-duration: 0.1s;
  79   animation-duration: 0.1s;
  80   -webkit-animation-direction: normal;
  81   animation-direction: normal;
  82   -webkit-animation-timing-function: ease;
  83   animation-timing-function: ease;
  84   -webkit-animation-iteration-count: infinite;
  85   animation-iteration-count: infinite;
  86 }
  87 .tokenfield .token.invalid {
  88   background: none;
  89   border: 1px solid transparent;
  90   -webkit-border-radius: 0;
  91   -moz-border-radius: 0;
  92   border-radius: 0;
  93   border-bottom: 1px dotted #d9534f;
  94 }
  95 .tokenfield .token.invalid.active {
  96   background: #ededed;
  97   border: 1px solid #ededed;
  98   -webkit-border-radius: 3px;
  99   -moz-border-radius: 3px;
 100   border-radius: 3px;
 101 }
 102 .tokenfield .token .token-label {
 103   display: inline-block;
 104   overflow: hidden;
 105   text-overflow: ellipsis;
 106   padding-left: 4px;
 107   vertical-align: top;
 108 }
 109 .tokenfield .token .close {
 110   font-family: Arial;
 111   display: inline-block;
 112   line-height: 100%;
 113   font-size: 1.1em;
 114   line-height: 1.49em;
 115   margin-left: 5px;
 116   float: none;
 117   height: 100%;
 118   vertical-align: top;
 119   padding-right: 4px;
 120 }
 121 .tokenfield .token-input {
 122   background: none;
 123   width: 60px;
 124   min-width: 60px;
 125   border: 0;
 126   height: 20px;
 127   padding: 0;
 128   margin-bottom: 6px;
 129   -webkit-box-shadow: none;
 130   box-shadow: none;
 131 }
 132 .tokenfield .token-input:focus {
 133   border-color: transparent;
 134   outline: 0;
 135   /* IE6-9 */
 136   -webkit-box-shadow: none;
 137   box-shadow: none;
 138 }
 139 .tokenfield.disabled {
 140   cursor: not-allowed;
 141   background-color: #eeeeee;
 142 }
 143 .tokenfield.disabled .token-input {
 144   cursor: not-allowed;
 145 }
 146 .tokenfield.disabled .token:hover {
 147   cursor: not-allowed;
 148   border-color: #d9d9d9;
 149 }
 150 .tokenfield.disabled .token:hover .close {
 151   cursor: not-allowed;
 152   opacity: 0.2;
 153   filter: alpha(opacity=20);
 154 }
 155 .has-warning .tokenfield.focus {
 156   border-color: #66512c;
 157   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
 158   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
 159 }
 160 .has-error .tokenfield.focus {
 161   border-color: #843534;
 162   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
 163   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
 164 }
 165 .has-success .tokenfield.focus {
 166   border-color: #2b542c;
 167   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
 168   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
 169 }
 170 .tokenfield.input-sm,
 171 .input-group-sm .tokenfield {
 172   min-height: 30px;
 173   padding-bottom: 0px;
 174 }
 175 .input-group-sm .token,
 176 .tokenfield.input-sm .token {
 177   height: 20px;
 178   margin-bottom: 4px;
 179 }
 180 .input-group-sm .token-input,
 181 .tokenfield.input-sm .token-input {
 182   height: 18px;
 183   margin-bottom: 5px;
 184 }
 185 .tokenfield.input-lg,
 186 .input-group-lg .tokenfield {
 187   height: auto;
 188   min-height: 45px;
 189   padding-bottom: 4px;
 190 }
 191 .input-group-lg .token,
 192 .tokenfield.input-lg .token {
 193   height: 25px;
 194 }
 195 .input-group-lg .token-label,
 196 .tokenfield.input-lg .token-label {
 197   line-height: 23px;
 198 }
 199 .input-group-lg .token .close,
 200 .tokenfield.input-lg .token .close {
 201   line-height: 1.3em;
 202 }
 203 .input-group-lg .token-input,
 204 .tokenfield.input-lg .token-input {
 205   height: 23px;
 206   line-height: 23px;
 207   margin-bottom: 6px;
 208   vertical-align: top;
 209 }
 210 .tokenfield.rtl {
 211   direction: rtl;
 212   text-align: right;
 213 }
 214 .tokenfield.rtl .token {
 215   margin: -1px 0 5px 5px;
 216 }
 217 .tokenfield.rtl .token .token-label {
 218   padding-left: 0px;
 219   padding-right: 4px;
 220 }