fork-reap-design/src/styles/components/layout/aui-layout.less

A high quality UI components Library with Vue.js

.aui-layout {
    position: relative;
    flex: 1;
    display: flex;
    background-color: #fff;

    .flex-end {
        justify-content: flex-end;
    }
    .aui-layout__left {
        position: relative;
        flex: 1;
        border-right: 1px solid #dddee1;
    }
    .aui-layout__left--cont {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        padding: 20px 30px 60px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling : touch;
        &::-webkit-scrollbar {
            width: 3px;
        }
    }
    .aui-layout__left--bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 40px;
        background-color: #fff;
        border-top: 1px solid #dddee1;
    }
    .aui-layout__right {
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .ivu-spin-fix {
        background: #fff;
    }

    .section-loading {
        animation: ani-laoding-spin 1s linear infinite;
    }
    @keyframes ani-laoding-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .fs48 {
        font-size: 48px;
    }
}