magiccube-vue3/package/style/collapse-item.less

vue3-js版组件库

@import './theme';

.mc-collapse-item {
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: @collapse-box-shadow;

    &__header {
        display: flex;
        align-items: center;
        height: @collapse-header-height;
        line-height: @collapse-header-height;
        padding: 0 16px;
        color: @color-font;
        cursor: pointer;
        font-size: @font-default;
        font-weight: 500;
        transition: @collapse-transition;
        outline: none;

        &--arrow {
            display: block;
            position: relative;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #f5f8fc;
            transition: all 300ms;
            margin: 0 8px 0 auto;

            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 6px;
                height: 6px;
                border: 1px solid #666;
                transform: translate(-50%, -50%) rotate(32deg) skew(-16deg, 10deg);
                transform-origin: 60% 50%;
                border-top: 0;
                border-left: 0;
            }

            &.rotate {
                transform: rotate(-180deg);
            }
        }

        &--img-arrow {
            margin-left: auto;
        }
    }

    &__content {
        padding-top: 24px;
        padding-bottom: 24px;
        transform-origin: top;
        transition: all 200ms;
        background-color: rgba(245, 248, 252, 0.4);
        border-top: 1px solid rgba(239,242,245,0.35);

        &.slide-up {
            transform: scaleY(0);
            opacity: 0;
        }

        &.slide-down {
            transform: scaleY(1);
            opacity: 1;
        }
    }

    &.is-disabled {
        color: @color-disabled;
        cursor: not-allowed;
    }
}