Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

select2-bootstrap4.css 7.6KB

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