vue-treeselect.css 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954
  1. /*!
  2. * vue-treeselect v0.4.0 | (c) 2017-2019 Riophae Lee
  3. * Released under the MIT License.
  4. * https://vue-treeselect.js.org/
  5. */
  6. /**
  7. * Dependencies
  8. */
  9. /**
  10. * Variables
  11. */
  12. /**
  13. * Mixins
  14. */
  15. /**
  16. * Helpers
  17. */
  18. .vue-treeselect-helper-hide {
  19. display: none;
  20. }
  21. .vue-treeselect-helper-zoom-effect-off {
  22. -ms-transform: none !important;
  23. transform: none !important;
  24. }
  25. /**
  26. * Animations
  27. */
  28. @keyframes vue-treeselect-animation-fade-in {
  29. 0% {
  30. opacity: 0;
  31. }
  32. }
  33. @keyframes vue-treeselect-animation-bounce {
  34. 0%,
  35. 100% {
  36. transform: scale(0);
  37. }
  38. 50% {
  39. transform: scale(1);
  40. }
  41. }
  42. @keyframes vue-treeselect-animation-rotate {
  43. 100% {
  44. transform: rotate(360deg);
  45. }
  46. }
  47. /**
  48. * Transitions
  49. */
  50. .vue-treeselect__multi-value-item--transition-enter-active,
  51. .vue-treeselect__multi-value-item--transition-leave-active {
  52. transition-duration: 200ms;
  53. transition-property: transform, opacity;
  54. }
  55. .vue-treeselect__multi-value-item--transition-enter-active {
  56. transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  57. }
  58. .vue-treeselect__multi-value-item--transition-leave-active {
  59. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  60. position: absolute;
  61. }
  62. .vue-treeselect__multi-value-item--transition-enter,
  63. .vue-treeselect__multi-value-item--transition-leave-to {
  64. -ms-transform: scale(0.7);
  65. transform: scale(0.7);
  66. opacity: 0;
  67. }
  68. .vue-treeselect__multi-value-item--transition-move {
  69. transition: 200ms transform cubic-bezier(0.165, 0.84, 0.44, 1);
  70. }
  71. /**
  72. * Namespace
  73. */
  74. .vue-treeselect {
  75. position: relative;
  76. text-align: left;
  77. }
  78. [dir="rtl"] .vue-treeselect {
  79. text-align: right;
  80. }
  81. .vue-treeselect div,
  82. .vue-treeselect span {
  83. box-sizing: border-box;
  84. }
  85. .vue-treeselect svg {
  86. fill: currentColor;
  87. }
  88. /**
  89. * Control
  90. */
  91. .vue-treeselect__control {
  92. padding-left: 5px;
  93. padding-right: 5px;
  94. display: table;
  95. table-layout: fixed;
  96. width: 100%;
  97. height: 36px;
  98. border: 1px solid #ddd;
  99. border-radius: 5px;
  100. background: #fff;
  101. transition-duration: 200ms;
  102. transition-property: border-color, box-shadow, width, height, background-color, opacity;
  103. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  104. }
  105. .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover {
  106. border-color: #cfcfcf;
  107. }
  108. .vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control {
  109. border-color: #039be5;
  110. box-shadow: 0 0 0 3px rgba(3, 155, 229, 0.1);
  111. }
  112. .vue-treeselect--disabled .vue-treeselect__control {
  113. background-color: #f9f9f9;
  114. }
  115. .vue-treeselect--open .vue-treeselect__control {
  116. border-color: #cfcfcf;
  117. }
  118. .vue-treeselect--open.vue-treeselect--open-below .vue-treeselect__control {
  119. border-bottom-left-radius: 0;
  120. border-bottom-right-radius: 0;
  121. }
  122. .vue-treeselect--open.vue-treeselect--open-above .vue-treeselect__control {
  123. border-top-left-radius: 0;
  124. border-top-right-radius: 0;
  125. }
  126. .vue-treeselect__value-container,
  127. .vue-treeselect__multi-value {
  128. width: 100%;
  129. vertical-align: middle;
  130. }
  131. .vue-treeselect__value-container {
  132. display: table-cell;
  133. position: relative;
  134. }
  135. .vue-treeselect--searchable:not(.vue-treeselect--disabled) .vue-treeselect__value-container {
  136. cursor: text;
  137. }
  138. .vue-treeselect__multi-value {
  139. display: inline-block;
  140. }
  141. .vue-treeselect--has-value .vue-treeselect__multi-value {
  142. margin-bottom: 5px;
  143. }
  144. .vue-treeselect__placeholder,
  145. .vue-treeselect__single-value {
  146. overflow: hidden;
  147. text-overflow: ellipsis;
  148. white-space: nowrap;
  149. padding-left: 5px;
  150. padding-right: 5px;
  151. position: absolute;
  152. top: 0;
  153. right: 0;
  154. bottom: 0;
  155. left: 0;
  156. line-height: 34px;
  157. -webkit-user-select: none;
  158. -moz-user-select: none;
  159. -ms-user-select: none;
  160. user-select: none;
  161. pointer-events: none;
  162. }
  163. .vue-treeselect__placeholder {
  164. color: #bdbdbd;
  165. }
  166. .vue-treeselect__single-value {
  167. color: #333;
  168. }
  169. .vue-treeselect--focused.vue-treeselect--searchable .vue-treeselect__single-value {
  170. color: #bdbdbd;
  171. }
  172. .vue-treeselect--disabled .vue-treeselect__single-value {
  173. position: static;
  174. }
  175. .vue-treeselect__multi-value-item-container {
  176. display: inline-block;
  177. padding-top: 5px;
  178. padding-right: 5px;
  179. vertical-align: top;
  180. }
  181. [dir="rtl"] .vue-treeselect__multi-value-item-container {
  182. padding-right: 0;
  183. padding-left: 5px;
  184. }
  185. .vue-treeselect__multi-value-item {
  186. cursor: pointer;
  187. display: inline-table;
  188. background: #e3f2fd;
  189. padding: 2px 0;
  190. border: 1px solid transparent;
  191. border-radius: 2px;
  192. color: #039be5;
  193. font-size: 12px;
  194. vertical-align: top;
  195. }
  196. .vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-disabled):hover .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-new) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-new):hover {
  197. cursor: pointer;
  198. background: #e3f2fd;
  199. color: #039be5;
  200. }
  201. .vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-disabled {
  202. cursor: default;
  203. background: #f5f5f5;
  204. color: #757575;
  205. }
  206. .vue-treeselect--disabled .vue-treeselect__multi-value-item {
  207. cursor: default;
  208. background: #fff;
  209. border-color: #e5e5e5;
  210. color: #555;
  211. }
  212. .vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-new {
  213. background: #e8f5e9;
  214. }
  215. .vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-new:hover {
  216. background: #e8f5e9;
  217. }
  218. .vue-treeselect__value-remove,
  219. .vue-treeselect__multi-value-label {
  220. display: table-cell;
  221. padding: 0 5px;
  222. vertical-align: middle;
  223. }
  224. .vue-treeselect__value-remove {
  225. color: #039be5;
  226. padding-left: 5px;
  227. border-left: 1px solid #fff;
  228. line-height: 0;
  229. }
  230. [dir="rtl"] .vue-treeselect__value-remove {
  231. border-left: 0 none;
  232. border-right: 1px solid #fff;
  233. }
  234. .vue-treeselect__multi-value-item:hover .vue-treeselect__value-remove {
  235. color: #e53935;
  236. }
  237. .vue-treeselect--disabled .vue-treeselect__value-remove,
  238. .vue-treeselect__multi-value-item-disabled .vue-treeselect__value-remove {
  239. display: none;
  240. }
  241. .vue-treeselect__value-remove > svg {
  242. width: 6px;
  243. height: 6px;
  244. }
  245. .vue-treeselect__multi-value-label {
  246. padding-right: 5px;
  247. white-space: pre-line;
  248. -webkit-user-select: none;
  249. -moz-user-select: none;
  250. -ms-user-select: none;
  251. user-select: none;
  252. }
  253. .vue-treeselect__limit-tip {
  254. display: inline-block;
  255. padding-top: 5px;
  256. padding-right: 5px;
  257. vertical-align: top;
  258. }
  259. [dir="rtl"] .vue-treeselect__limit-tip {
  260. padding-right: 0;
  261. padding-left: 5px;
  262. }
  263. .vue-treeselect__limit-tip-text {
  264. cursor: default;
  265. display: block;
  266. margin: 2px 0;
  267. padding: 1px 0;
  268. color: #bdbdbd;
  269. font-size: 12px;
  270. font-weight: 600;
  271. }
  272. .vue-treeselect__input-container {
  273. display: block;
  274. max-width: 100%;
  275. outline: none;
  276. }
  277. .vue-treeselect--single .vue-treeselect__input-container {
  278. font-size: inherit;
  279. height: 100%;
  280. }
  281. .vue-treeselect--multi .vue-treeselect__input-container {
  282. display: inline-block;
  283. font-size: 12px;
  284. vertical-align: top;
  285. }
  286. .vue-treeselect--searchable .vue-treeselect__input-container {
  287. padding-left: 5px;
  288. padding-right: 5px;
  289. }
  290. .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
  291. padding-top: 5px;
  292. padding-left: 0;
  293. }
  294. [dir="rtl"] .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
  295. padding-left: 5px;
  296. padding-right: 0;
  297. }
  298. .vue-treeselect--disabled .vue-treeselect__input-container {
  299. display: none;
  300. }
  301. .vue-treeselect__input,
  302. .vue-treeselect__sizer {
  303. margin: 0;
  304. line-height: inherit;
  305. font-family: inherit;
  306. font-size: inherit;
  307. }
  308. .vue-treeselect__input {
  309. max-width: 100%;
  310. margin: 0;
  311. padding: 0;
  312. border: 0;
  313. outline: none;
  314. box-sizing: content-box;
  315. box-shadow: none;
  316. background: none transparent;
  317. line-height: 1;
  318. vertical-align: middle;
  319. }
  320. .vue-treeselect__input::-ms-clear {
  321. display: none;
  322. }
  323. .vue-treeselect--single .vue-treeselect__input {
  324. width: 100%;
  325. height: 100%;
  326. }
  327. .vue-treeselect--multi .vue-treeselect__input {
  328. padding-top: 3px;
  329. padding-bottom: 3px;
  330. }
  331. .vue-treeselect--has-value .vue-treeselect__input {
  332. line-height: inherit;
  333. vertical-align: top;
  334. }
  335. .vue-treeselect__sizer {
  336. position: absolute;
  337. top: 0;
  338. left: 0;
  339. visibility: hidden;
  340. height: 0;
  341. overflow: scroll;
  342. white-space: pre;
  343. }
  344. .vue-treeselect__x-container {
  345. display: table-cell;
  346. vertical-align: middle;
  347. width: 20px;
  348. text-align: center;
  349. line-height: 0;
  350. cursor: pointer;
  351. color: #ccc;
  352. animation: 200ms vue-treeselect-animation-fade-in cubic-bezier(0.075, 0.82, 0.165, 1);
  353. }
  354. .vue-treeselect__x-container:hover {
  355. color: #e53935;
  356. }
  357. .vue-treeselect__x {
  358. width: 8px;
  359. height: 8px;
  360. }
  361. .vue-treeselect__control-arrow-container {
  362. display: table-cell;
  363. vertical-align: middle;
  364. width: 20px;
  365. text-align: center;
  366. line-height: 0;
  367. cursor: pointer;
  368. }
  369. .vue-treeselect--disabled .vue-treeselect__control-arrow-container {
  370. cursor: default;
  371. }
  372. .vue-treeselect__control-arrow {
  373. width: 9px;
  374. height: 9px;
  375. color: #ccc;
  376. }
  377. .vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__control-arrow-container:hover .vue-treeselect__control-arrow {
  378. color: #616161;
  379. }
  380. .vue-treeselect--disabled .vue-treeselect__control-arrow {
  381. opacity: 0.35;
  382. }
  383. .vue-treeselect__control-arrow--rotated {
  384. -ms-transform: rotate(180deg);
  385. transform: rotateZ(180deg);
  386. }
  387. /**
  388. * Menu
  389. */
  390. .vue-treeselect__menu-container {
  391. position: absolute;
  392. left: 0;
  393. width: 100%;
  394. overflow: visible;
  395. transition: 0s;
  396. }
  397. .vue-treeselect--open-below:not(.vue-treeselect--append-to-body) .vue-treeselect__menu-container {
  398. top: 100%;
  399. }
  400. .vue-treeselect--open-above:not(.vue-treeselect--append-to-body) .vue-treeselect__menu-container {
  401. bottom: 100%;
  402. }
  403. .vue-treeselect__menu {
  404. cursor: default;
  405. padding-top: 5px;
  406. padding-bottom: 5px;
  407. display: block;
  408. position: absolute;
  409. overflow-x: hidden;
  410. overflow-y: auto;
  411. width: auto;
  412. border: 1px solid #cfcfcf;
  413. background: #fff;
  414. line-height: 180%;
  415. -webkit-overflow-scrolling: touch;
  416. }
  417. .vue-treeselect--open-below .vue-treeselect__menu {
  418. border-bottom-left-radius: 5px;
  419. border-bottom-right-radius: 5px;
  420. top: 0;
  421. margin-top: -1px;
  422. border-top-color: #f2f2f2;
  423. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  424. }
  425. .vue-treeselect--open-above .vue-treeselect__menu {
  426. border-top-left-radius: 5px;
  427. border-top-right-radius: 5px;
  428. bottom: 0;
  429. margin-bottom: -1px;
  430. border-bottom-color: #f2f2f2;
  431. }
  432. .vue-treeselect__indent-level-0 .vue-treeselect__option {
  433. padding-left: 5px;
  434. }
  435. [dir="rtl"] .vue-treeselect__indent-level-0 .vue-treeselect__option {
  436. padding-left: 5px;
  437. padding-right: 5px;
  438. }
  439. .vue-treeselect__indent-level-0 .vue-treeselect__tip {
  440. padding-left: 25px;
  441. }
  442. [dir="rtl"] .vue-treeselect__indent-level-0 .vue-treeselect__tip {
  443. padding-left: 5px;
  444. padding-right: 25px;
  445. }
  446. .vue-treeselect__indent-level-1 .vue-treeselect__option {
  447. padding-left: 25px;
  448. }
  449. [dir="rtl"] .vue-treeselect__indent-level-1 .vue-treeselect__option {
  450. padding-left: 5px;
  451. padding-right: 25px;
  452. }
  453. .vue-treeselect__indent-level-1 .vue-treeselect__tip {
  454. padding-left: 45px;
  455. }
  456. [dir="rtl"] .vue-treeselect__indent-level-1 .vue-treeselect__tip {
  457. padding-left: 5px;
  458. padding-right: 45px;
  459. }
  460. .vue-treeselect__indent-level-2 .vue-treeselect__option {
  461. padding-left: 45px;
  462. }
  463. [dir="rtl"] .vue-treeselect__indent-level-2 .vue-treeselect__option {
  464. padding-left: 5px;
  465. padding-right: 45px;
  466. }
  467. .vue-treeselect__indent-level-2 .vue-treeselect__tip {
  468. padding-left: 65px;
  469. }
  470. [dir="rtl"] .vue-treeselect__indent-level-2 .vue-treeselect__tip {
  471. padding-left: 5px;
  472. padding-right: 65px;
  473. }
  474. .vue-treeselect__indent-level-3 .vue-treeselect__option {
  475. padding-left: 65px;
  476. }
  477. [dir="rtl"] .vue-treeselect__indent-level-3 .vue-treeselect__option {
  478. padding-left: 5px;
  479. padding-right: 65px;
  480. }
  481. .vue-treeselect__indent-level-3 .vue-treeselect__tip {
  482. padding-left: 85px;
  483. }
  484. [dir="rtl"] .vue-treeselect__indent-level-3 .vue-treeselect__tip {
  485. padding-left: 5px;
  486. padding-right: 85px;
  487. }
  488. .vue-treeselect__indent-level-4 .vue-treeselect__option {
  489. padding-left: 85px;
  490. }
  491. [dir="rtl"] .vue-treeselect__indent-level-4 .vue-treeselect__option {
  492. padding-left: 5px;
  493. padding-right: 85px;
  494. }
  495. .vue-treeselect__indent-level-4 .vue-treeselect__tip {
  496. padding-left: 105px;
  497. }
  498. [dir="rtl"] .vue-treeselect__indent-level-4 .vue-treeselect__tip {
  499. padding-left: 5px;
  500. padding-right: 105px;
  501. }
  502. .vue-treeselect__indent-level-5 .vue-treeselect__option {
  503. padding-left: 105px;
  504. }
  505. [dir="rtl"] .vue-treeselect__indent-level-5 .vue-treeselect__option {
  506. padding-left: 5px;
  507. padding-right: 105px;
  508. }
  509. .vue-treeselect__indent-level-5 .vue-treeselect__tip {
  510. padding-left: 125px;
  511. }
  512. [dir="rtl"] .vue-treeselect__indent-level-5 .vue-treeselect__tip {
  513. padding-left: 5px;
  514. padding-right: 125px;
  515. }
  516. .vue-treeselect__indent-level-6 .vue-treeselect__option {
  517. padding-left: 125px;
  518. }
  519. [dir="rtl"] .vue-treeselect__indent-level-6 .vue-treeselect__option {
  520. padding-left: 5px;
  521. padding-right: 125px;
  522. }
  523. .vue-treeselect__indent-level-6 .vue-treeselect__tip {
  524. padding-left: 145px;
  525. }
  526. [dir="rtl"] .vue-treeselect__indent-level-6 .vue-treeselect__tip {
  527. padding-left: 5px;
  528. padding-right: 145px;
  529. }
  530. .vue-treeselect__indent-level-7 .vue-treeselect__option {
  531. padding-left: 145px;
  532. }
  533. [dir="rtl"] .vue-treeselect__indent-level-7 .vue-treeselect__option {
  534. padding-left: 5px;
  535. padding-right: 145px;
  536. }
  537. .vue-treeselect__indent-level-7 .vue-treeselect__tip {
  538. padding-left: 165px;
  539. }
  540. [dir="rtl"] .vue-treeselect__indent-level-7 .vue-treeselect__tip {
  541. padding-left: 5px;
  542. padding-right: 165px;
  543. }
  544. .vue-treeselect__indent-level-8 .vue-treeselect__option {
  545. padding-left: 165px;
  546. }
  547. [dir="rtl"] .vue-treeselect__indent-level-8 .vue-treeselect__option {
  548. padding-left: 5px;
  549. padding-right: 165px;
  550. }
  551. .vue-treeselect__indent-level-8 .vue-treeselect__tip {
  552. padding-left: 185px;
  553. }
  554. [dir="rtl"] .vue-treeselect__indent-level-8 .vue-treeselect__tip {
  555. padding-left: 5px;
  556. padding-right: 185px;
  557. }
  558. .vue-treeselect__option {
  559. padding-left: 5px;
  560. padding-right: 5px;
  561. display: table;
  562. table-layout: fixed;
  563. width: 100%;
  564. }
  565. .vue-treeselect__option--highlight {
  566. background: #f5f5f5;
  567. }
  568. .vue-treeselect--single .vue-treeselect__option--selected {
  569. background: #e3f2fd;
  570. font-weight: 600;
  571. }
  572. .vue-treeselect--single .vue-treeselect__option--selected:hover {
  573. background: #e3f2fd;
  574. }
  575. .vue-treeselect__option--hide {
  576. display: none;
  577. }
  578. .vue-treeselect__option-arrow-container,
  579. .vue-treeselect__option-arrow-placeholder {
  580. display: table-cell;
  581. vertical-align: middle;
  582. width: 20px;
  583. text-align: center;
  584. line-height: 0;
  585. }
  586. .vue-treeselect__option-arrow-container {
  587. cursor: pointer;
  588. }
  589. .vue-treeselect__option-arrow {
  590. display: inline-block;
  591. width: 9px;
  592. height: 9px;
  593. color: #ccc;
  594. vertical-align: middle;
  595. transition: 200ms transform cubic-bezier(0.19, 1, 0.22, 1);
  596. -ms-transform: rotate(-90deg);
  597. transform: rotateZ(-90deg);
  598. }
  599. [dir="rtl"] .vue-treeselect__option-arrow {
  600. -ms-transform: rotate(90deg);
  601. transform: rotateZ(90deg);
  602. }
  603. .vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow,
  604. .vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover .vue-treeselect__option-arrow {
  605. color: #616161;
  606. }
  607. .vue-treeselect__option-arrow--rotated {
  608. -ms-transform: rotate(0);
  609. transform: rotateZ(0);
  610. }
  611. [dir="rtl"] .vue-treeselect__option-arrow--rotated {
  612. -ms-transform: rotate(0);
  613. transform: rotateZ(0);
  614. }
  615. .vue-treeselect__option-arrow--rotated.vue-treeselect__option-arrow--prepare-enter {
  616. -ms-transform: rotate(-90deg) !important;
  617. transform: rotateZ(-90deg) !important;
  618. }
  619. [dir="rtl"] .vue-treeselect__option-arrow--rotated.vue-treeselect__option-arrow--prepare-enter {
  620. -ms-transform: rotate(90deg) !important;
  621. transform: rotateZ(90deg) !important;
  622. }
  623. .vue-treeselect__label-container {
  624. display: table-cell;
  625. vertical-align: middle;
  626. cursor: pointer;
  627. display: table;
  628. width: 100%;
  629. table-layout: fixed;
  630. color: inherit;
  631. }
  632. .vue-treeselect__option--disabled .vue-treeselect__label-container {
  633. cursor: not-allowed;
  634. color: rgba(0, 0, 0, 0.25);
  635. }
  636. .vue-treeselect__checkbox-container {
  637. display: table-cell;
  638. width: 20px;
  639. min-width: 20px;
  640. height: 100%;
  641. text-align: center;
  642. vertical-align: middle;
  643. }
  644. .vue-treeselect__checkbox {
  645. display: block;
  646. margin: auto;
  647. width: 12px;
  648. height: 12px;
  649. border-width: 1px;
  650. border-style: solid;
  651. border-radius: 2px;
  652. position: relative;
  653. transition: 200ms all cubic-bezier(0.075, 0.82, 0.165, 1);
  654. }
  655. .vue-treeselect__check-mark,
  656. .vue-treeselect__minus-mark {
  657. display: block;
  658. position: absolute;
  659. left: 1px;
  660. top: 1px;
  661. background-repeat: no-repeat;
  662. opacity: 0;
  663. transition: 200ms all ease;
  664. }
  665. .vue-treeselect__minus-mark {
  666. width: 8px;
  667. height: 8px;
  668. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAuLMp9oYAAAAPSURBVAjXY4CDrJUgBAMAGaECJ9dz3BAAAAAASUVORK5CYII=);
  669. background-size: 8px 8px;
  670. }
  671. @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  672. .vue-treeselect__minus-mark {
  673. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==);
  674. }
  675. }
  676. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  677. .vue-treeselect__minus-mark {
  678. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==);
  679. }
  680. }
  681. @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  682. .vue-treeselect__minus-mark {
  683. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMAy2EFIuWxUgAAACRJREFUGNNjGBBgJOICBY7KDCoucODEAJSAS6FwUJShGjAQAADBPRGrK2/FhgAAAABJRU5ErkJggg==);
  684. }
  685. }
  686. .vue-treeselect__checkbox--indeterminate > .vue-treeselect__minus-mark {
  687. opacity: 1;
  688. }
  689. .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
  690. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAACVBMVEUAAADi4uLh4eHOxeSRAAAAAnRSTlMAuLMp9oYAAAAPSURBVAjXY4CDrJUgBAMAGaECJ9dz3BAAAAAASUVORK5CYII=);
  691. }
  692. @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  693. .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
  694. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAADi4uLi4uLh4eE5RQaIAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==);
  695. }
  696. }
  697. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  698. .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
  699. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAADi4uLi4uLh4eE5RQaIAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==);
  700. }
  701. }
  702. @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  703. .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
  704. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAD1BMVEUAAADh4eHg4ODNzc3h4eEYfw2wAAAABHRSTlMAy2EFIuWxUgAAACRJREFUGNNjGBBgJOICBY7KDCoucODEAJSAS6FwUJShGjAQAADBPRGrK2/FhgAAAABJRU5ErkJggg==);
  705. }
  706. }
  707. .vue-treeselect__check-mark {
  708. width: 8px;
  709. height: 8px;
  710. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAQlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////8IX9KGAAAAFXRSTlMA8u24NxILB+Tawb6jiH1zRz0xIQIIP3GUAAAAMklEQVQI1y3FtQEAMQDDQD+EGbz/qkEVOpyEOP6PudKjZNSXn4Jm2CKRdBKzSLsFWl8fMG0Bl6Jk1rMAAAAASUVORK5CYII=);
  711. background-size: 8px 8px;
  712. -ms-transform: scaleY(0.125);
  713. transform: scaleY(0.125);
  714. }
  715. @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  716. .vue-treeselect__check-mark {
  717. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAzu4sDenl38fBvo1OMyIdEQrj1cSihX5hYFpHNycIcQOASAAAAF9JREFUGNN9zEcOgDAMRFHTS0LvNfe/JRmHKAIJ/mqeLJn+k9uDtaeUeFnFziGsBucUTirrprfe81RqZ3Bb6hPWeuZwDFOHyf+ig9CCzQ7INBn7bG5kF+QSt13BHNJnF7AaCT4Y+CW7AAAAAElFTkSuQmCC);
  718. }
  719. }
  720. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  721. .vue-treeselect__check-mark {
  722. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAzu4sDenl38fBvo1OMyIdEQrj1cSihX5hYFpHNycIcQOASAAAAF9JREFUGNN9zEcOgDAMRFHTS0LvNfe/JRmHKAIJ/mqeLJn+k9uDtaeUeFnFziGsBucUTirrprfe81RqZ3Bb6hPWeuZwDFOHyf+ig9CCzQ7INBn7bG5kF+QSt13BHNJnF7AaCT4Y+CW7AAAAAElFTkSuQmCC);
  723. }
  724. }
  725. @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  726. .vue-treeselect__check-mark {
  727. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZMre9AAAAHXRSTlMA/PiJhGNI9XlEHJB/b2ldV08+Oibk49vPp6QhAYgGBuwAAACCSURBVCjPrdHdDoIwDAXgTWAqCigo/+f9X5OwnoUwtis4V92XNWladUl+rzQPeQJAN2EHxoOnsPn7/oYk8fxBv08Rr/deOH/aZ2Nm8ZJ+s573QGfWKnNuZGzWm3+lv2V3pcU1XQ385/yjmBoM3Z+dXvlbYLLD3ujhTaOM3KaIXvNkFkuSEvYy1LqOAAAAAElFTkSuQmCC);
  728. }
  729. }
  730. .vue-treeselect__checkbox--checked > .vue-treeselect__check-mark {
  731. opacity: 1;
  732. -ms-transform: scaleY(1);
  733. transform: scaleY(1);
  734. }
  735. .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
  736. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAP1BMVEUAAADj4+Pf39/h4eHh4eHh4eHk5OTh4eHg4ODi4uLh4eHh4eHg4ODh4eHh4eHg4ODh4eHh4eHp6en////h4eFqcyvUAAAAFHRSTlMAOQfy7bgS5NrBvqOIfXNHMSELAgQ/iFsAAAA2SURBVAjXY4AANjYIzcjMAaVFuBkY+RkEWERYmRjYRXjANAOfiIgIFxNIAa8IpxBEi6AwiAQAK2MBd7xY8csAAAAASUVORK5CYII=);
  737. }
  738. @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  739. .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
  740. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAADh4eHh4eHh4eHi4uLb29vh4eHh4eHh4eHh4eHh4eHh4eHh4eHi4uLi4uLj4+Pi4uLk5OTo6Ojh4eHh4eHi4uLg4ODg4ODh4eHg4ODh4eHf39/g4OD////h4eEzIk+wAAAAHnRSTlMAzu6/LA3p5eLZx8ONTjYiHRIKooV+YWBaRzEnCANnm5rnAAAAZElEQVQY033P2wqAIAyA4VWaaWrnc/n+j5mbhBjUf7WPoTD47TJb4i5zTr/sRDRHuyFaoWX7uK/RlbctlPEuyI1f4WY9yQINEkf6rzzo8YIzmUFoCs7J1EjeIaa9bXIEmzl8dgOZEAj/+2IvzAAAAABJRU5ErkJggg==);
  741. }
  742. }
  743. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  744. .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
  745. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAADh4eHh4eHh4eHi4uLb29vh4eHh4eHh4eHh4eHh4eHh4eHh4eHi4uLi4uLj4+Pi4uLk5OTo6Ojh4eHh4eHi4uLg4ODg4ODh4eHg4ODh4eHf39/g4OD////h4eEzIk+wAAAAHnRSTlMAzu6/LA3p5eLZx8ONTjYiHRIKooV+YWBaRzEnCANnm5rnAAAAZElEQVQY033P2wqAIAyA4VWaaWrnc/n+j5mbhBjUf7WPoTD47TJb4i5zTr/sRDRHuyFaoWX7uK/RlbctlPEuyI1f4WY9yQINEkf6rzzo8YIzmUFoCs7J1EjeIaa9bXIEmzl8dgOZEAj/+2IvzAAAAABJRU5ErkJggg==);
  746. }
  747. }
  748. @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  749. .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
  750. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAUVBMVEUAAADh4eHh4eHh4eHh4eHi4uLi4uLh4eHh4eHh4eHf39/j4+Ph4eHh4eHh4eHg4ODi4uLh4eHh4eHi4uLh4eHh4eHh4eHh4eHh4eH////h4eF3FMFTAAAAGnRSTlMA+/eJhGhfSHE9JBzz5KaQf3pXT0Xbz0I5AYDw8F0AAAB+SURBVCjPrdHbDoMgEEVRKAii1dZe9fz/hxplTiKIT7qfYCWTEEZdUvOwbckNAD2WHeh3brHW5f5EzGQ+iN+b1Gt6KPvtv16Dn6JX9M9ya3/A1yfu5dlyduL6Hec7mXY6ddXLPP2lpABGZ8PWXfYLTJxZekVhhl7eTX24zZPNKXoRC7zQLjUAAAAASUVORK5CYII=);
  751. }
  752. }
  753. .vue-treeselect__checkbox--unchecked {
  754. border-color: #e0e0e0;
  755. background: #fff;
  756. }
  757. .vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked {
  758. border-color: #039be5;
  759. background: #fff;
  760. }
  761. .vue-treeselect__checkbox--indeterminate {
  762. border-color: #039be5;
  763. background: #039be5;
  764. }
  765. .vue-treeselect__label-container:hover .vue-treeselect__checkbox--indeterminate {
  766. border-color: #039be5;
  767. background: #039be5;
  768. }
  769. .vue-treeselect__checkbox--checked {
  770. border-color: #039be5;
  771. background: #039be5;
  772. }
  773. .vue-treeselect__label-container:hover .vue-treeselect__checkbox--checked {
  774. border-color: #039be5;
  775. background: #039be5;
  776. }
  777. .vue-treeselect__checkbox--disabled {
  778. border-color: #e0e0e0;
  779. background-color: #f7f7f7;
  780. }
  781. .vue-treeselect__label-container:hover .vue-treeselect__checkbox--disabled {
  782. border-color: #e0e0e0;
  783. background-color: #f7f7f7;
  784. }
  785. .vue-treeselect__label {
  786. overflow: hidden;
  787. text-overflow: ellipsis;
  788. white-space: nowrap;
  789. display: table-cell;
  790. padding-left: 5px;
  791. max-width: 100%;
  792. vertical-align: middle;
  793. cursor: inherit;
  794. }
  795. [dir="rtl"] .vue-treeselect__label {
  796. padding-left: 0;
  797. padding-right: 5px;
  798. }
  799. .vue-treeselect__count {
  800. margin-left: 5px;
  801. font-weight: 400;
  802. opacity: 0.6;
  803. }
  804. [dir="rtl"] .vue-treeselect__count {
  805. margin-left: 0;
  806. margin-right: 5px;
  807. }
  808. .vue-treeselect__tip {
  809. padding-left: 5px;
  810. padding-right: 5px;
  811. display: table;
  812. table-layout: fixed;
  813. width: 100%;
  814. color: #757575;
  815. }
  816. .vue-treeselect__tip-text {
  817. display: table-cell;
  818. vertical-align: middle;
  819. padding-left: 5px;
  820. padding-right: 5px;
  821. overflow: hidden;
  822. text-overflow: ellipsis;
  823. white-space: nowrap;
  824. width: 100%;
  825. font-size: 12px;
  826. }
  827. .vue-treeselect__error-tip .vue-treeselect__retry {
  828. cursor: pointer;
  829. margin-left: 5px;
  830. font-style: normal;
  831. font-weight: 600;
  832. text-decoration: none;
  833. color: #039be5;
  834. }
  835. [dir="rtl"] .vue-treeselect__error-tip .vue-treeselect__retry {
  836. margin-left: 0;
  837. margin-right: 5px;
  838. }
  839. .vue-treeselect__icon-container {
  840. display: table-cell;
  841. vertical-align: middle;
  842. width: 20px;
  843. text-align: center;
  844. line-height: 0;
  845. }
  846. .vue-treeselect--single .vue-treeselect__icon-container {
  847. padding-left: 5px;
  848. }
  849. [dir="rtl"] .vue-treeselect--single .vue-treeselect__icon-container {
  850. padding-left: 0;
  851. padding-right: 5px;
  852. }
  853. .vue-treeselect__icon-warning {
  854. display: block;
  855. margin: auto;
  856. border-radius: 50%;
  857. position: relative;
  858. width: 12px;
  859. height: 12px;
  860. background: #fb8c00;
  861. }
  862. .vue-treeselect__icon-warning::after {
  863. display: block;
  864. position: absolute;
  865. content: "";
  866. left: 5px;
  867. top: 2.5px;
  868. width: 2px;
  869. height: 1px;
  870. border: 0 solid #fff;
  871. border-top-width: 5px;
  872. border-bottom-width: 1px;
  873. }
  874. .vue-treeselect__icon-error {
  875. display: block;
  876. margin: auto;
  877. border-radius: 50%;
  878. position: relative;
  879. width: 12px;
  880. height: 12px;
  881. background: #e53935;
  882. }
  883. .vue-treeselect__icon-error::before,
  884. .vue-treeselect__icon-error::after {
  885. display: block;
  886. position: absolute;
  887. content: "";
  888. background: #fff;
  889. -ms-transform: rotate(45deg);
  890. transform: rotate(45deg);
  891. }
  892. .vue-treeselect__icon-error::before {
  893. width: 6px;
  894. height: 2px;
  895. left: 3px;
  896. top: 5px;
  897. }
  898. .vue-treeselect__icon-error::after {
  899. width: 2px;
  900. height: 6px;
  901. left: 5px;
  902. top: 3px;
  903. }
  904. .vue-treeselect__icon-loader {
  905. display: block;
  906. margin: auto;
  907. position: relative;
  908. width: 12px;
  909. height: 12px;
  910. text-align: center;
  911. animation: 1.6s vue-treeselect-animation-rotate linear infinite;
  912. }
  913. .vue-treeselect__icon-loader::before,
  914. .vue-treeselect__icon-loader::after {
  915. border-radius: 50%;
  916. position: absolute;
  917. content: "";
  918. left: 0;
  919. top: 0;
  920. display: block;
  921. width: 100%;
  922. height: 100%;
  923. opacity: 0.6;
  924. animation: 1.6s vue-treeselect-animation-bounce ease-in-out infinite;
  925. }
  926. .vue-treeselect__icon-loader::before {
  927. background: #039be5;
  928. }
  929. .vue-treeselect__icon-loader::after {
  930. background: #b3e5fc;
  931. animation-delay: -0.8s;
  932. }
  933. /**
  934. * Menu Portal
  935. */
  936. .vue-treeselect__menu-placeholder {
  937. display: none;
  938. }
  939. .vue-treeselect__portal-target {
  940. position: absolute;
  941. display: block;
  942. left: 0;
  943. top: 0;
  944. height: 0;
  945. width: 0;
  946. padding: 0;
  947. margin: 0;
  948. border: 0;
  949. overflow: visible;
  950. box-sizing: border-box;
  951. }
  952. /*# sourceMappingURL=vue-treeselect.css.map*/