wux-weapp/packages/core/timeline-item/index.less

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

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

.@{wux-prefix}-timeline-item {
    position: relative;
    padding: 0 0 12px;
    margin: 0;
    font-size: @timeline-font-size;
    box-sizing: border-box;

    &__tail {
        height: 100%;
        border-left: @timeline-width solid @timeline-color;
        position: absolute;
        left: 5px;
        top: 0;
        box-sizing: border-box;
    }

    &__dot {
        .square(@timeline-dot-size);

        background-color: @timeline-dot-bg;
        border-radius: 50%;
        border: @timeline-dot-border-width solid @timeline-dot-color;
        position: absolute;
        color: @timeline-dot-color;
        box-sizing: border-box;

        &--custom {
            margin-left: 1px !important;
            left: 5px;
            top: 8px;
            border: 0;
            border-radius: 0;
            width: auto;
            height: auto;
            background-color: transparent;
            text-align: center;
            transform: translate(-50%, -50%);
        }
    }

    &__content {
        padding: 0 0 10px 20px;
        position: relative;
        top: -5px;
        width: 100%;
        box-sizing: border-box;
    }

    &--last &__tail,
    &--pending &__tail--pending {
        display: none;
    }

    &--last&--pending &__tail {
        display: block;
        border-left-style: dotted;
    }

    &--right &__tail {
        left: 100%;
    }

    &--right &__dot {
        left: 100%;
        margin-left: -5px;
    }

    &--right &__content {
        text-align: right;
        right: 0;
        left: -20px;
    }

    &--alternate&--right &__tail,
    &--alternate&--left &__tail {
        left: 50%;
    }

    &--alternate&--right &__dot,
    &--alternate&--left &__dot {
        left: 50%;
        margin-left: -5px;
    }

    &--alternate&--right &__content {
        text-align: right;
        right: 50%;
        width: 50%;
    }

    &--alternate&--left &__content {
        text-align: left;
        left: 50%;
        width: 50%;
    }
}