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

yyzone vue components and utils

@prefixModalCls: ~'yy-modal';

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

.@{prefixModalCls} {
    &-mask {
        .mask(10, @yy-bg-opacity, fixed);
    }
    &-wrapper {
        .fullscreen();
    }
    &-inner {
        .vertical();
        position: relative;
        top: 100px;
        width: @modal-width;
        background-color: @yy-bg-info;
        border-radius: @modal-radius;
        box-shadow: @yy-shadow-base;
        padding: @modal-padding;
        &-header {
            font-size: @yy-font-size-md;
            color: @yy-text-primary;
            display: flex;
        }
        &-title {
            flex: 1;
            .ellipsis;
        }
        &-close {
            margin-left: @modal-padding / 2;
            color: @yy-text-default;
            .cursor();
        }
        &-body {
            padding: @modal-padding 0;
            font-size: @yy-font-size-sm;
            line-height: @modal-line-height;
            color: @yy-text-info;
        }
        &-footer {
            text-align: right;
        }
    }
}