@arco-design/web-react/lib/PageHeader/style/index.less

Arco Design React UI Library.

@import './token.less';
@import '../../style/mixin.less';

@page-header-prefix-cls: ~'@{prefix}-page-header';

.@{page-header-prefix-cls} {
  padding: @page-header-padding-vertical 0;

  .@{prefix}-breadcrumb + &-head {
    margin-top: @page-header-margin-breadcrumb-bottom;
  }

  // 头部
  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: @page-header-line-height;

    &-left {
      display: flex;
      align-items: center;
    }

    &-wrapper {
      padding-left: @page-header-padding-left;
      padding-right: @page-header-padding-right;
    }

    &-main {
      display: flex;
      align-items: center;
      // 最小高度避免按钮hover下背景被hidden
      min-height: @page-header-size-back-icon-bg_hover;
      overflow: hidden;

      // 带有返回按钮时，避免 overflow:hidden 导致返回按钮hover状态背景色显示不全
      &-with-back {
        margin-left: (@page-header-size-back-icon / 2) - (@page-header-size-back-icon-bg_hover / 2);
        padding-left: (@page-header-size-back-icon-bg_hover / 2) - (@page-header-size-back-icon / 2);
      }
    }

    &-extra {
      white-space: nowrap;
    }
  }

  .icon-hover(
    @page-header-prefix-cls,
    @page-header-size-back-icon,
    @page-header-size-back-icon-bg_hover
  );

  .icon-hover-bg(
    @page-header-prefix-cls,
    @page-header-color-back-icon-bg_hover
  );

  &-back {
    color: @page-header-color-back-icon;
    font-size: @page-header-size-back-icon;
    margin-right: @page-header-margin-back-icon-right;

    &:focus-visible::before {
      box-shadow: inset 0 0 0 2px @page-header-color-back-icon-box-shadow;
    }

    &-icon {
      position: relative;
    }
  }

  &-title {
    .text-ellipsis();

    color: @page-header-color-title-text;
    font-size: @page-header-size-title-text;
    font-weight: @page-header-weight-title-text;
  }

  &-divider {
    width: @page-header-size-divider-width;
    margin-left: @page-header-margin-divider-left;
    margin-right: @page-header-margin-divider-right;
    height: @page-header-size-divider-height;
    background-color: @page-header-color-divider-bg;
  }

  &-sub-title {
    .text-ellipsis();

    color: @page-header-color-sub-title-text;
    font-size: @page-header-size-sub-title-text;
  }

  // 内容区
  &-content {
    padding: @page-header-padding-content-vertical @page-header-padding-content-horizontal;
    border-top: @page-header-border-header-width @page-header-border-header-style
      @page-header-color-header-border;
  }

  &-footer {
    padding: @page-header-padding-vertical @page-header-padding-right 0 @page-header-padding-left;
  }

  &-with-breadcrumb {
    padding: @page-header-padding-vertical_breadcrumb 0;

    .@{page-header-prefix-cls}-footer {
      padding-top: @page-header-padding-vertical_breadcrumb;
    }
  }

  &-with-content &-head-wrapper {
    padding-bottom: @page-header-padding-vertical_breadcrumb;
  }

  &-with-footer {
    padding-bottom: 0;
  }

  &-wrap &-head {
    flex-wrap: wrap;

    .@{page-header-prefix-cls}-head-extra {
      margin-top: @page-header-margin-breadcrumb-bottom;
    }
  }
}

.@{page-header-prefix-cls}-rtl {
  .@{page-header-prefix-cls}-head {
    &-wrapper {
      padding-left: @page-header-padding-right;
      padding-right: @page-header-padding-left;
    }

    &-main {
      &-with-back {
        margin-right: (@page-header-size-back-icon / 2) - (@page-header-size-back-icon-bg_hover / 2);
        padding-right: (@page-header-size-back-icon-bg_hover / 2) -
          (@page-header-size-back-icon / 2);
        margin-left: 0;
        padding-left: 0;
      }
    }
  }

  .@{page-header-prefix-cls}-back {
    margin-left: @page-header-margin-back-icon-right;
    margin-right: 0;
  }

  .@{page-header-prefix-cls}-divider {
    margin-right: @page-header-margin-divider-left;
    margin-left: @page-header-margin-divider-right;
  }
}