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

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

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

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

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

      button {
        outline: none;

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

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

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

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

    .tab-content {
      background-color: white;
      display: flex;
      flex: inherit;
      min-width: inherit;

      asi-tab-content {
        display: flex;
        flex: inherit;
        min-width: inherit;

        asi-tab-element {
          display: flex;
          flex: inherit;
          min-width: inherit;

          .tab-element {
            display: flex;
            flex: inherit;
            min-width: inherit;
            overflow-y: auto;
            height: auto;
            flex-direction: column;
          }
        }
      }
    }
  }
}