mui.listpicker.css 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /**
  2. * 选择列表插件
  3. * varstion 1.0.0
  4. * by Houfeng
  5. * Houfeng@DCloud.io
  6. */
  7. .mui-listpicker {
  8. position: relative;
  9. border: solid 1px #ccc;
  10. padding: 0px;
  11. margin: 3px;
  12. height: 185px;
  13. background-color: #fff;
  14. overflow: hidden;
  15. border-radius: 3px;
  16. }
  17. .mui-listpicker .mui-listpicker-inner {
  18. width: 100%;
  19. height: 100%;
  20. position: absolute;
  21. left: 0px;
  22. top: 0px;
  23. z-index: 1;
  24. border-radius: 3px;
  25. -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
  26. -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
  27. }
  28. .mui-ios .mui-listpicker .mui-listpicker-inner {
  29. width: calc(100% + 8px);
  30. padding-right: 8px;
  31. }
  32. .mui-android .mui-listpicker .mui-listpicker-inner {
  33. overflow-y: auto;
  34. -webkit-overflow-scrolling: touch;
  35. }
  36. .mui-listpicker .mui-listpicker-inner::-webkit-scrollbar {
  37. width: 0px;
  38. height: 0px;
  39. visibility: hidden;
  40. }
  41. .mui-listpicker ul {
  42. list-style-type: none;
  43. margin: 0px;
  44. padding: 0px;
  45. position: relative;
  46. }
  47. .mui-listpicker ul li {
  48. box-sizing: border-box;
  49. position: relative;
  50. height: 36px;
  51. line-height: 36px;
  52. text-align: center;
  53. color: #555;
  54. white-space: nowrap;
  55. overflow: hidden;
  56. text-overflow: ellipsis;
  57. }
  58. .mui-listpicker.three-dimensional {
  59. -webkit-transform-style: preserve-3d;
  60. transform-style: preserve-3d;
  61. }
  62. .mui-listpicker.three-dimensional .mui-listpicker-inner {
  63. -webkit-transform-style: preserve-3d;
  64. transform-style: preserve-3d;
  65. }
  66. .mui-listpicker.three-dimensional ul {
  67. -webkit-transform-style: preserve-3d;
  68. transform-style: preserve-3d;
  69. }
  70. .mui-listpicker.three-dimensional ul li {
  71. -webkit-transform-style: preserve-3d;
  72. transform-style: preserve-3d;
  73. }
  74. .mui-listpicker ul li:last-child {
  75. border-bottom: none;
  76. }
  77. .mui-listpicker ul li::first-child {
  78. border-top: none;
  79. }
  80. .mui-listpicker .mui-listpicker-rule {
  81. position: absolute;
  82. border: solid 1px #ccc;
  83. border-left: none;
  84. border-right: none;
  85. background-color: #dfd;
  86. opacity: 0.5;
  87. width: 100%;
  88. left: 0px;
  89. top: 50%;
  90. z-index: 0;
  91. }
  92. .mui-listpicker .mui-listpicker-item-selected {
  93. color: green;
  94. }