index.less 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-tabs {
  4. position: relative;
  5. &--scroll &__scroll-view {
  6. display: block;
  7. overflow: auto;
  8. white-space: nowrap;
  9. }
  10. &--vertical {
  11. display: inline-flex;
  12. }
  13. &--vertical &__scroll-view {
  14. display: inline-flex;
  15. width: auto;
  16. height: auto;
  17. max-height: @tabs-vertical-height;
  18. flex-direction: column;
  19. }
  20. &__scroll-view {
  21. display: flex;
  22. width: 100%;
  23. height: @tabs-height;
  24. line-height: @tabs-height;
  25. box-sizing: border-box;
  26. position: relative;
  27. justify-content: space-around;
  28. align-items: center;
  29. background: @tabs-bg;
  30. }
  31. &__mask {
  32. position: absolute;
  33. top: 0;
  34. bottom: 0;
  35. z-index: 1;
  36. width: 40rpx;
  37. height: 100%;
  38. pointer-events: none;
  39. &--prev {
  40. left: 0;
  41. background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
  42. }
  43. &--next {
  44. right: 0;
  45. background: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0));
  46. }
  47. }
  48. &--vertical &__mask {
  49. width: 100%;
  50. height: 40rpx;
  51. left: 0;
  52. right: unset;
  53. &--prev {
  54. bottom: unset;
  55. background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0));
  56. }
  57. &--next {
  58. top: unset;
  59. background: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, 0));
  60. }
  61. }
  62. }