@openui5/sap.m 1.97.1 → 1.100.0

package/src/sap/m/themes/base/GenericTile.less

@@ -80,7 +80,7 @@
 }
 
 
-.sapMGTContentShimmerPlaceholderItem {
+.sapMGTContentShimmerPlaceholderItem, .sapMTileCntContentShimmerPlaceholderItem{
 	padding: 1rem 1rem 0 1rem;
 	box-sizing: border-box;
 	display: flex;
@@ -88,7 +88,7 @@
 	align-items: center;
 	flex: 1 1 auto;
 
-	&.sapMGTContentShimmerPlaceholderWithChart.sapMGTContentShimmerPlaceholderWithDescription {
+	&.sapMGTContentShimmerPlaceholderWithChart.sapMGTContentShimmerPlaceholderWithDescription, .sapMTileCntContentShimmerPlaceholderWithDescription {
 		height: 6rem;
 	}
 
@@ -99,7 +99,7 @@
 		display: inline-block;
 	}
 
-	.sapMGTContentShimmerPlaceholderRows {
+	.sapMGTContentShimmerPlaceholderRows, .sapMTileCntContentShimmerPlaceholderRows {
 		flex-grow: 1;
 
 		.sapMGTContentShimmerPlaceholderItemText {
@@ -107,14 +107,14 @@
 			margin-bottom: 0.5rem;
 			width: 80%;
 		}
-		.sapMGTContentShimmerPlaceholderItemTextFooter {
+		.sapMGTContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemTextFooter {
 			height: 0.5rem;
 			margin-bottom: 0.5rem;
 			margin-top: 0.5rem;
 			width: 80%;
 			top: 3rem;
 		}
-		.sapMGTContentShimmerPlaceholderItemBox {
+		.sapMGTContentShimmerPlaceholderItemBox, .sapMTileCntContentShimmerPlaceholderItemBox{
 			height: 2rem;
 			margin-bottom: 0.5rem;
 			margin-top: 0.5rem;
@@ -206,7 +206,7 @@
 	}
 }
 
-.sapMGTLoadingShimmer {
+.sapMGTLoadingShimmer, .sapMTileCntLoadingShimmer{
 .sapMGTLoadingShimmerMixin();
 }
 
@@ -291,7 +291,6 @@ border-radius: 0.25rem;
 	height: 5.25rem;
 }
 
-
  .OneByOne.tileWithAppInfo {
 	.sapMGTContent.appInfoWithFooter {
 		height: 3.5rem;
@@ -452,7 +451,7 @@ border-radius: 0.25rem;
 }
 
 .sapMGTHdrTxt > .sapMGTTitle,
-.sapMGenericTileFtrFldTxt>.sapMGTFailed {
+.sapMGenericTileFtrFldTxt>.sapMGTFailed, .sapMTileCntFtrFldTxt>.sapMGTFailed{
 	cursor: inherit;
 }
 
@@ -517,6 +516,7 @@ border-radius: 0.25rem;
 .sapMGT.sapMGTBackgroundImage.Stretch{
 	.sapMGTContent {
 		height: 58%;
+		margin-top: 1px;
 	}
 }
 
@@ -531,13 +531,13 @@ border-radius: 0.25rem;
 	color: @sapUiTileIconColor;
 }
 
-.sapMGenericTileFtrFldTxt {
+.sapMGenericTileFtrFldTxt, .sapMTileCntFtrFldTxt {
 	font-family: @sapUiFontFamily;
 	font-size: @sapMFontSmallSize;
 	color: @sapUiTileTextColor;
 }
 
-.sapMGenericTileFtrFldIcn {
+.sapMGenericTileFtrFldIcn, .sapMTileCntFtrFldIcn {
 	color: @sapUiTileTextColor;
 }
 
@@ -611,7 +611,7 @@ html.sap-desktop .sapMGT:focus:not([tabindex]) {
 			outline-offset: -2px;
 
 			&, &:hover, &:active, &:focus  {
-				border-color: @sapUiButtonBorderColor; // Explicitly needed here, because the border would otherwise be transparent in HCB on press
+				border-color: @sapTile_Interactive_BorderColor; // Explicitly needed here, because the border would otherwise be transparent in HCB on press
 				border-radius: 50% !important; // Made important because the style is not to be overridden in any way
 			}
 		}
@@ -1062,14 +1062,14 @@ html[dir=rtl] .sapMGTLineMode {
 	border-radius: 0.25rem !important;
 }
 
-.sapMGenericTileFtrFld {
+.sapMGenericTileFtrFld, .sapMTileCntFtrFld{
 	left: 0.4375rem;
 	right: 0.4375rem;
 	bottom: 0.75rem;
 	position: absolute;
 }
 
-.sapMGenericTileFtrFldTxt {
+.sapMGenericTileFtrFldTxt, .sapMTileCntFtrFldTxt {
 	font-weight: normal;
 	display:table-cell;
 	padding-left: 0.5rem;
@@ -1077,17 +1077,17 @@ html[dir=rtl] .sapMGTLineMode {
 	width: 100%;
 }
 
-html[dir=rtl] .sapMGenericTileFtrFldTxt {
+html[dir=rtl] .sapMGenericTileFtrFldTxt, .sapMTileCntFtrFldTxt {
 	padding-right:0.5rem;
 }
 
-.sapMGenericTileFtrFldIcn {
+.sapMGenericTileFtrFldIcn, .sapMTileCntFtrFldIcn {
 	margin-right: 0.5rem;
 	display: table-cell;
 	vertical-align: bottom;
 }
 
-.sapMGenericTileFtrFldIcn>.sapMGTFtrFldIcnMrk {
+.sapMGenericTileFtrFldIcn>.sapMGTFtrFldIcnMrk, .sapMTileCntFtrFldIcn>.sapMGTFtrFldIcnMrk {
 	vertical-align: bottom;
 }
 
@@ -1182,6 +1182,7 @@ html[data-sap-ui-browser*='ff'] {
 
 		.sapMGTHdrContent {
 			height: 1.25rem;
+			width: calc(100% - 20%);
 		}
 		.sapMGTContent {
 			height: 2.625rem;
@@ -1243,6 +1244,12 @@ html[data-sap-ui-browser*='ff'] {
 	.sapMGTSubHdrTxt > .sapMText {
 		font-size: @sapMFontSmallSize;
 	}
+
+	.sapMGT.sapMGTBackgroundImage.Stretch{
+		.sapMGTContent {
+			height: 66%;
+		}
+	}
 }
 
 .sapTilePaddingTest .sapMTileCntContent {
@@ -1265,15 +1272,16 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .TwoByOne.sapMGTActionMode {
+	height: 11.375rem;
+	width: 20rem;
 	overflow: hidden;
 	.sapMGTTitle {
 		font-weight: bold;
 	}
 	.sapMGTHdrContent {
 		padding: 0;
-		margin: 0.875rem 1.25rem;
+		margin: 1rem 1rem 1rem 1rem;
 		height: 3rem;
-		width: 17.5rem;
 		overflow: hidden;
 		.sapMText {
 			font-size: 1rem;
@@ -1310,16 +1318,16 @@ html[data-sap-ui-browser*='ff'] {
 		}
 	}
 	.sapMGTContent {
-		height: 6rem;
+		height: 6.5rem;
 		.sapMTileCnt {
-			height: 6rem;
+			height: 6.5rem;
 			.sapMTileContainer {
 				height: 3rem;
 				margin-bottom: 0.625rem;
 				overflow: hidden;
 				display: flex;
 				.sapMTilePriority {
-					margin: 0 0.5rem 0 1.25rem;
+					margin: 0 0.5rem 0 1rem;
 					.sapMTilePriorityCnt {
 						display: flex;
 						align-items: center;
@@ -1374,7 +1382,7 @@ html[data-sap-ui-browser*='ff'] {
 				}
 				.sapMTileCntContent {
 					padding: 0;
-					margin: 0 1.25rem 0 0;
+					margin: 0 1rem 0 0;
 					.sapMText {
 						line-height: 1.5rem;
 					}
@@ -1388,7 +1396,7 @@ html[data-sap-ui-browser*='ff'] {
 			.sapMTileCntContent {
 				height: 3rem;
 				overflow: hidden;
-				padding: 0 1.25rem;
+				padding: 0 1rem;
 				margin: 0 0 0.625rem 0;
 				.sapMText {
 					line-height: 1.5rem;
@@ -1401,7 +1409,7 @@ html[data-sap-ui-browser*='ff'] {
 				}
 			}
 			.sapMTileFtrCnt {
-				height: 2.5rem;
+				height: 2rem;
 				display: flex;
 				position: absolute;
 				left: 0;
@@ -1409,42 +1417,31 @@ html[data-sap-ui-browser*='ff'] {
 				bottom: 0;
 				justify-content: space-between;
 				align-items: center;
+				padding-bottom: 1rem;
 				.sapMTileCntFtrTxt {
 					position: initial;
 					margin-right: 0;
-					margin-left: 1.25rem;
+					margin-left: 1rem;
 					font-size: 0.75rem;
 				}
 				.sapMGTActionModeContainer {
-					margin: 0 1.25rem 0 0.5rem;
+					margin: 0 1rem 0 0.5rem;
 					display: inline-flex;
 					column-gap: 0.5rem;
 				}
 			}
 			.sapMTileCntFtrTxt {
-				margin: 0 1.25rem;
+				margin: 0 1rem;
 				font-size: 0.75rem;
-				bottom: 0.75rem;
+				bottom: 1.5rem;
 			}
 		}
 	}
 }
 
-.TwoByOne.sapMGTActionMode.sapMTileSmallPhone {
-	.sapMGTContent {
-		.sapMTileCnt {
-			.sapMTileContainer {
-				.sapMTilePriority {
-					margin-left: 0.5rem;
-				}
-			}
-			.sapMTileFtrCnt {
-				.sapMGTActionModeContainer {
-					margin-right: 0.5rem;
-				}
-			}
-		}
-	}
+.TwoByOne.sapMTileSmallPhone.sapMGTActionMode {
+	height: 11.375rem;
+	width: 19rem;
 }
 
 .sapMAutoPointer {
@@ -1459,6 +1456,45 @@ html[data-sap-ui-browser*='ff'] {
     padding-top: 0;
 }
 
+.sapMGTIconMode.sapMTileSmallPhone.sapMGT.sapMGTOneByOne {
+	width: 9rem;
+	height: 4rem;
+	display: flex;
+	gap: 0.75rem;
+	align-items: center;
+}
+.sapMGTIconMode.sapMTileSmallPhone.sapMGT.sapMGTOneByOne .sapMGTOneByOneIcon{
+	padding: 0;
+	margin-left: 1rem;
+}
+.sapMGTIconMode.sapMTileSmallPhone.sapMGT.sapMGTOneByOne .sapMGTHdrContent {
+	height:auto;
+	width: 5rem;
+	padding: 1rem 0.5rem 1rem 0;
+}
+.sapMGTIconMode.sapMTileSmallPhone.sapMGT.sapMGTOneByOne .sapMGTHdrContent .sapMText {
+	text-align: left !important;
+}
+.sapMGTIconMode .sapMGTSubHdrTxt{
+	line-height: 1rem;
+	.sapMText{
+		font-size: 0.875rem;
+		color: @sapUiContentLabelColor;
+	}
+}
+
+.TwoByHalf.sapMGTIconMode .sapMGTMoreIcon {
+	visibility: hidden;
+    bottom: auto;
+	right: 1.5rem;
+}
+
+.TwoByHalf.sapMGTIconMode.sapMGT:hover {
+	.sapMGTMoreIcon {
+		visibility: visible;
+	}
+}
+
 @media (min-width:320px) and (max-width:599px){
     .sapMGT.sapMGTOneByOne {
         width: 9rem;
@@ -1535,6 +1571,7 @@ html[data-sap-ui-browser*='ff'] {
 	padding-top: 0.25rem;
     padding-left: 1rem;
     height: initial;
+	max-width: 12.5rem;
 	align-items: center;
 }
 

package/src/sap/m/themes/base/HeaderContainer.less

@@ -262,4 +262,29 @@ html.sap-tablet:not(.sap-desktop) .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertic
 html.sap-desktop .sapMHrdrCntrInner:focus {
 	outline: none;
 	border: 1px dotted @sapUiContentFocusColor;
+}
+
+@media (min-width:320px) and (max-width:599px){
+    .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
+		margin-left: 0rem !important;
+		padding: 0rem 0.5rem 0rem 0.5rem !important;
+	}
+	
+	.sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:last-of-type {
+		padding-right: 1rem !important;
+	}
+
+	.sapMHrdrCntrDvdrs.Horizontal .sapMHrdrCntrInner::after {
+		left: 0.4rem;
+		border-left: 1px solid @sapUiListBorderColor;
+	}
+	
+	html[dir=rtl] .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
+		margin-right: 0rem !important;
+		padding: 0rem 0.5rem 0rem 0.5rem !important;
+	}
+	
+	html[dir=rtl]  .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:last-of-type {
+		padding-left: 1rem !important;
+	}
 }

package/src/sap/m/themes/base/IconTabBar.less

@@ -51,7 +51,6 @@
 
 // Filter icon
 @_sap_m_IconTabBar_FilterIconHeight: 3rem;
-@_sap_m_IconTabBar_FilterIconLineHeight: 2.75rem;
 @_sap_m_IconTabBar_FilterIconWidth: 3rem;
 
 // Filter text
@@ -747,10 +746,12 @@
 	"border-top-left-radius" */
 	border-top-right-radius: 3rem;
 	box-sizing: border-box;
-	display: inline-block;
 	font-size: 1.5rem;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
 	height: @_sap_m_IconTabBar_FilterIconHeight;
-	line-height: @_sap_m_IconTabBar_FilterIconLineHeight;
 	overflow: hidden;
 	width: @_sap_m_IconTabBar_FilterIconWidth;
 	-moz-user-select: none;

package/src/sap/m/themes/base/IllustratedMessage.less

@@ -0,0 +1,110 @@
+/* ================================== */
+/* CSS for control sap.f/IllustratedMessage */
+/* Base theme                         */
+/* ================================== */
+
+.sapMIllustratedMessage {
+	width: 100%;
+	margin: 0 auto;
+	text-align: center;
+	padding: 1rem;
+	box-sizing: border-box;
+
+	figcaption {
+		margin: inherit;
+	}
+
+	.sapMTitle {
+		display: block;
+		font-size: @sapMFontHeader5Size;
+	}
+
+	.sapMIllustratedMessageDescription {
+		color: @sapNeutralTextColor;
+		font-size: @sapMFontMediumSize;
+	}
+
+	&.sapMIllustratedMessage-Base {
+		figcaption {
+			max-width: 10rem;
+		}
+
+		.sapMIllustratedMessageAdditionalContent,
+		.sapMIllustration {
+			display: none;
+		}
+	}
+
+	&.sapMIllustratedMessage-Spot {
+		figcaption {
+			max-width: 16.25rem;
+		}
+
+		.sapMIllustration {
+			width: 8rem;
+			height: 8rem;
+			margin: 0.5rem 0;
+		}
+
+		.sapMTitle {
+			margin-bottom: 0.25rem;
+		}
+
+		.sapMIllustratedMessageDescription {
+			margin-bottom: 1rem;
+		}
+
+		.sapMIllustratedMessageAdditionalContent {
+			margin-top: 0.5rem;
+			margin-bottom: 1rem;
+		}
+	}
+
+	&.sapMIllustratedMessage-Dialog {
+		figcaption {
+			max-width: 20rem;
+		}
+
+		.sapMIllustration {
+			width: 10rem;
+			height: 10rem;
+			margin-top: 1rem;
+			margin-bottom: 2rem;
+		}
+
+		.sapMTitle {
+			margin-bottom: 0.25rem;
+			font-size: @sapMFontHeader4Size;
+		}
+
+		.sapMIllustratedMessageDescription {
+			margin-bottom: 2rem;
+		}
+	}
+
+	&.sapMIllustratedMessage-Scene {
+		figcaption {
+			max-width: 30rem;
+		}
+
+		.sapMIllustration {
+			width: 20rem;
+			height: 15rem;
+		}
+
+		.sapMTitle {
+			margin-top: 2rem;
+			margin-bottom: 0.5rem;
+			font-size: @sapMFontHeader2Size;
+		}
+
+		.sapMIllustratedMessageDescription {
+			margin-bottom: 2rem;
+			font-size: @sapMFontLargeSize;
+		}
+
+		.sapMIllustratedMessageAdditionalContent {
+			margin-bottom: 2rem;
+		}
+	}
+}

package/src/sap/m/themes/base/Illustration.less

@@ -0,0 +1,58 @@
+:root {
+	--sapIllus_BrandColorPrimary: @sapContent_Illustrative_Color1;
+	--sapIllus_BrandColorSecondary: @sapContent_Illustrative_Color2;
+	--sapIllus_StrokeDetailColor: @sapContent_Illustrative_Color4;
+	--sapIllus_Layering1: @sapContent_Illustrative_Color5;
+	--sapIllus_Layering2: @sapContent_Illustrative_Color6;
+	--sapIllus_BackgroundColor: @sapContent_Illustrative_Color7;
+	--sapIllus_ObjectFillColor: @sapContent_Illustrative_Color8;
+	--sapIllus_AccentColor: @sapContent_Illustrative_Color3;
+	--sapIllus_NoColor: none;
+	--sapIllus_PatternShadow: ~"url(#sapIllus_PatternShadow)";
+	--sapIllus_PatternHighlight: ~"url(#sapIllus_PatternHighlight)";
+
+	.generate-illustrative-colors (20);
+}
+
+.generate-illustrative-colors (@colorsCount, @i: 1) when (@i =< @colorsCount) {
+	@illusColorLESSvar: 'sapContent_Illustrative_Color@{i}';
+	--sapContent_Illustrative_Color@{i}: @@illusColorLESSvar;
+	.generate-illustrative-colors(@colorsCount, (@i + 1));
+}
+
+.sapIllus_MaskTypeAlpha {
+	mask-type:alpha;
+}
+.sapIllus_BrandColorPrimary {
+	fill: var(--sapIllus_BrandColorPrimary);
+}
+.sapIllus_BrandColorSecondary {
+	fill: var(--sapIllus_BrandColorSecondary);
+}
+.sapIllus_StrokeDetailColor {
+	fill: var(--sapIllus_StrokeDetailColor);
+}
+.sapIllus_Layering1 {
+	fill: var(--sapIllus_Layering1);
+}
+.sapIllus_Layering2 {
+	fill: var(--sapIllus_Layering2);
+}
+.sapIllus_BackgroundColor {
+	fill: var(--sapIllus_BackgroundColor);
+}
+.sapIllus_ObjectFillColor {
+	fill: var(--sapIllus_ObjectFillColor);
+}
+.sapIllus_AccentColor {
+	fill: var(--sapIllus_AccentColor);
+}
+.sapIllus_NoColor {
+	fill: var(--sapIllus_NoColor);
+}
+.sapIllus_PatternShadow {
+	fill: var(--sapIllus_PatternShadow);
+}
+.sapIllus_PatternHighlight {
+	fill: var(--sapIllus_PatternHighlight);
+}

package/src/sap/m/themes/base/Label.less

@@ -81,6 +81,10 @@ html[dir="ltr"] .sapMLabel[dir="rtl"].sapMLabelRequired .sapMLabelColonAndRequir
 	color: @sapUiPageFooterTextColor;
 }
 
+.sapMTB-Info-CTX.sapMTB.sapMTBInactive .sapMLabel {
+	color: @sapUiListTextColor;
+}
+
 /* Toolbar overflow context */
 .sapMOverflowToolbarMenu-CTX {
 	.sapMLabel {
@@ -203,9 +207,12 @@ td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapMLabel{
 	vertical-align: top; /* align vertically to multiline texts */
 }
 
-.sapUiFormLblColon .sapUiFormElementLbl > .sapMLabel .sapMLabelColonAndRequired::before {
-	content: attr(data-colon);
-	white-space: pre;
+.sapMLabel.sapMLabelShowColon,
+.sapUiFormLblColon .sapUiFormElementLbl > .sapMLabel {
+	.sapMLabelColonAndRequired::before {
+		content: attr(data-colon);
+		white-space: pre;
+	}
 }
 
 /* Wrapping of the Label's text */
@@ -281,7 +288,7 @@ td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapMLabel{
 
 .sapUiSizeCompact,
 .sapUiSizeCondensed {
-	.sapUiTableCell .sapMLabel {
+	.sapUiTableCell:not(.sapUiTableHeaderDataCell) .sapMLabel {
 		font-weight: normal;
 		font-size: @sapMFontHeader6Size;
 	}

package/src/sap/m/themes/base/MenuButton.less

@@ -28,8 +28,8 @@
 	content: '\e1ef';
 	display: inline-block;
 	font-size: 0.75rem;
-	height: 38px; //ie does not accept rem for height in pseudo elements, but it works with px when you zoom
-	line-height: 38px;
+	height: 2.125rem;
+	line-height: 2.125rem;
 	padding-right: 0.75rem;
 	padding-left: 0.5625rem;
 	color: @sapUiButtonIconColor;
@@ -53,8 +53,8 @@
 	}
 
 	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
-		height: 24px; //ie does not accept rem for height in pseudo elements, but it works with px when you zoom
-		line-height: 24px;
+		height: 1.5rem;
+		line-height: 1.5rem;
 		padding-right: 0.5rem;
 		padding-left: 0.375rem;
 	}

package/src/sap/m/themes/base/MessageToast.less

@@ -13,12 +13,12 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: pre-line;
-	font-size: @sapMFontMediumSize;
+	font-size: @sapFontSize;
 	font-family: @sapUiFontFamily;
 	font-weight: normal;
 	padding: 1rem;
 	background: @sapUiListBackground;
 	color: @sapUiListTextColor;
-	box-shadow: @sapUiShadowLevel2;
+	box-shadow: @sapUiContentShadow2;
 	border-radius: @sapUiElementBorderCornerRadius;
 }

package/src/sap/m/themes/base/NavContainer.less

@@ -135,21 +135,12 @@ html[data-sap-ui-animation='on'] {
 		backface-visibility: hidden;
 	}
 
-	.sap-winphone .sapMNavItem.sapMNavItemFlipNext {
-		transform: rotateY(180deg);
-	}
-
 	.sapMNavItem.sapMNavItemFlipPrevious {
 		-webkit-transform: rotateY(-180deg);
 		transform: rotateY(-180deg);
 		backface-visibility: hidden;
 	}
 
-	.sap-winphone .sapMNavItem.sapMNavItemFlipPrevious {
-		transform: rotateY(-180deg);
-		backface-visibility: hidden;
-	}
-
 	.sapMNavItem.sapMNavItemFlipping {
 		-webkit-transition-duration: .5s;
 		transition-duration: .5s;

package/src/sap/m/themes/base/NewsContent.less

@@ -59,6 +59,10 @@
 				word-wrap: break-word;
 				white-space: normal;
 				height: 2rem;
+				overflow: hidden;
+				max-width: 60ch;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 		}
 	}
@@ -119,6 +123,9 @@
 			white-space: nowrap;
 			width: 11.063rem;
 			overflow: hidden;
+			max-width: 60ch;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 			text-overflow: ellipsis;
 		}
 	}

package/src/sap/m/themes/base/NumericContent.less

@@ -193,13 +193,9 @@ html[dir=rtl] .sapMNCValue {
 }
 
 .sapMNCIndScale.Loading,
-.sapMNCValue.Loading,
 .sapMNCScale.Loading,
 .sapMNCIconImage.Loading,
-.sapMNCIndScale.Failed,
-.sapMNCValue.Failed,
-.sapMNCScale.Failed,
-.sapMNCIconImage.Failed {
+.sapMNCValue.Failed {
 	color: @sapUiContentLabelColor;
 	opacity: 0.25;
 }