diff --git a/packages/main/src/CardHeaderTemplate.tsx b/packages/main/src/CardHeaderTemplate.tsx index 072a338033c07..956b21a55f347 100644 --- a/packages/main/src/CardHeaderTemplate.tsx +++ b/packages/main/src/CardHeaderTemplate.tsx @@ -31,23 +31,15 @@ export default function CardHeaderTemplate(this: CardHeader) { }
-
- {this.titleText && -
{this.titleText}
- } - - {this.additionalText && -
- {this.additionalText} -
- } -
+ {this.titleText && +
{this.titleText}
+ } {this.subtitleText &&
{this.subtitleText}
@@ -55,13 +47,20 @@ export default function CardHeaderTemplate(this: CardHeader) {
- {this.hasAction && + {(this.hasAction || this.additionalText) &&
- + {this.hasAction && + + } + {this.additionalText && +
+ {this.additionalText} +
+ }
} diff --git a/packages/main/src/themes/CardHeader.css b/packages/main/src/themes/CardHeader.css index 733633976aa16..e2b0abd7c84c7 100644 --- a/packages/main/src/themes/CardHeader.css +++ b/packages/main/src/themes/CardHeader.css @@ -4,6 +4,7 @@ position: relative; display: flex; align-items: center; + gap: 1rem; padding: var(--_ui5_card_header_padding); outline: none; } @@ -74,15 +75,6 @@ pointer-events: none; } -.ui5-card-header-first-line { - display: flex; - flex-flow: row; - justify-content: space-between; -} - -.ui5-card-header-additionalText { - flex: none; -} .ui5-card-header .ui5-card-header-avatar { height: 3rem; @@ -112,13 +104,11 @@ font-family: var(--sapFontFamily); font-size: var(--sapFontSmallSize); color: var(--sapTile_TextColor); - text-align: left; + text-align: end; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; vertical-align: middle; - margin-inline-start: 1rem; - margin-block-start: 0.125rem; } .ui5-card-header .ui5-card-header-text .ui5-card-header-title { @@ -155,8 +145,16 @@ -webkit-line-clamp: 3; } -.ui5-card-header-action { +.ui5-card-header-action-and-additional-text { display: flex; - padding-inline-start: 1rem; + flex-direction: column; + align-items: flex-end; + gap: 0.25rem; align-self: flex-start; +} + +.ui5-card-header-action-and-additional-text ::slotted([slot="action"]) { + position: relative; + top: -0.5rem; + inset-inline-end: -0.5rem; } \ No newline at end of file