wux-weapp/packages/core/accordion/index.less

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

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

.@{wux-prefix}-accordion {
    &__hd {
        position: relative;
        padding: @accordion-hd-padding;
        color: @accordion-color;
        background-color: @accordion-bg;
        box-sizing: border-box;
        padding-right: @accordion-hd-padding-extra;
        width: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: flex;
        align-items: center;
        cursor: pointer;

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

            left: 0;
        }
    }

    &__thumb {
        .square(@accordion-icon-size);

        display: block;
        margin-right: @margin-component-base;
    }

    &__arrow {
        .setArrow(down);

        transition: transform .2s ease;
        position: absolute;
        display: block;
        top: 15px;
        right: 15px;
    }

    &--current > &__hd > &__arrow {
        transform: rotate(270deg);
    }

    &__bd {
        display: none;
        overflow: hidden;
        background: @accordion-bg;
        font-size: 15px;
        color: @heading-color;
        position: relative;
        padding: @accordion-bd-padding;

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

            left: 0;
        }
    }

    &--current > &__bd {
        display: block;
    }
}