lawn-ui/packages/Dialog/index.less

A Vue.js UI Toolkit for Mobile Web

.ln-dialog{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    overflow: hidden;
    font-size: 16px;
    background-color: #fff;
    border-radius: 16px;
    transform: translate3d(-50%, -50%,0);
    &-header{
        padding: var(--content-padding);
        max-height: 20px;
        text-align: center;
        font-size: var(--font-size-lg);
    }
    &-main{
        padding: var(--content-padding);
        font-size: var(--font-size-md);
    }
    &-footer{
        font-size: var(--font-size-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 40px;
        line-height: 40px;
        &-btn{
            flex: 1;
            // border-right: 1px solid #dedede;
            // border-top: 1px solid #dedede;
            position: relative;
            &::after{
                content:'';
                position:absolute;
                top: 0;
                left: 0;
                width: 200%;
                height: 200%;
                transform: scale(0.5);
                transform-origin: left top;
                box-sizing: border-box;
                border-top: 1px solid var(--border-color);
                border-right: 1px solid var(--border-color);
              }
             
        }
        &-btn:last-child{
            &::after{
                border-right: none;
            }
        }
    }
}