@openui5/sap.m 1.98.0 → 1.101.0

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

@@ -9,6 +9,9 @@
  /* Buffer width for the scroll bar */
 @_sap_m_Popover_Scroll_Width_Buffer: 20px;
 
+/* Arrow offset from the Popover's corners */
+@_sap_m_Popover_ArrowOffset: 16;
+
 /* shared mixin for arrow shadow*/
 .sapMPopoverArrAfterShadow(@horizontalShadow, @verticalShadow) {
 	box-shadow: @horizontalShadow @verticalShadow 0.750rem 0 fade(@sapUiContentShadowColor, 30), 0 0 0.125rem 0 fade(@sapUiContentShadowColor, 30);
@@ -68,7 +71,7 @@
 	overflow: hidden;
 	background: @sapUiGroupContentBackground;
 	border: none;
-	box-shadow: @sapUiShadowLevel2;
+	box-shadow: @sapUiContentShadow2;
 	border-radius: 0.25rem;
 	min-height: 2rem;
 }
@@ -213,7 +216,7 @@ html[data-sap-ui-browser^="sf"] .sapMPopover {
 	left: 20px;
 	/* position */
 	top: -0.5rem;
-	height: 0.5625rem;
+	height: 0.5rem;
 
 	&:after {
 		margin: 0.1875rem 0 0 0.1875rem;
@@ -226,8 +229,8 @@ html[data-sap-ui-browser^="sf"] .sapMPopover {
 	/* offset */
 	top: 1rem;
 	/* position */
-	right: -0.5625rem;
-	width: 0.5625rem;
+	right: -0.5rem;
+	width: 0.5rem;
 
 	&:after {
 		margin: 0.1875rem 0 0 -0.375rem;
@@ -240,7 +243,7 @@ html[data-sap-ui-browser^="sf"] .sapMPopover {
 	/* offset */
 	left: 1rem;
 	/* position */
-	height: 0.5625rem;
+	height: 0.5rem;
 
 	&:after {
 		margin: -0.375rem 0 0 0.125rem;
@@ -252,9 +255,9 @@ html[data-sap-ui-browser^="sf"] .sapMPopover {
 /* pointing left arrow */
 .sapMPopoverArrLeft {
 	/* position */
-	left: -0.5625rem;
+	left: -0.5rem;
 	top: -2rem;
-	width: 0.5625rem;
+	width: 0.5rem;
 	height: 1rem;
 
 	&:after {

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

@@ -42,13 +42,19 @@
 	.sapMRbBOut {
 		height: 100%;
 		width: 100%;
-		transform: translate(50%, 50%);
+		transform: translate(0.675rem, 0.675rem);
 		margin: 0.825rem;
 		padding: 1px; /* using padding here so that margin won't collide */
 		stroke: @sapUiFieldBorderColor;
 		fill: @sapUiFieldBackground;
 	}
 }
+.sapUiSizeCompact {
+	.sapMRb .sapMRbB {
+	.sapMRbBOut {
+		transform: translate(0.5rem, 0.5rem);
+	}}
+}
 
 .sapMRbSvg {
 	height: 1.375rem;
@@ -94,11 +100,18 @@
 }
 
 .sapMRbB .sapMRbBInn {
-	transform: translate(50%, 50%);
+	transform: translate(0.675rem, 0.675rem);
 	stroke: transparent;
 	fill: none;
 	-webkit-user-select: none;
 	align-self: center;
+	r: 22%;
+}
+
+.sapUiSizeCompact {
+	.sapMRbBInn {
+		transform: translate(0.5rem, 0.5rem);
+	}
 }
 
 .sapMRbHasLabel.sapMRb:focus:before {
@@ -213,7 +226,13 @@
 html[dir="rtl"] {
 	.sapMRbB .sapMRbBInn,
 	.sapMRb .sapMRbB .sapMRbBOut {
-		transform: translate(-50%, 50%);
+		transform: translate(-0.675rem, 0.675rem);
+	}
+	.sapUiSizeCompact {
+		.sapMRbB .sapMRbBInn,
+		.sapMRb .sapMRbB .sapMRbBOut {
+			transform: translate(-0.675rem, 0.675rem);
+		}
 	}
 }
 

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

@@ -5,12 +5,10 @@
 
 @_sap_m_SearchField_Height: 3rem;
 @_sap_m_SearchField_FormHeight: 2.5rem;
-@_sap_m_SearchField_InputHeight: 2.375rem;
 @_sap_m_SearchField_ButtonSize: 2.375rem;
 @_sap_m_SearchField_ButtonFontSize: 1.125rem;
-@_sap_m_SearchField_NoSearchButtonPadding: 2.375rem;
+@_sap_m_SearchField_CompactButtonLineHeight: 1.5rem;
 @_sap_m_SearchField_Compact_FormPaddingLeft: 0.375rem;
-@_sap_m_SearchField_Compact_NoSearchButtonPadding: 2rem;
 @_sap_m_SearchField_ResetIcon: "\e1c7";
 @_sap_m_SearchField_SearchIcon: "\e00d";
 @_sap_m_SearchField_PlaceholderColor: @sapUiFieldPlaceholderTextColor;
@@ -77,11 +75,7 @@ input.sapMSFI[type="search"]:focus {
 }
 
 .sapMSFR {
-	position: absolute;
-	right: 0px;
-	top: 0px;
-	width: 1.8em;
-	height: 100%;
+	visibility: hidden;
 	background: transparent;
 }
 
@@ -90,20 +84,17 @@ input.sapMSFI[type="search"]:focus {
 }
 
 .sapMSFF {
+	display: flex;
 	box-sizing: border-box;
 	height: @_sap_m_SearchField_FormHeight;
-	line-height: @_sap_m_SearchField_InputHeight;
 	border: @_sap_m_SearchField_Border;
-	background: @sapUiFieldBackground;
+	background: @sapUiFieldBackgroundStyle;
+	background-color: @sapUiFieldBackground;
 	vertical-align: top;
 	width: 100%;
 	position: relative;
 	padding-left: 0.625rem;
-	padding-right: 4.75rem;
-}
-
-.sapMSFF.sapMSFNS { /* no search button */
-	padding-right: @_sap_m_SearchField_NoSearchButtonPadding;
+	overflow: hidden;
 }
 
 /* Block elements do not work with bar layout */
@@ -111,12 +102,6 @@ input.sapMSFI[type="search"]:focus {
 	display : inline-block;
 }
 
-.sapMSFF>form>input {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .sapMFocus>.sapMSFF {
 	border-color: @sapUiFieldFocusBorderColor;
 }
@@ -130,8 +115,7 @@ input.sapMSFI[type="search"]:focus {
 	font-family: @sapUiFontFamily;
 	font-size: @sapMFontMediumSize;
 	background: transparent;
-	width: 100%;
-	height: @_sap_m_SearchField_InputHeight;
+	height: 100%;
 	border: none;
 	outline: none;
 	padding: 0;
@@ -139,6 +123,7 @@ input.sapMSFI[type="search"]:focus {
 	text-indent: 0.125rem;
 	vertical-align: top;
 	text-overflow: ellipsis;
+	flex: 1;
 }
 
 .sapMSFI[type='search']{
@@ -151,20 +136,16 @@ input.sapMSFI[type="search"]:focus {
 	display: none;
 }
 
-/* custom buttons */
 .sapMSFB {
-	position: absolute;
 	width: @_sap_m_SearchField_ButtonSize;
-	height: @_sap_m_SearchField_ButtonSize;
+	height: 100%;
 	line-height: @_sap_m_SearchField_ButtonSize;
 	font-size: @_sap_m_SearchField_ButtonFontSize;
 	color: @sapUiContentIconColor;
 	text-align: center;
 	cursor: pointer;
-	margin:0;
 	padding:0;
-	right: 0;
-	top: 0;
+	box-sizing: border-box;
 }
 
 .sapMSFB::after {
@@ -174,26 +155,17 @@ input.sapMSFI[type="search"]:focus {
 	-webkit-font-smoothing: antialiased;
 }
 
-/* reset button */
-.sapMSFR:not(.sapMSFNS) {
-	right: 2.375rem;
-}
-
-.sapMSFR {
-	visibility: hidden;
-}
-
 .sapMSFR::after {
 	content: @_sap_m_SearchField_ResetIcon;
 }
 
-.sapMSFVal>.sapMSFF>.sapMSFR,
-:not(.sapMSFVal):not(.sapMFocus)>.sapMSFReload>.sapMSFR {
+.sapMSFVal > .sapMSFF .sapMSFR,
+:not(.sapMSFVal):not(.sapMFocus) > .sapMSFReload .sapMSFR {
 	visibility: visible;
 }
 
 /* search icon in place of the reset button */
-:not(.sapMSFVal)>.sapMSFReload>.sapMSFR::after {
+:not(.sapMSFVal) > .sapMSFReload .sapMSFR::after {
 	content: @_sap_m_SearchField_SearchIcon;
 }
 
@@ -203,7 +175,7 @@ input.sapMSFI[type="search"]:focus {
 }
 
 /* refresh icon in some cases */
-:not(.sapMFocus)>.sapMSFReload>.sapMSFS::after {
+:not(.sapMFocus) > .sapMSFReload .sapMSFS::after {
 	content: "\e010";
 }
 
@@ -221,6 +193,11 @@ input.sapMSFI[type="search"]:focus {
 	opacity: 1; // in FF by default the opacity is 60%
 }
 
+.sapMSF.sapMSFDisabled form,
+.sapMSF:not(.sapMSFVal) form.sapMSFNS:not(.sapMSFReload) {
+	padding-right: 0.625rem;
+}
+
 /* Compact size */
 .sapUiSizeCompact {
 
@@ -232,32 +209,19 @@ input.sapMSFI[type="search"]:focus {
 
 	.sapMSFF {
 		height: 1.625rem;
-		line-height: 1.5rem;
 		padding-left: @_sap_m_SearchField_Compact_FormPaddingLeft;
-		padding-right: 4rem;
-	}
-
-	.sapMSFF.sapMSFNS { /* no search button */
-		padding-right: 2.38rem;
-	}
-
-	/* input */
-	.sapMSFI {
-		height: 1.5rem;
 	}
 
-	/* custom buttons */
 	.sapMSFB {
 		width: 2rem;
-		height: 1.5rem;
 		font-size: 1rem;
 		text-align: center;
-		margin:0;
 		padding:0;
-		line-height: 1.5rem;
+		line-height: @_sap_m_SearchField_CompactButtonLineHeight;
 	}
 
-	.sapMSFR:not(.sapMSFNS) {
-		right: 2rem;
+	.sapMSF.sapMSFDisabled form,
+	.sapMSF:not(.sapMSFVal) form.sapMSFNS:not(.sapMSFReload) {
+		padding-right: @_sap_m_SearchField_Compact_FormPaddingLeft;
 	}
 }

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

@@ -21,6 +21,11 @@
 
 .sapMSB .sapMSBArrow .sapMBtnIcon {
 	font-size: 0.75rem;
+	line-height: 2.25rem;
+}
+
+.sapUiSizeCompact .sapMSB .sapMSBArrow .sapMBtnIcon {
+	line-height: 1.625rem;
 }
 
 .sapMSB .sapMSBText .sapMBtnInner {

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

@@ -40,7 +40,7 @@
 
 div.sapMSuggestionsPopover {
 	border: none;
-	box-shadow: @sapUiShadowLevel1;
+	box-shadow: @sapUiContentShadow1;
 }
 
 .sapMSuggestionsPopover.sapMPopover {

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

@@ -132,4 +132,31 @@ html.sap-tablet, html.sap-phone {
 		padding-left: 15px;
 		padding-right: 15px;
 	}
+}
+
+html.sap-desktop:not(.sapUiNativeScrollbars) .sapMTextArea .sapMInputBaseContentWrapper ::-webkit-scrollbar {
+	background: @sapUiFieldBackgroundStyle;
+	background-color: @sapUiScrollBarTrackColor;
+}
+
+html.sap-desktop:not(.sapUiNativeScrollbars) .sapMTextArea {
+	.sapMInputBaseContentWrapperWarning ::-webkit-scrollbar {
+		background: @sapUiFieldWarningBackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
+
+	.sapMInputBaseContentWrapperError ::-webkit-scrollbar {
+		background: @sapUiFieldInvalidBackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
+
+	.sapMInputBaseContentWrapperInformation ::-webkit-scrollbar {
+		background: @sapUiFieldInformationBackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
+
+	.sapMInputBaseContentWrapperSuccess ::-webkit-scrollbar {
+		background: @sapUiFieldSuccessBackgroundStyle;
+		background-color: @sapUiScrollBarTrackColor;
+	}
 }

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

@@ -136,6 +136,9 @@ html[dir=rtl] .sapMTileCntFtrTxt {
 	.sapMTileCnt.News{
 		height: 100%;
 
+		.sapMTileCntContent {
+			margin-top: 1rem;
+		}
 
 		.sapMTileCntFtrTxt {
 			font-size: @sapMFontSmallSize;
@@ -170,6 +173,7 @@ html[dir=rtl] .sapMTileCntFtrTxt {
 		.sapMTileCntContent {
 			padding-left: 0.5rem;
 			padding-right: 0.5rem;
+			margin-top: 0.25rem;
 		}
 
 		.sapMTileCntFtrTxt {
@@ -186,4 +190,44 @@ html[dir=rtl] .sapMTileCntFtrTxt {
 			padding-bottom: 1rem;
 		}	
 	}
-}
+}
+.sapMGTStateLoading {
+	.sapMTileCntContentShimmerPlaceholderItem {
+		.sapMTileCntContentShimmerPlaceholderRows {
+			.sapMTileCntContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemBox {
+				top:1rem;
+			}
+		}
+	}
+	.sapMTileCntContentShimmerPlaceholderWithDescription {
+		padding: 1rem 0rem 0rem 0rem;
+	}
+}
+.sapMTileCntContentShimmerPlaceholderItem {
+	.sapMTileCntContentShimmerPlaceholderRows {
+		.sapMTileCntContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemBox {
+			top:0.85rem;
+		}
+	}
+}
+
+.sapMGTStateLoaded.TwoByHalf, .sapMGTStateLoaded.OneByHalf,
+.sapMGTStateDisabled.TwoByHalf, .sapMGTStateDisabled.OneByHalf,
+.sapMGTStateFailed.TwoByHalf, .sapMGTStateFailed.OneByHalf  {
+	.sapMTileCntContentShimmerPlaceholderItem.sapMTileCntContentShimmerPlaceholderWithDescription {
+		padding: 0rem 1rem 0rem 1rem;
+	}
+
+}
+
+
+.sapMTileCnt.sapMTileCntDisabled {
+	position: relative;
+
+	&:after {
+		.sapMGTOverlayMixin();
+		display: block;
+		content: "";
+		background-color: fade(@sapUiTileBackground, 80);
+	}
+}

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

@@ -16,9 +16,9 @@
 	font-size: @sapMFontMediumSize;
 	padding-left: @_sap_m_Token_LeftPadding;
 	height: 1.625rem;
-	background: @sapUiButtonBackground;
-	border: 1px solid @sapUiButtonBorderColor;
-	border-radius: 0.125rem;
+	background: @sapUiButtonTokenBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
+	border-radius: @sapUiButtonBorderCornerRadius;
 	color: @sapUiButtonTextColor;
 }
 
@@ -33,7 +33,7 @@
 
 html.sap-desktop .sapMToken:hover {
 	background: @sapUiButtonHoverBackground;
-	border: 1px solid @sapUiButtonHoverBorderColor;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonHoverBorderColor;
 }
 
 .sapMTokenText {
@@ -71,10 +71,10 @@ html.sap-desktop .sapMToken:hover {
 .sapMTokenIcon {
 	vertical-align: top;
 	display: inline-block;
-	line-height: 1.5rem;
+	line-height: 1.5625rem;
 	padding: 0 0.5rem;
 	color: @sapUiContentIconColor;
-	font-size: @sapMFontLargeSize;
+	font-size: 0.75rem;
 	box-sizing: border-box;
 	touch-action: none;
 }
@@ -93,10 +93,10 @@ html.sap-desktop .sapMToken:hover {
 	line-height: 1.125rem;
 }
 
-.sapUiSizeCompact .sapMTokenIcon {
+.sapUiSizeCompact .sapMToken .sapMTokenIcon {
 	font-size: @sapMFontSmallSize;
 	padding: 0 0.25rem;
-	line-height: 1.125rem;
+	line-height: 1.1875rem;
 }
 
 html.sap-desktop .sapMToken.sapMTokenSelected:hover {
@@ -106,13 +106,14 @@ html.sap-desktop .sapMToken.sapMTokenSelected:hover {
 
 .sapMTokenSelected,
 .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
-	color: @sapUiToggleButtonPressedTextColor;
-	background: @sapUiToggleButtonPressedBackground;
-	border: 1px solid @sapUiToggleButtonPressedBorderColor;
+	color: @sapUiButtonSelectedTextColor;
+	background: @sapUiButtonSelectedBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
 }
 
-.sapMTokenSelected .sapMTokenIcon {
-	color: @sapUiToggleButtonPressedTextColor;
+.sapMTokenSelected .sapMTokenIcon,
+.sapMTokenSelected .sapMTokenText {
+	color: @sapUiButtonSelectedTextColor;
 }
 
 .sapUiSizeCompact .sapMListTbl .sapMToken .sapUiIcon:not(.sapMLIBImgNav) {

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

@@ -2,13 +2,13 @@
 /* CSS for control sap.m/Tokenizer  */
 /* Base theme                       */
 /* ================================ */
-@_sap_m_Tokenizer_OutlineOffset: 3px;
+@_sap_m_Tokenizer_OutlineOffset: 0.1875rem;
 @_sap_m_Tokenizer_Token_MarginRight: 0.375rem;
 @_sap_m_Tokenizer_FontSizeRatioCozy: (@sapMFontMediumSize / @sapFontLargeSize);
 @_sap_m_Tokenizer_FontSizeRatioCompact: 1;
 
 .sapMTokenizer {
-	padding-left: 2 * @_sap_m_Tokenizer_OutlineOffset;
+	padding-left: 0.375rem;
 	position: relative;
 	display: inline-block;
 	white-space: nowrap;

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

@@ -22,13 +22,13 @@
 }
 
 .sapMValueStateMessageError {
-	background: @sapUiErrorBG;
+	background: @sapErrorBackground;
 }
 
 .sapMValueStateMessageWarning {
-	background: @sapUiWarningBG;
+	background: @sapWarningBackground;
 }
 
 .sapMValueStateMessageInformation {
-	background: @sapUiInformationBG;
+	background: @sapInformationBackground;
 }