acud/lib/dialog-box/style/index.less

acg react 组件库

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

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

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

    // 弹框
    position: relative;
    width: auto;
    max-width: calc(100vw - 32px);
    padding-bottom: 24px;
    &-sm {
        .modal-size-config(sm);
    }

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

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

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

    // 弹框内容
    &-content {
        position: relative;
        background-color: @modal-content-bg-color;
        background-clip: padding-box;
        border: 0;
        border-radius: @dialogbox-border-radius-base;
        pointer-events: auto;
        &-con {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        &-icon {
            height: 5 * @P;
            width: 5 * @P;
            margin-right: 3 * @P;
            border-radius: 50%;
            >span {
                height: 5 * @P;
                width: 5 * @P;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 6 * @P;
                font-weight: 700;
                svg {
                    width: 100%;
                    height: 100%;
                }
            }
            &.sucess {
                color: @S6;
            }
            &.warning {
                color: @W6;
            }
            &.info {
                color: @B6;
            }
            &.error {
                color: @E6;
            }
            color: #fff;
        }
        &-title {
            font-size: @T4;
            color: @G2;
            font-weight: 500;
            margin-bottom: 2 * @P;
            height: 5 * @P;
            line-height: 5 * @P;
        }
        &-text {
            min-width: 320px;
            min-height: 50px;
            font-size: @T2;
            color: @G2;
            line-height: 20px;
        }
    }

    // 内容头部
    &-header {
        padding: @modal-heading-padding;
        color: @modal-heading-color;
        background-color: @modal-heading-bg-color;
    }

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

        &-x {
            .@{iconfont-css-prefix} {
                .basic-tp-config(tp24);
            }
        }
    }

    // 内容body部分
    &-body {
        padding: @dialogbox-body-padding;
        font-size: @modal-body-font-size;
        line-height: @modal-body-line-height;
        word-wrap: break-word;
    }

    // 内容footer部分
    &-footer {
        width: 100%;
        padding: 0 6*@P 6*@P;
        box-sizing: border-box;
        overflow: hidden;
        text-align: right;
    
        .@{acud-prefix}-btn + .@{acud-prefix}-btn {
          margin-bottom: 0;
          margin-left: @dialogbox-footer-btn-space;
          font-size: @T2;
        }
        .acud-btn {
            margin: 0;
        }
    }
}