picker-view-column.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. uni-picker-view-column {
  2. flex: 1;
  3. position: relative;
  4. height: 100%;
  5. overflow: hidden;
  6. }
  7. uni-picker-view-column[hidden] {
  8. display: none;
  9. }
  10. .uni-picker-view-group {
  11. height: 100%;
  12. overflow: hidden;
  13. }
  14. .uni-picker-view-mask {
  15. transform: translateZ(0);
  16. }
  17. .uni-picker-view-indicator,
  18. .uni-picker-view-mask {
  19. position: absolute;
  20. left: 0;
  21. width: 100%;
  22. z-index: 3;
  23. pointer-events: none;
  24. }
  25. .uni-picker-view-mask {
  26. top: 0;
  27. height: 100%;
  28. margin: 0 auto;
  29. background-image: linear-gradient(
  30. 180deg,
  31. hsla(0, 0%, 100%, 0.95),
  32. hsla(0, 0%, 100%, 0.6)
  33. ),
  34. linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6));
  35. background-position: top, bottom;
  36. background-size: 100% 102px;
  37. background-repeat: no-repeat;
  38. transform: translateZ(0);
  39. }
  40. .uni-picker-view-indicator {
  41. height: 34px;
  42. /* top: 102px; */
  43. top: 50%;
  44. transform: translateY(-50%);
  45. }
  46. .uni-picker-view-content {
  47. position: absolute;
  48. top: 0;
  49. left: 0;
  50. width: 100%;
  51. will-change: transform;
  52. padding: 102px 0;
  53. cursor: pointer;
  54. }
  55. .uni-picker-view-content > * {
  56. height: var(--picker-view-column-indicator-height);
  57. overflow: hidden;
  58. }
  59. .uni-picker-view-indicator:after,
  60. .uni-picker-view-indicator:before {
  61. content: ' ';
  62. position: absolute;
  63. left: 0;
  64. right: 0;
  65. height: 1px;
  66. color: #e5e5e5;
  67. }
  68. .uni-picker-view-indicator:before {
  69. top: 0;
  70. border-top: 1px solid #e5e5e5;
  71. transform-origin: 0 0;
  72. transform: scaleY(0.5);
  73. }
  74. .uni-picker-view-indicator:after {
  75. bottom: 0;
  76. border-bottom: 1px solid #e5e5e5;
  77. transform-origin: 0 100%;
  78. transform: scaleY(0.5);
  79. }
  80. .uni-picker-view-indicator:after,
  81. .uni-picker-view-indicator:before {
  82. content: ' ';
  83. position: absolute;
  84. left: 0;
  85. right: 0;
  86. height: 1px;
  87. color: #e5e5e5;
  88. }
  89. @media (prefers-color-scheme: dark) {
  90. .uni-picker-view-indicator:before {
  91. border-top-color: var(--UI-FG-3);
  92. }
  93. .uni-picker-view-indicator:after {
  94. border-bottom-color: var(--UI-FG-3);
  95. }
  96. .uni-picker-view-mask {
  97. background-image: linear-gradient(
  98. 180deg,
  99. rgba(35, 35, 35, 0.95),
  100. rgba(35, 35, 35, 0.6)
  101. ),
  102. linear-gradient(0deg, rgba(35, 35, 35, 0.95), rgba(35, 35, 35, 0.6));
  103. }
  104. }