react-zeanium-ui-ui/src/layout/Layout.less

Zeanium UI Framework for React.js

@reset-size: 24px;

.c-layout{
    position: absolute;
    height: 100%;
    width: 100%;
    &.mode-fixed{
        .fixed-bar{
            width: 100%;
            height: 100%;
        }
    }
    &>*{
        position: absolute;
        overflow: auto;
        background-size: cover;
        &::-webkit-scrollbar {
            background: transparent;
            width: 0px;
        }
        &:hover::-webkit-scrollbar {
            background: transparent;
        }

        &:hover>.reset{
            display: block;
        }
        &>.reset{
            position: relative;
            display: none;
            width: @reset-size;
            height: @reset-size;
            cursor: move;
        }
        &.c-layout-head>.reset{
            float: right;
        }
        &.c-layout-foot>.reset{
            float: left;
        }
    }



    &.H{
        &>*{
            top: 0px;
            height: 100%;
            bottom: 0px;
        }
        &>.c-layout-head{
            left: 0px;
        }
        &>.c-layout-foot{
            right: 0px;
        }
    }
    &.V{
        &>*{
            left: 0px;
            width: 100%;
            right: 0px;
        }
        &>.c-layout-head{
            top: 0px;
        }
        &>.c-layout-foot{
            bottom: 0px;
        }
    }
}

.layout-block>*[class^='rt-'] {
    display: block !important;
    width: 100%;
}
.layout-inline>*[class^='rt-'] {
    display: inline-block !important;
    margin-right: 10px;
}
.layout-stacked>*[class^='rt-'] {
    display: block !important;
    margin-left: 0px;
    margin-right: 0px;

    &.rt-form-item>*{
        display: block !important;
        float: none !important;
        width: 100% !important;
    }
}