@openui5/sap.ui.integration 1.93.3 → 1.96.2

package/src/sap/ui/integration/themes/base/ListContentItem.less

@@ -3,115 +3,162 @@
 /* Base theme                                                  */
 /* =========================================================== */
 
-@_sap_ui_integration_controls_ListContentItem_ChartHeight: 1rem;
-
 .sapUiIntCard {
-	.sapMLIB.sapMSLI.sapUiIntLCI {
-		height: auto;
-	}
-
 	.sapMLIB.sapUiIntLCI {
 		flex-direction: column;
 		align-items: stretch;
+		height: auto;
+		padding: 0.8125rem 1rem ~"calc(0.8125rem - 1px)" 1rem;
+
+		&.sapMSLIWithDescription {
+			&:not(.sapMSLIThumbnail):not(.sapUiIntLCIIconSizeXS):not(.sapUiIntLCIIconSizeS):not(.sapUiIntLCIIconSizeM) {
+				.sapMLIBContent .sapMSLIDiv {
+					padding: 0.1875rem 0; // increase the height of the inner div
+				}
+			}
+		}
+
+		&.sapUiIntLCIIconSize {
+			&XS,
+			&S,
+			&M {
+				padding: 0.375rem 1rem  ~"calc(0.375rem - 1px)" 1rem;
+			}
+		}
 
 		.sapMLIBContent {
-			height: ~"calc(3rem - 1px)";
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 
+			.sapMSLIDescription {
+				padding-top: 0.5rem;
+			}
+
+			.sapMSLIDescriptionText {
+				padding-bottom: 0;
+			}
+
 			.sapFCardIcon {
 				flex-shrink: 0;
 			}
 		}
 
+		.sapUiIntLCIAttrs {
+			padding-top: 0.25rem;
+		}
+
 		.sapUiIntActionsStrip {
-			margin-bottom: 0.5rem;
+			padding-top: 1rem;
 		}
 
-		&.sapMLIBActive .sapFCardIcon.sapFAvatar .sapUiIcon {
-			color: @sapUiListActiveTextColor;
+		&.sapMLIBActive {
+			.sapFCardIcon.sapFAvatar .sapUiIcon {
+				color: @sapUiListActiveTextColor;
+			}
+
+			.sapMBtnTransparent,
+			.sapMBtnTransparent .sapMBtnIcon {
+				color: @sapUiContentContrastTextColor;
+			}
 		}
-	}
 
-	&:not(.sapUiIntCardWithFooter) {
-		.sapMListItems li:last-child {
-			border-bottom: 1px solid transparent;
+		&.sapUiIntLCIIconSizeXS {
+			.sapUiIntLCIAttrs,
+			.sapUiIntMicrochartChart {
+				margin-left: 2.75rem;
+			}
 		}
-	}
 
-	.sapMSLI.sapUiIntLCI {
-		&.sapMSLIThumbnail,
-		&.sapMSLINoIconInset,
-		&.sapMSLIWithDescription,
-		&.sapMSLINoTitleAdapt {
-			.sapMLIBContent {
-				height: ~"calc(5rem - 1px)";
+		&.sapUiIntLCIIconSizeS {
+			.sapUiIntLCIAttrs,
+			.sapUiIntMicrochartChart {
+				margin-left: 3.75rem;
 			}
+		}
 
-			&.sapUiIntLCIWithChart .sapMLIBContent {
-				height: ~"calc(4rem - 1px)";
+		&.sapUiIntLCIIconSizeM {
+			.sapUiIntLCIAttrs,
+			.sapUiIntMicrochartChart {
+				margin-left: 4.75rem;
 			}
 		}
-	}
 
-	/* Wrapping */
-	.sapMSLI.sapUiIntLCI.sapMSLIWrapping .sapMLIBContent {
-		height: auto;
-		min-height: ~"calc(3rem - 1px)";
-	}
+		.sapUiIntLCIAttrRow {
+			display: flex;
+			align-items: center;
+			padding: 0.25rem 0;
+		}
+
+		.sapUiIntLCIAttrSecondCell {
+			justify-content: flex-end;
 
-	.sapMSLIWithDescription,
-	.sapMSLINoIconInset,
-	.sapMSLINoTitleAdapt {
-		&.sapUiIntLCI.sapMSLIWrapping {
-			.sapMLIBContent {
-				min-height: ~"calc(5rem - 1px)";
+			.sapMObjStatus {
+				text-align: end;
 			}
 		}
-	}
 
-	.sapUiSizeCompact .sapMSLI.sapUiIntLCI {
-		&.sapMSLIThumbnail,
-		&.sapMSLINoIconInset,
-		&.sapMSLIWithDescription,
-		&.sapMSLINoTitleAdapt {
-			.sapMLIBContent {
-				height: ~"calc(5rem - 1px)";
-			}
+		.sapUiIntLCIAttrCell {
+			flex: 1;
+			display: flex;
+			align-items: center;
+		}
+	}
 
-			&.sapUiIntLCIWithChart .sapMLIBContent {
-				height: ~"calc(4rem - 1px)";
-			}
+	&:not(.sapUiIntCardWithFooter) {
+		.sapMListItems li:last-child {
+			border-bottom: 1px solid transparent;
 		}
 	}
+}
 
-	.sapUiSizeCompact .sapMSLI.sapUiIntLCI.sapMSLIWrapping {
-		&.sapMSLIWithDescription,
-		&.sapMSLINoIconInset,
-		&.sapMSLINoTitleAdapt {
-			.sapMLIBContent {
-				min-height: ~"calc(5rem - 1px)";
+// Styles for compact mode only
+.sapUiSizeCompact .sapUiIntCard,
+.sapUiSizeCompact.sapUiIntCard {
+	.sapMLIB.sapUiIntLCI {
+		padding: 0.5rem 1rem ~"calc(0.5rem - 1px)" 1rem;
+
+		&.sapMSLIWithDescription {
+			&:not(.sapMSLIThumbnail):not(.sapUiIntLCIIconSizeXS):not(.sapUiIntLCIIconSizeS):not(.sapUiIntLCIIconSizeM) {
+				.sapMLIBContent .sapMSLIDiv {
+					padding: 0.25rem 0; // increase the height of the inner div
+				}
 			}
 		}
 
-		.sapMLIBContent {
-			height: auto;
-			min-height: ~"calc(2rem - 1px)";
+		&.sapUiIntLCIIconSize {
+			&XS,
+			&S,
+			&M {
+				padding: 0 1rem 0 1rem;
+			}
 		}
 	}
+}
+
+// Shared styles for cozy & compact
+.sapUiIntCard,
+.sapUiSizeCompact .sapUiIntCard,
+.sapUiSizeCompact.sapUiIntCard {
+	.sapMLIB.sapUiIntLCI {
+		&.sapMSLIThumbnail {
+			padding: 1.5rem 1rem ~"calc(1.5rem - 1px)" 1rem;
+
+			&.sapUiIntLCIIconSizeS {
+				padding: 1rem 1rem ~"calc(1rem - 1px)" 1rem;
+			}
+		}
 
-	.sapUiIntLCI:not(.sapMSLIThumbnail):not(.sapMSLIWithDescription).sapUiIntLCIIconSize {
-		&XS .sapMLIBContent {
-			height: ~"calc(2.5625rem - 1px)";
+		&.sapMSLIWithDescription {
+			padding: 1rem 1rem ~"calc(1rem - 1px)" 1rem;
 		}
 
-		&S .sapMLIBContent {
-			height: ~"calc(3.5625rem - 1px)";
+		&.sapUiIntLCIWithAttributes {
+			padding: 1rem 1rem ~"calc(1rem - 1px)" 1rem
 		}
 
-		&M .sapMLIBContent {
-			height: ~"calc(4.5625rem - 1px)";
+		&.sapUiIntLCIWithActionsStrip {
+			padding: 0.5rem 1rem ~"calc(0.5rem - 1px)" 1rem;
 		}
 	}
 }

package/src/sap/ui/integration/themes/base/Microchart.less

@@ -26,7 +26,6 @@
 	height: 1rem;
 	display: flex;
 	align-items: center;
-	margin-bottom: 1rem;
 
 	.sapUiIntMicrochartChart {
 		flex-grow: 1;