@choerodon/master/lib/containers/components/c7n/ui/header/style/HeaderTheme4.less

A package of Master for Choerodon platform.

@c7n-boot-header: ~"c7n-boot-header";
.@{c7n-boot-header} {
  &-wrap {
    &-theme4 {
      background-color: #fff !important;
      box-shadow: 0 2px 4px 0 rgba(15, 19, 88, 0.12);
      z-index: 2;
      .c7n-btn.c7n-btn.c7n-btn-flat.c7n-btn-flat:not(.c7n-btn-circle,.c7n-btn-dashed):enabled:focus, .c7n-btn.c7n-btn.c7n-btn-flat.c7n-btn-flat:not(.c7n-btn-circle,.c7n-btn-dashed):enabled:active {
        background-color: rgba(104, 111, 255, 0.05);
        border-radius: unset;
      }
      .theme4-headerButton:hover  {
        border-radius: unset !important;
        span {
          color: var(--primary-color) !important;
        }
        box-shadow: unset !important;
        &:after {
          width: 100%;
          height: 3px;
          background: #6887E8 !important;
          content: '';
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
  &-logo {
    &-theme4 {
      color: black !important;
    }
    &-wrap {
      &-theme4 {
        background-color: #fff !important;
        box-shadow: unset !important;
        height: 45px !important;
        line-height: 45px !important;
        width: auto !important;
      }
    }
  }
}
.theme4-headerButton {
  height: 48px !important;
  margin-left: 20px;
  i {
    left: 0.04rem !important;
  }
  span {
    font-size: 14px !important;
    font-family: PingFangSC-Medium, PingFang SC !important;
    font-weight: 500 !important;
    color: rgba(15, 19, 88, 0.65) !important;
  }
}

.theme4-orgSelect {
  border-radius: 0 !important;
  border-color: #d9e6f2 !important;
  color: rgba(15, 19, 88, 0.65) !important;
  height: 48px !important;
  .icon-domain {
    position: absolute;
    left: 7px;
    font-size: 0.15rem !important;
    top: 16px;
  }
  .icon-expand_more {
    color: rgba(15, 19, 88, 0.36) !important;
    top: 10px !important;
    right: 0 !important;
    left: unset !important;
  }
}
.theme4-setting {
  margin-left: 8px;
  padding: 0 !important;
  margin-top: 6px;
  color: rgba(15, 19, 88, 0.65) !important;
  i {
    font-size: 0.23rem !important;
  }
}
.theme4-setting-icon {
  left: 0 !important;
  font-size: 20px !important;
}
.theme4-skinPeeler {
  margin-left: 20px;
  position: relative;
  bottom: 2px;
  i {
    font-size: 0.23rem !important;
  }
}
.theme4-external {
  color: #5365EA !important;
  position: relative;
  bottom: 2px;
  i {
    font-size: 0.23rem !important;
  }
}

.theme4-inbox {
  bottom: 2px;
  i {
    font-size: 0.23rem !important;
  }
}
.theme4-inbox-badge {
  .c7n-badge-count {
    background-color: #F76776 !important;
    color: white !important;
    border-color: #F76776 !important;
  }
  button {
    padding: 0px;
    width: 30px;
    i {
      left: -9px !important;
      font-size: 0.29rem !important;
    }
  }
}
.theme4-common-menu {
  //width: calc(250px - 54px) !important;
  border-right: none !important;
  .common-menu-right-header {
    i {
      color: white;
    }
  }
}
.theme4-menu-ul {
  border-right: 1px solid #d9e6f2 !important;
  height: 100%;
  .c7n-menu-item-group-list {
    position: relative;
    padding-top: 10px;
  }
  //.c7n-menu-item-group-list::after {
  //  position: absolute;
  //  content: "";
  //  display: block;
  //  top: 8px;
  //  right: -1px;
  //  width: 15px;
  //  height: 40px;
  //  border-radius: 0 2px 2px 0;
  //  background: -webkit-radial-gradient(right 21px, white 50%, transparent 50%);
  //  background: radial-gradient(21px at right, white 50%, transparent 50%);
  //}
  .theme4-iconwrap {
    display: inline-block;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    position: relative;
    top: 6px;
    margin-right: 16px;
    i {
      position: absolute;
      left: 4px;
      top: -6px;
      font-size: 20px !important;
      color: #0f1358 !important;
    }
    &-text {
      color: #0F1358;
    }
  }
  .c7n-menu-submenu-title {
    color: black !important;
    .c7n-menu-submenu-arrow {
    }
  }
  .c7n-menu-inline {
    //background: #0F1358 !important;
  }
  .c7ncd-iconwrap {
    background: #5365EA;
    border-radius: 4px;
  }
  .c7n-menu-item-group-title {
    color: white !important;
    padding: 0 !important;
  }
  .c7n-menu-submenu-title {
    height: 44px !important;
  }
  .c7n-menu-item {
    height: 44px !important;
  }
  li[aria-selected=true] {
    background: var(--primary-color-background) !important;
    height: 44px !important;
    .theme4-iconwrap {
      i {
        color: var(--primary-color) !important;
      }
    }
    .theme4-iconwrap-text {
      color: var(--primary-color);
    }
  }
  li[aria-selected=true]:before {
    display: none;
  }
}
.theme4-toggleMenu {
  position: absolute;
  right: 0;
}
.c7ncd-theme4-menuSide {
  width: 50px;
  overflow: auto;
  //background: #415BC9;
  p {
    margin: 8px 0 0 0 !important;
  }
  &-item {
    color: white;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    font-weight: 400;
    &-hover:hover {
      background: rgba(140, 158, 255, 0.35);
    }
  }
}
.theme4-iconToggle {
  position: absolute;
  right: -7.5px;
  top: 10px;
  z-index: 10;
  i {
    background: #5365EA;
    border-radius: 50%;
    width: 14px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}
.c7ncd-origin-menuSide {
  i {
    color: #5365EA !important;
  }
  p {
    color: #5365EA !important;
  }
}
.c7n-boot-header-logo-theme4 {
  font-size: 20px !important;
  font-family: STHeitiSC-Medium, STHeitiSC, 'Monospaced Number', 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500 !important;
  color: #0F1358 !important;
}

.c7ncd-origin-menuSide-item {
  border-bottom: 1px solid #d9e6f2;
  padding: 10px 0 !important;
}
.c7ncd-origin-selected-line {
  height: 100%;
  width: 3px;
  background: #5266d4;
  position: absolute;
  top: 0;
  left: 0;
}
.c7ncd-theme4-bread-menu {
  font-size: 18px;
  font-weight: 400;
  color: #0F1358;
}
.c7ncd-theme4-bread-name {
  font-size: 16px;
  font-weight: 300;
  color: rgba(15, 19, 88, 0.65);
}