polestar-ui-kit/styles/components/menu/index.less

## Install

@import '~antd/lib/menu/style/index';

@import '../../themes/default/index';
@import '../../mixins/index';


.@{menu-prefix-cls} {

    // &-hidden {
    //   display: block;
    // }

    &-submenu-active,
    &-submenu-title:hover {
        background: @primary-1;
    }
    &-horizontal &-item,
    &-horizontal &-submenu {
        margin-top: 0;
    }
    &-submenu {
        &-popup {
            top: -10px;
        }
        > .@{menu-prefix-cls} {
            border: @border-width-base @border-style-base @primary-2;
        }

        &-vertical,
        &-vertical-left,
        &-vertical-right,
        &-inline {
          > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
            transition: transform .3s @ease-in-out;
            position: absolute;
            top: 4%;
            right: 20px;
            width: 0;
            &:before,
            &:after {
              .ps-iconfont("\E074");
              background-image: none;
              //color: rgba(0, 0, 0, 0.65);
              color: rgba(0, 0, 0, 0.46);
              width: 10px;
              height: 0;
              border-radius: 0;
              transition: none;

              font-style: normal;
            }
            &:before {
              transform: none;
            }
            &:after {
              transform: none;
            }
          }
          > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
            &:after,
            &:before {
              background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
            }
          }
        }


        &-open {
            &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
              transform: translateY(-20px);

              &:after {
                    transform: rotate(-90deg) translateX(-2px);
                }
                &:before {
                    transform: rotate(70deg) translateX(2px);
                }
            }
        }
    }

    &-horizontal {
        border-bottom: none;
        background: @gray-1;
        > .@{menu-prefix-cls}-item,
        > .@{menu-prefix-cls}-submenu {
            top: 0;
            border-bottom: none;
            &:hover,
            &-active,
            &-open,
            &-selected {
                background: @gray-2;
                color: @primary-6;
                border-bottom: none;
            }
        }
    }
    &-vertical,
    &-vertical-left,
    &-vertical-right,
    &-inline {
        > .@{menu-prefix-cls}-item,
        > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
            &:hover {
                background: @primary-1;
            }
            &-disabled {
                &:hover {
                    background: transparent;
                }
            }
        }
        .@{menu-prefix-cls}-item:not(:last-child) {
            margin-bottom: 0;
            padding-bottom: 8px;
        }
    }
    .@{menu-prefix-cls}-item-disabled {
        &:hover {
            background: transparent;
        }
    }
}