wux-weapp/src/filterbar/index.less

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

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

.@{wux-prefix}-filterbar {
    position: relative;
    z-index: @z-index-filterbar;

    &__bd {
        display: flex;
        position: relative;
        background-color: #FAFAFA;
        padding: 11px 0;
        font-size: 14px;
        height: 50px;
        line-height: 24px;
        text-align: center;
        box-sizing: border-box;

        &::after {
            .setBottomLine(@border-color-split);
        }
    }

    &__item {
        position: relative;
        display: block;
        flex: 1;
        padding: 0 5px;
        .ellipsis();

        &::after {
            .setRightLine(@border-color-split);

            height: 50%;
            transform: scaleX(0.5) translateY(50%);
        }

        &--checked {
            color: #f15353;

            .@{wux-prefix}-filterbar__icon {
                &--radio,
                &--checkbox {
                    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKBAMAAABPkMOvAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUdwTOQ5O+Q4O+Q4OOQ4O+E8POM4O/9VVeQ5POQ3O+M5PeQ5POM4O+M3O+M6OuQ5PKIlyb4AAAAPdFJOUwD36Sa9EZUD22hCpc5AQdj+2nUAAABHSURBVAjXY9j4HwykGc5DGH8YjCAMZQYueRD9cQEDw3wQ4ycDAwMbiJEAZLD7////pQDIYIj4/78VRDMw638yADMYHukCCQAZSy19VPmgygAAAABJRU5ErkJggg==);
                }
            }
        }

        &--visible {
            .@{wux-prefix}-filterbar__icon {
                &--radio,
                &--checkbox {
                    transform: scaleY(-1);
                }
            }
        }
    }

    &__text {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        max-width: 100%;
        .ellipsis();
    }

    &__item--has-icon &__text {
        padding-right: 20px;
    }

    &__icon {
        position: absolute;
        right: 0;
        top: 50%;
        width: 15px;
        height: 12px;
        margin-top: -6px;
        /* margin-left: 3px; */
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;

        &--radio,
        &--checkbox {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKBAMAAABPkMOvAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUdwTMzMzMzMzM3NzczMzKqqqsvLy8vLy9LS0szMzMzMzMzMzMvLy8zMzMzMzMOayfkAAAAOdFJOUwDs1Sb6A72VEWhCpUBBhNlJeQAAAEdJREFUCNdj2PIODLwZ9CCMRwyGEIYwA5cfiH6ygIFhHojxkoGBgR3EKAAyWPPevXsWAGQwNL17pwGiGZjlHhqAGQwXZYAEAGG7KjzTWTeMAAAAAElFTkSuQmCC) no-repeat;
            background-size: 8px auto;
            background-position: 0 4px;
        }

        &--sort {
            background-position: 0 -26px;
            background-size: 9px 36px;
            background-image: url(data:image/png;base64,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);
        }

        &--sort-desc {
            background-position: 0 -12px;
            transform: scaleY(-1);
        }

        &--sort-asc {
            background-position: 0 -12px;
        }

        &--filter {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaBAMAAABbZFH9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAVUExURUdwTMzMzM7OzszMzNDQ0MfHx8zMzDEar9oAAAAGdFJOUwDTFcQWF87ZqzkAAABeSURBVBjTYzBLQ4BkBlSeYmIAAwSwigkxMImJQnmBiQoMcEmQFANQUgQhBZJ0AJIsYCmYpCNECiIJkwJJGjAww6QYGNQSGNiSYBwGtgQQoi6P2QCZB5GmMQ9oJRAAANAtGtSzNppcAAAAAElFTkSuQmCC) no-repeat;
            background-size: 13px auto;
        }
    }

    &__select {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
    }

    &__pop {
        height: 100%;
        width: 90%;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 10%;
        z-index: @z-index-filterbar + 10;
        background-color: #fff;
        box-sizing: border-box;
    }

    &__scroll-view {
        max-height: 270px;
    }

    &__pop &__btn {
        @supports (padding-bottom: constant(safe-area-inset-bottom)) {
            padding-bottom: constant(safe-area-inset-bottom);
        }

        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    &__pop &__scroll-view {
        max-height: none;
        height: 85%;
        height: calc(~"100% - 44px");

        @supports (padding-bottom: constant(safe-area-inset-bottom)) {
            height: calc(~"100% - 44px - constant(safe-area-inset-bottom)");
        }

        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            height: calc(~"100% - 44px - env(safe-area-inset-bottom)");
        }
    }

    &__panel {
        padding: 0 15px;

        &:last-child {
            padding-bottom: 20px;
        }
    }

    &__panel-hd {
        padding-top: 20px;
        padding-bottom: 2px;
        color: #252525;
        font-size: 15px;
        overflow-x: hidden;
        display: flex;
        align-items: center;
    }

    &__panel-selected {
        .ellipsis();

        flex: 1;
        text-align: right;
        font-size: 13px;
        padding-left: 30px;
        color: #f15353;
    }

    &__groups {
        overflow: hidden;
        font-size: 13px;
        margin: 0 -5px;
    }

    &__group {
        .ellipsis();

        position: relative;
        height: 32px;
        width: 33.3333%;
        color: #232326;
        margin-top: 10px;
        float: left;
        box-sizing: border-box;
        padding-left: 5px;
        padding-right: 5px;
    }

    &__radio,
    &__check,
    &__btn {
        .ellipsis();

        height: 32px;
        display: block;
        text-align: center;
        line-height: 32px;
        background-color: #f0f2f5;
        border-radius: @border-radius-base;
        border: 1px solid #f0f2f5;
        box-sizing: border-box;
    }

    &__radio,
    &__check {
        position: absolute;
        left: 5px;
        top: 0;
        width: 100%;
        width: calc(~"100% - 10px");
        opacity: 0;
    }

    &__btn--checked {
        border-color: #fdf0f0;
        background-color: #fdf0f0;
        color: #f15353;

        &::after {
            content: "";
            position: absolute;
            right: 10rpx;
            bottom: 0;
            width: 30rpx;
            height: 30rpx;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAhUExURUdwTOQ4POQ5PPrV1f///+dGSO17ff3u7/Kio+lcXvW4uZrptW4AAAACdFJOUwB/timhlQAAAH1JREFUGNNdzkEOQDAQheG6Qo/whNjjBBWs9QbiCFzExl4cFG1HzOvuz5fpjDHqZTqNJQYxiEEMYhCDGMQgBjGIQQxiEOPPRf114NxJx+lrkw5cDXvqyEsv/z1cT2U3p365aY9R9r3T3q1n6ri7cXJPPM23qeVyudfq1gxi3DyiIhPh30TpAAAAAElFTkSuQmCC) no-repeat;
            background-size: 30rpx auto;
            overflow: hidden;
            z-index: 1;
        }
    }
}

.@{wux-prefix}-filterbar__btns {
    height: auto;
    min-height: 44px;
    display: -webkit-box;
    overflow: hidden;

    .@{wux-prefix}-filterbar__btn {
        background-color: #fff;
        color: #252525;
        font-size: 16px;
        position: relative;
        display: -webkit-box;
        -webkit-box-flex: 1;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        border: none;
        border-radius: 0;
        min-height: 44px;
        height: auto;
        line-height: 44px;

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

    .@{wux-prefix}-filterbar__btn--danger {
        background-color: #f23030;
        color: #fff;

        &::before {
            display: none;
        }
    }
}