acud/lib/toast/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';

@toast-padding-vertical: @P;
@toast-padding-horizontal: 4 * @P;
@toast-font-size-base: @T3;
@line-height-base: 1.5715;
@notification-bg: #fff;
@heading-color: #000;

@notification-prefix-cls: ~'@{acud-prefix}-notification';
@toast-padding: @toast-padding-vertical @toast-padding-horizontal;

.@{notification-prefix-cls} {
    .reset-component();
    position: fixed;
    z-index: @zindex-toast;
    margin-right: @toast-margin-edge;

    & > div {
        display: flex;
        flex-direction: column-reverse;
    }

    &-topLeft,
    &-bottomLeft {
        margin-right: 0;
        margin-left: @toast-margin-edge;

        .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
        .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
            animation-name: NotificationLeftFadeIn;
        }
    }

    &-close-icon {
        font-size: 4 * @P;
        cursor: pointer;
    }

    &-hook-holder {
        position: relative;
    }

    &-notice {
        position: relative;
        width: @toast-width;
        max-width: ~'calc(100vw - @{toast-margin-edge} * 2)';
        margin-bottom: @toast-margin-bottom;
        margin-left: auto;
        padding: @toast-padding;
        overflow: hidden;
        line-height: @line-height-base;
        word-wrap: break-word;
        background: @notification-bg;
        border-radius: @R2;
        box-shadow: @shadow-1;

        .@{notification-prefix-cls}-topLeft &,
        .@{notification-prefix-cls}-bottomLeft & {
            margin-right: auto;
            margin-left: 0;
        }

        &-message {
            margin-bottom: 2 * @P;
            color: @G2;
            font-size: @T3;
            line-height: 6 * @P;

            &-single-line-auto-margin {
                display: block;
                width: ~'calc(@{toast-width} - @{toast-padding-horizontal} * 2 - 24px - 48px - 100%)';
                background-color: transparent;
                pointer-events: none;

                &::before {
                    display: block;
                    content: '';
                }
            }

            .@{notification-prefix-cls}-toast-wrap {
                display: flex;

                &-left {
                    flex: 1;
                    font-size: @T3;
                    color: @G2;
                    font-weight: @font-weight-500;
                }

                &-right {
                    font-size: @T2;
                    color: @G6;

                    span {
                        font-size: @T2;
                    }
                }

                &-no-description {
                    color: @G2;
                    font-size: @T2;
                    font-weight: @font-weight-400;
                }
            }
        }

        &-description {
            font-size: @toast-font-size-base;

            .description-wrap {
                margin: @P 0 0 0;
                color: @G2;
                font-size: @T2;
                font-weight: @font-weight-400;
            }
        }

        &-with-icon &-message {
            margin: 0 ~'calc(@{toast-title-margin} + @{P} * 4)' 0 ~'calc(@{toast-title-margin} + @{T5})';
            font-size: @font-size-lg;
        }

        &-with-icon &-description {
            margin: 0 ~'calc(@{toast-title-margin} + @{P} * 4)' 0 ~'calc(@{toast-title-margin} + @{T5})';
            font-size: @toast-font-size-base;
        }

        &-icon {
            position: absolute;
            font-size: 4 * @P;
            line-height: 4 * @P;
            top: 2 * @P;
        }

        .@{notification-prefix-cls}-notice-icon {
            &-success {
                path {
                    fill: @S6;
                }
            }

            &-info {
                path {
                    fill: @B6;
                }
            }

            &-warning {
                path {
                    fill: @W6;
                }
            }

            &-error {
                path {
                    fill: @E6;
                }
            }
        }

        &-close {
            position: absolute;
            top: 1 * @P;
            right: 4 * @P;
            outline: none;
            color: @G5;

            &:hover {
                color: @G4;
                // & when (@theme = dark) {
                //   color: #fff;
                // }
                // & when not (@theme = dark) {
                // //   color: shade('#ccc', 40%);
                //   color: #ccc;
                // }
            }

            &:active {
                color: @G3;
            }
        }

        &-btn {
            float: right;
            margin-top: 16px;
        }
    }

    &-has-description {
        padding: 4 * @P @toast-padding-horizontal;
        .@{notification-prefix-cls}-notice-icon {
            top: 4.8 * @P;
        }
        .@{notification-prefix-cls}-notice-close {
            top: 4 * @P;
        }
    }

    .notification-fade-effect {
        animation-duration: .24s;
        animation-timing-function: @ease-in-out;
        animation-fill-mode: both;
    }

    &-fade-enter,
    &-fade-appear {
        .notification-fade-effect();

        opacity: 0;
        animation-play-state: paused;
    }

    &-fade-leave {
        .notification-fade-effect();

        animation-duration: .4s;
        animation-play-state: paused;
    }

    &-fade-enter&-fade-enter-active,
    &-fade-appear&-fade-appear-active {
        animation-name: NotificationFadeIn;
        animation-play-state: running;
    }

    &-fade-leave&-fade-leave-active {
        animation-name: NotificationFadeOut;
        animation-play-state: running;
    }
}

@keyframes NotificationFadeIn {
    0% {
        left: @toast-width;
        opacity: 0;
    }

    100% {
        left: 0;
        opacity: 1;
    }
}

@keyframes NotificationLeftFadeIn {
    0% {
        right: @toast-width;
        opacity: 0;
    }

    100% {
        right: 0;
        opacity: 1;
    }
}

@keyframes NotificationFadeOut {
    //   0% {
    //     top: 0;
    //     opacity: 1;
    //   }
    //   100% {
    //     top: -@toast-width;
    //     opacity: 0;
    //   }

    0% {
        right: 0;
        opacity: 1;
    }

    100% {
        right: -100 * @P;
        opacity: 0;
    }
}