@asi-ngtools/lib/styles/less/asi-nav-group.less

This project is a little components library, simple to use, which will help you to simplify your project.

.asi-nav-group,
asi-nav-group {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  min-width: 0;

  .asi-nav-group-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;

    .asi-nav-header {
      display: flex;
      flex: 1 1 auto;
      min-width: 0;
      min-height: @asi-nav-height;
      max-height: @asi-nav-height;
      height: auto;
      background-color: @asi-nav-background-color;
      border-bottom: @asi-nav-border-bottom;
      margin : 0px 2px 0px 2px;

      button {
        outline: none;

        &:focus {
          border: @asi-nav-outline-border;
        }

        &:not(:disabled) {
          cursor: pointer;
        }

        background: none;
        border: @asi-nav-border;
        color: @asi-nav-label-color;
        text-decoration: none;
        min-height: @asi-nav-height;
        min-width: 100px;
        box-shadow: @asi-nav-box-shadow;

        &.active {
          background-color: @asi-nav-active-background-color;
          border-bottom: @asi-nav-active-border-bottom;
          box-shadow:  @asi-nav-active-box-shadow;
          color: @asi-nav-active-label-color;
          font-weight: bold;
        }
      }
    }
  }
}