megalist-multiselect.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. .megalist-mutliselect {
  2. -webkit-user-select: none;
  3. -moz-user-select: none;
  4. -ms-user-select: none;
  5. user-select: none;
  6. overflow: hidden;
  7. }
  8. .megalist-mutliselect .megalist {
  9. float: left;
  10. width: 285px;
  11. }
  12. .megalist-mutliselect .megalist input[type=text] {
  13. -webkit-box-sizing: border-box;
  14. -moz-box-sizing: border-box;
  15. -ms-box-sizing: border-box;
  16. box-sizing: border-box;
  17. width: 100% !important;
  18. padding: 5px 4px;
  19. margin-bottom: 5px;
  20. }
  21. .megalist-mutliselect .megalist .megalist-inner {
  22. -webkit-box-sizing: border-box;
  23. -moz-box-sizing: border-box;
  24. -ms-box-sizing: border-box;
  25. box-sizing: border-box;
  26. position: relative;
  27. height: 205px;
  28. width: 100%;
  29. overflow: hidden;
  30. border: 1px solid silver;
  31. }
  32. .megalist-mutliselect .megalist .megalist-inner ul {
  33. position: absolute;
  34. padding: 0;
  35. display: block;
  36. margin-top: 0px;
  37. width: 100%;
  38. top: 0px;
  39. }
  40. .megalist-mutliselect .megalist .megalist-inner ul li {
  41. margin: 0;
  42. border: none;
  43. white-space: nowrap;
  44. overflow: hidden;
  45. padding: 6px 0px 6px 10px !important;
  46. display: block;
  47. position: absolute;
  48. width: 100%;
  49. border-top: 1px solid #EDEDED;
  50. line-height: 1em !important;
  51. cursor: pointer;
  52. color: #555;
  53. }
  54. .megalist-mutliselect .megalist .megalist-inner ul li:hover {
  55. background-color: #08c;
  56. }
  57. .megalist-mutliselect .megalist .scrollbar {
  58. -webkit-border-radius: 3px;
  59. -moz-border-radius: 3px;
  60. border-radius: 3px;
  61. position: absolute;
  62. right: 1px;
  63. width: 11px;
  64. height: 25px;
  65. background-color: #bebebe;
  66. z-index: 2;
  67. }
  68. .megalist-mutliselect .megalist .scrollbar:hover {
  69. background-color: #afafaf;
  70. }
  71. .megalist-mutliselect .megalist .scrollbar-background {
  72. position: absolute;
  73. top: 0px;
  74. right: 0px;
  75. width: 14px;
  76. height: 100%;
  77. z-index: 1;
  78. background-color: #ececec;
  79. }
  80. .megalist-mutliselect .move-buttons {
  81. margin: 90px 0px;
  82. float: left;
  83. }
  84. .megalist-mutliselect .move-buttons .move-button {
  85. height: 30px;
  86. padding: 0px 50px;
  87. margin-bottom: 10px;
  88. cursor: pointer;
  89. }
  90. .megalist-mutliselect .move-buttons .move-button svg {
  91. fill: #0374bb;
  92. }
  93. .megalist-mutliselect .move-buttons .move-button:hover svg {
  94. fill: #024570;
  95. }
  96. .megalist-mutliselect .move-buttons .move-button:hover.arrow-left.no-svg .svg {
  97. background-position: 0% 100%;
  98. }
  99. .megalist-mutliselect .move-buttons .move-button:hover.arrow-right.no-svg .svg {
  100. background-position: 100% 100%;
  101. }
  102. .megalist-mutliselect .move-buttons .move-button.no-svg .svg {
  103. background-repeat: no-repeat;
  104. background-position: center;
  105. background: url('../icons/megalist-icons.png');
  106. width: 32px;
  107. height: 32px;
  108. }
  109. .megalist-mutliselect .move-buttons .move-button.arrow-left.no-svg .svg {
  110. background-position: 0% 0%;
  111. }
  112. .megalist-mutliselect .move-buttons .move-button.arrow-right.no-svg .svg {
  113. background-position: 100% 0%;
  114. }