wux-weapp/src/tabbar-item/index.less

一套组件化、可复用、易扩展的微信小程序 UI 组件库

@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.tabbar-style(@theme, @color) {
    &--@{theme}&--current {
        color: @color;
    }
}

.@{wux-prefix}-tabbar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    color: @tabbar-default-color;
    padding: 5px 0;
    box-sizing: border-box;
    float: left;
    cursor: pointer;

    &__icon {
        display: flex;
        justify-content: center;
        font-size: 22px;
        height: 22px;
        line-height: 1;
    }

    &__title {
        font-size: @tabbar-font-size;
        margin: 2px 0 0;
        line-height: 1;
        text-align: center;
    }

    &--current {
        color: @tabbar-balanced-bg;
    }

    &--disabled {
        opacity: @disabled-opacity;
        cursor: not-allowed;
    }

    .tabbar-style(light, @tabbar-light-bg);
    .tabbar-style(stable, @tabbar-stable-bg);
    .tabbar-style(positive, @tabbar-positive-bg);
    .tabbar-style(calm, @tabbar-calm-bg);
    .tabbar-style(assertive, @tabbar-assertive-bg);
    .tabbar-style(balanced, @tabbar-balanced-bg);
    .tabbar-style(energized, @tabbar-energized-bg);
    .tabbar-style(royal, @tabbar-royal-bg);
    .tabbar-style(dark, @tabbar-dark-bg);
}