view-ui-plus/src/styles/base.less

A high quality UI components Library with Vue.js 3

.ivu{
    // 框类型
    &-block{
        display: block;
    }
    &-inline{
        display: inline;
    }
    &-inline-block{
        display: inline-block;
    }
    // 文字
    &-text-center{
        text-align: center;
    }
    &-text-left{
        text-align: left;
    }
    &-text-right{
        text-align: right;
    }

    // 浮动
    &-fl{
        float: left;
    }
    &-fr{
        float: right;
    }
    &-clearfix{
        &:before,&:after{
            display: table;
            content: "";
        }
        &:after{
            clear: both;
        }
    }

    // 行数省略...
    &-line-clamp{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    // 边框
    &-b{
        border: 1px solid @border-color-split;
    }
    &-bt{
        border-top: 1px solid @border-color-split;
    }
    &-br{
        border-right: 1px solid @border-color-split;
    }
    &-bb{
        border-bottom: 1px solid @border-color-split;
    }
    &-bl{
        border-left: 1px solid @border-color-split;
    }

    // 边距
    &-m-0{
        margin: 0 !important;
    }
    &-mt-0{
        margin-top: 0 !important;
    }
    &-mr-0{
        margin-right: 0 !important;
    }
    &-mb-0{
        margin-bottom: 0 !important;
    }
    &-ml-0{
        margin-left: 0 !important;
    }

    &-m-4{
        margin: 4px !important;
    }
    &-mt-4{
        margin-top: 4px !important;
    }
    &-mr-4{
        margin-right: 4px !important;
    }
    &-mb-4{
        margin-bottom: 4px !important;
    }
    &-ml-4{
        margin-left: 4px !important;
    }

    &-m-8{
        margin: 8px !important;
    }
    &-mt-8{
        margin-top: 8px !important;
    }
    &-mr-8{
        margin-right: 8px !important;
    }
    &-mb-8{
        margin-bottom: 8px !important;
    }
    &-ml-8{
        margin-left: 8px !important;
    }

    &-p-0{
        padding: 0 !important;
    }
    &-pt-0{
        padding-top: 0 !important;
    }
    &-pr-0{
        padding-right: 0 !important;
    }
    &-pb-0{
        padding-bottom: 0 !important;
    }
    &-pl-0{
        padding-left: 0 !important;
    }

    &-p-4{
        padding: 4px !important;
    }
    &-pt-4{
        padding-top: 4px !important;
    }
    &-pr-4{
        padding-right: 4px !important;
    }
    &-pb-4{
        padding-bottom: 4px !important;
    }
    &-pl-4{
        padding-left: 4px !important;
    }

    &-p-8{
        padding: 8px !important;
    }
    &-pt-8{
        padding-top: 8px !important;
    }
    &-pr-8{
        padding-right: 8px !important;
    }
    &-pb-8{
        padding-bottom: 8px !important;
    }
    &-pl-8{
        padding-left: 8px !important;
    }

    &-m-16, &-m{
        margin: 16px !important;
    }
    &-mt-16, &-mt{
        margin-top: 16px !important;
    }
    &-mr-16, &-mr{
        margin-right: 16px !important;
    }
    &-mb-16, &-mb{
        margin-bottom: 16px !important;
    }
    &-ml-16, &-ml{
        margin-left: 16px !important;
    }

    &-p-16, &-p{
        padding: 16px !important;
    }
    &-pt-16, &-pt{
        padding-top: 16px !important;
    }
    &-pr-16, &-pr{
        padding-right: 16px !important;
    }
    &-pb-16, &-pb{
        padding-bottom: 16px !important;
    }
    &-pl-16, &-pl{
        padding-left: 16px !important;
    }
}