picklist.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. .ui-picklist > div {
  2. float: left;
  3. }
  4. .ui-picklist .ui-picklist-buttons {
  5. height: 12.5em;
  6. padding: 0 .25em;
  7. }
  8. .ui-picklist .ui-picklist-list {
  9. list-style-type: none;
  10. margin: 0;
  11. padding: 0;
  12. overflow:auto;
  13. height: 12.5em;
  14. width: 12.5em;
  15. }
  16. .ui-picklist .ui-picklist-list li {
  17. margin: 1px;
  18. padding: .125em;
  19. }
  20. .ui-picklist .ui-button {
  21. display:block;
  22. margin-bottom: 0.25em;
  23. }
  24. .ui-picklist .ui-button-text-icon-left {
  25. width: 100%;
  26. }
  27. .ui-picklist .ui-picklist-item {
  28. cursor: pointer;
  29. border: 0 none;
  30. font-weight: inherit;
  31. }
  32. .ui-picklist .ui-picklist-caption {
  33. text-align: center;
  34. padding: .5em .75em;
  35. border-bottom:0 none;
  36. }
  37. .ui-picklist table {
  38. width: 100%;
  39. border-collapse:collapse;
  40. }
  41. .ui-picklist .ui-picklist-filter-container {
  42. position: relative;
  43. width: 100%;
  44. padding: .5em .6em;
  45. border-bottom: 0 none;
  46. }
  47. .ui-picklist .ui-picklist-filter-container .ui-picklist-filter {
  48. text-indent: 1.1em;
  49. width: 100%;
  50. }
  51. .ui-picklist .ui-picklist-filter-container .ui-picklist-filter-icon {
  52. position: absolute;
  53. top: 50%;
  54. left: 1em;
  55. margin-top: -.6em;
  56. }
  57. .ui-picklist {
  58. display: table;
  59. }
  60. .ui-picklist > div {
  61. float: none;
  62. display: table-cell;
  63. vertical-align: top;
  64. }
  65. .ui-picklist .ui-picklist-buttons {
  66. vertical-align: middle;
  67. }
  68. /* Vertical */
  69. .ui-picklist.ui-picklist-vertical {
  70. display: table;
  71. }
  72. .ui-picklist.ui-picklist-vertical > div {
  73. float: none;
  74. display: table-row;
  75. vertical-align: top;
  76. }
  77. .ui-picklist.ui-picklist-vertical .ui-picklist-buttons {
  78. text-align:center;
  79. height: auto;
  80. }
  81. .ui-picklist.ui-picklist-vertical .ui-picklist-buttons .ui-button {
  82. display: inline-block;
  83. }
  84. .ui-picklist.ui-picklist-vertical .ui-button {
  85. margin-top: 0.25em;
  86. }
  87. .ui-picklist-outline {
  88. outline: 1px dotted black;
  89. z-index: 1;
  90. }
  91. .ui-picklist .ui-picklist-droppoint {
  92. height: 6px;
  93. list-style-type: none;
  94. }
  95. .ui-picklist .ui-picklist-list .ui-picklist-droppoint-empty {
  96. height: 100%;
  97. list-style-type: none;
  98. }
  99. .ui-picklist-list.ui-picklist-source,
  100. .ui-picklist-list.ui-picklist-target {
  101. outline: none;
  102. }
  103. /* Responsive */
  104. .ui-picklist.ui-picklist-responsive * {
  105. box-sizing: border-box;
  106. }
  107. .ui-picklist.ui-picklist-responsive {
  108. width: 100%;
  109. }
  110. .ui-picklist.ui-picklist-responsive .ui-picklist-listwrapper {
  111. width: 35%;
  112. }
  113. .ui-picklist.ui-picklist-responsive .ui-picklist-listwrapper.ui-picklist-listwrapper-nocontrols {
  114. width: 45%;
  115. }
  116. .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
  117. width: 10%;
  118. }
  119. .ui-picklist.ui-picklist-responsive .ui-picklist-buttons button {
  120. width: 100%;
  121. }
  122. .ui-picklist.ui-picklist-responsive .ui-picklist-list {
  123. width: auto;
  124. }
  125. /* Responsive */
  126. @media (max-width: 40em) {
  127. .ui-picklist.ui-picklist-responsive {
  128. display: block;
  129. }
  130. .ui-picklist.ui-picklist-responsive > div {
  131. display: block;
  132. width: 100% !important;
  133. }
  134. .ui-picklist.ui-picklist-responsive .ui-picklist-buttons {
  135. text-align: center;
  136. height: auto;
  137. padding: .4em 0;
  138. }
  139. .ui-picklist.ui-picklist-responsive .ui-picklist-buttons button {
  140. display: inline-block;
  141. width: 20%;
  142. margin-bottom: 0;
  143. margin-right: .25em;
  144. }
  145. .ui-picklist.ui-picklist-responsive .ui-picklist-source-controls.ui-picklist-buttons {
  146. padding-bottom: .4em;
  147. }
  148. .ui-picklist.ui-picklist-responsive .ui-picklist-target-controls.ui-picklist-buttons {
  149. padding-top: .4em;
  150. }
  151. .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .pi-angle-right::before {
  152. content: "\e930";
  153. }
  154. .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .pi-angle-double-right::before {
  155. content: "\e92c";
  156. }
  157. .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .pi-angle-left::before {
  158. content: "\e933";
  159. }
  160. .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .pi-angle-double-left::before {
  161. content: "\e92f";
  162. }
  163. }