@chief-editor/ui/css/var/motion.less

UI Component for chief editor

@import "./color.less";

.motion-active-bg() {
    background-color: @color-primary6;
}

.motion-active-text() {
    color: @color-primary6;
}

.motion-active-border() {
    border-color: @color-primary5;
}

.motion-ready-bg() {
    background-color: @color-primary5;
}

.motion-ready-text() {
    color: @color-primary5;
}

.motion-ready-border() {
    border-color: @color-primary5;
}

.motion-processing-bg() {
    background-color: @color-primary7;
}

.motion-processing-text() {
    color: @color-primary7;
}

.motion-processing-border() {
    border-color: @color-primary7;
}

.motion-stroked-hint(
    @color: @motion-stroked-hint-color,
    @width: @motion-stroked-hint-width,
    @opacity: @motion-stroked-hint-opacity
) {
    box-shadow: 0 0 0 @width fade(@color, @opacity);
}

[data-motion-wave] {
    position: relative;

    &[data-motion-wave='after']::after,
    &[data-motion-wave='before']::before {
        content: ' ';
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        color: @motion-wave-color;
        opacity: @motion-wave-opacity;

        @animation: motionWaveFadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1) both,
        motionWaveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) both;
        .property-prefix(animation, @animation);
    }
}

@-webkit-keyframes motionWaveEffect {
    to {
        -webkit-box-shadow: 0 0 0 @motion-wave-width currentcolor;
    }
}

@keyframes motionWaveEffect {
    to {
        box-shadow: 0 0 0 @motion-wave-width currentcolor;
    }
}

@-webkit-keyframes motionWaveFadeEffect {
    to {
        opacity: 0;
    }
}

@keyframes motionWaveFadeEffect {
    to {
        opacity: 0;
    }
}

// 动效持续时长
@motion-duration-base: 0.04s;
@motion-duration1: @motion-duration-base * 1;
@motion-duration2: @motion-duration-base * 2;
@motion-duration3: @motion-duration-base * 3;
@motion-duration4: @motion-duration-base * 4;
@motion-duration5: @motion-duration-base * 5;
@motion-duration6: @motion-duration-base * 6;
@motion-duration7: @motion-duration-base * 7;
@motion-duration8: @motion-duration-base * 8;

// 动效持续时长
@motion-duration-a: 0.1s;
@motion-duration-b: 0.2s;
@motion-duration-c: 0.24s;
@motion-duration-d: 0.4s;
@motion-duration-e: 2s;

// 通用动效默认效果
@motion-stroked-hint-width: 2px;
@motion-stroked-hint-color: @color-primary3;
@motion-stroked-hint-opacity: 20%;
@motion-wave-width: 6px;
@motion-wave-color: @color-primary3;
@motion-wave-opacity: 20%;