| | |
| | | } |
| | | .t-tabs { |
| | | position: relative; |
| | | font-size: var(--tab-font-size, 28rpx); |
| | | font-size: var(--td-tab-font-size, 28rpx); |
| | | background: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); |
| | | flex-wrap: wrap; |
| | | } |
| | |
| | | background: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); |
| | | } |
| | | .t-tabs__wrapper--card { |
| | | background: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)); |
| | | background: var(--td-tab-item-tag-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3))); |
| | | --td-tab-border-color: transparent; |
| | | } |
| | | .t-tabs__item { |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-weight: 400; |
| | | color: var(--td-tab-item-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); |
| | | padding: 0 32rpx; |
| | | color: var(--td-tab-item-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); |
| | | padding: 0 var(--td-spacer-2, 32rpx); |
| | | box-sizing: border-box; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | |
| | | color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); |
| | | } |
| | | .t-tabs__item--disabled { |
| | | color: var(--td-tab-item-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))); |
| | | color: var(--td-tab-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); |
| | | } |
| | | .t-tabs__item--evenly { |
| | | flex: 1; |
| | | flex: 1 0 auto; |
| | | } |
| | | .t-tabs__item-inner { |
| | | display: flex; |
| | |
| | | .t-tabs__item-inner--tag { |
| | | width: 100%; |
| | | text-align: center; |
| | | padding: 0 32rpx; |
| | | padding: 0 var(--td-spacer-2, 32rpx); |
| | | line-height: var(--td-tab-item-tag-height, 64rpx); |
| | | border-radius: calc(var(--td-tab-item-tag-height, 64rpx) / 2); |
| | | background-color: var(--td-tab-item-tag-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3))); |
| | |
| | | background-color: var(--td-tab-item-tag-active-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff))); |
| | | } |
| | | .t-tabs__item--tag:not(.t-tabs__item--evenly) { |
| | | padding: 0 8rpx; |
| | | padding: 0 calc(var(--td-spacer, 16rpx) / 2); |
| | | } |
| | | .t-tabs__item--tag:not(.t-tabs__item--evenly):first-child { |
| | | margin-left: 16rpx; |
| | | margin-left: var(--td-spacer, 16rpx); |
| | | } |
| | | .t-tabs__item--tag:not(.t-tabs__item--evenly):last-child { |
| | | padding-right: 24rpx; |
| | | padding-right: var(--td-spacer-1, 24rpx); |
| | | } |
| | | .t-tabs__item--tag { |
| | | padding: 0 16rpx; |
| | | padding: 0 var(--td-spacer, 16rpx); |
| | | } |
| | | .t-tabs__item--card.t-tabs__item--active { |
| | | background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); |
| | | border-radius: 18rpx 18rpx 0 0; |
| | | background-color: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); |
| | | border-radius: var(--td-radius-large, 18rpx) var(--td-radius-large, 18rpx) 0 0; |
| | | } |
| | | .t-tabs__item--card.t-tabs__item--active:first-child { |
| | | border-top-left-radius: 0; |
| | |
| | | border-top-right-radius: 0; |
| | | } |
| | | .t-tabs__item--card.t-tabs__item--pre { |
| | | border-bottom-right-radius: 18rpx; |
| | | border-bottom-right-radius: var(--td-radius-large, 18rpx); |
| | | } |
| | | .t-tabs__item-prefix, |
| | | .t-tabs__item-suffix { |
| | | position: absolute; |
| | | bottom: 0; |
| | | width: 36rpx; |
| | | height: 36rpx; |
| | | background: #fff; |
| | | width: 18rpx; |
| | | height: 18rpx; |
| | | background-color: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); |
| | | } |
| | | .t-tabs__item-prefix::after, |
| | | .t-tabs__item-suffix::after { |
| | |
| | | display: block; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)); |
| | | background-color: var(--td-tab-item-tag-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3))); |
| | | } |
| | | .t-tabs__item-prefix { |
| | | right: 0; |
| | | } |
| | | .t-tabs__item-prefix::after { |
| | | border-bottom-right-radius: 18rpx; |
| | | border-bottom-right-radius: var(--td-radius-large, 18rpx); |
| | | } |
| | | .t-tabs__item-suffix { |
| | | left: 0; |
| | | } |
| | | .t-tabs__item-suffix::after { |
| | | border-bottom-left-radius: 18rpx; |
| | | border-bottom-left-radius: var(--td-radius-large, 18rpx); |
| | | } |
| | | .t-tabs__icon { |
| | | font-size: var(--td-tab-icon-size, 36rpx); |
| | | margin-right: 4rpx; |
| | | margin-right: calc(var(--td-spacer, 16rpx) / 4); |
| | | } |
| | | .t-tabs__content { |
| | | overflow: hidden; |
| | |
| | | border-radius: var(--td-tab-track-radius, 8rpx); |
| | | } |
| | | .t-tabs__scroll { |
| | | position: relative; |
| | | height: var(--td-tab-item-height, 96rpx); |
| | | } |
| | | .t-tabs__scroll--split { |
| | | position: relative; |
| | | } |
| | | .t-tabs__scroll::after { |
| | | .t-tabs__scroll--split::after { |
| | | content: ''; |
| | | display: block; |
| | | position: absolute; |
| | |
| | | right: unset; |
| | | background-color: var(--td-tab-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7))); |
| | | } |
| | | .t-tabs__scroll::after { |
| | | .t-tabs__scroll--split::after { |
| | | height: 1px; |
| | | left: 0; |
| | | right: 0; |