wux-weapp/src/styles/mixins/toolbar.less

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

@import "../themes/index.less";
@import "./setOnepx.less";

.toolbar-style(@text-color, @cancel-text-color, @confirm-text-color, @background-color: #f7f7f8) {
    &__toolbar {
        position: relative;
        width: 100%;
        font-size: 17px;
        line-height: 1.5;
        color: @text-color;
        background-color: @background-color;

        &::before {
            .setTopLine(@border-color-split);
        }
    }

    &__inner {
        height: 44px;
        display: flex;
        text-align: center;
    }

    &__title {
        position: absolute;
        display: block;
        width: 100%;
        padding: 0;
        font-size: 17px;
        font-weight: normal;
        line-height: 44px;
        color: @text-color;
        text-align: center;
        white-space: nowrap;
    }

    &__button {
        position: absolute;
        box-sizing: border-box;
        height: 44px;
        line-height: 44px;
        padding: 0 15px;
        z-index: 10;
        cursor: pointer;

        &--cancel {
            left: 0;
            color: @cancel-text-color;
        }

        &--confirm {
            right: 0;
            color: @confirm-text-color;
        }

        &--hover {
            background-color: @active-state-bg;
        }

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