yyzone/src/assets/styles/components/modal.less

yyzone vue components and utils

@prefixModalCls: ~'@{yy-css-prefix}modal';

@modal-width: 340px;
@modal-padding: 20px;
@modal-radius: 4px;
@modal-line-height: 22px;

.@{prefixModalCls} {
    &-mask {
        .mask(10, transparent, fixed);
    }

    &-wrapper {
        .fullscreen();
    }

    &-inner {
        .vertical();
        position: relative;
        top: 100px;
        width: @modal-width;
        background-color: @yy-background-component;
        border-radius: @modal-radius;
        box-shadow: @yy-shadow-base;
        padding: @modal-padding;

        &-header {
            font-size: @yy-font-size-large;
            color: @yy-text-primary-color;
            display: flex;
        }

        &-title {
            flex: 1;
            .ellipsis;
        }

        &-close {
            margin-left: @modal-padding / 2;
            color: @yy-text-primary-color;
            .cursor();
        }

        &-body {
            padding: @modal-padding 0;
            font-size: @yy-font-size-base;
            line-height: @modal-line-height;
            color: @yy-text-info-color;
        }

        &-footer {
            text-align: right;
        }
    }
}