yapi/client/components/Header/Header.scss

@import '../../styles/mixin.scss';

.nav-tooltip {
  color: red;
}

/* .header-box.css */
.header-box {
  height: .56rem;
  line-height: .56rem;
  padding: 0;
  .logo {
    position: relative;
    float: left;
    line-height: .56rem;
    height: .56rem;
    width: 56px;
    border-left: 1px solid #55616d;
    border-right: 1px solid #55616d;
    &:hover{
      background-color: #38495a;
    }
    .href {
      text-decoration: none;
      display: block;
    }
    .logo-name {
      color: $color-white;
      font-size: .24rem;
      font-weight: 300;
      margin-left: .38rem;
    }
    .img {
      position: absolute;
      left: 0;
      top: 50%;
      left: 50%;
      transform: translate(-16px,-17px);
    }
    .ui-badge {
      position: absolute;
      right: -18px;
      top: 6px;
      width: 30px;
      height: 21px;
      background-size: 236px 21px;
      background-repeat: no-repeat;
      background-image: none;
      animation: flag .8s steps(8) infinite;
    }
    @keyframes flag {
      from { background-position: 0px; }
      to { background-position: -240px; }
    }
    // &:before, &:after {
    //   content: '';
    //   display: block;
    //   width: 2px;
    //   height: .56rem;
    //   background-color: #222;
    //   border-left: 1px solid #575D67;
    //   position: relative;
    //   top: 0;
    // }
    // &:before {
    //   float: left;
    //   left: -.08rem;
    // }
    // &:after {
    //   float: right;
    //   right: -.27rem;
    // }
  }

  .nav-toolbar {
    font-size: .15rem;
    float: left;

  }
  .user-menu{
    margin-top: 20px;
  }
  .user-toolbar{
    float: right;
    height: .54rem;
    display: flex;
    align-items: center;
    .item-search {
      width: 2rem;
    }
    .toolbar-li{
      float: left;
      font-size: .14rem;
      cursor: pointer;
      color: #ccc;
      margin-left: .16rem;
      transition: color .4s;
      .dropdown-link {
        color: #ccc;
        transition: color .4s;
        .ant-avatar-image{
          margin-bottom: -10px;
        }
        .ant-avatar > img{
          height: auto;
        }
      }
      &:hover{
        .dropdown-link {
          color: #ccc;
        }
      }
      .name {
        margin-left: .08rem;
      }
    }
  }
}