bootstrap-tokenfield.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*!
  2. * bootstrap-tokenfield
  3. * https://github.com/sliptree/bootstrap-tokenfield
  4. * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
  5. */
  6. @-webkit-keyframes 'blink' {
  7. 0% {
  8. border-color: #ededed;
  9. }
  10. 100% {
  11. border-color: #b94a48;
  12. }
  13. }
  14. @-moz-keyframes 'blink' {
  15. 0% {
  16. border-color: #ededed;
  17. }
  18. 100% {
  19. border-color: #b94a48;
  20. }
  21. }
  22. @keyframes 'blink' {
  23. 0% {
  24. border-color: #ededed;
  25. }
  26. 100% {
  27. border-color: #b94a48;
  28. }
  29. }
  30. .tokenfield {
  31. height: auto;
  32. min-height: 34px;
  33. padding-bottom: 0px;
  34. }
  35. .tokenfield.focus {
  36. border-color: #66afe9;
  37. outline: 0;
  38. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
  39. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
  40. }
  41. .tokenfield .token {
  42. -webkit-box-sizing: border-box;
  43. -moz-box-sizing: border-box;
  44. box-sizing: border-box;
  45. -webkit-border-radius: 3px;
  46. -moz-border-radius: 3px;
  47. border-radius: 3px;
  48. display: inline-block;
  49. border: 1px solid #d9d9d9;
  50. background-color: #ededed;
  51. white-space: nowrap;
  52. margin: -1px 5px 5px 0;
  53. height: 22px;
  54. vertical-align: top;
  55. cursor: default;
  56. }
  57. .tokenfield .token:hover {
  58. border-color: #b9b9b9;
  59. }
  60. .tokenfield .token.active {
  61. border-color: #52a8ec;
  62. border-color: rgba(82, 168, 236, 0.8);
  63. }
  64. .tokenfield .token.duplicate {
  65. border-color: #ebccd1;
  66. -webkit-animation-name: blink;
  67. animation-name: blink;
  68. -webkit-animation-duration: 0.1s;
  69. animation-duration: 0.1s;
  70. -webkit-animation-direction: normal;
  71. animation-direction: normal;
  72. -webkit-animation-timing-function: ease;
  73. animation-timing-function: ease;
  74. -webkit-animation-iteration-count: infinite;
  75. animation-iteration-count: infinite;
  76. }
  77. .tokenfield .token.invalid {
  78. background: none;
  79. border: 1px solid transparent;
  80. -webkit-border-radius: 0;
  81. -moz-border-radius: 0;
  82. border-radius: 0;
  83. border-bottom: 1px dotted #d9534f;
  84. }
  85. .tokenfield .token.invalid.active {
  86. background: #ededed;
  87. border: 1px solid #ededed;
  88. -webkit-border-radius: 3px;
  89. -moz-border-radius: 3px;
  90. border-radius: 3px;
  91. }
  92. .tokenfield .token .token-label {
  93. display: inline-block;
  94. overflow: hidden;
  95. text-overflow: ellipsis;
  96. padding-left: 4px;
  97. vertical-align: top;
  98. }
  99. .tokenfield .token .close {
  100. font-family: Arial;
  101. display: inline-block;
  102. line-height: 100%;
  103. font-size: 1.1em;
  104. line-height: 1.49em;
  105. margin-left: 5px;
  106. float: none;
  107. height: 100%;
  108. vertical-align: top;
  109. padding-right: 4px;
  110. }
  111. .tokenfield .token-input {
  112. background: none;
  113. width: 60px;
  114. min-width: 60px;
  115. border: 0;
  116. height: 20px;
  117. padding: 0;
  118. margin-bottom: 6px;
  119. -webkit-box-shadow: none;
  120. box-shadow: none;
  121. }
  122. .tokenfield .token-input:focus {
  123. border-color: transparent;
  124. outline: 0;
  125. /* IE6-9 */
  126. -webkit-box-shadow: none;
  127. box-shadow: none;
  128. }
  129. .tokenfield.disabled {
  130. cursor: not-allowed;
  131. background-color: #eeeeee;
  132. }
  133. .tokenfield.disabled .token-input {
  134. cursor: not-allowed;
  135. }
  136. .tokenfield.disabled .token:hover {
  137. cursor: not-allowed;
  138. border-color: #d9d9d9;
  139. }
  140. .tokenfield.disabled .token:hover .close {
  141. cursor: not-allowed;
  142. opacity: 0.2;
  143. filter: alpha(opacity=20);
  144. }
  145. .has-warning .tokenfield.focus {
  146. border-color: #66512c;
  147. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  148. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  149. }
  150. .has-error .tokenfield.focus {
  151. border-color: #843534;
  152. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  153. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  154. }
  155. .has-success .tokenfield.focus {
  156. border-color: #2b542c;
  157. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  158. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  159. }
  160. .tokenfield.input-sm,
  161. .input-group-sm .tokenfield {
  162. min-height: 30px;
  163. padding-bottom: 0px;
  164. }
  165. .input-group-sm .token,
  166. .tokenfield.input-sm .token {
  167. height: 20px;
  168. margin-bottom: 4px;
  169. }
  170. .input-group-sm .token-input,
  171. .tokenfield.input-sm .token-input {
  172. height: 18px;
  173. margin-bottom: 5px;
  174. }
  175. .tokenfield.input-lg,
  176. .input-group-lg .tokenfield {
  177. min-height: 45px;
  178. padding-bottom: 4px;
  179. }
  180. .input-group-lg .token,
  181. .tokenfield.input-lg .token {
  182. height: 25px;
  183. }
  184. .input-group-lg .token-label,
  185. .tokenfield.input-lg .token-label {
  186. line-height: 23px;
  187. }
  188. .input-group-lg .token .close,
  189. .tokenfield.input-lg .token .close {
  190. line-height: 1.3em;
  191. }
  192. .input-group-lg .token-input,
  193. .tokenfield.input-lg .token-input {
  194. height: 23px;
  195. line-height: 23px;
  196. margin-bottom: 6px;
  197. vertical-align: top;
  198. }
  199. .tokenfield.rtl {
  200. direction: rtl;
  201. text-align: right;
  202. }
  203. .tokenfield.rtl .token {
  204. margin: -1px 0 5px 5px;
  205. }
  206. .tokenfield.rtl .token .token-label {
  207. padding-left: 0px;
  208. padding-right: 4px;
  209. }