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

yyzone vue components and utils

@prefixDialogCls: ~'@{yy-css-prefix}dialog';

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

.@{prefixDialogCls} {
    position: relative;
    &-mask {
        .mask(10, transparent, fixed);
    }

    &-inner {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: @yy-background-component;
        margin: auto;
        border-radius: @modal-radius;
        box-shadow: @yy-shadow-base;
        display: flex;
        flex-direction: column;

        &-fullscreen {
            border-radius: 0;
        }

        &-header {
            font-size: @yy-font-size-large;
            color: @yy-text-primary-color;
            display: flex;
            padding: 14px 20px;
            box-sizing: border-box;
            align-items: center;
        }

        &-footer {
            text-align: right;
            padding: 14px 20px;
        }

        .resize-bar {
            position: absolute;
            width: 14px;
            height: 14px;
            background-size: 10px;
            background-repeat: no-repeat;
            background-position: center;
        }

        .resize-br {
            right: 6px;
            bottom: 6px;
            .cursor(nw-resize);
            background-image: url(../../images/scale.svg);
        }
        
        &-title {
            flex: 1;
            line-height: 22px;
            .ellipsis;
        }

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

        &-body {
            flex: 1;
            display: flex;
            height: 100%;
            overflow: hidden;
        }

        &-line &-body {
            border-top: 1px solid @yy-border-color-base;
            border-bottom: 1px solid @yy-border-color-base;
        }

        &-content {
            padding: 0 20px;
            height: 100%;
        }
    }
}