@openui5/sap.f 1.131.0 → 1.132.0

package/src/sap/f/themes/base/Card.less

@@ -5,17 +5,13 @@
 
 @_sap_f_Card_BoxShadow: @sapUiContentShadow0;
 @_sap_f_Card_HeaderBorder: 0.0625rem solid @sapUiTileSeparatorColor; // used as top or bottom border
-@_sap_f_Card_HeaderFocusBorderRadius: none;
+@_sap_f_Card_FocusBorderRadius: none;
 @_sap_f_Card_BorderRadius: @sapUiElementBorderCornerRadius;
 @_sap_f_Card_ContentPadding: 1rem;
-@_sap_f_Card_HeaderFocusBorderBottomOffset: 1px;
-@_sap_f_Card_HeaderFocusBorderTopOffset: 1px;
-@_sap_f_Card_HeaderFocusBorderLeftOffset: 1px;
-@_sap_f_Card_HeaderFocusBorderRightOffset: 1px;
-@_sap_f_Card_Badge_Background: @sapUiBrand;
-@_sap_f_Card_Badge_Color: @sapUiContentContrastTextColor;
-@_sap_f_Card_Badge_Border: 0.0625rem solid @sapUiButtonLiteBorderColor;
-@_sap_f_Card_TitleFontSize: @sapMFontHeader5Size;
+@_sap_f_Card_FocusBorderBottomOffset: 1px;
+@_sap_f_Card_FocusBorderTopOffset: 1px;
+@_sap_f_Card_FocusBorderLeftOffset: 1px;
+@_sap_f_Card_FocusBorderRightOffset: 1px;
 
 .sapFCard {
 	position: relative;
@@ -90,153 +86,8 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 }
 
 .sapFCard .sapFCardHeader {
-	position: relative;
-	flex-shrink: 0;
-	justify-content: space-between;
-	background: @sapUiTileBackground;
 	border-bottom: @_sap_f_Card_HeaderBorder;
 	border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
-	padding: @_sap_f_Card_ContentPadding;
-	display: flex;
-
-	.sapFCardHeaderWrapper {
-		outline: none;
-		display: flex;
-		min-width: 0;
-		flex: 1;
-		height: fit-content;
-	}
-
-	.sapFCardHeaderImage {
-		position: relative;
-	}
-
-	.sapFCardIcon.sapFAvatar {
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		&.sapFAvatarColorTransparent {
-			.sapUiIcon {
-				color: @sapUiTileIconColor;
-				font-size: 2rem;
-				align-self: center;
-			}
-		}
-	}
-
-	.sapFCardHeaderText {
-		flex: 1 1 auto;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		//fixes bug with flex
-		min-width: 0;
-		width: 100%;
-
-		.sapFCardTitle {
-			min-width: 0;
-			display: block;
-			font-family: @sapUiFontHeaderFamily;
-			font-size: @_sap_f_Card_TitleFontSize;
-			font-weight: @sapUiFontHeaderWeight;
-			color: @sapUiTileTitleTextColor;
-			min-height: 1rem;
-			position: relative;
-		}
-	}
-
-	.sapFCardSubtitle {
-		position: relative;
-		font-family: @sapUiFontFamily;
-		font-size: @sapMFontMediumSize;
-		font-weight: normal;
-		color: @sapUiTileTextColor;
-		min-height: 1rem;
-		flex-grow: 1;
-	}
-
-	.sapFCardStatus {
-		position: relative;
-		font-family: @sapUiFontFamily;
-		font-size: @sapMFontSmallSize;
-		color: @sapUiTileTextColor;
-		text-align: right;
-		line-height: normal;
-		margin-left: 1rem;
-		margin-top: 0.188rem;
-		display: inline-block;
-		white-space: nowrap;
-	}
-
-	.sapFCardHeaderTextFirstLine {
-		display: flex;
-		justify-content: space-between;
-		width: 100%;
-	}
-
-	.sapFCardHeaderTextSecondLine {
-		margin-top: 0.25rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-	}
-
-	.sapFCardDataTimestamp {
-		color: @sapUiTileTextColor;
-		font-size: @sapMFontSmallSize;
-		margin-left: auto;
-		flex-shrink: 0;
-	}
-
-	.sapFCardHeaderLineIncludesDataTimestamp .sapFCardSubtitle {
-		margin-right: 1rem;
-	}
-
-	.sapFCardHeaderToolbarCont {
-		position: absolute;
-		right: 0.65rem;
-		top: 0.45rem;
-	}
-
-	&.sapFCardHeaderHasToolbar {
-		min-height: 2rem;
-
-		.sapFCardHeaderText {
-			margin-inline-end: 2rem;
-			width: unset;
-		}
-	}
-
-	.sapFCardHeaderBanner {
-		display: flex;
-		justify-content: flex-end;
-		margin: 0.25rem -(@_sap_f_Card_ContentPadding) 0;
-
-		.sapFCardHeaderBannerInner {
-			padding-inline-start: 0.25rem;
-			padding-inline-end: @_sap_f_Card_ContentPadding;
-			background-color: @sapUiInfobarNonInteractiveBackground;
-			border-radius: 0.125rem 0 0 0.125rem;
-			min-width: 0;
-
-			.sapFCardHeaderBannerLine {
-				display: flex;
-				justify-content: flex-end;
-				padding: 0.125rem 0;
-
-				.sapMText {
-					font-size: @sapMFontSmallSize;
-					color: @sapUiTileTitleTextColor;
-				}
-
-				.sapMText.sapFCardHeaderBannerLineDiminished {
-					color: @sapUiTileTextColor;
-				}
-			}
-		}
-	}
 }
 
 .sapFCard .sapFCardIcon.sapFAvatar {
@@ -259,145 +110,6 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 	}
 }
 
-.sapFCard .sapFCardHeader.sapFCardNumericHeader {
-
-	.sapFCardHeaderContent {
-		outline: none;
-		min-width: 0; // fixes Chrome issue
-		flex: 1;
-	}
-
-	.sapFCardStatus {
-		min-width: fit-content;
-	}
-
-	.sapFCardSubtitle {
-		margin: 0.25rem 0 0 0;
-		display: flex;
-		align-items: flex-end;
-
-		.sapFCardHeaderUnitOfMeasurement {
-			flex-shrink: 0;
-			max-height: 1rem;
-		}
-
-		&.sapFCardSubtitleAndUnit .sapFCardHeaderUnitOfMeasurement {
-			margin-left: 0.25rem;
-			padding-left: 0.25rem;
-			border-left: 1px solid @sapUiTileTextColor;
-		}
-	}
-
-	.sapFCardHeaderText .sapFCardSubtitle .sapMText {
-		color: @sapUiTileTextColor;
-	}
-
-	.sapFCardAvatarAndIndicatorsLine {
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-
-		.sapFCardIcon.sapFAvatar {
-			margin-top: 0.5rem;
-			margin-right: 0;
-
-			&.sapFAvatarImage {
-				margin-right: 0.5rem;
-			}
-		}
-	}
-
-	.sapFCardNumericIndicators {
-		margin-top: 0.25rem;
-		flex: 1;
-		min-width: 0; // allows items to shrink and truncate the content inside
-
-		.sapFCardHeaderSideIndicator .sapFCardHeaderSITitle,
-		.sapFCardHeaderSINumber,
-		.sapFCardHeaderSINumber .sapMText {
-			font-size: @sapMFontSmallSize;
-		}
-
-		.sapFCardNumericIndicatorsSide {
-			padding: 0.5rem 0;
-		}
-	}
-
-	.sapFCardHeaderDetailsWrapper {
-		margin-top: 0.25rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-	}
-
-	.sapFCardHeaderDetails {
-		font-size: @sapMFontSmallSize;
-		color: @sapUiTileTextColor;
-		position: relative;
-		flex-grow: 1;
-	}
-
-	.sapFCardNumericHeaderDetailsState {
-		&None {
-			color: @sapUiNeutralText;
-		}
-
-		&Success {
-			color: @sapUiPositiveText;
-		}
-
-		&Warning {
-			color: @sapUiCriticalText;
-		}
-
-		&Error {
-			color: @sapUiNegativeText;
-		}
-
-		&Information {
-			color: @sapUiInformativeText;
-		}
-	}
-
-	.sapFCardHeaderLineIncludesDataTimestamp .sapFCardHeaderDetails {
-		margin-right: 1rem;
-	}
-}
-
-.sapFCardHeaderSideIndicator {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-end;
-	min-width: 0; // allows items to shrink and truncate the content inside
-	.sapFCardHeaderSITitle {
-		color: @sapUiTileTextColor;
-		padding-bottom: 0.25rem;
-		position: relative;
-	}
-	.sapFCardHeaderSINumber,
-	.sapFCardHeaderSINumber .sapMText {
-		color: @sapUiTileTitleTextColor;
-		position: relative;
-	}
-}
-
-// Value colors for the Side Indicators in the Numeric header
-.sapFCard .sapFCardHeaderSideIndicatorStateCritical .sapFCardHeaderSINumber span {
-	color: @sapUiCriticalText;
-}
-
-.sapFCard .sapFCardHeaderSideIndicatorStateError .sapFCardHeaderSINumber span {
-	color: @sapUiNegativeText;
-}
-
-.sapFCard .sapFCardHeaderSideIndicatorStateGood .sapFCardHeaderSINumber span {
-	color: @sapUiPositiveText;
-}
-
-.sapFCard .sapFCardHeaderSideIndicatorStateNeutral .sapFCardHeaderSINumber span {
-	color: @sapUiNeutralText;
-}
-
 .sapFCard .sapFCardContent {
 	flex: 1 1 auto;
 	overflow: hidden;
@@ -477,9 +189,9 @@ html[data-sap-ui-browser^="cr"] .sapFCard {
 	cursor: pointer;
 }
 //Todo HC should use the active background:  --sapTile_Hover_Background
-.sapFCard.sapFCardInteractive:active {
+.sapFCard.sapFCardInteractive:focus:active {
 	box-shadow: none;
-	border: 0.0625rem solid; @sapTile_Interactive_BorderColor;
+	border: 0.0625rem solid @sapTile_Interactive_BorderColor;
 }
 
 .sapFCard.sapFCardSectionInteractive {
@@ -510,18 +222,16 @@ html[data-sap-ui-browser^="cr"] .sapFCard {
 }
 
 .sapFCard.sapFCardFocus:focus::before,
-.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard > .sapFCardHeader:not(.sapFCardHeaderToolbarFocused)::before, // focus inside Grid Container
 .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard.sapFCardNoHeader::before { // ... focus on a card without header
 	content: '';
 	display: block;
 	position: absolute;
-	left: @_sap_f_Card_HeaderFocusBorderLeftOffset;
-	bottom: @_sap_f_Card_HeaderFocusBorderBottomOffset;
-	right: @_sap_f_Card_HeaderFocusBorderRightOffset;
-	top: @_sap_f_Card_HeaderFocusBorderTopOffset;
+	left: @_sap_f_Card_FocusBorderLeftOffset;
+	bottom: @_sap_f_Card_FocusBorderBottomOffset;
+	right: @_sap_f_Card_FocusBorderRightOffset;
+	top: @_sap_f_Card_FocusBorderTopOffset;
 	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-	border-radius: @_sap_f_Card_HeaderFocusBorderRadius;
+	border-radius: @_sap_f_Card_FocusBorderRadius;
 	pointer-events: none;
 	z-index: 1;
 }
@@ -534,12 +244,12 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 		content: '';
 		display: block;
 		position: absolute;
-		left: @_sap_f_Card_HeaderFocusBorderLeftOffset;
-		bottom: @_sap_f_Card_HeaderFocusBorderBottomOffset;
-		right: @_sap_f_Card_HeaderFocusBorderRightOffset;
-		top: @_sap_f_Card_HeaderFocusBorderTopOffset;
+		left: @_sap_f_Card_FocusBorderLeftOffset;
+		bottom: @_sap_f_Card_FocusBorderBottomOffset;
+		right: @_sap_f_Card_FocusBorderRightOffset;
+		top: @_sap_f_Card_FocusBorderTopOffset;
 		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-		border-radius: @_sap_f_Card_HeaderFocusBorderRadius;
+		border-radius: @_sap_f_Card_FocusBorderRadius;
 		pointer-events: none;
 		z-index: 1;
 	}
@@ -549,8 +259,6 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 	}
 }
 
-.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
-
 .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard.sapFCardNoHeader::before { // focus inside GridContainer on a card without header
 	bottom: 1px;
 	z-index: 1;
@@ -571,10 +279,6 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 			padding-bottom: 0.5rem;
 		}
 	}
-
-	.sapFCard .sapFCardHeaderHasToolbar {
-		min-height: 1rem;
-	}
 }
 
 .sapFCardAdaptiveContent {