header-sider-layout/lib/GlobalHeader/index.less

ant-design-pro layout, based on pro-layout, with header and sider layout.

@import '~antd/es/style/themes/default.less';
@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';

@pro-header-bg: @component-background;
@pro-header-hover-bg: @component-background;
@pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

.@{global-header-prefix-cls} {
  position: relative;
  height: @layout-header-height;
  padding: 0;
  background: @pro-header-bg;
  box-shadow: @pro-header-box-shadow;

  &-logo {
    display: inline-block;
    height: @layout-header-height;
    padding: 0 0 0 24px;
    font-size: 20px;
    line-height: @layout-header-height;
    vertical-align: top;
    cursor: pointer;
    img {
      display: inline-block;
      width: 32px;
      vertical-align: middle;
    }
  }

  &-menu {
    .anticon {
      margin-right: 8px;
    }
    .ant-dropdown-menu-item {
      min-width: 160px;
    }
  }

  &-trigger {
    height: @layout-header-height;
    padding: ~'calc((@{layout-header-height} - 26px) / 2)' 24px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s, padding 0s;
    &:hover {
      background: @pro-header-hover-bg;
    }
  }

  .dark {
    height: @layout-header-height;
    .action {
      color: rgba(255, 255, 255, 0.85);
      > i {
        color: rgba(255, 255, 255, 0.85);
      }
      &:hover,
      &.opened {
        background: @primary-color;
      }
      .ant-badge {
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}