winbox-ui-next/es/page-header/style/index.less

We Design Vue 2.0: A Vue.js 3 UI Library

@import '../../style/mixins/index.less';
@import './token.less';

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

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

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

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

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

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

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

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

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

    &-icon {
      position: relative;
    }

    &:hover::before {
      background: transparent;
    }
  }

  &-title {
    .text-ellipsis();

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

  &-subtitle {
    .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;
  }

  &-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-footer {
    padding-bottom: 0;
  }

  &-wrapper &-header {
    flex-wrap: wrap;

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