12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- @import "../styles/mixins/index.less";
- @import "../styles/themes/index.less";
- .@{wux-prefix}-tabs {
- position: relative;
- &--scroll &__scroll-view {
- display: block;
- overflow: auto;
- white-space: nowrap;
- }
- &--vertical {
- display: inline-flex;
- }
- &--vertical &__scroll-view {
- display: inline-flex;
- width: auto;
- height: auto;
- max-height: @tabs-vertical-height;
- flex-direction: column;
- }
- &__scroll-view {
- display: flex;
- width: 100%;
- height: @tabs-height;
- line-height: @tabs-height;
- box-sizing: border-box;
- position: relative;
- justify-content: space-around;
- align-items: center;
- background: @tabs-bg;
- }
- &__mask {
- position: absolute;
- top: 0;
- bottom: 0;
- z-index: 1;
- width: 40rpx;
- height: 100%;
- pointer-events: none;
- &--prev {
- left: 0;
- background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
- }
- &--next {
- right: 0;
- background: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0));
- }
- }
- &--vertical &__mask {
- width: 100%;
- height: 40rpx;
- left: 0;
- right: unset;
- &--prev {
- bottom: unset;
- background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0));
- }
- &--next {
- top: unset;
- background: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, 0));
- }
- }
- }
|