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

Universal admin panel magnetic to any backend

.header {
  display: flex;
  justify-content: space-between;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #DFE2E8;

  &_logo {
    display: flex;
    align-items: center;
    width: 230px;
    transition: width .3s;
    padding: 10px 12px;
    justify-content: center;

    @media (--breakpoint-small) {
      padding: 10px 12px 10px 8px;
    }

    & h1 {
      font-size: 24px;
      opacity: 1;
      transition: opacity .3s step-end;
    }

    & > i {
      width: auto;
      height: 100%;
      max-width: 100%;
      max-height: 100%;

      & svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  &_nav {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 8px;

    @media (--breakpoint-small) {
      padding: 0 8px;
      justify-content: flex-end;
    }
  }

  &_left, &_right {
    display: flex;
    align-items: center;
    height: 100%;
  }

  &_left {
    flex-grow: 1;

    & h2 {
      font-size: 18px;
      font-weight: normal;
    }

    @media (--breakpoint-small) {
      display: none;
    }
  }

  &_right {
    & > *:not(:last-child) {
      margin-right: 8px;
    }

    &_burger {
      @media (--breakpoint-md) {
        display: none;
      }
    }

    &_user-name {
       font-size: 14px;
       color: var(--el-text-color-secondary);
     }

    &_burger, &_user {
      &.el-button.is-circle {
        padding: 8px 6px;
      }

      & .el-icon {
        font-size: 18px;
      }
    }

    &_user {
      & .el-icon svg > * {
        stroke: white;
      }
    }

    & .el-dropdown {
      & > .el-button {
        width: 36px;
        height: 36px;
      }
    }

    &_user.el-button {
      background: #46A0FC;
    }
  }

  &_toggle.el-button {
     bottom: 20px;
     right: 20px;
     width: 26px;
     height: 26px;
     min-width: 26px;
     min-height: 26px;
     padding: 4px;
     background: #F4F4F5;
     border-radius: 2px;
     border: none;
     transition: right .3s;

  & .icon {
      width: 10px;
      height: 10px;
    }

  @media (--breakpoint-small) {
    display: none;
    }
  }
}