select2.scss 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642
  1. .select2-container {
  2. box-sizing: border-box;
  3. display: inline-block;
  4. margin: 0;
  5. position: relative;
  6. vertical-align: middle;
  7. }
  8. .select2-container .select2-selection--single {
  9. box-sizing: border-box;
  10. cursor: pointer;
  11. display: block;
  12. height: 28px;
  13. margin: 0 0 -4px;
  14. user-select: none;
  15. -webkit-user-select: none;
  16. }
  17. .select2-container .select2-selection--single .select2-selection__rendered {
  18. display: block;
  19. padding-left: 8px;
  20. padding-right: 20px;
  21. overflow: hidden;
  22. text-overflow: ellipsis;
  23. white-space: nowrap;
  24. }
  25. .select2-container .select2-selection--single .select2-selection__clear {
  26. position: relative;
  27. }
  28. .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  29. padding-right: 8px;
  30. padding-left: 20px;
  31. }
  32. .select2-container .select2-selection--multiple {
  33. box-sizing: border-box;
  34. cursor: pointer;
  35. display: block;
  36. min-height: 32px;
  37. user-select: none;
  38. -webkit-user-select: none;
  39. }
  40. .select2-container .select2-selection--multiple .select2-selection__rendered {
  41. display: inline-block;
  42. overflow: hidden;
  43. padding-left: 8px;
  44. text-overflow: ellipsis;
  45. white-space: nowrap;
  46. }
  47. .select2-container .select2-search--inline {
  48. float: left;
  49. padding: 0;
  50. }
  51. .select2-container .select2-search--inline .select2-search__field {
  52. box-sizing: border-box;
  53. border: none;
  54. font-size: 100%;
  55. margin: 0;
  56. padding: 0;
  57. }
  58. .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
  59. -webkit-appearance: none;
  60. }
  61. .select2-dropdown {
  62. background-color: white;
  63. border: 1px solid #aaa;
  64. border-radius: 4px;
  65. box-sizing: border-box;
  66. display: block;
  67. position: absolute;
  68. left: -100000px;
  69. width: 100%;
  70. z-index: 1051;
  71. }
  72. .select2-results {
  73. display: block;
  74. }
  75. .select2-results__options {
  76. list-style: none;
  77. margin: 0;
  78. padding: 0;
  79. }
  80. .select2-results__option {
  81. padding: 6px;
  82. user-select: none;
  83. -webkit-user-select: none;
  84. }
  85. .select2-results__option[data-selected],
  86. .select2-results__option[aria-selected] {
  87. cursor: pointer;
  88. }
  89. .select2-container--open .select2-dropdown {
  90. left: 0;
  91. }
  92. .select2-container--open .select2-dropdown--above {
  93. border-bottom: none;
  94. border-bottom-left-radius: 0;
  95. border-bottom-right-radius: 0;
  96. }
  97. .select2-container--open .select2-dropdown--below {
  98. border-top: none;
  99. border-top-left-radius: 0;
  100. border-top-right-radius: 0;
  101. }
  102. .select2-search--dropdown {
  103. display: block;
  104. padding: 4px;
  105. }
  106. .select2-search--dropdown .select2-search__field {
  107. padding: 4px;
  108. width: 100%;
  109. box-sizing: border-box;
  110. }
  111. .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
  112. -webkit-appearance: none;
  113. }
  114. .select2-search--dropdown.select2-search--hide {
  115. display: none;
  116. }
  117. .select2-close-mask {
  118. border: 0;
  119. margin: 0;
  120. padding: 0;
  121. display: block;
  122. position: fixed;
  123. left: 0;
  124. top: 0;
  125. min-height: 100%;
  126. min-width: 100%;
  127. height: auto;
  128. width: auto;
  129. opacity: 0;
  130. z-index: 99;
  131. background-color: #fff;
  132. filter: alpha(opacity=0);
  133. }
  134. .select2-hidden-accessible {
  135. border: 0 !important;
  136. clip: rect(0 0 0 0) !important;
  137. height: 1px !important;
  138. margin: -1px !important;
  139. overflow: hidden !important;
  140. padding: 0 !important;
  141. position: absolute !important;
  142. width: 1px !important;
  143. }
  144. .select2-container--default .select2-selection--single {
  145. background-color: #fff;
  146. border: 1px solid #aaa;
  147. border-radius: 4px;
  148. }
  149. .select2-container--default .select2-selection--single .select2-selection__rendered {
  150. color: #444;
  151. line-height: 28px;
  152. }
  153. .select2-container--default .select2-selection--single .select2-selection__clear {
  154. cursor: pointer;
  155. float: right;
  156. font-weight: bold;
  157. }
  158. .select2-container--default .select2-selection--single .select2-selection__placeholder {
  159. color: #999;
  160. }
  161. .select2-container--default .select2-selection--single .select2-selection__arrow {
  162. height: 26px;
  163. position: absolute;
  164. top: 1px;
  165. right: 1px;
  166. width: 20px;
  167. }
  168. .select2-container--default .select2-selection--single .select2-selection__arrow b {
  169. border-color: #888 transparent transparent transparent;
  170. border-style: solid;
  171. border-width: 5px 4px 0 4px;
  172. height: 0;
  173. left: 50%;
  174. margin-left: -4px;
  175. margin-top: -2px;
  176. position: absolute;
  177. top: 50%;
  178. width: 0;
  179. }
  180. .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
  181. float: left;
  182. }
  183. .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  184. left: 1px;
  185. right: auto;
  186. }
  187. .select2-container--default.select2-container--disabled .select2-selection--single {
  188. background-color: #eee;
  189. cursor: default;
  190. }
  191. .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
  192. display: none;
  193. }
  194. .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  195. border-color: transparent transparent #888 transparent;
  196. border-width: 0 4px 5px 4px;
  197. }
  198. .select2-container--default .select2-selection--multiple {
  199. background-color: white;
  200. border: 1px solid #aaa;
  201. border-radius: 4px;
  202. cursor: text;
  203. }
  204. .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  205. box-sizing: border-box;
  206. list-style: none;
  207. margin: 0;
  208. padding: 0 5px;
  209. width: 100%;
  210. }
  211. .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
  212. list-style: none;
  213. margin: 5px 5px 0 0;
  214. &:before {
  215. content: '';
  216. display: none;
  217. }
  218. }
  219. .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  220. color: #999;
  221. margin-top: 5px;
  222. float: left;
  223. }
  224. .select2-container--default .select2-selection--multiple .select2-selection__clear {
  225. cursor: pointer;
  226. float: right;
  227. font-weight: bold;
  228. margin-top: 5px;
  229. margin-right: 10px;
  230. }
  231. .select2-container--default .select2-selection--multiple .select2-selection__choice {
  232. background-color: #e4e4e4;
  233. border: 1px solid #aaa;
  234. border-radius: 4px;
  235. cursor: default;
  236. float: left;
  237. margin-right: 5px;
  238. margin-top: 5px;
  239. padding: 0 5px;
  240. }
  241. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  242. color: #999;
  243. cursor: pointer;
  244. display: inline-block;
  245. font-weight: bold;
  246. margin-right: 2px;
  247. }
  248. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  249. color: #333;
  250. }
  251. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
  252. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,
  253. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
  254. float: right;
  255. }
  256. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  257. margin-left: 5px;
  258. margin-right: auto;
  259. }
  260. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  261. margin-left: 2px;
  262. margin-right: auto;
  263. }
  264. .select2-container--default.select2-container--focus .select2-selection--multiple {
  265. border: solid black 1px;
  266. outline: 0;
  267. }
  268. .select2-container--default.select2-container--disabled .select2-selection--multiple {
  269. background-color: #eee;
  270. cursor: default;
  271. }
  272. .select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  273. display: none;
  274. }
  275. .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
  276. .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  277. border-top-left-radius: 0;
  278. border-top-right-radius: 0;
  279. }
  280. .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
  281. .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  282. border-bottom-left-radius: 0;
  283. border-bottom-right-radius: 0;
  284. }
  285. .select2-container--default .select2-search--dropdown .select2-search__field {
  286. border: 1px solid #aaa;
  287. }
  288. .select2-container--default .select2-search--inline .select2-search__field {
  289. background: transparent;
  290. border: none;
  291. outline: 0;
  292. box-shadow: none;
  293. -webkit-appearance: textfield;
  294. }
  295. .select2-container--default .select2-results>.select2-results__options {
  296. max-height: 200px;
  297. overflow-y: auto;
  298. }
  299. .select2-container--default .select2-results__option[role=group] {
  300. padding: 0;
  301. }
  302. .select2-container--default .select2-results__option[aria-disabled=true] {
  303. color: #999;
  304. }
  305. .select2-container--default .select2-results__option[data-selected=true],
  306. .select2-container--default .select2-results__option[aria-selected=true] {
  307. background-color: #ddd;
  308. }
  309. .select2-container--default .select2-results__option .select2-results__option {
  310. padding-left: 1em;
  311. }
  312. .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
  313. padding-left: 0;
  314. }
  315. .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
  316. margin-left: -1em;
  317. padding-left: 2em;
  318. }
  319. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  320. margin-left: -2em;
  321. padding-left: 3em;
  322. }
  323. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  324. margin-left: -3em;
  325. padding-left: 4em;
  326. }
  327. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  328. margin-left: -4em;
  329. padding-left: 5em;
  330. }
  331. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  332. margin-left: -5em;
  333. padding-left: 6em;
  334. }
  335. .select2-container--default .select2-results__option--highlighted[data-selected],
  336. .select2-container--default .select2-results__option--highlighted[aria-selected] {
  337. background-color: #0073aa;
  338. color: white;
  339. }
  340. .select2-container--default .select2-results__group {
  341. cursor: default;
  342. display: block;
  343. padding: 6px;
  344. }
  345. .select2-container--classic .select2-selection--single {
  346. background-color: #f7f7f7;
  347. border: 1px solid #aaa;
  348. border-radius: 4px;
  349. outline: 0;
  350. background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
  351. background-repeat: repeat-x;
  352. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
  353. }
  354. .select2-container--classic .select2-selection--single:focus {
  355. border: 1px solid #0073aa;
  356. }
  357. .select2-container--classic .select2-selection--single .select2-selection__rendered {
  358. color: #444;
  359. line-height: 28px;
  360. }
  361. .select2-container--classic .select2-selection--single .select2-selection__clear {
  362. cursor: pointer;
  363. float: right;
  364. font-weight: bold;
  365. margin-right: 10px;
  366. }
  367. .select2-container--classic .select2-selection--single .select2-selection__placeholder {
  368. color: #999;
  369. }
  370. .select2-container--classic .select2-selection--single .select2-selection__arrow {
  371. background-color: #ddd;
  372. border: none;
  373. border-left: 1px solid #aaa;
  374. border-top-right-radius: 4px;
  375. border-bottom-right-radius: 4px;
  376. height: 26px;
  377. position: absolute;
  378. top: 1px;
  379. right: 1px;
  380. width: 20px;
  381. background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
  382. background-repeat: repeat-x;
  383. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);
  384. }
  385. .select2-container--classic .select2-selection--single .select2-selection__arrow b {
  386. border-color: #888 transparent transparent transparent;
  387. border-style: solid;
  388. border-width: 5px 4px 0 4px;
  389. height: 0;
  390. left: 50%;
  391. margin-left: -4px;
  392. margin-top: -2px;
  393. position: absolute;
  394. top: 50%;
  395. width: 0;
  396. }
  397. .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
  398. float: left;
  399. }
  400. .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  401. border: none;
  402. border-right: 1px solid #aaa;
  403. border-radius: 0;
  404. border-top-left-radius: 4px;
  405. border-bottom-left-radius: 4px;
  406. left: 1px;
  407. right: auto;
  408. }
  409. .select2-container--classic.select2-container--open .select2-selection--single {
  410. border: 1px solid #0073aa;
  411. }
  412. .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
  413. background: transparent;
  414. border: none;
  415. }
  416. .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
  417. border-color: transparent transparent #888 transparent;
  418. border-width: 0 4px 5px 4px;
  419. }
  420. .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  421. border-top: none;
  422. border-top-left-radius: 0;
  423. border-top-right-radius: 0;
  424. background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
  425. background-repeat: repeat-x;
  426. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
  427. }
  428. .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  429. border-bottom: none;
  430. border-bottom-left-radius: 0;
  431. border-bottom-right-radius: 0;
  432. background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
  433. background-repeat: repeat-x;
  434. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);
  435. }
  436. .select2-container--classic .select2-selection--multiple {
  437. background-color: white;
  438. border: 1px solid #aaa;
  439. border-radius: 4px;
  440. cursor: text;
  441. outline: 0;
  442. }
  443. .select2-container--classic .select2-selection--multiple:focus {
  444. border: 1px solid #0073aa;
  445. }
  446. .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
  447. list-style: none;
  448. margin: 0;
  449. padding: 0 5px;
  450. }
  451. .select2-container--classic .select2-selection--multiple .select2-selection__clear {
  452. display: none;
  453. }
  454. .select2-container--classic .select2-selection--multiple .select2-selection__choice {
  455. background-color: #e4e4e4;
  456. border: 1px solid #aaa;
  457. border-radius: 4px;
  458. cursor: default;
  459. float: left;
  460. margin-right: 5px;
  461. margin-top: 5px;
  462. padding: 0 5px;
  463. }
  464. .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
  465. color: #888;
  466. cursor: pointer;
  467. display: inline-block;
  468. font-weight: bold;
  469. margin-right: 2px;
  470. }
  471. .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
  472. color: #555;
  473. }
  474. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  475. float: right;
  476. }
  477. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  478. margin-left: 5px;
  479. margin-right: auto;
  480. }
  481. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  482. margin-left: 2px;
  483. margin-right: auto;
  484. }
  485. .select2-container--classic.select2-container--open .select2-selection--multiple {
  486. border: 1px solid #0073aa;
  487. }
  488. .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  489. border-top: none;
  490. border-top-left-radius: 0;
  491. border-top-right-radius: 0;
  492. }
  493. .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  494. border-bottom: none;
  495. border-bottom-left-radius: 0;
  496. border-bottom-right-radius: 0;
  497. }
  498. .select2-container--classic .select2-search--dropdown .select2-search__field {
  499. border: 1px solid #aaa;
  500. outline: 0;
  501. }
  502. .select2-container--classic .select2-search--inline .select2-search__field {
  503. outline: 0;
  504. box-shadow: none;
  505. }
  506. .select2-container--classic .select2-dropdown {
  507. background-color: white;
  508. border: 1px solid transparent;
  509. }
  510. .select2-container--classic .select2-dropdown--above {
  511. border-bottom: none;
  512. }
  513. .select2-container--classic .select2-dropdown--below {
  514. border-top: none;
  515. }
  516. .select2-container--classic .select2-results>.select2-results__options {
  517. max-height: 200px;
  518. overflow-y: auto;
  519. }
  520. .select2-container--classic .select2-results__option[role=group] {
  521. padding: 0;
  522. }
  523. .select2-container--classic .select2-results__option[aria-disabled=true] {
  524. color: grey;
  525. }
  526. .select2-container--classic .select2-results__option--highlighted[data-selected],
  527. .select2-container--classic .select2-results__option--highlighted[aria-selected] {
  528. background-color: #3875d7;
  529. color: white;
  530. }
  531. .select2-container--classic .select2-results__group {
  532. cursor: default;
  533. display: block;
  534. padding: 6px;
  535. }
  536. .select2-container--classic.select2-container--open .select2-dropdown {
  537. border-color: #0073aa;
  538. }