mui.picker.all.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. /**
  2. * 选择列表插件
  3. * varstion 2.0.0
  4. * by Houfeng
  5. * Houfeng@DCloud.io
  6. */
  7. .mui-picker {
  8. background-color: #ddd;
  9. position: relative;
  10. height: 200px;
  11. overflow: hidden;
  12. border: solid 1px rgba(0, 0, 0, 0.1);
  13. -webkit-user-select: none;
  14. user-select: none;
  15. box-sizing: border-box;
  16. list-style: none;
  17. }
  18. .mui-picker-inner {
  19. box-sizing: border-box;
  20. position: relative;
  21. width: 100%;
  22. height: 100%;
  23. overflow: hidden;
  24. -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
  25. -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
  26. }
  27. .mui-pciker-list,
  28. .mui-pciker-rule {
  29. box-sizing: border-box;
  30. padding: 0px;
  31. margin: 0px;
  32. width: 100%;
  33. height: 36px;
  34. line-height: 36px;
  35. position: absolute;
  36. left: 0px;
  37. top: 50%;
  38. margin-top: -18px;
  39. }
  40. .mui-pciker-rule-bg {
  41. z-index: 0;
  42. /*background-color: #cfd5da;*/
  43. }
  44. .mui-pciker-rule-ft {
  45. z-index: 2;
  46. border-top: solid 1px rgba(0, 0, 0, 0.1);
  47. border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  48. /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
  49. /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
  50. }
  51. .mui-pciker-list {
  52. z-index: 1;
  53. -webkit-transform-style: preserve-3d;
  54. transform-style: preserve-3d;
  55. -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  56. transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  57. }
  58. .mui-pciker-list li {
  59. width: 100%;
  60. height: 100%;
  61. position: absolute;
  62. text-align: center;
  63. vertical-align: middle;
  64. -webkit-backface-visibility: hidden;
  65. backface-visibility: hidden;
  66. overflow: hidden;
  67. box-sizing: border-box;
  68. font-size: 16px;
  69. font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  70. color: #888;
  71. padding: 0px 8px;
  72. white-space: nowrap;
  73. -webkit-text-overflow: ellipsis;
  74. text-overflow: ellipsis;
  75. overflow: hidden;
  76. cursor: default;
  77. visibility: hidden;
  78. list-style: none;
  79. }
  80. .mui-pciker-list li.highlight,
  81. .mui-pciker-list li.visible {
  82. visibility: visible;
  83. }
  84. .mui-pciker-list li.highlight {
  85. color: #222;
  86. }
  87. .mui-poppicker {
  88. position: fixed;
  89. left: 0px;
  90. width: 100%;
  91. z-index: 999;
  92. background-color: #eee;
  93. border-top: solid 1px #ccc;
  94. box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
  95. -webkit-transition: .3s;
  96. transition: .3s;
  97. bottom: 0px;
  98. -webkit-transform: translateY(300px);
  99. transform: translateY(300px);
  100. }
  101. .mui-poppicker.mui-active {
  102. -webkit-transform: translateY(0px);
  103. transform: translateY(0px);
  104. }
  105. .mui-android-5-1 .mui-poppicker {
  106. bottom: -300px;
  107. -webkit-transition-property: bottom;
  108. transition-property: bottom;
  109. -webkit-transform: none;
  110. transform: none;
  111. }
  112. .mui-android-5-1 .mui-poppicker.mui-active {
  113. bottom: 0px;
  114. -webkit-transition-property: bottom;
  115. transition-property: bottom;
  116. -webkit-transform: none;
  117. transform: none;
  118. }
  119. .mui-poppicker-header {
  120. padding: 6px;
  121. font-size: 14px;
  122. color: #888;
  123. }
  124. .mui-poppicker-header .mui-btn {
  125. font-size: 12px;
  126. padding: 5px 10px;
  127. }
  128. .mui-poppicker-btn-cancel {
  129. float: left;
  130. }
  131. .mui-poppicker-btn-ok {
  132. float: right;
  133. }
  134. .mui-poppicker-clear {
  135. clear: both;
  136. height: 0px;
  137. line-height: 0px;
  138. font-size: 0px;
  139. overflow: hidden;
  140. }
  141. .mui-poppicker-body {
  142. position: relative;
  143. width: 100%;
  144. height: 200px;
  145. border-top: solid 1px #ddd;
  146. /*-webkit-perspective: 1200px;
  147. perspective: 1200px;
  148. -webkit-transform-style: preserve-3d;
  149. transform-style: preserve-3d;*/
  150. }
  151. .mui-poppicker-body .mui-picker {
  152. width: 100%;
  153. height: 100%;
  154. margin: 0px;
  155. border: none;
  156. float: left;
  157. }
  158. .mui-dtpicker {
  159. position: fixed;
  160. left: 0px;
  161. width: 100%;
  162. z-index: 999999;
  163. background-color: #eee;
  164. border-top: solid 1px #ccc;
  165. box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
  166. -webkit-transition: .3s;
  167. bottom: 0px;
  168. -webkit-transform: translateY(300px);
  169. }
  170. .mui-dtpicker.mui-active {
  171. -webkit-transform: translateY(0px);
  172. }
  173. /*用于将 html body 禁止滚动条*/
  174. .mui-dtpicker-active-for-page {
  175. overflow: hidden !important;
  176. }
  177. .mui-android-5-1 .mui-dtpicker {
  178. bottom: -300px;
  179. -webkit-transition-property: bottom;
  180. -webkit-transform: none;
  181. }
  182. .mui-android-5-1 .mui-dtpicker.mui-active {
  183. bottom: 0px;
  184. -webkit-transition-property: bottom;
  185. -webkit-transform: none;
  186. }
  187. .mui-dtpicker-header {
  188. padding: 6px;
  189. font-size: 14px;
  190. color: #888;
  191. }
  192. .mui-dtpicker-header button {
  193. font-size: 12px;
  194. padding: 5px 10px;
  195. }
  196. .mui-dtpicker-header button:last-child {
  197. float: right;
  198. }
  199. .mui-dtpicker-body {
  200. position: relative;
  201. width: 100%;
  202. height: 200px;
  203. /*border-top: solid 1px #eee;
  204. background-color: #fff;*/
  205. }
  206. .mui-ios .mui-dtpicker-body {
  207. -webkit-perspective: 1200px;
  208. perspective: 1200px;
  209. -webkit-transform-style: preserve-3d;
  210. transform-style: preserve-3d;
  211. }
  212. .mui-dtpicker-title h5 {
  213. display: inline-block;
  214. width: 20%;
  215. margin: 0px;
  216. padding: 8px;
  217. text-align: center;
  218. border-top: solid 1px #ddd;
  219. background-color: #f0f0f0;
  220. border-bottom: solid 1px #ccc;
  221. }
  222. .mui-dtpicker .mui-picker {
  223. width: 20%;
  224. height: 100%;
  225. margin: 0px;
  226. float: left;
  227. border: none;
  228. }
  229. /*年月日时分*/
  230. [data-type="datetime"] .mui-picker,
  231. [data-type="time"] .mui-dtpicker-title h5 {
  232. width: 20%;
  233. }
  234. [data-type="datetime"] [data-id="picker-h"],
  235. [data-type="datetime"] [data-id="title-h"] {
  236. border-left: dotted 1px #ccc;
  237. }
  238. /*年月日*/
  239. [data-type="date"] .mui-picker,
  240. [data-type="date"] .mui-dtpicker-title h5 {
  241. width: 33.3%;
  242. }
  243. [data-type="date"] [data-id="picker-h"],
  244. [data-type="date"] [data-id="picker-i"],
  245. [data-type="date"] [data-id="title-h"],
  246. [data-type="date"] [data-id="title-i"] {
  247. display: none;
  248. }
  249. /*年月日时*/
  250. [data-type="hour"] .mui-picker,
  251. [data-type="hour"] .mui-dtpicker-title h5 {
  252. width: 25%;
  253. }
  254. [data-type="hour"] [data-id="picker-i"],
  255. [data-type="hour"] [data-id="title-i"] {
  256. display: none;
  257. }
  258. [data-type="hour"] [data-id="picker-h"],
  259. [data-type="hour"] [data-id="title-h"] {
  260. border-left: dotted 1px #ccc;
  261. }
  262. /*时分*/
  263. [data-type="time"] .mui-picker,
  264. [data-type="time"] .mui-dtpicker-title h5 {
  265. width: 50%;
  266. }
  267. [data-type="time"] [data-id="picker-y"],
  268. [data-type="time"] [data-id="picker-m"],
  269. [data-type="time"] [data-id="picker-d"],
  270. [data-type="time"] [data-id="title-y"],
  271. [data-type="time"] [data-id="title-m"],
  272. [data-type="time"] [data-id="title-d"] {
  273. display: none;
  274. }
  275. /*年月*/
  276. [data-type="month"] .mui-picker,
  277. [data-type="month"] .mui-dtpicker-title h5 {
  278. width: 50%;
  279. }
  280. [data-type="month"] [data-id="picker-d"],
  281. [data-type="month"] [data-id="picker-h"],
  282. [data-type="month"] [data-id="picker-i"],
  283. [data-type="month"] [data-id="title-d"],
  284. [data-type="month"] [data-id="title-h"],
  285. [data-type="month"] [data-id="title-i"] {
  286. display: none;
  287. }