index.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. @import '../style/var';
  2. .van-tab {
  3. position: relative;
  4. display: flex;
  5. flex: 1;
  6. align-items: center;
  7. justify-content: center;
  8. box-sizing: border-box;
  9. padding: 0 @padding-base;
  10. color: @tab-text-color;
  11. font-size: @tab-font-size;
  12. line-height: @tab-line-height;
  13. cursor: pointer;
  14. &--active {
  15. color: @tab-active-text-color;
  16. font-weight: @font-weight-bold;
  17. }
  18. &--disabled {
  19. color: @tab-disabled-text-color;
  20. cursor: not-allowed;
  21. }
  22. &__text {
  23. &--ellipsis {
  24. display: -webkit-box;
  25. overflow: hidden;
  26. -webkit-line-clamp: 1;
  27. -webkit-box-orient: vertical;
  28. }
  29. }
  30. &__text-wrapper {
  31. position: relative;
  32. }
  33. }
  34. .van-tabs {
  35. position: relative;
  36. &__wrap {
  37. overflow: hidden;
  38. &--page-top {
  39. position: fixed;
  40. }
  41. &--content-bottom {
  42. top: auto;
  43. bottom: 0;
  44. }
  45. &--scrollable {
  46. .van-tab {
  47. flex: 1 0 auto;
  48. padding: 0 @padding-sm;
  49. }
  50. .van-tabs__nav {
  51. overflow-x: auto;
  52. overflow-y: hidden;
  53. -webkit-overflow-scrolling: touch;
  54. &::-webkit-scrollbar {
  55. display: none;
  56. }
  57. }
  58. }
  59. }
  60. &__nav {
  61. position: relative;
  62. display: flex;
  63. background-color: @tabs-nav-background-color;
  64. user-select: none;
  65. &--line {
  66. box-sizing: content-box;
  67. height: 100%;
  68. padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
  69. }
  70. &--line&--complete {
  71. padding-right: @padding-xs;
  72. padding-left: @padding-xs;
  73. }
  74. &--card {
  75. box-sizing: border-box;
  76. height: @tabs-card-height;
  77. margin: 0 @padding-md;
  78. border: @border-width-base solid @tabs-default-color;
  79. border-radius: @border-radius-sm;
  80. .van-tab {
  81. color: @tabs-default-color;
  82. border-right: @border-width-base solid @tabs-default-color;
  83. &:last-child {
  84. border-right: none;
  85. }
  86. &.van-tab--active {
  87. color: @white;
  88. background-color: @tabs-default-color;
  89. }
  90. &--disabled {
  91. color: @tab-disabled-text-color;
  92. }
  93. }
  94. }
  95. }
  96. &__line {
  97. position: absolute;
  98. bottom: 15px;
  99. left: 0;
  100. z-index: 1;
  101. width: @tabs-bottom-bar-width;
  102. height: @tabs-bottom-bar-height;
  103. background-color: @tabs-bottom-bar-color;
  104. border-radius: @tabs-bottom-bar-height;
  105. }
  106. &__track {
  107. position: relative;
  108. display: flex;
  109. width: 100%;
  110. height: 100%;
  111. will-change: left;
  112. }
  113. &__content {
  114. &--animated {
  115. overflow: hidden;
  116. }
  117. }
  118. &--line {
  119. .van-tabs__wrap {
  120. height: @tabs-line-height;
  121. }
  122. }
  123. &--card {
  124. > .van-tabs__wrap {
  125. height: @tabs-card-height;
  126. }
  127. }
  128. }