@openui5/sap.m 1.135.0 → 1.136.0

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

@@ -3,9 +3,6 @@
 /* Base theme                         */
 /* ================================== */
 
-/* Buffer width for the scroll bar */
-@_sap_m_Popover_Scroll_Width_Buffer: 20px;
-
 .sapMActionSheetDialog.sapMDialog {
 	top: auto !important; /* We need to overwrite the inline top style */
 	bottom: 0;
@@ -98,10 +95,13 @@
 	.sapMActionSheetPopover.sapMPopover {
 
 		.sapMPopoverCont {
-			padding: 0.1875rem 0.375rem;
 			max-height: calc(~'100% - 0.375rem');
 		}
 
+		.sapMActionSheet {
+			padding: 0.1875rem 0.375rem;
+		}
+
 		.sapMActionSheet .sapMActionSheetButton .sapMBtnInner.sapMBtnIconFirst {
 			padding-left: 0.4375rem;
 			padding-right: 0.4375rem;
@@ -112,12 +112,11 @@
 .sapMActionSheetPopover.sapMPopover {
 
 	.sapMPopoverCont {
-		padding: 0.25rem 0.5rem;
 		max-height: calc(~'100% - 0.5rem');
 	}
 
-	&.sapMPopoverVerticalScrollIncluded .sapMPopoverCont {
-		padding: 0.25rem calc(~'0.5rem + ' @_sap_m_Popover_Scroll_Width_Buffer) 0.25rem 0.5rem;
+	.sapMActionSheet {
+		padding: 0.25rem 0.5rem;
 	}
 }
 

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

@@ -491,7 +491,7 @@ span.sapMBtnInner.sapMBtnEmphasized {
 }
 
 .sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnNeutral {
-	background: var(--apButton_Neutral_Hover_Background);
+	background: var(--sapButton_Neutral_Hover_Background);
 	border-color: var(--sapButton_Neutral_Hover_BorderColor);
 
 	.sapMBtnContent,

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

@@ -0,0 +1,28 @@
+.sapMPluginsColumnAIAction {
+	margin-inline-end: 0.125rem;
+	overflow: initial !important;
+	flex-shrink: 0;
+	padding: 0;
+}
+
+.sapMPluginsColumnAIAction.sapMBtn,
+.sapMPluginsColumnAIAction > .sapMBtnInner {
+	min-width: 1.625rem;
+	height: 1.625rem;
+	width: 1.625rem;
+	padding: 0;
+}
+
+.sapMPluginsColumnAIAction .sapMBtnIcon {
+	width: 1.625rem;
+	line-height: 1.625rem;
+}
+
+.sapMListTblSubCntHdr > .sapMPluginsColumnAIAction {
+	margin-inline-start: 0.0625rem;
+	margin-inline-end: 0;
+}
+
+.sapMListTblSubCntHdr > .sapMPluginsColumnAIAction .sapMBtnIcon {
+	font-size: 0.75rem;
+}

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

@@ -96,6 +96,7 @@
 
 .sapMListTblSubCntHdr {
 	display: inline-flex;
+	align-items: center;
 }
 
 .sapMListTblSubCntValBlock {

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

@@ -12,7 +12,7 @@
 
 .sapMPluginsColumnResizerHandle {
 	position: absolute;
-	z-index: 2;
+	z-index: 3;
 	top: 0;
 	bottom: 0;
 	left: -10000px;

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

@@ -2420,9 +2420,30 @@ html[data-sap-ui-browser*='ff'] {
 	font-weight: 700;
 }
 
+.sapMGTBackgroundBadge {
+	display: none;
+	margin-bottom: 0.5rem;
+}
+
+.sapMGTPriorityBadge,
+.sapMGTBackgroundBadge .sapMGTPriorityBadge {
+	height: 1.625rem;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
 .sapMGTArticleMode {
+	display: flex;
+	flex-direction: column;
 
 	.sapMGTContent {
+		flex-grow: 1;
+
+		.sapMGTPriorityBadge {
+			display: flex;
+			padding-top: 0;
+			padding-bottom: 0.5rem;
+		}
 
 		.sapMTileCnt {
 
@@ -2463,8 +2484,20 @@ html[data-sap-ui-browser*='ff'] {
 
 .sapMGTArticleMode.sapMTileSmallPhone {
 
+	.sapMGTHdrContent {
+		align-content: end;
+	}
+
+	.sapMGTBackgroundBadge {
+		display: block;
+	}
+
 	.sapMGTContent {
 
+		.sapMGTPriorityBadge {
+			display: none;
+		}
+
 		.sapMTileCnt {
 
 			.sapMTileFtrCnt {

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

@@ -113,7 +113,8 @@
 
 	.sapMSLITitle,
 	.sapMSLITitleOnly,
-	.sapMSLIWithDescription > .sapMLIBContent > .sapMSLIDiv > .sapMSLIDescription {
+	.sapMSLIWithDescription > .sapMLIBContent > .sapMSLIDiv > .sapMSLIDescription,
+	.sapMMsgViewItem.sapMSLIWrapping > .sapMLIBContent > .sapMSLIDiv {
 		padding: 0;
 	}
 

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

@@ -59,7 +59,6 @@
 		}
 
 		.sapMPanelWrappingDiv .sapUiIcon {
-			width: 2rem;
 			height: 1.5rem;
 			line-height: 1.5rem;
 		}
@@ -100,6 +99,7 @@
 		transform: translateY(-50%);
 		padding-left: 0.25rem;
 		padding-right: 0.25rem;
+		width: 2.75rem;
 	}
 }
 

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

@@ -3,8 +3,6 @@
 /* Base theme                     */
 /* ============================== */
 
- /* Buffer width for the scroll bar */
-@_sap_m_Popover_Scroll_Width_Buffer: 20px;
 @_sap_m_Popover_ArrowOffset: 0.5rem; /* Arrow offset from the Popover's corners */
 @_sap_m_Popover_CompactArrowOffset: @_sap_m_Popover_ArrowOffset; /* Arrow offset from the Popover's corners in compact mode */
 @_sap_m_Popover_ThickShadowSize: 0.0625rem;
@@ -25,18 +23,6 @@
 	}
 }
 
-.sapMPopover.sapMPopoverVerticalScrollIncluded {
-
-	.sapMPopoverScroll {
-		width: calc(~'100% + 20px');
-	}
-
-	html[data-sap-ui-browser^='sf'] & .sapMDialogSection {
-		/* For Safari - allow the vertical scroll bar to overlap the right padding which we use to compensate for its width. This happens by default for other browsers. */
-		overflow-y: overlay !important;
-	}
-}
-
 .sapMPopoverWrapper {
 	overflow: hidden;
 	border-radius: inherit;
@@ -448,6 +434,13 @@ html[data-sap-ui-browser^='sf'] .sapMPopover {
 	}
 }
 
-.sapMPopover.sapMPopoverVerticalScrollIncluded .sapMPopoverCont {
-	padding-right: @_sap_m_Popover_Scroll_Width_Buffer;
-}
+html[data-sap-ui-browser^='sf'] .sapMPopover.sapMPopoverVerticalScrollIncluded {
+
+	.sapMPopoverScroll {
+		width: calc(~'100% + 20px');
+	}
+
+	.sapMPopoverCont {
+		padding-right: 20px;
+	}
+}

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

@@ -402,6 +402,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	display: flex;
 	flex: 1 1 auto;
 	padding: .875rem .5rem 1rem;
+	align-items: center;
 }
 
 .sapMColumnHeaderText {

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

@@ -8,7 +8,7 @@
 	box-sizing: border-box;
 	position: relative;
 	height: 6.375rem;
-    vertical-align: top;
+	vertical-align: top;
 
 	/* FrameType: Auto */
 	&.sapMFrameTypeAuto {
@@ -32,7 +32,7 @@
 }
 
 .sapMGT .sapMTileCnt.sapMFrameTypeAuto:not(:only-of-type) {
-	width: ~"calc(50% - 0.25rem)"; //0.5rem margin between the contents
+	width: ~"calc(50% - 0.25rem)"; /* 0.5rem margin between the contents */
 }
 
 /* Footer CSS */
@@ -50,7 +50,7 @@
 	margin-left: 1rem;
 	margin-right: 1rem;
 	line-height: normal;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapMFontMediumSize;
 	font-weight: normal;
 }
@@ -64,19 +64,19 @@ html[dir=rtl] .sapMGT .sapMTileCntFtrTxt {
 }
 
 .sapMTileCntFooterTextColorNeutral {
-	color: @sapUiTileTextColor;
+	color: var(--sapTile_TextColor);
 }
 
 .sapMTileCntFooterTextColorGood {
-	color: @sapUiPositiveText;
+	color: var(--sapPositiveTextColor);
 }
 
 .sapMTileCntFooterTextColorError {
-	color: @sapUiNegativeText;
+	color: var(--sapNegativeTextColor);
 }
 
 .sapMTileCntFooterTextColorCritical {
-	color: @sapUiCriticalText;
+	color: var(--sapCriticalTextColor);
 }
 
 html[dir=rtl] .sapMTileCntFtrTxt {
@@ -115,7 +115,7 @@ html[dir=rtl] .sapMTileCntFtrTxt {
 .sapMTileCnt.News {
 	height: 6.125rem;
 	margin-top: 0.125rem;
-	background-color: @sapUiTileBackground;
+	background-color: var(--sapTile_Background);
 
 	.sapMTileCntContent {
 		padding-left: 1rem;
@@ -133,7 +133,8 @@ html[dir=rtl] .sapMTileCntFtrTxt {
 }
 
 .Stretch {
-	.sapMTileCnt.News{
+
+	.sapMTileCnt.News {
 		height: 100%;
 
 		.sapMTileCntContent {
@@ -141,81 +142,103 @@ html[dir=rtl] .sapMTileCntFtrTxt {
 		}
 
 		.sapMTileCntFtrTxt {
-			font-size: @sapMFontSmallSize;
+			font-size: var(--sapFontSmallSize);
 		}
 	}
 }
 
-// Styles when the slide tile has only one tile inside it
+/* Styles when the slide tile has only one tile inside it */
 
 .Stretch {
-	.sapMTileCnt.News.sapMTileFooterPresent{
+
+	.sapMTileCnt.News.sapMTileFooterPresent {
+
 		.sapMTileCntContent {
-			height: -webkit-calc(~'100% - 50px') !important;
+			height: calc(~'100% - 50px') !important;
 		}
 	}
+
 	&.sapMTileSmallPhone {
-		.sapMTileCnt.News.sapMTileFooterPresent{
+
+	 	.sapMTileCnt.News.sapMTileFooterPresent {
+
 			.sapMTileCntContent {
-				height: -webkit-calc(~'100% - 32px') !important;
+				height: calc(~'100% - 32px') !important;
 			}
 		}
 	}
 	.sapMTileCnt.News {
+
 		.sapMTileCntContent {
-			height: -webkit-calc(~'100% - 32px');
+			height: calc(~'100% - 32px');
 		}
 	}
+
 	&.sapMTileSmallPhone {
+
 		.sapMTileCnt.News {
+
 			.sapMTileCntContent {
-				height: -webkit-calc(~'100% - 12px');
+				height: calc(~'100% - 12px');
 			}
 		}
 	}
 }
 
-// Styles when the slide tile has only one tile inside it
+/* Styles when the slide tile has only one tile inside it */
 
 .sapMST.sapMSTIndicatorVisible.Stretch {
+
 	.sapMTileCnt.News {
+
 		.sapMNwCCTxt,.sapMNwCSbh {
+
 			.sapMFT {
 				text-overflow: initial;
-				 white-space: initial;
+				white-space: initial;
 			}
 		}
+
 		&.sapMTileFooterPresent {
+
 			.sapMTileCntContent {
-				height: -webkit-calc(~'100% - 65px') !important;
+				height: calc(~'100% - 65px') !important;
 			}
 		}
+
 		.sapMTileCntContent {
-			height: -webkit-calc(~'100% - 51px') !important;
+			height: calc(~'100% - 51px') !important;
 		}
 	}
+
 	.sapMTileCntFtrTxt {
 		bottom: 1.875rem;
 	}
 }
 
 .sapMST.sapMSTIndicatorVisible.Stretch.sapMTileSmallPhone {
+
 	.sapMTileCnt.News {
+
 		&.sapMTileFooterPresent {
+
 			.sapMTileCntContent {
-				height: -webkit-calc(~'100% - 54px') !important;
+				height: calc(~'100% - 54px') !important;
 			}
 		}
+
 		.sapMTileCntContent {
-			height: -webkit-calc(~'100% - 40px') !important;
+			height: calc(~'100% - 40px') !important;
 		}
 	}
+
 	.sapMTileCntFtrTxt {
 		bottom: 1.875rem;
 	}
 }
 
 .sapMTileSmallPhone {
+
 	.sapMTileCnt {
 		height: 5.5rem;
 	}
@@ -226,7 +249,7 @@ html[dir=rtl] .sapMTileCntFtrTxt {
 		bottom: 0.5rem;
 		margin-left: 0.5rem;
 		margin-right: 0.5rem;
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 
 	.sapMTileCntContent {
@@ -252,68 +275,90 @@ html[dir=rtl] .sapMTileCntFtrTxt {
 	}
 
 	.sapMTileSmallPhone.Stretch {
+
 		.sapMTileCnt.News {
 			height: 100%;
 		}
+
 		.sapMTileFtrCnt > .sapMTileNavContainer {
 			padding-bottom: 1rem;
-		}	
+		}
 	}
 }
 .sapMGTStateLoading {
+
 	&.sapMTileSmallPhone:not(.sapMGTActionMode) {
+
 		.sapMTileCntContentShimmerPlaceholderWithDescription{
 			padding-top: 0;
 		}
+
 		.sapMTileCntContentShimmerPlaceholderItem {
+
 			.sapMTileCntContentShimmerPlaceholderRows {
-				.sapMTileCntContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemBox {
-					top:0rem;
+
+				.sapMTileCntContentShimmerPlaceholderItemTextFooter,
+				.sapMTileCntContentShimmerPlaceholderItemBox {
+					top: 0;
 				}
 			}
 		}
 	}
+
 	.sapMTileCntContentShimmerPlaceholderItem {
+
 		.sapMTileCntContentShimmerPlaceholderRows {
-			.sapMTileCntContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemBox {
-				top:1rem;
+
+			.sapMTileCntContentShimmerPlaceholderItemTextFooter,
+			.sapMTileCntContentShimmerPlaceholderItemBox {
+				top: 1rem;
 			}
 		}
 	}
+
 	.sapMTileCntContentShimmerPlaceholderWithDescription {
-		padding: 1rem 0rem 0rem 0rem;
+		padding: 1rem 0 0 0;
 	}
 }
+
 .sapMGT.sapMTileSmallPhone.sapMGTStateLoading.OneByOne {
-	.sapMTileCntContentShimmerPlaceholderItemTextFooter{
+
+	.sapMTileCntContentShimmerPlaceholderItemTextFooter {
 		width: 5.875rem;
 	}
 }
+
 .sapMTileCntContentShimmerPlaceholderItem {
+
 	.sapMTileCntContentShimmerPlaceholderRows {
-		.sapMTileCntContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemBox {
+
+		.sapMTileCntContentShimmerPlaceholderItemTextFooter,
+		.sapMTileCntContentShimmerPlaceholderItemBox {
 			top:0.85rem;
 		}
 	}
 }
 
-.sapMGTStateLoaded.TwoByHalf, .sapMGTStateLoaded.OneByHalf,
-.sapMGTStateDisabled.TwoByHalf, .sapMGTStateDisabled.OneByHalf,
-.sapMGTStateFailed.TwoByHalf, .sapMGTStateFailed.OneByHalf  {
+.sapMGTStateLoaded.TwoByHalf,
+.sapMGTStateLoaded.OneByHalf,
+.sapMGTStateDisabled.TwoByHalf,
+.sapMGTStateDisabled.OneByHalf,
+.sapMGTStateFailed.TwoByHalf,
+.sapMGTStateFailed.OneByHalf {
+
 	.sapMTileCntContentShimmerPlaceholderItem.sapMTileCntContentShimmerPlaceholderWithDescription {
-		padding: 0rem 1rem 0rem 1rem;
+		padding: 0 1rem 0 1rem;
 	}
-
 }
 
-
 .sapMTileCnt.sapMTileCntDisabled {
 	position: relative;
 
-	&:after {
+	&::after {
+
 		.sapMGTOverlayMixin();
 		display: block;
-		content: "";
+		content: '';
 		background-color: var(--sapTile_OverlayBackground);
 		opacity: 0.7;
 	}

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

@@ -19,10 +19,10 @@
 	font-size: @sapMFontMediumSize;
 	padding-left: @_sap_m_Token_LeftPadding;
 	height: @_sap_m_Token_TokenHeight;
-	background: @sapUiButtonTokenBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
-	border-radius: @sapUiButtonBorderCornerRadius;
-	color: @sapUiButtonTextColor;
+	background: var(--sapButton_TokenBackground);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
+	border-radius: var(--sapButton_BorderCornerRadius);
+	color: var(--sapButton_TextColor);
 }
 
 .sapMToken.sapMHiddenToken {
@@ -31,27 +31,24 @@
 
 .sapMToken.sapMTokenReadOnly {
 	padding: 0 0.375rem;
-	color: @sapUiContentForegroundTextColor;
+	color: var(--sapContent_ForegroundTextColor);
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenReadOnly):hover {
-	background: @sapUiButtonHoverBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonHoverBorderColor;
+	background: var(--sapButton_Hover_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);
 }
 
 .sapMTokenText {
 	display: inline-block;
 	overflow: hidden;
 	white-space: nowrap;
-
-	// at least for Microsoft Surface Tablet we experienced problems when not setting these properties - touches on the Token seemed to be propageted to the Span inside the Token-Div and thereby (part of) the text contained in the Span would appear selected
+	/* at least for Microsoft Surface Tablet we experienced problems when not setting these properties - touches on the Token seemed to be propageted to the Span inside the Token-Div and thereby (part of) the text contained in the Span would appear selected */
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-
 	pointer-events: none;
-
 	line-height: 1.5rem;
 	max-width: calc(~"100% - " @_sap_m_Token_IconWidth);
 	box-sizing: border-box;
@@ -76,15 +73,15 @@ html.sap-desktop .sapMToken:not(.sapMTokenReadOnly):hover {
 	display: inline-block;
 	line-height: 1.625rem;
 	padding: 0 0.5rem;
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 	font-size: 0.75rem;
 	box-sizing: border-box;
 	touch-action: none;
-	right: -@sapUiButtonBorderWidth;
+	right: ~"calc(var(--sapButton_BorderWidth) * -1)";
 }
 
 .sapUiSizeCompact .sapMToken {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	padding-left: @_sap_m_Token_TokenCompactPadding;
 	height: @_sap_m_Token_TokenCompactHeight;
 }
@@ -98,7 +95,7 @@ html.sap-desktop .sapMToken:not(.sapMTokenReadOnly):hover {
 }
 
 .sapUiSizeCompact .sapMToken .sapMTokenIcon {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	padding: 0 0.25rem;
 	line-height: 1.1875rem;
 }
@@ -110,14 +107,14 @@ html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
 
 .sapMTokenSelected,
 .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
-	color: @sapUiButtonSelectedTextColor;
-	background: @sapUiButtonSelectedBackground;
-	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
+	color: var(--sapButton_Selected_TextColor);
+	background: var(--sapButton_Selected_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 }
 
 .sapMTokenSelected .sapMTokenIcon,
 .sapMTokenSelected .sapMTokenText {
-	color: @sapUiButtonSelectedTextColor;
+	color: var(--sapButton_Selected_TextColor);
 }
 
 .sapUiSizeCompact .sapMListTbl .sapMToken .sapUiIcon:not(.sapMLIBImgNav) {

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

@@ -2,6 +2,7 @@
 /* CSS for control sap.m/Tokenizer  */
 /* Base theme                       */
 /* ================================ */
+
 @_sap_m_Tokenizer_OutlineOffset: 0.1875rem;
 @_sap_m_Tokenizer_Token_MarginRight: 0.375rem;
 @_sap_m_Tokenizer_FontSizeRatioCozy: (@sapMFontMediumSize / @sapFontLargeSize);
@@ -26,19 +27,20 @@
 }
 
 .sapMTokenizer.sapMTokenizerReadonly {
+
 	.sapMToken {
 		padding: 0 0.375rem;
-		}
+	}
 
 	.sapMTokenIcon {
 		display: none;
 	}
 
 	.sapMTokenizerIndicator {
-		color: @sapUiLink;
+		color: var(--sapLinkColor);
 
-		&:hover{
-			color: @sapUiLinkHover;
+		&:hover {
+			color: var(--sapLink_Hover_Color);
 		}
 	}
 }
@@ -84,6 +86,7 @@
 	&:hover {
 		text-decoration: underline;
 	}
+
 	&:active {
 		text-decoration: none;
 	}
@@ -109,10 +112,11 @@
 	display: inline-block;
 	-moz-user-select: none;
 	-webkit-user-select: none;
+	user-select: none;
 	height: 100%;
 }
 
-.sapMTokenizer.sapMTokenizerOneLongToken .sapMTokenizerScrollContainer{
+.sapMTokenizer.sapMTokenizerOneLongToken .sapMTokenizerScrollContainer {
 	width: 100%;
 	overflow: hidden;
 
@@ -126,6 +130,9 @@
 }
 
 .sapMTokenizerTokensPopup {
+	min-width: 5rem;
+	max-width: 40rem;
+
 	.sapMListUl > .sapMLIB.sapMSLIWrapping {
 		min-height: 2.5rem;
 	}
@@ -136,8 +143,10 @@
 }
 
 .sapUiSizeCompact {
+
 	.sapMTokenizerTokensPopup,
 	&.sapMTokenizerTokensPopup {
+
 		.sapMListUl > .sapMLIB.sapMSLIWrapping {
 			min-height: 2rem;
 		}