index-pure.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
  4. .@{pageheader-prefix-cls} {
  5. .reset-component();
  6. position: relative;
  7. padding: @page-header-padding-vertical @page-header-padding;
  8. background-color: @component-background;
  9. &-ghost {
  10. background-color: @page-header-ghost-bg;
  11. }
  12. &.has-breadcrumb {
  13. padding-top: @page-header-padding-breadcrumb;
  14. }
  15. &.has-footer {
  16. padding-bottom: 0;
  17. }
  18. &-back {
  19. margin-right: @margin-md;
  20. font-size: 16px;
  21. line-height: 1;
  22. &-button {
  23. .operation-unit();
  24. color: @page-header-back-color;
  25. cursor: pointer;
  26. }
  27. }
  28. .@{ant-prefix}-divider-vertical {
  29. height: 14px;
  30. margin: 0 @margin-sm;
  31. vertical-align: middle;
  32. }
  33. .@{ant-prefix}-breadcrumb + &-heading {
  34. margin-top: @margin-xs;
  35. }
  36. .text-overflow-ellipsis() {
  37. overflow: hidden;
  38. white-space: nowrap;
  39. text-overflow: ellipsis;
  40. }
  41. &-heading {
  42. display: flex;
  43. justify-content: space-between;
  44. &-left {
  45. display: flex;
  46. align-items: center;
  47. margin: (@margin-xs / 2) 0;
  48. overflow: hidden;
  49. }
  50. &-title {
  51. margin-right: @margin-sm;
  52. margin-bottom: 0;
  53. color: @heading-color;
  54. font-weight: 600;
  55. font-size: @page-header-heading-title;
  56. line-height: @height-base;
  57. .text-overflow-ellipsis();
  58. }
  59. .@{ant-prefix}-avatar {
  60. margin-right: @margin-sm;
  61. }
  62. &-sub-title {
  63. margin-right: @margin-sm;
  64. color: @text-color-secondary;
  65. font-size: @page-header-heading-sub-title;
  66. line-height: @line-height-base;
  67. .text-overflow-ellipsis();
  68. }
  69. &-extra {
  70. margin: (@margin-xs / 2) 0;
  71. white-space: nowrap;
  72. > * {
  73. margin-left: @margin-sm;
  74. white-space: unset;
  75. }
  76. > *:first-child {
  77. margin-left: 0;
  78. }
  79. }
  80. }
  81. &-content {
  82. padding-top: @page-header-content-padding-vertical;
  83. }
  84. &-footer {
  85. margin-top: @margin-md;
  86. .@{ant-prefix}-tabs {
  87. > .@{ant-prefix}-tabs-nav {
  88. margin: 0;
  89. &::before {
  90. border: none;
  91. }
  92. }
  93. .@{ant-prefix}-tabs-tab {
  94. padding-top: @padding-xs;
  95. padding-bottom: @padding-xs;
  96. font-size: @page-header-tabs-tab-font-size;
  97. }
  98. }
  99. }
  100. &-compact &-heading {
  101. flex-wrap: wrap;
  102. }
  103. }
  104. @import './rtl';