index.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. @picker-item-height: 34px;
  4. .@{wux-prefix}-picker-col {
  5. display: block;
  6. position: relative;
  7. height: @picker-item-height * 7;
  8. overflow: hidden;
  9. width: 100%;
  10. flex: 1;
  11. &--left {
  12. text-align: left;
  13. }
  14. &--center {
  15. text-align: center;
  16. }
  17. &--right {
  18. text-align: right;
  19. }
  20. &__mask,
  21. &__indicator {
  22. position: absolute;
  23. left: 0;
  24. width: 100%;
  25. z-index: 3;
  26. }
  27. &__mask {
  28. top: 0;
  29. height: 100%;
  30. margin: 0 auto;
  31. background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6)), linear-gradient(0deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6));
  32. background-position: top, bottom;
  33. background-size: 100% @picker-item-height * 3;
  34. background-repeat: no-repeat;
  35. }
  36. &__indicator {
  37. box-sizing: border-box;
  38. height: @picker-item-height;
  39. top: @picker-item-height * 3;
  40. &::before {
  41. .setTopLine(@border-color-split);
  42. }
  43. &::after {
  44. .setBottomLine(@border-color-split);
  45. }
  46. }
  47. &__content {
  48. position: absolute;
  49. left: 0;
  50. top: 0;
  51. width: 100%;
  52. z-index: 1;
  53. padding: @picker-item-height * 3 0;
  54. }
  55. &__item {
  56. font-size: @font-size-lg;
  57. height: @picker-item-height;
  58. line-height: @picker-item-height;
  59. color: @black;
  60. white-space: nowrap;
  61. text-overflow: ellipsis;
  62. overflow: hidden;
  63. &--disabled {
  64. opacity: @disabled-opacity;
  65. }
  66. &--selected {
  67. font-size: @font-size-lg + 1px;
  68. }
  69. }
  70. }