acud/es/timeline/style/common.less

acg react 组件库

.common {
    margin-bottom: 2px;

    &.is-dot > .@{time-line-prefix-cls}-item-line {
        top: @P * 5 !important;
        bottom: @T1 !important;
        left: @P;
        height: calc(100% - 21px);
    }
    // 头部圆点
    &-head {
        display: flex;
        align-items: center;
        justify-content: center;
        width: @timeline-common-head-size;
        height: @timeline-common-head-size;
        border-radius: 50%;
        .basic-p-config(@timeline-default-p-color);

        &.is-dot {
            width: @P * 4;
            height: @P * 4;
            background-color: transparent;
        }
    }

    &-content {
        position: relative;
        top: @timeline-common-content-top;
        // margin-left: @P * 2 + @P * 2;
        margin-left: @timeline-common-content-margin;

        &.with-dot {
            top: -@timeline-common-content-middle-top + 4px;
            margin-left: calc(@timeline-common-content-margin + @P * 2 + 3px);
        }
        // 标签
        &-label {
            color: @timeline-common-content-label-color;
            font-size: @timeline-common-content-label-font;
        }
        // 标题
        &-title {
            color: @timeline-common-content-title-color;
            font-size: @timeline-common-content-title-font;
            line-height: @T6;
        }
        // a 标签
        a {
            color: @timeline-common-content-a-color;
            cursor: pointer;
            user-select: none;
        }
        // 展开按钮
        &-link {
            display: flex;
            align-items: center;
            width: @timeline-common-content-link-width;
            margin-top: @timeline-common-content-link-margin;
            font-size: @timeline-common-content-link-font;
            transition: opacity .2s linear;

            // svg {
            //     position: relative;
            //     top: @timeline-common-content-link-margin - 1.5px;
            // }

            &-label {
                flex-shrink: 0;
                margin-right: @timeline-common-content-link-margin;
            }

            &:hover {
                opacity: .8;
            }
        }
        // 内容
        &-inner {
            max-width: @timeline-common-content-inner-width;
            overflow: hidden;
            font-size: @timeline-common-content-inner-font;
            transition: all .3s;
            // 收起，隐藏样式
            &.is-hidden {
                max-height: 0;
                opacity: 0;
            }
            // 展开-阴影样式
            &.is-shadow {
                box-sizing: border-box;
                max-height: auto;
                margin: @timeline-common-content-inner-shadow-margin 0;
                padding: @timeline-common-content-inner-shadow-padding;
                background-color: @timeline-common-content-inner-shadow-bgColor;
                border-radius: @timeline-common-content-inner-shadow-radius;
                box-shadow:
                    0 2px 4px @timeline-common-content-inner-shadow-color,
                    0 0 6px @timeline-common-content-inner-shadow-color;
                opacity: 1;
            }
        }
    }
    /* 查看详情按钮 */
    &-render {
        line-height: @timeline-num-vertical-content-line-height;

        &:hover {
            .@{acud-timeline-dtlbtn} {
                opacity: 1;
            }
        }

        &-dtlbtn {
            margin-left: @timeline-common-render-margin;
            opacity: 0;
            transition: opacity .2s linear;
            word-wrap: none;
        }
    }
}