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

fes-design for PC

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

@menu-prefix-cls: ~'@{cls-prefix}-menu';
@sub-menu-prefix-cls: ~'@{cls-prefix}-sub-menu';
@menu-item-prefix-cls: ~'@{cls-prefix}-menu-item';
@menu-group-prefix-cls: ~'@{cls-prefix}-menu-group';
@menu-item-height: 32px;
@menu-light-background-color: var(--f-white);
@menu-light-active-background-color: var(--f-hover-color-light);
@menu-inverted-background-color: var(--f-font-color-base);
@menu-inverted-font-color: var(--f-text-color-caption);
@menu-inverted-active-background-color: var(--f-primary-color);
@menu-inverted-active-font-color: var(--f-white);
@menu-popper-width: 200px;


.variable() {
    --f-sub-menu-color: var(--f-head-color);
    --f-sub-menu-wrapper-color: inherit;
    --f-menu-item-color: var(--f-head-color);
    --f-menu-item-wrapper-color: inherit;
}

.@{sub-menu-prefix-cls} {
    position: relative;
    color: var(--f-sub-menu-color);
    cursor: pointer;
    &-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 @padding-sm;
        color: var(--f-sub-menu-wrapper-color);
        transition: all @animation-duration-slow @ease-base-out;
    }
    &-icon {
        display: flex;
        align-items: center;
        margin-right: @padding-xs;
    }
    &-arrow {
        display: flex;
        align-items: center;
        margin-left: @padding-xs;
        &.is-opened {
            transform: rotate(180deg);
        }
    }
    &-label {
        display: block;
        flex: auto
    }
    &:hover,
    &.is-active {
        > .@{sub-menu-prefix-cls}-wrapper {
            --f-sub-menu-wrapper-color: var(--f-primary-color);
            transition: all @animation-duration-base @ease-base-in;
        }
    }
}

.@{menu-item-prefix-cls} {
    position: relative;
    color: var(--f-menu-item-color);
    cursor: pointer;
    &-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 @padding-sm;
        color: var(--f-menu-item-wrapper-color);
        transition: all @animation-duration-slow @ease-base-out;
    }
    &-icon {
        display: flex;
        align-items: center;
        margin-right: @padding-xs;
    }
    &-label {
        display: block;
        flex: auto
    }
    &:hover,
    &.is-active {
        > .@{menu-item-prefix-cls}-wrapper {
            --f-menu-item-wrapper-color: var(--f-primary-color);
            transition: all @animation-duration-base @ease-base-in;
        }
    }
    &.is-disabled {
        &:hover {
            cursor: not-allowed;
        }
        .@{menu-item-prefix-cls}-wrapper {
            color: var(--f-text-color-secondary);
        }
    }
}

.@{menu-group-prefix-cls} {
    color: var(--f-text-color-secondary);
    line-height: @menu-item-height;
    cursor: auto;
    &-label {
        display: block;
        max-width: 100%;
        padding: 0 @padding-md;
    }
}


.@{sub-menu-prefix-cls}-popper {
    .variable();
    .text();
    &, * {
        box-sizing: border-box;
    }
    width: @menu-popper-width;
    padding: @padding-xs 0;
    overflow: visible;
    line-height: @menu-item-height;
    .@{menu-item-prefix-cls} {
        &.is-active {
            > .@{menu-item-prefix-cls}-wrapper {
                background-color: @menu-light-active-background-color;
            }
        }
    }
    .@{menu-group-prefix-cls} {
        &-label {
            padding: 0 @padding-sm;
        }
        > .@{menu-item-prefix-cls} {
            > .@{menu-item-prefix-cls}-wrapper {
                padding-left: calc(@padding-sm * 2);
            }
        }
        > .@{sub-menu-prefix-cls} {
            > .@{sub-menu-prefix-cls}-wrapper {
                padding-left: calc(@padding-sm * 2);
            }
        }
    }
}

.@{menu-prefix-cls} {
    .variable();
    .default();
    .text();
    &, * {
        box-sizing: border-box;
    }
    width: 100%;
    line-height: @line-height-base;
    background-color: @menu-light-background-color;
    &.is-vertical,
    &.is-horizontal {
        &.is-inverted {
            color: @menu-inverted-font-color;
            background-color: @menu-inverted-background-color;
            .@{sub-menu-prefix-cls} {
                --f-sub-menu-color: @menu-inverted-font-color;
                &:hover {
                    > .@{sub-menu-prefix-cls}-wrapper {
                        --f-sub-menu-wrapper-color: @menu-inverted-active-font-color;
                    }
                }
                &.is-active {
                    > .@{sub-menu-prefix-cls}-wrapper {
                        --f-sub-menu-wrapper-color: @menu-inverted-active-font-color;
                    }
                }
            }
            .@{menu-item-prefix-cls} {
                --f-menu-item-color: @menu-inverted-font-color;
                &:hover,
                &.is-active {
                    > .@{menu-item-prefix-cls}-wrapper {
                        --f-menu-item-wrapper-color: @menu-inverted-active-font-color;
                    }
                }
                &.is-active {
                    > .@{menu-item-prefix-cls}-wrapper {
                        background-color: @menu-inverted-active-background-color;
                        &::after {
                            display: none;
                        }
                    }
                }
            }
            .@{menu-group-prefix-cls} {
                color: @menu-inverted-font-color;
            }
        }
    }
}

// menu 水平方向
.@{menu-prefix-cls}.is-horizontal {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: @menu-item-height + @line-height-base;
    > .@{sub-menu-prefix-cls},
    > .@{menu-item-prefix-cls} {
        height: 100%;
        > .@{menu-item-prefix-cls}-wrapper,
        > .@{sub-menu-prefix-cls}-wrapper {
            height: 100%;
            padding: 0 @padding-md;
        }
        &.is-active {
            &::after {
                position: absolute;
                right: @padding-md;
                bottom: 0;
                left: @padding-md;
                height: 2px;
                background-color: var(--f-primary-color);
                content: '';
            }
        }
    }
    &.is-inverted {
        border-bottom: none;
        > .@{sub-menu-prefix-cls},
        > .@{menu-item-prefix-cls} {
            &.is-active {
                &::after {
                    display: none;
                }
            }
        }
    }
}

// menu 垂直方向
.@{menu-prefix-cls}.is-vertical {
    transition: width @animation-duration-base;
    .@{sub-menu-prefix-cls} {
        &-wrapper {
            height: @menu-item-height + @line-height-base;
            padding: 0 @padding-md;
        }
    }
    .@{menu-item-prefix-cls} {
        &-wrapper {
            height: @menu-item-height + @line-height-base;
            padding: 0 @padding-md;
        }
        &.is-active {
            > .@{menu-item-prefix-cls}-wrapper {
                background-color: @menu-light-active-background-color;
                &::after {
                    position: absolute;
                    top: (@menu-item-height/2);
                    right: 0;
                    bottom: (@menu-item-height/2);
                    width: 2px;
                    background-color: var(--f-primary-color);
                    content: '';
                }
            }
        }
    }
    .@{menu-group-prefix-cls} {
        line-height: @menu-item-height;
    }
    &.is-inverted {
        &.is-collapsed {
            .@{sub-menu-prefix-cls} {
                &.is-active {
                    > .@{sub-menu-prefix-cls}-wrapper {
                        color: @menu-inverted-active-font-color;
                        &::after {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    &.is-collapsed {
        width: 48px;
        .@{sub-menu-prefix-cls} {
            &-wrapper {
                height: @menu-item-height;
                overflow: hidden;
            }
            &-label {
                white-space: nowrap;
            }
        }
        .@{menu-item-prefix-cls} {
            &-wrapper {
                height: @menu-item-height;
                overflow: hidden;
            }
            &-label {
                white-space: nowrap;
            }
        }
        .@{menu-group-prefix-cls} {
            line-height: @menu-item-height;
        }
        >.@{sub-menu-prefix-cls} {
            >.@{sub-menu-prefix-cls}-wrapper {
                height: @menu-item-height + @line-height-base;
            }
        }
        >.@{menu-item-prefix-cls} {
            >.@{menu-item-prefix-cls}-wrapper {
                height: @menu-item-height + @line-height-base;
            }
        }
        >.@{menu-group-prefix-cls} {
            line-height: @menu-item-height + @line-height-base;
        }
    }
}