select2-bootstrap.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. /*! Select2 Bootstrap 3 CSS v1.4.6 | MIT License | github.com/t0m/select2-bootstrap-css */
  2. /**
  3. * Reset Bootstrap 3 .form-control styles which - if applied to the
  4. * original <select>-element the Select2-plugin may be run against -
  5. * are copied to the .select2-container.
  6. *
  7. * 1. Overwrite .select2-container's original display:inline-block
  8. * with Bootstrap 3's default for .form-control, display:block;
  9. * courtesy of @juristr (@see https://github.com/fk/select2-bootstrap-css/pull/1)
  10. */
  11. .select2-container.form-control {
  12. background: transparent;
  13. box-shadow: none;
  14. border: none;
  15. display: block;
  16. /* 1 */
  17. margin: 0;
  18. padding: 0;
  19. }
  20. /**
  21. * Adjust Select2 inputs to fit Bootstrap 3 default .form-control appearance.
  22. */
  23. .select2-container .select2-choices .select2-search-field input,
  24. .select2-container .select2-choice,
  25. .select2-container .select2-choices {
  26. background: none;
  27. padding: 0;
  28. border-color: #cccccc;
  29. border-radius: 4px;
  30. color: #555555;
  31. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  32. background-color: white;
  33. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  34. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  35. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  36. }
  37. .select2-search input {
  38. border-color: #cccccc;
  39. border-radius: 4px;
  40. color: #555555;
  41. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  42. background-color: white;
  43. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  44. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  45. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  46. }
  47. .select2-container .select2-choices .select2-search-field input {
  48. -webkit-box-shadow: none;
  49. box-shadow: none;
  50. }
  51. /**
  52. * Adjust Select2 input heights to match the Bootstrap default.
  53. */
  54. .select2-container .select2-choice {
  55. height: 34px;
  56. line-height: 1.42857;
  57. }
  58. /**
  59. * Address Multi Select2's height which - depending on how many elements have been selected -
  60. * may grown higher than their initial size.
  61. */
  62. .select2-container.select2-container-multi.form-control {
  63. height: auto;
  64. }
  65. /**
  66. * Address Bootstrap 3 control sizing classes
  67. * @see http://getbootstrap.com/css/#forms-control-sizes
  68. */
  69. .select2-container.input-sm .select2-choice,
  70. .input-group-sm .select2-container .select2-choice {
  71. height: 30px;
  72. line-height: 1.5;
  73. border-radius: 3px;
  74. }
  75. .select2-container.input-lg .select2-choice,
  76. .input-group-lg .select2-container .select2-choice {
  77. height: 46px;
  78. line-height: 1.33333;
  79. border-radius: 6px;
  80. }
  81. .select2-container-multi .select2-choices .select2-search-field input {
  82. height: 32px;
  83. }
  84. .select2-container-multi.input-sm .select2-choices .select2-search-field input,
  85. .input-group-sm .select2-container-multi .select2-choices .select2-search-field input {
  86. height: 28px;
  87. }
  88. .select2-container-multi.input-lg .select2-choices .select2-search-field input,
  89. .input-group-lg .select2-container-multi .select2-choices .select2-search-field input {
  90. height: 44px;
  91. }
  92. /**
  93. * Adjust height and line-height for .select2-search-field amd multi-select Select2 widgets.
  94. *
  95. * 1. Class repetition to address missing .select2-chosen in Select2 < 3.3.2.
  96. */
  97. .select2-container-multi .select2-choices .select2-search-field input {
  98. margin: 0;
  99. }
  100. .select2-chosen,
  101. .select2-choice > span:first-child,
  102. .select2-container .select2-choices .select2-search-field input {
  103. padding: 6px 12px;
  104. }
  105. .input-sm .select2-chosen,
  106. .input-group-sm .select2-chosen,
  107. .input-sm .select2-choice > span:first-child,
  108. .input-group-sm .select2-choice > span:first-child,
  109. .input-sm .select2-choices .select2-search-field input,
  110. .input-group-sm .select2-choices .select2-search-field input {
  111. padding: 5px 10px;
  112. }
  113. .input-lg .select2-chosen,
  114. .input-group-lg .select2-chosen,
  115. .input-lg .select2-choice > span:first-child,
  116. .input-group-lg .select2-choice > span:first-child,
  117. .input-lg .select2-choices .select2-search-field input,
  118. .input-group-lg .select2-choices .select2-search-field input {
  119. padding: 10px 16px;
  120. }
  121. .select2-container-multi .select2-choices .select2-search-choice {
  122. margin-top: 5px;
  123. margin-bottom: 3px;
  124. }
  125. .select2-container-multi.input-sm .select2-choices .select2-search-choice,
  126. .input-group-sm .select2-container-multi .select2-choices .select2-search-choice {
  127. margin-top: 3px;
  128. margin-bottom: 2px;
  129. }
  130. .select2-container-multi.input-lg .select2-choices .select2-search-choice,
  131. .input-group-lg .select2-container-multi .select2-choices .select2-search-choice {
  132. line-height: 24px;
  133. }
  134. /**
  135. * Adjust the single Select2's dropdown arrow button appearance.
  136. *
  137. * 1. For Select2 v.3.3.2.
  138. */
  139. .select2-container .select2-choice .select2-arrow,
  140. .select2-container .select2-choice div {
  141. border-left: none;
  142. background: none;
  143. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  144. }
  145. .select2-dropdown-open .select2-choice .select2-arrow,
  146. .select2-dropdown-open .select2-choice div {
  147. border-left-color: transparent;
  148. background: none;
  149. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  150. }
  151. /**
  152. * Adjust the dropdown arrow button icon position for the single-select Select2 elements
  153. * to make it line up vertically now that we increased the height of .select2-container.
  154. *
  155. * 1. Class repetition to address missing .select2-chosen in Select2 v.3.3.2.
  156. */
  157. .select2-container .select2-choice .select2-arrow b,
  158. .select2-container .select2-choice div b {
  159. background-position: 0 3px;
  160. }
  161. .select2-dropdown-open .select2-choice .select2-arrow b,
  162. .select2-dropdown-open .select2-choice div b {
  163. background-position: -18px 3px;
  164. }
  165. .select2-container.input-sm .select2-choice .select2-arrow b,
  166. .input-group-sm .select2-container .select2-choice .select2-arrow b,
  167. .select2-container.input-sm .select2-choice div b,
  168. .input-group-sm .select2-container .select2-choice div b {
  169. background-position: 0 1px;
  170. }
  171. .select2-dropdown-open.input-sm .select2-choice .select2-arrow b,
  172. .input-group-sm .select2-dropdown-open .select2-choice .select2-arrow b,
  173. .select2-dropdown-open.input-sm .select2-choice div b,
  174. .input-group-sm .select2-dropdown-open .select2-choice div b {
  175. background-position: -18px 1px;
  176. }
  177. .select2-container.input-lg .select2-choice .select2-arrow b,
  178. .input-group-lg .select2-container .select2-choice .select2-arrow b,
  179. .select2-container.input-lg .select2-choice div b,
  180. .input-group-lg .select2-container .select2-choice div b {
  181. background-position: 0 9px;
  182. }
  183. .select2-dropdown-open.input-lg .select2-choice .select2-arrow b,
  184. .input-group-lg .select2-dropdown-open .select2-choice .select2-arrow b,
  185. .select2-dropdown-open.input-lg .select2-choice div b,
  186. .input-group-lg .select2-dropdown-open .select2-choice div b {
  187. background-position: -18px 9px;
  188. }
  189. /**
  190. * Address Bootstrap's validation states and change Select2's border colors and focus states.
  191. * Apply .has-warning, .has-danger or .has-succes to #select2-drop to match Bootstraps' colors.
  192. */
  193. .has-warning .select2-choice,
  194. .has-warning .select2-choices {
  195. border-color: #8a6d3b;
  196. }
  197. .has-warning .select2-container-active .select2-choice,
  198. .has-warning .select2-container-multi.select2-container-active .select2-choices {
  199. border-color: #66512c;
  200. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  201. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  202. }
  203. .has-warning.select2-drop-active {
  204. border-color: #66512c;
  205. }
  206. .has-warning.select2-drop-active.select2-drop.select2-drop-above {
  207. border-top-color: #66512c;
  208. }
  209. .has-error .select2-choice,
  210. .has-error .select2-choices {
  211. border-color: #a94442;
  212. }
  213. .has-error .select2-container-active .select2-choice,
  214. .has-error .select2-container-multi.select2-container-active .select2-choices {
  215. border-color: #843534;
  216. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  217. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  218. }
  219. .has-error.select2-drop-active {
  220. border-color: #843534;
  221. }
  222. .has-error.select2-drop-active.select2-drop.select2-drop-above {
  223. border-top-color: #843534;
  224. }
  225. .has-success .select2-choice,
  226. .has-success .select2-choices {
  227. border-color: #3c763d;
  228. }
  229. .has-success .select2-container-active .select2-choice,
  230. .has-success .select2-container-multi.select2-container-active .select2-choices {
  231. border-color: #2b542c;
  232. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  233. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  234. }
  235. .has-success.select2-drop-active {
  236. border-color: #2b542c;
  237. }
  238. .has-success.select2-drop-active.select2-drop.select2-drop-above {
  239. border-top-color: #2b542c;
  240. }
  241. /**
  242. * Make Select2's active-styles - applied to .select2-container when the widget receives focus -
  243. * fit Bootstrap 3's .form-element:focus appearance.
  244. */
  245. .select2-container-active .select2-choice,
  246. .select2-container-multi.select2-container-active .select2-choices {
  247. border-color: #66afe9;
  248. outline: none;
  249. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  250. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  251. -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  252. -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  253. transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  254. }
  255. .select2-drop-active {
  256. border-color: #66afe9;
  257. }
  258. .select2-drop-auto-width,
  259. .select2-drop.select2-drop-above.select2-drop-active {
  260. border-top-color: #66afe9;
  261. }
  262. /**
  263. * Select2 widgets in Bootstrap Input Groups
  264. *
  265. * When Select2 widgets are combined with other elements using Bootstrap 3's
  266. * "Input Group" component, we don't want specific edges of the Select2 container
  267. * to have a border-radius.
  268. *
  269. * In Bootstrap 2, input groups required a markup where these style adjustments
  270. * could be bound to a CSS-class identifying if the additional elements are appended,
  271. * prepended or both.
  272. *
  273. * Bootstrap 3 doesn't rely on these classes anymore, so we have to use our own.
  274. * Use .select2-bootstrap-prepend and .select2-bootstrap-append on a Bootstrap 3 .input-group
  275. * to let the contained Select2 widget know which edges should not be rounded as they are
  276. * directly followed by another element.
  277. *
  278. * @see http://getbootstrap.com/components/#input-groups
  279. */
  280. .input-group.select2-bootstrap-prepend [class^="select2-choice"] {
  281. border-bottom-left-radius: 0 !important;
  282. border-top-left-radius: 0 !important;
  283. }
  284. .input-group.select2-bootstrap-append [class^="select2-choice"] {
  285. border-bottom-right-radius: 0 !important;
  286. border-top-right-radius: 0 !important;
  287. }
  288. .select2-dropdown-open [class^="select2-choice"] {
  289. border-bottom-right-radius: 0 !important;
  290. border-bottom-left-radius: 0 !important;
  291. }
  292. .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  293. border-top-right-radius: 0 !important;
  294. border-top-left-radius: 0 !important;
  295. border-bottom-right-radius: 4px !important;
  296. border-bottom-left-radius: 4px !important;
  297. background: white;
  298. filter: none;
  299. }
  300. .input-group.select2-bootstrap-prepend .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  301. border-bottom-left-radius: 0 !important;
  302. border-top-left-radius: 0 !important;
  303. }
  304. .input-group.select2-bootstrap-append .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  305. border-bottom-right-radius: 0 !important;
  306. border-top-right-radius: 0 !important;
  307. }
  308. .input-group.input-group-sm.select2-bootstrap-prepend .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  309. border-bottom-right-radius: 3px !important;
  310. }
  311. .input-group.input-group-lg.select2-bootstrap-prepend .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  312. border-bottom-right-radius: 6px !important;
  313. }
  314. .input-group.input-group-sm.select2-bootstrap-append .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  315. border-bottom-left-radius: 3px !important;
  316. }
  317. .input-group.input-group-lg.select2-bootstrap-append .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  318. border-bottom-left-radius: 6px !important;
  319. }
  320. /**
  321. * Adjust Select2's choices hover and selected styles to match Bootstrap 3's default dropdown styles.
  322. */
  323. .select2-results .select2-highlighted {
  324. color: white;
  325. background-color: #337ab7;
  326. }
  327. /**
  328. * Adjust alignment of Bootstrap 3 buttons in Bootstrap 3 Input Groups to address
  329. * Multi Select2's height which - depending on how many elements have been selected -
  330. * may grown higher than their initial size.
  331. */
  332. .select2-bootstrap-append .select2-container-multiple,
  333. .select2-bootstrap-append .input-group-btn,
  334. .select2-bootstrap-append .input-group-btn .btn,
  335. .select2-bootstrap-prepend .select2-container-multiple,
  336. .select2-bootstrap-prepend .input-group-btn,
  337. .select2-bootstrap-prepend .input-group-btn .btn {
  338. vertical-align: top;
  339. }
  340. /**
  341. * Make Multi Select2's choices match Bootstrap 3's default button styles.
  342. */
  343. .select2-container-multi .select2-choices .select2-search-choice {
  344. color: #555555;
  345. background: white;
  346. border-color: #cccccc;
  347. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  348. -webkit-box-shadow: none;
  349. box-shadow: none;
  350. }
  351. .select2-container-multi .select2-choices .select2-search-choice-focus {
  352. background: #ebebeb;
  353. border-color: #adadad;
  354. color: #333333;
  355. -webkit-box-shadow: none;
  356. box-shadow: none;
  357. }
  358. /**
  359. * Address Multi Select2's choice close-button vertical alignment.
  360. */
  361. .select2-search-choice-close {
  362. margin-top: -7px;
  363. top: 50%;
  364. }
  365. /**
  366. * Adjust the single Select2's clear button position (used to reset the select box
  367. * back to the placeholder value and visible once a selection is made
  368. * activated by Select2's "allowClear" option).
  369. */
  370. .select2-container .select2-choice abbr {
  371. top: 50%;
  372. }
  373. /**
  374. * Adjust "no results" and "selection limit" messages to make use
  375. * of Bootstrap 3's default "Alert" style.
  376. *
  377. * @see http://getbootstrap.com/components/#alerts-default
  378. */
  379. .select2-results .select2-no-results,
  380. .select2-results .select2-searching,
  381. .select2-results .select2-selection-limit {
  382. background-color: #fcf8e3;
  383. color: #8a6d3b;
  384. }
  385. /**
  386. * Address disabled Select2 styles.
  387. *
  388. * 1. For Select2 v.3.3.2.
  389. * 2. Revert border-left:0 inherited from Select2's CSS to prevent the arrow
  390. * from jumping when switching from disabled to enabled state and vice versa.
  391. */
  392. .select2-container.select2-container-disabled .select2-choice,
  393. .select2-container.select2-container-disabled .select2-choices {
  394. cursor: not-allowed;
  395. background-color: #eeeeee;
  396. border-color: #cccccc;
  397. }
  398. .select2-container.select2-container-disabled .select2-choice .select2-arrow,
  399. .select2-container.select2-container-disabled .select2-choice div,
  400. .select2-container.select2-container-disabled .select2-choices .select2-arrow,
  401. .select2-container.select2-container-disabled .select2-choices div {
  402. background-color: transparent;
  403. border-left: 1px solid transparent;
  404. /* 2 */
  405. }
  406. /**
  407. * Address Select2's loading indicator position - which should not stick
  408. * to the right edge of Select2's search input.
  409. *
  410. * 1. in .select2-search input
  411. * 2. in Multi Select2's .select2-search-field input
  412. * 3. in the status-message of infinite-scroll with remote data (@see http://ivaynberg.github.io/select2/#infinite)
  413. *
  414. * These styles alter Select2's default background-position of 100%
  415. * and supply the new background-position syntax to browsers which support it:
  416. *
  417. * 1. Android, Safari < 6/Mobile, IE<9: change to a relative background-position of 99%
  418. * 2. Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+: use the new CSS3-background-position syntax
  419. *
  420. * @see http://www.w3.org/TR/css3-background/#background-position
  421. *
  422. * @todo Since both Select2 and Bootstrap 3 only support IE8 and above,
  423. * we could use the :after-pseudo-element to display the loading indicator.
  424. * Alternatively, we could supply an altered loading indicator image which already
  425. * contains an offset to the right.
  426. */
  427. .select2-search input.select2-active,
  428. .select2-container-multi .select2-choices .select2-search-field input.select2-active,
  429. .select2-more-results.select2-active {
  430. background-position: 99%;
  431. /* 4 */
  432. background-position: right 4px center;
  433. /* 5 */
  434. }
  435. /**
  436. * To support Select2 pre v3.4.2 in combination with Bootstrap v3.2.0,
  437. * ensure that .select2-offscreen width, height and position can not be overwritten.
  438. *
  439. * This adresses changes in Bootstrap somewhere after the initial v3.0.0 which -
  440. * in combination with Select2's pre-v3.4.2 CSS missing the "!important" after
  441. * the following rules - allow Bootstrap to overwrite the latter, which results in
  442. * the original <select> element Select2 is replacing not be properly being hidden
  443. * when used in a "Bootstrap Input Group with Addon".
  444. **/
  445. .select2-offscreen,
  446. .select2-offscreen:focus {
  447. width: 1px !important;
  448. height: 1px !important;
  449. position: absolute !important;
  450. }