@nodeject/ui-components/esm/schedio-layout/Layout.module.less

UI library for non-trivial components

.schedioLayout {
    display: grid;
    grid-template-areas: 'alert' 'header' 'main';
    grid-template-rows: auto auto 1fr;
}

.fullSiteHeight {
    // overflow: hidden;
    height: 100%;
}

.containerSiteHeight {
    // overflow: hidden;
    height: 100%;
}

.headerContentFooter {
    &:extend(.schedioLayout);
    grid-template-areas: 'alert' 'header' 'content' 'footer';
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr;
}

.fixedFooter {
    &:extend(.schedioLayout);
    grid-template-areas: 'alert' 'header' 'main' 'footer';
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr;
}

.fixedLeftSider {
    &:extend(.schedioLayout);
    grid-template-areas: 'alert alert' 'header header' 'siderLeft main';
    grid-template-rows: auto auto 1fr;
    grid-template-columns: auto 1fr;
}

.fixedRightSider {
    &:extend(.schedioLayout);
    grid-template-areas: 'alert alert' 'header header' 'main siderRight';
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr auto;
}

.fixedLeftRightSider {
    &:extend(.schedioLayout);
    grid-template-areas: 'alert alert alert' 'header header header' 'siderLeft main siderRight';
    grid-template-rows: auto auto 1fr;
    grid-template-columns: auto 1fr auto;
}

.fixedFooterLeftSider {
    &:extend(.schedioLayout);
    grid-template-areas: 'alert alert' 'header header' 'siderLeft main' 'footer footer';
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: auto 1fr;
}

.fixedFooterRightSider {
    &:extend(.schedioLayout);
    grid-template-areas: 'alert alert' 'header header' 'main siderRight' 'footer footer';
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr auto;
}

.fixedFooterLeftRightSider {
    &:extend(.schedioLayout);
    grid-template-areas: 'alert alert alert' 'header header header' 'siderLeft main siderRight' 'footer footer footer';
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: auto 1fr auto;
}

.mainLeftSider {
    &:extend(.main);
    grid-template-areas: 'alert alert' 'siderLeft content' 'footer footer';
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr;
}

.mainRightSider {
    &:extend(.main);
    grid-template-areas: 'alert alert' 'content siderRight' 'footer footer';
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr auto;
}

.mainBothSider {
    &:extend(.main);
    grid-template-areas: 'alert alert alert' 'siderLeft content siderRight' 'footer footer footer';
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
}

.mainNoSider {
    &:extend(.main);
    grid-template-areas: 'alert' 'content' 'footer';
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
}

.alert {
    grid-area: alert;
}

.main {
    display: grid;
    position: relative;
    height: 100%;
    grid-area: main;
}

@backgroundColor: #e3e3e3;
@scrollbarWidth: 14px;

.overflow {
    overflow: auto;
    &::-webkit-scrollbar {
        width: @scrollbarWidth;
        background-color: @backgroundColor;
    }
    &::-webkit-scrollbar-track {
        border-radius: @scrollbarWidth / 2 - 1;
        background-color: #e3e3e3;
    }
    &::-webkit-scrollbar-thumb {
        border: 2px solid #e3e3e3;
        background-clip: padding-box;
        border-radius: @scrollbarWidth / 2 - 1;
        background-color: #999999;
    }
}

.noOverflow {
    overflow: hidden;
}