xbpr/theme/components/menu.less

xbp react ui by @arco-design/web-react

@import "../../es/style/theme/default.less";

@menu-icon-size:16px; 
@menu-collapsed-icon-size:20px;
 

.@{prefix}-menu{
  &-vertical {
    .@{prefix}-menu-inner {
      .@{prefix}-menu-has-icon {
   
        .@{prefix}-menu-icon {
          font-size: @menu-icon-size;
        }
      }
      .@{prefix}-menu-inline .@{prefix}-menu-inline-header, .@{prefix}-menu-item{
        border-radius: var(--border-radius-medium);
      }
      .@{prefix}-menu-item{
        &.@{prefix}-menu-selected{
          color: rgb(var(--primary-6));
          background-color: var(--color-primary-light-1);
        }
      }
     
    }
  }
}
.@{prefix}-menu-collapsed {
  .@{prefix}-menu-inner {
    .@{prefix}-menu-has-icon {
      padding: 0; 
      display: flex;
      align-items: center;
      justify-content: center;
      
      .@{prefix}-menu-title {
        width: 0;
      }
      .@{prefix}-menu-icon {
        margin: 0;
        display: flex;
        font-size: @menu-collapsed-icon-size;  
      } 
    }  
    .@{prefix}-menu-pop-header,.@{prefix}-menu-item{
      border-radius: var(--border-radius-medium);

      color: var(--color-text-2);
      .@{prefix}-menu-icon{
        color: var(--color-text-2);
      }
      &:hover{
        color: var(--color-text-1);
        .@{prefix}-menu-icon{
          color: var(--color-text-1);
        }
      } 
        
    }
    .@{prefix}-menu-pop-header.@{prefix}-menu-selected {
      color: rgb(var(--primary-6));
      background-color: var(--color-primary-light-1);
      .@{prefix}-menu-icon{
        color: rgb(var(--primary-6));
      }
      &:hover{
        .@{prefix}-menu-icon{
          color: rgb(var(--primary-6));
        }
      }  
    }
  }
} 

.@{prefix}-trigger-content {
  .@{prefix}-trigger-menu {
    padding: var(--border-radius-medium);

    .@{prefix}-trigger-menu-inner {
      display: flex;
      flex-direction: column;
      gap: var(--border-radius-medium);

      .@{prefix}-trigger-menu-pop,
      .@{prefix}-trigger-menu-item {
        border-radius: var(--border-radius-medium);
        color: var(--color-text-2);
        &:hover{
          color: var(--color-text-1);
        }
      }

      .@{prefix}-trigger-menu-selected {
        color: rgb(var(--primary-6));
        background-color: var(--color-primary-light-1);
        &:hover{
          color: rgb(var(--primary-6));
        }
      }
    }
  }
}