@openui5/sap.m 1.130.1 → 1.131.0

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

@@ -11,9 +11,12 @@
 
 .sapMHdrCntr.Horizontal {
 	max-width: 100%;
+
 	&.sapMHdrCntrSnapToRow {
+
 		.sapMScrollContScroll {
 			display: inline-flex;
+
 			.sapMHdrCntrItemCntr > * {
 				min-height: 100%;
 			}
@@ -32,45 +35,53 @@
 
 .sapMHdrCntrBtnCntr.Horizontal {
 	position: absolute;
-	top: 0px;
-	bottom: 0px;
+	top: 0;
+	bottom: 0;
 	width: 2.5rem;
+
 	&.sapMHdrCntrLeft {
 		left: 0.25rem;
 	}
+
 	&.sapMHdrCntrRight {
 		right: 0.25rem;
 	}
 }
 
 .sapUiSizeCompact .sapMHdrCntrBtnCntr.Horizontal {
+
 	&.sapMHdrCntrLeft {
-		left: 0rem;
+		left: 0;
 	}
+
 	&.sapMHdrCntrRight {
-		right: 0rem;
+		right: 0;
 	}
 }
 
 html.sap-phone .sapMHdrCntrBtnCntr.Horizontal,
 html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Horizontal {
 	width: 1.5rem;
+
 	&.sapMHdrCntrLeft {
-		left: 0rem;
+		left: 0;
 	}
+
 	&.sapMHdrCntrRight {
-		right: 0rem;
+		right: 0;
 	}
 }
 
 .sapMHdrCntrBtnCntr.Vertical {
 	position: absolute;
-	left: 0px;
-	right: 0px;
+	left: 0;
+	right: 0;
 	height: 2.5rem;
+
 	&.sapMHdrCntrLeft {
 		top: 0.25rem;
 	}
+
 	&.sapMHdrCntrRight {
 		bottom: 0.25rem;
 	}
@@ -79,11 +90,13 @@ html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Horizontal {
 html.sap-phone .sapMHdrCntrBtnCntr.Vertical,
 html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Vertical {
 	height: 1.5rem;
+
 	&.sapMHdrCntrLeft {
-		top: 0rem;
+		top: 0;
 	}
+
 	&.sapMHdrCntrRight {
-		bottom: 0rem;
+		bottom: 0;
 	}
 }
 
@@ -110,7 +123,7 @@ html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Horizontal > .sapMHdrCntrB
 	height: 2.5rem;
 	left: 50%;
 	margin-left: -1.5rem;
-	padding: 0px;
+	padding: 0;
 }
 
 html.sap-phone .sapMHdrCntrBtnCntr.Vertical > .sapMHdrCntrBtn,
@@ -121,7 +134,7 @@ html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Vertical > .sapMHdrCntrBtn
 }
 
 .sapMHdrCntrBtnCntr.Vertical > .sapMHdrCntrBtn.sapMHdrCntrRight {
-	bottom: 0px;
+	bottom: 0;
 }
 
 .sapMHdrCntrCntr.Horizontal {
@@ -194,7 +207,7 @@ html.sap-tablet:not(.sap-desktop) .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertic
 	position: relative;
 	vertical-align: top;
 	margin: 0.0625rem;
-	padding: 0rem 0.375rem 0rem 0.375rem;
+	padding: 0 0.375rem 0 0.375rem;
 	overflow: visible;
 }
 
@@ -212,7 +225,7 @@ html.sap-tablet:not(.sap-desktop) .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertic
 }
 
 .sapMHrdrCntrDvdrs .sapMHrdrCntrInner:not(:first-child)::after {
-	content: "";
+	content: '';
 	position: absolute;
 	box-sizing: border-box;
 	display: inline-block;
@@ -222,14 +235,14 @@ html.sap-tablet:not(.sap-desktop) .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertic
 	top: 0.375rem;
 	bottom: 0.375rem;
 	left: -0.6rem;
-	border-left: 1px solid @sapUiListBorderColor;
+	border-left: 1px solid var(--sapList_BorderColor);
 }
 
 .sapMHrdrCntrDvdrs.Vertical .sapMHrdrCntrInner::after {
 	left: 0.5rem;
 	right: 0.5rem;
 	top: -0.6rem;
-	border-top: 1px solid @sapUiListBorderColor;
+	border-top: 1px solid var(--sapList_BorderColor);
 }
 
 .sapMKTileBorder {
@@ -241,7 +254,7 @@ html.sap-tablet:not(.sap-desktop) .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertic
 }
 
 .sapMHdrPddngRight0 {
-	padding-right: 0rem;
+	padding-right: 0;
 }
 
 .sapMHdrPddngLeft2 {
@@ -249,50 +262,52 @@ html.sap-tablet:not(.sap-desktop) .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertic
 }
 
 .sapMHdrPddngleft0 {
-	padding-left: 0rem;
+	padding-left: 0;
 }
+
 .sapMHdrCntrItemCntr {
 	display: inline-block;
 }
 
 .sapMHdrCntrBGTransparent {
-	background-color: @sapUiObjectHeaderBackground;
+	background-color: var(--sapObjectHeader_Background);
 }
 
 .sapMHdrCntrBGSolid {
-	background-color: @sapUiObjectHeaderBackground;
+	background-color: var(--sapObjectHeader_Background);
 }
 
 .sapMHdrCntrBGTranslucent {
-	background-color: @sapUiObjectHeaderBackground;
+	background-color: var(--sapObjectHeader_Background);
 }
 
 html.sap-desktop .sapMHrdrCntrInner:focus {
 	outline: none;
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
-@media (min-width:320px) and (max-width:599px){
-    .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
-		margin-left: 0rem !important;
-		padding: 0rem 0.5rem 0rem 0.5rem !important;
+@media (min-width:320px) and (max-width:599px) {
+
+	.sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
+		margin-left: 0 !important;
+		padding: 0 0.5rem 0 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;
+		border-left: 1px solid var(--sapList_BorderColor);
 	}
-	
+
 	html[dir=rtl] .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
-		margin-right: 0rem !important;
-		padding: 0rem 0.5rem 0rem 0.5rem !important;
+		margin-right: 0 !important;
+		padding: 0 0.5rem 0 0.5rem !important;
 	}
-	
-	html[dir=rtl]  .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:last-of-type {
+
+	html[dir=rtl] .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:last-of-type {
 		padding-left: 1rem !important;
 	}
 }

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

@@ -251,6 +251,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		font-family: var(--sapFontHeaderFamily);
 
 		.sapUiIcon {
 			font-size: 1rem;
@@ -713,8 +714,6 @@
 .sapMITBHorizontalWrapper {
 	display: inline-block;
 	height: @_sap_m_IconTabBar_HorizontalWrapperHeight;
-	left: -1rem;
-	overflow: hidden;
 	text-overflow: ellipsis;
 	vertical-align: top;
 	width: auto;
@@ -873,6 +872,7 @@
 
 .sapMITBBackgroundDesignTransparent > .sapMITBContainerContent > .sapMITBContent {
 	background-color: transparent;
+	border-bottom: none;
 }
 
 /* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
@@ -925,6 +925,12 @@
 			margin-right: 0;
 		}
 	}
+
+	&.sapMITHBackgroundDesignTransparent {
+		box-shadow: none;
+		border-bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+	}
+
 }
 
 /* Custom focus outline */
@@ -1265,7 +1271,6 @@ html.sap-desktop {
 
 	.sapMITBHorizontalWrapper {
 		height: 2rem;
-		overflow: visible;
 	}
 
 	.sapMITBContentArrow {
@@ -1419,7 +1424,7 @@ html[dir=rtl] {
 		.sapMITBText,
 		.sapMITBCount {
 			color: @_sap_m_IconTabBar_ShellTextColor;
-			font-family: var(--sapFontFamily);
+			font-family: var(--sapFontHeaderFamily);
 			font-size: @sapMFontMediumSize;
 		}
 

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

@@ -1,7 +1,7 @@
-/* ================================== */
+/* ======================================== */
 /* CSS for control sap.f/IllustratedMessage */
-/* Base theme                         */
-/* ================================== */
+/* Base theme                               */
+/* ======================================== */
 
 .sapMIllustratedMessage {
 	width: 100%;
@@ -23,15 +23,15 @@
 	}
 
 	.sapMTitle {
-		font-family: @sapFontHeaderFamily;
-		color: @sapGroup_TitleTextColor;
+		font-family: var(--sapFontHeaderFamily);
+		color: var(--sapGroup_TitleTextColor);
 		display: block;
 	}
 
 	.sapMIllustratedMessageDescription {
 		font-size: @sapFontSize;
-		font-family: @sapFontFamily;
-		color: @sapTextColor;
+		font-family: var(--sapFontFamily);
+		color: var(--sapTextColor);
 	}
 
 	&.sapMIllustratedMessageScalable {
@@ -42,6 +42,7 @@
 	}
 
 	&.sapMIllustratedMessage-Base {
+
 		figcaption {
 			max-width: 10rem;
 		}
@@ -75,7 +76,7 @@
 		}
 
 		.sapMTitle {
-			font-size: @sapFontHeader5Size;
+			font-size: var(--sapFontHeader5Size);
 			margin-bottom: 0.25rem;
 		}
 
@@ -85,11 +86,10 @@
 
 		.sapMIllustratedMessageAdditionalContent {
 			margin: 0.25rem 0;
-			padding-left: 3.063rem; // width of dot svg + its margin right
+			padding-left: 3.063rem; /* width of dot svg + its margin right */
 		}
 	}
 
-
 	&.sapMIllustratedMessage-Spot {
 		padding: 0.5rem;
 
@@ -104,7 +104,7 @@
 		}
 
 		.sapMTitle {
-			font-size: @sapFontHeader4Size;
+			font-size: var(--sapFontHeader4Size);
 			margin-bottom: 0.5rem;
 		}
 
@@ -118,6 +118,7 @@
 	}
 
 	&.sapMIllustratedMessage-Dialog {
+
 		figcaption {
 			max-width: 20rem;
 		}
@@ -130,7 +131,7 @@
 
 		.sapMTitle {
 			margin-bottom: 0.5rem;
-			font-size: @sapFontHeader3Size;
+			font-size: var(--sapFontHeader3Size);
 		}
 
 		.sapMIllustratedMessageDescription {
@@ -144,6 +145,7 @@
 	}
 
 	&.sapMIllustratedMessage-Scene {
+
 		figcaption {
 			max-width: 30rem;
 		}
@@ -156,12 +158,12 @@
 
 		.sapMTitle {
 			margin-bottom: 1rem;
-			font-size: @sapMFontHeader2Size;
+			font-size: var(--sapMFontHeader2Size);
 		}
 
 		.sapMIllustratedMessageDescription {
 			margin-bottom: 0.5rem;
-			font-size: @sapMFontLargeSize;
+			font-size: var(--sapMFontLargeSize);
 		}
 
 		.sapMIllustratedMessageAdditionalContent {

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

@@ -23,11 +23,10 @@
 	right: auto;
 }
 
-
 html.sap-desktop .sapMImageContent:focus {
-	outline-color: @sapUiContentFocusColor;
-	outline-style: @sapUiContentFocusStyle;
-	outline-width: @sapUiContentFocusWidth;
+	outline-color: var(--sapContent_FocusColor);
+	outline-style: var(--sapContent_FocusStyle);
+	outline-width: var(--sapContent_FocusWidth);
 }
 
 html.sap-desktop .sapMImageContent:focus:not([tabindex]) {
@@ -36,11 +35,12 @@ html.sap-desktop .sapMImageContent:focus:not([tabindex]) {
 
 .sapMImageContentImageIcon.sapUiIcon {
 	font-size: 1.75rem;
-	color: @sapUiTileIconColor;
+	color: var(--sapTile_IconColor);
 	padding-bottom: 0.675rem;
 }
 
 .sapMTileSmallPhone {
+
 	.sapMImageContent {
 		height: 3.438rem;
 		width: 8rem;

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

@@ -8,16 +8,16 @@
 }
 
 .sapMListFocus .sapMLIBFocused {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
 }
 
 .sapMInputDescriptionText {
 	padding-left: 0.5rem;
-	font-size: @sapFontSize;
+	font-size: var(--sapFontSize);
 	line-height: normal;
-	color: @sapUiFieldTextColor;
-	font-family: @sapUiFontFamily;
+	color: var(--sapField_TextColor);
+	font-family: var(--sapFontFamily);
 	font-style: normal;
 	font-weight: normal;
 	white-space: nowrap;
@@ -34,9 +34,12 @@
 }
 
 /* Input with description */
-.sapMInputBaseHasEndIcons, .sapMInputBaseHasBeginIcons {
+.sapMInputBaseHasEndIcons,
+.sapMInputBaseHasBeginIcons {
+
 	.sapMInputDescriptionWrapper {
 		max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_MinWidth}))";
+
 		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
 			max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_State_MinWidth}))";
 		}
@@ -44,8 +47,10 @@
 }
 
 .sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {
+
 	.sapMInputDescriptionWrapper {
 		max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_MinWidth}))";
+
 		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
 			max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_State_MinWidth}))";
 		}
@@ -53,8 +58,10 @@
 }
 
 .sapMInputBase:not(.sapMInputBaseHasEndIcons):not(.sapMInputBaseHasBeginIcons) {
+
 	.sapMInputDescriptionWrapper {
 		max-width: ~"calc(100% - (@{_InputBase_Control_MinWidth}))";
+
 		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
 			max-width: ~"calc(100% - (@{_InputBase_Control_State_MinWidth}*2))";
 		}
@@ -62,9 +69,13 @@
 }
 
 .sapUiSizeCompact {
-	.sapMInputBaseHasEndIcons, .sapMInputBaseHasBeginIcons {
+
+	.sapMInputBaseHasEndIcons,
+	.sapMInputBaseHasBeginIcons {
+
 		.sapMInputDescriptionWrapper {
 			max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_MinWidth_Compact}))";
+
 			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
 				max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_State_MinWidth_Compact}))";
 			}
@@ -72,8 +83,10 @@
 	}
 
 	.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {
+
 		.sapMInputDescriptionWrapper {
 			max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_MinWidth_Compact}))";
+
 			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
 				max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_State_MinWidth_Compact}))";
 			}
@@ -81,8 +94,10 @@
 	}
 
 	.sapMInputBase:not(.sapMInputBaseHasEndIcons):not(.sapMInputBaseHasBeginIcons) {
+
 		.sapMInputDescriptionWrapper {
 			max-width: ~"calc(100% - (@{_InputBase_Control_MinWidth_Compact}))";
+
 			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
 				max-width: ~"calc(100% - (@{_InputBase_Control_State_MinWidth_Compact}*2))";
 			}