hc-materials/es/components/header/style/index.less

基于react的通用组件库

@import '../../../theme.less';
@import '~antd/es/input/style/index.less';
@import '~antd/es/layout/style/index.less';
@import '~antd/es/dropdown/style/index.less';
@import '~antd/es/spin/style/index.less';
@import '~antd/es/modal/style/index.less';
@import '~antd/es/menu/style/index.less';
@import '~antd/es/avatar/style/index.less';

@header-prefix-cls: ~'@{hc-prefix}-header';
@header-light-prefix-cls: ~'@{hc-prefix}-header-light';

.@{header-prefix-cls} {
  padding: 0 12px 0 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  position: relative;
  color: white;
  .ant-layout-header{
    margin-right: 204px;
    padding: 0 15px;
    .ant-menu-horizontal,
    .ant-menu-item {
      border: 0 none;
    }
  }

  &-right {
    float: right;
    height: 100%;
    margin-right: 15px;
  }
  &-action {
    cursor: pointer;
    padding: 0 12px;
    display: inline-block;
    transition: all .3s;
    height: 100%;
    > i {
      font-size: 16px;
      vertical-align: middle;
    }
    &.ant-popover-open,
    &:hover {
      background: @primary-1;
    }
  }
  
  &-search {
    background: transparent;
    .anticon-search {
      color: white;
      cursor: pointer;
      font-size: 16px;
    }
    .ant-select {
      padding: 0;
      height: 48px;
      transition: width .3s, margin-left .3s;
      width: 0;
      background: transparent;
      border-width: 0;
      border-radius: 0;
      .ant-select-selection {
        background: transparent;
        border: 0 none;
      }
      .ant-select-selection__rendered{
        padding: 0;
      }
      input {
        border: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none !important;
        background: transparent;
        color: white;
      }
    }
  }
  &-search-show .ant-select{
    margin-left: 8px;
    width: 210px;
    border-width: 1px;
  }
  
  &-account &-avatar {
    margin: 0 8px 0 20px;
    color: @primary-color;
    vertical-align: middle;
  }
  
  &-menu {
    .anticon {
      margin-right: 8px;
    }
    .ant-dropdown-menu-item {
      width: 160px;
    }
  }  

  
  &-trigger {
    float: left;
    font-size: 20px;
    line-height: 64px;
    cursor: pointer;
    transition: all .3s;
    padding: 0 24px;
    &:hover {
      background: @primary-1;
    }
  }
}
.@{header-light-prefix-cls} {
  background: #fff;
  color: #333;
  .ant-layout-header{
    background: #fff;
  }
}


@media screen and (max-width: @screen-xs) {
  .@{header-prefix-cls} {
    &-trigger {
      display: none;
    }
  }
}