acud/lib/modal/style/index.less

acg react 组件库

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

@modal-prefix-cls: ~'@{acud-prefix}-modal';
@dialogbox-prefix: ~'@{modal-prefix-cls}-dialogbox';

.@{modal-prefix-cls} {
    .reset-component();
    // 背景蒙层
    .modal-mask();

    // 弹框
    position: relative;
    // 兼容旧版本样式，重置left、top和translate
    left: auto;
    top: auto;
    transform: translate(0);
    width: auto;
    max-width: calc(100vw - 32px);

    &-sm {
        .modal-size-config(sm);
    }

    &-sm > &-content {
        .modal-size-config-content(sm);
    }

    &-md {
        .modal-size-config(md);
    }

    &-md > &-content {
        .modal-size-config-content(md);
    }

    &-lg {
        .modal-size-config(lg);
    }

    &-lg > &-content {
        .modal-size-config-content(lg);
    }

    &-xl {
        .modal-size-config(xl);
    }

    &-xl > &-content {
        .modal-size-config-content(xl);
    }

    // 弹框内容
    &-content {
        position: relative;
        background-color: @modal-content-bg-color;
        background-clip: padding-box;
        border: 0;
        border-radius: @border-radius-base;
        box-shadow: @shadow-2;
        pointer-events: auto;
        border-radius: @R4;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    // 内容头部
    &-header {
        padding: @modal-heading-padding;
        color: @modal-heading-color;
        font-weight: @modal-heading-font-weight;
        flex: none;
    }

    // 头部关闭
    &-close {
        position: absolute;
        top: 0;
        right: 6 * @P;
        color: @modal-close-color;
        line-height: 1;
        text-decoration: none;
        background: transparent;
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: color .3s;

        &-x {
            display: block;
            margin-top: 6 * @P + 0.5*(@modal-heading-height - @modal-close-font-size);
            font-size: @modal-close-font-size;
            text-align: center;
            text-transform: none;
            text-rendering: auto;
            font-weight: 700;
        }

        &:focus,
        &:hover {
            color: @modal-close-hover-color;
            text-decoration: none;
            font-weight: 900;
        }
    }

    // 头部标题
    &-title {
        font-size: @modal-heading-font-size;
        line-height: @modal-heading-height;
        padding-right: @P * 3;
        word-wrap: break-word;
    }

    // 内容body部分
    &-body {
        margin: @modal-body-margin;
        font-size: @modal-body-font-size;
        font-weight: @modal-body-font-weight;
        line-height: @modal-body-line-height;
        word-wrap: break-word;
        color: @modal-body-font-color;
        flex: 1;
        overflow-y: auto;
    }

    // 内容footer部分
    &-footer {
        padding: @modal-footer-padding;
        background: @modal-footer-bg-color;
        text-align: right;
        flex: none;
        // TODO: 暂时解决 confirmLoading 时按钮对齐问题
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .@{acud-prefix}-btn {
            margin: 0;
        }
        .@{acud-prefix}-btn + .@{acud-prefix}-btn {
            margin-left: @modal-footer-btn-space;
        }
    }
}

.@{dialogbox-prefix} {
    width: @P * 100;
    height: auto;
    min-height: @P * 46;

    &-icon {
        height: 100%;
        margin-right: @P * 3;
        float: left;
        // TODO: 没找到更好的居中办法
        display: flex;
        align-items: center;
        padding-top: 2px;
    }

    &-title {
        overflow: hidden;
        padding-right: @P * 3;
    }

    &-content {
        width: 100%;
        padding-left: @P * 3 + @T6;
    }

    .@{modal-prefix-cls}-title {
        .@{iconfont-css-prefix} {
            font-size: @T6;
        }
    }

    & > .@{modal-prefix-cls}-content {
        min-height: @P * 46;
    }
}

.@{dialogbox-prefix}-warning {
    .@{dialogbox-prefix}-icon {
        color: @W6;
    }
}

.@{dialogbox-prefix}-info {
    .@{dialogbox-prefix}-icon {
        color: @B6;
    }
}

.@{dialogbox-prefix}-success {
    .@{dialogbox-prefix}-icon {
        color: @S6;
    }
}
.@{dialogbox-prefix}-error {
    .@{dialogbox-prefix}-icon {
        color: @E6;
    }
}

.@{dialogbox-prefix}-confirm {
    .@{dialogbox-prefix}-icon {
        color: @W6;
    }
}