bootstrap-tokenfield.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. @-webkit-keyframes blink {
  2. 0% {
  3. border-color: #ededed; }
  4. 100% {
  5. border-color: #b94a48; } }
  6. @keyframes blink {
  7. 0% {
  8. border-color: #ededed; }
  9. 100% {
  10. border-color: #b94a48; } }
  11. .tokenfield {
  12. height: auto;
  13. min-height: 2.573rem;
  14. padding-bottom: 0; }
  15. .tokenfield.focus {
  16. border-color: #3e8ef7;
  17. outline: 0; }
  18. .tokenfield .token {
  19. border-radius: 3px;
  20. box-sizing: border-box;
  21. display: inline-block;
  22. height: 22px;
  23. margin: -1px 5px 5px 0;
  24. white-space: nowrap;
  25. vertical-align: top;
  26. cursor: default;
  27. background-color: #f3f7f9;
  28. border: 1px solid #e4eaec; }
  29. .tokenfield .token:hover {
  30. border-color: #589ffc; }
  31. .tokenfield .token.active {
  32. border-color: #247cf0;
  33. border-color: rgba(36, 124, 240, 0.8); }
  34. .tokenfield .token.duplicate {
  35. border-color: #ff3d64;
  36. -webkit-animation: blink .1s normal ease infinite;
  37. animation: blink .1s normal ease infinite; }
  38. .tokenfield .token.invalid {
  39. border-radius: 0;
  40. background: none;
  41. border: 1px solid transparent;
  42. border-bottom: 1px dotted #ff4c52; }
  43. .tokenfield .token.invalid.active {
  44. border-radius: 3px;
  45. background: #f3f7f9;
  46. border: 1px solid #f3f7f9; }
  47. .tokenfield .token .token-label {
  48. display: inline-block;
  49. padding-left: 4px;
  50. overflow: hidden;
  51. text-overflow: ellipsis;
  52. vertical-align: top; }
  53. .tokenfield .token .close {
  54. display: inline-block;
  55. float: none;
  56. height: 100%;
  57. padding-right: 4px;
  58. margin-left: 5px;
  59. font-family: Arial;
  60. font-size: 1.1em;
  61. line-height: inherit;
  62. vertical-align: top; }
  63. .tokenfield .token-input {
  64. width: 60px;
  65. min-width: 60px;
  66. height: 20px;
  67. padding: 0;
  68. margin-bottom: 6px;
  69. background: none;
  70. border: 0;
  71. box-shadow: none; }
  72. .tokenfield .token-input:focus {
  73. border-color: transparent;
  74. outline: 0;
  75. /* IE6-9 */
  76. box-shadow: none; }
  77. .tokenfield.disabled {
  78. cursor: not-allowed;
  79. background-color: #f3f7f9; }
  80. .tokenfield.disabled .token-input {
  81. cursor: not-allowed; }
  82. .tokenfield.disabled .token:hover {
  83. cursor: not-allowed;
  84. border-color: #e4eaec; }
  85. .tokenfield.disabled .token:hover .close {
  86. cursor: not-allowed;
  87. opacity: .2; }
  88. .has-warning .tokenfield.focus {
  89. border-color: #e6e5e5;
  90. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white; }
  91. .has-error .tokenfield.focus {
  92. border-color: #e6e5e5;
  93. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white; }
  94. .has-success .tokenfield.focus {
  95. border-color: #e6e5e5;
  96. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white; }
  97. .tokenfield.input-sm, .input-group-sm .tokenfield {
  98. min-height: 30px;
  99. padding-bottom: 0; }
  100. .input-group-sm .token, .tokenfield.input-sm .token {
  101. height: 20px;
  102. margin-bottom: 4px; }
  103. .input-group-sm .token-input, .tokenfield.input-sm .token-input {
  104. height: 18px;
  105. margin-bottom: 5px; }
  106. .tokenfield.input-lg, .input-group-lg .tokenfield {
  107. min-height: 45px;
  108. padding-bottom: 4px; }
  109. .input-group-lg .token, .tokenfield.input-lg .token {
  110. height: 25px; }
  111. .input-group-lg .token-label, .tokenfield.input-lg .token-label {
  112. line-height: 23px; }
  113. .input-group-lg .token .close, .tokenfield.input-lg .token .close {
  114. line-height: 1.3em; }
  115. .input-group-lg .token-input, .tokenfield.input-lg .token-input {
  116. height: 23px;
  117. margin-bottom: 6px;
  118. line-height: 23px;
  119. vertical-align: top; }
  120. .input-group .tokenfield + .input-group-btn {
  121. height: 100%; }
  122. .input-group .tokenfield + .input-group-btn .btn {
  123. height: calc(100% + 2px);
  124. padding-top: 0;
  125. padding-bottom: 0; }
  126. .input-group .tokenfield .token-input {
  127. width: 100% !important; }
  128. .tokenfield.rtl {
  129. text-align: right;
  130. direction: rtl; }
  131. .tokenfield.rtl .token {
  132. margin: -1px 0 5px 5px; }
  133. .tokenfield.rtl .token .token-label {
  134. padding-right: 4px;
  135. padding-left: 0; }
  136. /* Tokenfield-specific Typeahead styling */
  137. .tokenfield .twitter-typeahead {
  138. float: none;
  139. width: auto; }
  140. .tokenfield .twitter-typeahead .tt-hint {
  141. height: 20px;
  142. padding: 0; }
  143. .tokenfield.input-sm .twitter-typeahead .tt-input, .tokenfield.input-sm .twitter-typeahead .tt-hint {
  144. height: 18px;
  145. font-size: 12px;
  146. line-height: 1.5; }
  147. .tokenfield.input-lg .twitter-typeahead .tt-input, .tokenfield.input-lg .twitter-typeahead .tt-hint {
  148. height: 23px;
  149. font-size: 18px;
  150. line-height: 1.33; }
  151. .tokenfield .twitter-typeahead .tt-suggestions {
  152. font-size: 14px; }