@fesjs/fes-design/es/layout/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@layout-prefix-cls: ~'@{cls-prefix}-layout';
@header-prefix-cls: ~'@{layout-prefix-cls}-header';
@main-prefix-cls: ~'@{layout-prefix-cls}-main';
@footer-prefix-cls: ~'@{layout-prefix-cls}-footer';
@aside-prefix-cls: ~'@{layout-prefix-cls}-aside';
@aside-trigger-height: 48px;
@layout-inverted-background-color: var(--f-font-color-base);
@layout-inverted-font-color: var(--f-white);

.@{layout-prefix-cls} {
    .default();
    .text();
    position: relative;
    flex: auto;
    box-sizing: border-box;
    transition: width @animation-duration-base;
    >.@{layout-prefix-cls}-container {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    &.is-horizontal {
        >.@{layout-prefix-cls}-container {
            flex-direction: row;
        }
    }
    &.is-fixed {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: left @animation-duration-base, right @animation-duration-base;
    }
}

.@{aside-prefix-cls} {
    position: relative;
    flex-shrink: 0;
    color: var(--f-text-color);
    transition: width @animation-duration-base;
    &.is-fixed {
        position: absolute;
        top: 0;
        bottom: 0;
        &.is-placement-left {
            left: 0;
        }
        &.is-placement-right {
            right: 0;
        }
    }
    &.is-has-trigger {
        z-index: @zindex-affix;
    }
    &.is-inverted {
        color: @layout-inverted-font-color;
        background-color: @layout-inverted-background-color;
        .@{aside-prefix-cls}-trigger {
            color: @layout-inverted-font-color;
            background-color: var(--f-layout-inverted-bg-color);
            border-top: none;
        }
    }
    &.is-bordered {
        border-right: var(--f-border-width-base) var(--f-border-style-base)
            var(--f-border-color-base);
    }
    &.is-collapsed {
        overflow: visible;
    }
    &-trigger {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: @aside-trigger-height;
        font-size: var(--f-font-size-base);
        line-height: @aside-trigger-height;
        text-align: center;
        background-color: var(--f-white);
        border-top: var(--f-border-width-base) var(--f-border-style-base)
            var(--f-border-color-split);
    }
}

.@{header-prefix-cls} {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 54px;
    padding: 0;
    color: var(--f-text-color);
    line-height: 54px;
    background-color: var(--f-white);
    &.is-inverted {
        color: @layout-inverted-font-color;
        background-color: @layout-inverted-background-color;
    }
    &.is-bordered {
        border-bottom: var(--f-border-width-base) var(--f-border-style-base)
            var(--f-border-color-base);
    }
    &.is-fixed {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
    }
}

.@{main-prefix-cls} {
    flex: auto;
    color: var(--f-text-color);
    font-size: var(--f-font-size-base);
    transition: width @animation-duration-base;
    &.is-embedded {
        background: var(--f-component-bg-color);
    }
}

.@{footer-prefix-cls} {
    flex-shrink: 0;
    color: var(--f-text-color);
    font-size: var(--f-font-size-base);
    &.is-embedded {
        background: var(--f-component-bg-color);
    }
    &.is-bordered {
        border-top: var(--f-border-width-base) var(--f-border-style-base)
            var(--f-border-color-base);
    }
    &.is-fixed {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
    }
}