select2-bootstrap4.css 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. .select2-container {
  2. display: block; }
  3. .select2-container *:focus {
  4. outline: 0; }
  5. .input-group .select2-container--bootstrap4 {
  6. -webkit-box-flex: 1;
  7. -ms-flex-positive: 1;
  8. flex-grow: 1; }
  9. .input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
  10. border-top-left-radius: 0;
  11. border-bottom-left-radius: 0; }
  12. .input-group > .select2-container--bootstrap4:not(:last-child) .select2-selection {
  13. border-top-right-radius: 0;
  14. border-bottom-right-radius: 0; }
  15. .select2-container--bootstrap4 .select2-selection {
  16. width: 100%;
  17. background-color: #fff;
  18. border: 1px solid #ced4da;
  19. border-radius: 0.25rem;
  20. -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  21. transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  22. transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  23. transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; }
  24. @media (prefers-reduced-motion: reduce) {
  25. .select2-container--bootstrap4 .select2-selection {
  26. -webkit-transition: none;
  27. transition: none; } }
  28. .select2-container--bootstrap4.select2-container--focus .select2-selection {
  29. border-color: #80bdff;
  30. -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  31. box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  32. .select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
  33. border-bottom: none;
  34. border-bottom-right-radius: 0;
  35. border-bottom-left-radius: 0; }
  36. .select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection {
  37. border-top-left-radius: 0;
  38. border-top-right-radius: 0; }
  39. .select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection {
  40. border-bottom-right-radius: 0;
  41. border-bottom-left-radius: 0; }
  42. .select2-container--bootstrap4.select2-container--disabled .select2-selection, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection {
  43. cursor: not-allowed;
  44. background-color: #e9ecef;
  45. border-color: #ced4da;
  46. -webkit-box-shadow: none;
  47. box-shadow: none; }
  48. .select2-container--bootstrap4.select2-container--disabled .select2-search__field, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field {
  49. background-color: transparent; }
  50. select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,
  51. form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection {
  52. border-color: #dc3545; }
  53. select.is-valid ~ .select2-container--bootstrap4 .select2-selection,
  54. form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection {
  55. border-color: #28a745; }
  56. .select2-container--bootstrap4 .select2-search {
  57. width: 100%; }
  58. .select2-container--bootstrap4 .select2-dropdown {
  59. border-color: #ced4da;
  60. border-radius: 0; }
  61. .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
  62. border-top: none;
  63. border-bottom-right-radius: 0.25rem;
  64. border-bottom-left-radius: 0.25rem; }
  65. .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
  66. border-top: 1px solid #ced4da;
  67. border-top-left-radius: 0.25rem;
  68. border-top-right-radius: 0.25rem; }
  69. .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"] {
  70. color: #212529;
  71. background-color: #f2f2f2; }
  72. .select2-container--bootstrap4 .select2-results__option--highlighted,
  73. .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
  74. color: #fff;
  75. background-color: #007bff; }
  76. .select2-container--bootstrap4 .select2-results__option[role="group"] {
  77. padding: 0; }
  78. .select2-container--bootstrap4 .select2-results__option[role="group"] .select2-results__options--nested .select2-results__option {
  79. padding-left: 1em; }
  80. .select2-container--bootstrap4 .select2-results__option {
  81. padding: 0.375rem 0.75rem; }
  82. .select2-container--bootstrap4 .select2-results > .select2-results__options {
  83. max-height: 15em;
  84. overflow-y: auto; }
  85. .select2-container--bootstrap4 .select2-results__group {
  86. display: list-item;
  87. padding: 6px;
  88. color: #6c757d; }
  89. .select2-container--bootstrap4 .select2-selection__clear {
  90. float: right;
  91. width: .9em;
  92. height: .9em;
  93. padding-left: .15em;
  94. margin-top: .7em;
  95. margin-right: .3em;
  96. line-height: .75em;
  97. color: #f8f9fa;
  98. background-color: #c8c8c8;
  99. border-radius: 100%; }
  100. .select2-container--bootstrap4 .select2-selection__clear:hover {
  101. background-color: #afafaf; }
  102. .select2-container--bootstrap4 .select2-selection--single {
  103. height: calc(1.5em + 0.75rem + 2px) !important; }
  104. .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  105. line-height: calc(1.5em + 0.75rem);
  106. color: #6c757d; }
  107. .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  108. position: absolute;
  109. top: 50%;
  110. right: 3px;
  111. width: 20px; }
  112. .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
  113. position: absolute;
  114. top: 60%;
  115. left: 50%;
  116. width: 0;
  117. height: 0;
  118. margin-top: -2px;
  119. margin-left: -4px;
  120. border-color: #343a40 transparent transparent transparent;
  121. border-style: solid;
  122. border-width: 5px 4px 0; }
  123. .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  124. padding-left: 0.75rem;
  125. line-height: calc(1.5em + 0.75rem);
  126. color: #495057; }
  127. .select2-search--dropdown .select2-search__field {
  128. padding: 0.375rem 0.75rem;
  129. border: 1px solid #ced4da;
  130. border-radius: 0.25rem; }
  131. .select2-results__message {
  132. color: #6c757d; }
  133. .select2-container--bootstrap4 .select2-selection--multiple {
  134. min-height: calc(1.5em + 0.75rem + 2px) !important; }
  135. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
  136. -webkit-box-sizing: border-box;
  137. box-sizing: border-box;
  138. width: 100%;
  139. padding: 0 0.375rem;
  140. margin: 0;
  141. list-style: none; }
  142. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  143. float: left;
  144. padding: 0;
  145. padding-right: 0.75rem;
  146. margin-top: calc(0.375rem - 2px);
  147. margin-right: 0.375rem;
  148. color: #495057;
  149. cursor: pointer;
  150. border: 1px solid #bdc6d0;
  151. border-radius: 0.2rem; }
  152. .select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
  153. color: #495057; }
  154. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice + .select2-search {
  155. width: 0; }
  156. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
  157. float: left;
  158. padding-right: 3px;
  159. padding-left: 3px;
  160. margin-right: 1px;
  161. margin-left: 3px;
  162. font-weight: 700;
  163. color: #bdc6d0; }
  164. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
  165. color: #343a40; }
  166. .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
  167. position: absolute !important;
  168. top: 0;
  169. right: .7em;
  170. float: none;
  171. margin-right: 0; }
  172. .select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
  173. padding: 0 5px;
  174. cursor: not-allowed; }
  175. .select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
  176. display: none; }