mui.picker.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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. }
  17. .mui-picker-inner {
  18. box-sizing: border-box;
  19. position: relative;
  20. width: 100%;
  21. height: 100%;
  22. overflow: hidden;
  23. -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
  24. -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
  25. }
  26. .mui-pciker-list,
  27. .mui-pciker-rule {
  28. box-sizing: border-box;
  29. padding: 0px;
  30. margin: 0px;
  31. width: 100%;
  32. height: 36px;
  33. line-height: 36px;
  34. position: absolute;
  35. left: 0px;
  36. top: 50%;
  37. margin-top: -18px;
  38. }
  39. .mui-pciker-rule-bg {
  40. z-index: 0;
  41. /*background-color: #cfd5da;*/
  42. }
  43. .mui-pciker-rule-ft {
  44. z-index: 2;
  45. border-top: solid 1px rgba(0, 0, 0, 0.1);
  46. border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  47. /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
  48. /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
  49. }
  50. .mui-pciker-list {
  51. z-index: 1;
  52. -webkit-transform-style: preserve-3d;
  53. transform-style: preserve-3d;
  54. -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  55. transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  56. }
  57. .mui-pciker-list li {
  58. width: 100%;
  59. height: 100%;
  60. position: absolute;
  61. text-align: center;
  62. vertical-align: middle;
  63. -webkit-backface-visibility: hidden;
  64. backface-visibility: hidden;
  65. overflow: hidden;
  66. box-sizing: border-box;
  67. font-size: 16px;
  68. font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  69. color: #888;
  70. padding: 0px 8px;
  71. white-space: nowrap;
  72. -webkit-text-overflow: ellipsis;
  73. text-overflow: ellipsis;
  74. overflow: hidden;
  75. cursor: default;
  76. visibility: hidden;
  77. }
  78. .mui-pciker-list li.highlight,
  79. .mui-pciker-list li.visible {
  80. visibility: visible;
  81. }
  82. .mui-pciker-list li.highlight {
  83. color: #222;
  84. }