select2-bootstrap4.css 6.5 KB

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