index.acss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. @import "../common/index.acss";
  2. .van-picker {
  3. position: relative;
  4. overflow: hidden;
  5. -webkit-text-size-adjust: 100%;
  6. -webkit-user-select: none;
  7. user-select: none;
  8. background-color: #fff;
  9. background-color: var(--picker-background-color, #fff);
  10. }
  11. .van-picker__toolbar {
  12. display: -webkit-flex;
  13. display: flex;
  14. -webkit-justify-content: space-between;
  15. justify-content: space-between;
  16. height: 44px;
  17. height: var(--picker-toolbar-height, 44px);
  18. line-height: 44px;
  19. line-height: var(--picker-toolbar-height, 44px);
  20. }
  21. .van-picker__cancel,
  22. .van-picker__confirm {
  23. padding: 0 16px;
  24. padding: var(--picker-action-padding, 0 16px);
  25. font-size: 14px;
  26. font-size: var(--picker-action-font-size, 14px);
  27. }
  28. .van-picker__cancel--hover,
  29. .van-picker__confirm--hover {
  30. opacity: 0.7;
  31. }
  32. .van-picker__confirm {
  33. color: #576b95;
  34. color: var(--picker-confirm-action-color, #576b95);
  35. }
  36. .van-picker__cancel {
  37. color: #969799;
  38. color: var(--picker-cancel-action-color, #969799);
  39. }
  40. .van-picker__title {
  41. max-width: 50%;
  42. text-align: center;
  43. font-weight: 500;
  44. font-weight: var(--font-weight-bold, 500);
  45. font-size: 16px;
  46. font-size: var(--picker-option-font-size, 16px);
  47. }
  48. .van-picker__columns {
  49. position: relative;
  50. display: -webkit-flex;
  51. display: flex;
  52. }
  53. .van-picker__column {
  54. -webkit-flex: 1 1;
  55. flex: 1 1;
  56. width: 0;
  57. }
  58. .van-picker__loading {
  59. position: absolute;
  60. top: 0;
  61. right: 0;
  62. bottom: 0;
  63. left: 0;
  64. z-index: 4;
  65. display: -webkit-flex;
  66. display: flex;
  67. -webkit-align-items: center;
  68. align-items: center;
  69. -webkit-justify-content: center;
  70. justify-content: center;
  71. background-color: hsla(0, 0%, 100%, 0.9);
  72. background-color: var(--picker-loading-mask-color, hsla(0, 0%, 100%, 0.9));
  73. }
  74. .van-picker__mask {
  75. top: 0;
  76. left: 0;
  77. z-index: 2;
  78. width: 100%;
  79. height: 100%;
  80. background-image: linear-gradient(
  81. 180deg,
  82. hsla(0, 0%, 100%, 0.9),
  83. hsla(0, 0%, 100%, 0.4)
  84. ),
  85. linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
  86. background-repeat: no-repeat;
  87. background-position: top, bottom;
  88. -webkit-backface-visibility: hidden;
  89. backface-visibility: hidden;
  90. }
  91. .van-picker__frame,
  92. .van-picker__mask {
  93. position: absolute;
  94. pointer-events: none;
  95. }
  96. .van-picker__frame {
  97. top: 50%;
  98. right: 16px;
  99. left: 16px;
  100. z-index: 1;
  101. -webkit-transform: translateY(-50%);
  102. transform: translateY(-50%);
  103. }