picker.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. uni-picker {
  2. position: relative;
  3. display: block;
  4. cursor: pointer;
  5. }
  6. uni-picker[hidden] {
  7. display: none;
  8. }
  9. uni-picker[disabled] {
  10. cursor: not-allowed;
  11. }
  12. .uni-picker-container {
  13. display: none;
  14. position: fixed;
  15. left: 0;
  16. right: 0;
  17. top: 0;
  18. bottom: 0;
  19. box-sizing: border-box;
  20. z-index: 999;
  21. font-size: 16px;
  22. }
  23. .uni-picker-container .uni-picker-custom * {
  24. box-sizing: border-box;
  25. }
  26. .uni-picker-container .uni-picker-custom {
  27. position: fixed;
  28. left: 0;
  29. bottom: 0;
  30. transform: translate(0, 100%);
  31. backface-visibility: hidden;
  32. z-index: 999;
  33. width: 100%;
  34. background-color: #fff;
  35. visibility: hidden;
  36. transition: transform 0.3s, visibility 0.3s;
  37. }
  38. .uni-picker-container .uni-picker-custom.uni-picker-toggle {
  39. visibility: visible;
  40. transform: translate(0, 0);
  41. }
  42. .uni-picker-container .uni-picker-content {
  43. position: relative;
  44. display: block;
  45. width: 100%;
  46. height: 238px;
  47. background-color: white;
  48. }
  49. .uni-picker-container .uni-picker-item {
  50. padding: 0;
  51. height: 34px;
  52. line-height: 34px;
  53. text-align: center;
  54. color: #000;
  55. text-overflow: ellipsis;
  56. white-space: nowrap;
  57. overflow: hidden;
  58. cursor: pointer;
  59. }
  60. .uni-picker-container .uni-picker-header {
  61. display: block;
  62. position: relative;
  63. text-align: center;
  64. width: 100%;
  65. height: 45px;
  66. }
  67. .uni-picker-container .uni-picker-header:after {
  68. content: '';
  69. position: absolute;
  70. left: 0;
  71. bottom: 0;
  72. right: 0;
  73. height: 1px;
  74. clear: both;
  75. border-bottom: 1px solid #e5e5e5;
  76. color: #e5e5e5;
  77. transform-origin: 0 100%;
  78. transform: scaleY(0.5);
  79. }
  80. .uni-picker-container .uni-picker-action {
  81. display: block;
  82. max-width: 50%;
  83. top: 0;
  84. height: 100%;
  85. box-sizing: border-box;
  86. padding: 0 14px;
  87. font-size: 17px;
  88. line-height: 45px;
  89. overflow: hidden;
  90. cursor: pointer;
  91. }
  92. .uni-picker-container .uni-picker-action.uni-picker-action-cancel {
  93. float: left;
  94. color: #888;
  95. }
  96. .uni-picker-container .uni-picker-action.uni-picker-action-confirm {
  97. float: right;
  98. color: #007aff;
  99. }
  100. .uni-picker-container .uni-picker-select {
  101. display: none;
  102. }
  103. .uni-picker-system {
  104. position: absolute;
  105. display: none;
  106. display: block;
  107. top: 0;
  108. left: 0;
  109. width: 100%;
  110. height: 100%;
  111. overflow: hidden;
  112. }
  113. .uni-picker-system > .uni-picker-system_input {
  114. position: absolute;
  115. border: none;
  116. height: 100%;
  117. opacity: 0;
  118. /* Chrome 无效 */
  119. cursor: pointer;
  120. }
  121. .uni-picker-system > .uni-picker-system_input.firefox {
  122. top: 0;
  123. left: 0;
  124. width: 100%;
  125. }
  126. .uni-picker-system > .uni-picker-system_input.chrome {
  127. /* 日历空白位置宽度 32px */
  128. top: 0;
  129. left: 0;
  130. width: 2em;
  131. font-size: 32px;
  132. height: 32px;
  133. }
  134. @media screen and (min-width: 500px) and (min-height: 500px) {
  135. .uni-mask.uni-picker-mask {
  136. background: none;
  137. }
  138. .uni-picker-container .uni-picker-custom {
  139. width: 300px;
  140. left: 50%;
  141. right: auto;
  142. top: 50%;
  143. bottom: auto;
  144. transform: translate(-50%, -50%);
  145. opacity: 0;
  146. border-radius: 5px;
  147. transition: opacity 0.3s, visibility 0.3s;
  148. box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
  149. }
  150. .uni-picker-container .uni-picker-header {
  151. border-radius: 5px 5px 0 0;
  152. }
  153. .uni-picker-container .uni-picker-content {
  154. /* transform 用于解决 Safari overflow 失效的问题 */
  155. transform: translate(0 0);
  156. overflow: hidden;
  157. border-radius: 0 0 5px 5px;
  158. }
  159. .uni-picker-container .uni-picker-custom.uni-picker-toggle {
  160. opacity: 1;
  161. transform: translate(-50%, -50%);
  162. }
  163. .uni-selector-select .uni-picker-header,
  164. .uni-selector-select .uni-picker-content {
  165. display: none;
  166. }
  167. .uni-selector-select .uni-picker-select {
  168. display: block;
  169. max-height: 300px;
  170. overflow: auto;
  171. background-color: white;
  172. border-radius: 5px;
  173. padding: 6px 0;
  174. }
  175. .uni-selector-select .uni-picker-item {
  176. padding: 0 10px;
  177. color: #555555;
  178. }
  179. .uni-selector-select .uni-picker-item:hover {
  180. background-color: #f6f6f6;
  181. }
  182. .uni-selector-select .uni-picker-item.selected {
  183. color: #007aff;
  184. }
  185. }
  186. @media (prefers-color-scheme: dark) {
  187. .uni-picker-container .uni-picker-content {
  188. background-color: var(--UI-BG-2);
  189. }
  190. .uni-selector-select .uni-picker-item,
  191. .uni-picker-container .uni-picker-item,
  192. .uni-picker-container .uni-picker-action.uni-picker-action-cancel {
  193. color: var(--UI-FG-0);
  194. }
  195. .uni-picker-container .uni-picker-custom {
  196. background-color: var(--UI-BG-2);
  197. }
  198. .uni-picker-container .uni-picker-header:after {
  199. border-bottom-color: var(--UI-FG-3);
  200. }
  201. }