magner/lib/assets/styles/components/page-header.css

Universal admin panel magnetic to any backend

.magner-page-header {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 24px;

  width: 100%;
  margin: 0 auto;
  padding: 12px 24px;

  @media (--breakpoint-small) {
    width: 90%;
    padding: 12px 0;
  }

  & .generic-form_actions:empty {
    width: 0;
  }

  @media (--breakpoint-md) {
    flex-direction: row;
    align-items: center;
  }

  &_title {
    text-align: left;
  }

  &_tag {
    margin-top: 4px;
  }

  &_title-container {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
  }

  & .el-tabs {
    &__header {
      margin-bottom: 0;
      border-bottom: none;
    }

    &__nav {
      z-index: 0;
    }

    &__item {
      & a, & span {
        display: inline-block;
        height: 100%;
        padding: 0 20px;
        color: inherit;
        text-decoration: inherit;
      }
    }

    &--card > .el-tabs__header {
      &, &.is-active {
        border-bottom: none;
      }

      & .el-tabs__item, & .el-tabs__item.is-active {
        border-bottom-color: #E4E7ED;
      }
    }
  }
}