@openui5/sap.m 1.94.0 → 1.97.0

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

@@ -5,6 +5,7 @@
 
 @_sap_m_IconTabBar_SelectListItem_PaddingLeft: 0.5rem;
 @_sap_m_IconTabBar_SelectListItem_PaddingLeftAdditional: 0;
+@_sap_m_IconTabBar_ListBorderRadius: 0px;
 
 .sapMITBSelectList {
 	margin: 0;
@@ -178,7 +179,7 @@
 }
 
 .sapMITBSelectItem:focus::before {
-	border: @sapUiContentFocusWidth dotted @sapUiContentFocusColor;
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	position: absolute;
 	content: " ";
 	top: 1px;
@@ -186,6 +187,7 @@
 	bottom: 1px;
 	left: 1px;
 	z-index: 2;
+	border-radius: @_sap_m_IconTabBar_ListBorderRadius;
 	pointer-events: none;
 }
 
@@ -199,4 +201,4 @@
 
 .sapUiDnDIndicator {
 	z-index: 100;
-}
+}

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

@@ -4,8 +4,8 @@
 /* ============================ */
 
 .sapMListFocus .sapMLIBFocused {
-	outline: 1px dotted @sapUiContentFocusColor;
-	outline-offset: -2px;
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: -0.125rem;
 }
 
 .sapMInputDescriptionText {

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

@@ -237,30 +237,6 @@ input.sapMInputBaseInner:invalid {
 	}
 }
 
-.sapMILI-CTX .sapMInputBaseContentWrapper,
-.sapMILI-CTX .sapMInputBaseInner,
-.sapMILI-CTX .sapMInputBaseDisabled .sapMInputBaseInner,
-.sapMILI-CTX .sapMInputBaseReadonlyWrapper .sapMInputBaseInner {
-	text-align: right;
-	background: transparent;
-}
-
-.sapMLIBActive {
-	.sapMInputBaseInner,
-	.sapMInputBaseContentWrapper {
-		color: @sapUiListActiveTextColor;
-		background: transparent;
-	}
-
-	.sapMInputDescriptionText {
-		color: @sapUiListActiveTextColor;
-	}
-}
-
-.sapMLIBActive .sapMInputBaseInner::-webkit-input-placeholder {
-	color: @sapUiListActiveTextColor;
-}
-
 /* Compact size */
 
 .sapUiSizeCompact {

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

@@ -305,3 +305,9 @@ td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapMLabel{
 		width: 100%;
 	}
 }
+
+.sapUiTableHeaderDataCell .sapMLabel,
+.sapMListTbl .sapMColumnHeader .sapMLabel {
+	font-weight: @sapUiColumnHeaderFontWeight;
+	font-size: @sapUiColumnHeaderFontSize;
+}

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

@@ -104,14 +104,16 @@
 	color: @sapUiListTextColor;
 	background-color: @sapUiListBackground;
 	border-bottom: 1px solid @sapUiListBorderColor;
-	padding: 0 1rem !important;
-	height:3rem;
+	padding: 0.5rem 1rem !important;
+	min-height: 3rem;
+	line-height: 1.4;
 }
 
 .sapMListNoDataText {
 	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+    overflow: clip;
+	white-space: pre-wrap;
+	text-align: center;
 }
 
 .sapMListShowSeparatorsAll {
@@ -306,7 +308,7 @@ html.sap-phone .sapMListInsetBG > .sapMListSwp {
 
 /* Compact size */
 .sapUiSizeCompact .sapMListNoData {
-	height: 2rem;
+	min-height: 2rem;
 	font-size: @sapMFontMediumSize;
 }
 

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

@@ -11,6 +11,8 @@
 @_sap_m_ListItemBase_Highlight_InformationColor: @sapUiInformationBorder;
 @_sap_m_ListItemBase_Navigated: @sapUiListSelectionBorderColor;
 @_sap_m_ListItemBase_Detail_Delete_MarginLeft: 0.125rem;
+@_sap_m_ListItemBase_Focus_Outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+@_sap_m_ListItemBase_Focus_OffsetWithGap: calc(-@sapUiContentFocusWidth ~"- 0.0625rem");
 
 .sapMLIB,
 .sapMLIBImgNav {
@@ -41,8 +43,8 @@
 }
 
 .sapMLIBFocusable:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
-	outline-offset: -2px;
+	outline: @_sap_m_ListItemBase_Focus_Outline;
+	outline-offset: @_sap_m_ListItemBase_Focus_OffsetWithGap;
 }
 
 /* makes the focus outline visible when hightlight is used */

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

@@ -109,6 +109,10 @@
 	.sapMSLIWithDescription > .sapMLIBContent > .sapMSLIDiv > .sapMSLIDescription {
 		padding: 0;
 	}
+
+	.sapMMsgViewHiddenContainer {
+		display: none;
+	}
 }
 
 .sapMMsgViewDescIcon {

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

@@ -83,13 +83,13 @@ li.sapMMultiComboBoxItem .sapMCbBg {
 
 .sapMMultiComboBoxPicker {
 	.sapMFocusable:focus {
-		outline: 1px dotted @sapUiContentFocusColor;
+		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 		outline-offset: -0.125rem;
 	}
 
-	}
 	.sapMSLITitleOnly {
 		font-size: 0.875rem;
+	}
 }
 
 /* Compact size */
@@ -120,4 +120,21 @@ li.sapMMultiComboBoxItem .sapMCbBg {
 			min-width: @_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact;
 		}
 	}
+
+	.sapMMultiComboBoxSelectAll.sapMTB .sapMCb {
+		margin-left: 0.5rem;
+		padding-left: 2.25rem;
+	}
+}
+
+.sapMMultiComboBoxSelectAll.sapMTB.sapMIBar {
+	padding: 0;
+	&.sapMMultiComboBoxSelectAllFocused {
+		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		outline-offset: -0.125rem;
+	}
+
+	& .sapMBarChild.sapMCb.sapMCbHasLabel:focus:before {
+		border: none;
+	}
 }

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

@@ -31,6 +31,39 @@
 	}
 }
 
+.Stretch .sapMNwCCTxt {
+	max-width: none;
+	display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-weight: bold;
+}
+
+.Stretch{
+	.sapMTileCnt.News .sapMNwC{
+		.sapMNwCCTxt .sapMText {
+			font-size: @sapMFontLargeSize;
+			color: @sapUiText;
+		}
+		.sapMNwCCTxt .sapMFT {
+			font-size: 0.938rem;
+			color: @sapUiText;
+		}
+		.sapMNwCSbh{
+			color: @sapUiText;
+			max-width: none;
+			padding-top: 0.25rem;
+
+			.sapMFT{
+				word-wrap: break-word;
+				white-space: normal;
+				height: 2rem;
+			}
+		}
+	}
+}
+
 .sapMNwCSbh {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -45,9 +78,11 @@
 	font-size: @sapMFontMediumSize;
 }
 
-.sapMNwCCTxt .sapMText {
+.sapMNwCCTxt .sapMText, .sapMNwCCTxt .sapMFT {
 	font-size: @sapMFontMediumSize;
 	color: @sapUiContentContrastTextColor;
+	overflow-wrap: break-word;
+	white-space: pre-line;
 }
 
 .sapMNwC:focus:not([tabindex]) {
@@ -75,4 +110,16 @@
 	.sapMNwCCTxt .sapMText, .sapMNwCSbh {
 		font-size: @sapMFontSmallSize;
 	}
+
+	.sapMTileSmallPhone.Stretch {
+		.sapMNwCSbh {
+			padding-top: 0.5rem;
+		}
+		.sapMNwCSbh > .sapMFT {
+			white-space: nowrap;
+			width: 11.063rem;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
 }

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

@@ -23,7 +23,7 @@ html.sap-desktop {
 
 	.sapMNLIB:focus::before {
 		content: " ";
-		border: 1px dotted @sapUiContentFocusColor;
+		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 		position: absolute;
 		top: 1px;
 		right: 1px;

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

@@ -265,4 +265,91 @@ html[dir=rtl] .sapMNCValue {
 	.sapMGTHdrTxt > .sapMText {
 		font-size: @sapMFontHeader6Size;
 	}
+}
+
+.sapMNCContentPlaceholder {
+	outline: none;
+	width: 300px;
+    height: 100px;
+    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.10);
+    border-radius: 4px;
+}
+
+.sapMNCContentPlaceholder:focus::before {
+	content: '';
+	display: block;
+	position: absolute;
+	left: 1px;
+	bottom: 1px;
+	right: 1px;
+	top: 1px;
+	border: 1px dotted @sapUiContentFocusColor;
+	pointer-events: none;
+}
+
+.sapMNCContentShimmerPlaceholderItem {
+	padding: 1rem 1rem 0 1rem;
+	box-sizing: border-box;
+	display: flex;
+	position: relative;
+	align-items: center;
+	flex: 1 1 auto;
+
+	.sapMNCContentShimmerPlaceholderRows {
+		flex-grow: 1;
+		.sapMNCContentShimmerPlaceholderItemHeader {
+			height: 1rem;
+			margin-bottom: 0.5rem;
+			margin-top: 0.5rem;
+		}
+	}
+}
+
+.sapMNCLoadingShimmer {
+	.sapMNCLoadingShimmerMixin();
+}
+
+.sapMNCLoadingShimmerMixin() {
+	background-color: @sapUiContentPlaceholderloadingBackground;
+	background-image: @sapUiContentPlaceholderloadingGradient;
+	background-repeat: no-repeat;
+	background-size: 800px 144px;
+	position: relative;
+	border-radius: 0.25rem;
+
+	[data-sap-ui-animation-mode="full"] & {
+		animation-duration: 2.5s;
+		animation-fill-mode: forwards;
+		animation-iteration-count: infinite;
+		animation-name: placeHolderShimmer;
+		animation-timing-function: linear;
+	}
+
+	[data-sap-ui-animation-mode="basic"] &,
+	[data-sap-ui-animation-mode="minimal"] & {
+		animation-duration: 8s;
+		animation-fill-mode: forwards;
+		animation-iteration-count: infinite;
+		animation-name: placeHolderShimmer;
+		animation-timing-function: linear;
+	}
+}
+
+@keyframes placeHolderShimmer {
+	0% {
+		background-position: -468px 0;
+	}
+
+	100% {
+		background-position: 468px 0;
+	}
+}
+
+@keyframes placeHolderShimmer{
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
 }

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

@@ -25,7 +25,7 @@
 .sapMListTbl .sapMObjectAttributeActive .sapMText,
 .sapMObjectAttributeActive .sapMText,
 .sapMObjectAttributeActive .sapMObjectAttributeText {
-	color: @sapUiLink;
+	color: @sapLinkColor;
 	cursor: pointer;
 	pointer-events: auto;
 }
@@ -131,14 +131,13 @@ html.sap-desktop .sapMObjectAttributeActive:focus {
 	font-weight: normal;
 	color: @sapUiContentLabelColor;
 	white-space: pre;
-	max-width: 0.5rem;
 	margin-left: -0.5rem;
 	overflow: auto;
 	vertical-align: top;
 }
 
 .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText {
-	color: @sapUiLink;
+	color: @sapLinkColor;
 	cursor: pointer;
 }
 
@@ -174,7 +173,7 @@ html.sap-desktop .sapMObjectAttributeActive:focus {
 }
 
 .sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText {
-	color: @sapUiLink;
+	color: @sapLinkColor;
 	cursor: pointer;
 }
 

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

@@ -79,11 +79,19 @@ html[data-sap-ui-os^="Android"] {
 }
 
 .sapUiForm.sapUiFormEdit .sapMObjectNumber {
-	line-height: 2rem;
+	margin-top: 0.875rem;
+	&.sapMObjectNumberLarge {
+		line-height: initial;
+		margin-top: 0.375rem;
+	}
 }
 
 .sapUiSizeCompact .sapUiForm.sapUiFormEdit .sapMObjectNumber {
-	line-height: 2rem;
+	margin-top: 0.5rem;
+	&.sapMObjectNumberLarge {
+		line-height: initial;
+		margin-top: 0;
+	}
 }
 
 .sapMLIBActive {

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

@@ -30,6 +30,10 @@
 		height: inherit;
 		vertical-align: top;
 	}
+	.sapMObjStatusTitle::after {
+		content: attr(data-colon);
+		white-space: pre;
+	}
 }
 
 .sapMLIBActive {
@@ -319,6 +323,10 @@
 		line-height: inherit;
 		vertical-align: middle;
 	}
+	.sapMObjStatusText,
+	.sapMObjStatusTitle {
+		display: inline;
+	}
 }
 
 .sapMObjectStatusLarge .sapMObjStatusIcon > .sapUiIcon {
@@ -387,6 +395,12 @@
 	}
 }
 
+.sapUxAPObjectPageHeaderContent .sapUxAPObjectPageHeaderContentItem{
+	.sapMObjStatus {
+		vertical-align: text-bottom;
+	}
+}
+
 /* ============================================= */
 /* FIX: CSS 0120061532 0001316230 2014 */
 /* ============================================= */

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

@@ -0,0 +1,17 @@
+.sapMP13nContainer {
+
+}
+
+//Change background color for the container control
+.sapMP13nContainer .sapMITB {
+    padding-top: 1.75rem;
+}
+
+//Remove padding to align the ITB with the rest of the p13n related controls (left aligned)
+.sapMP13nContainer .sapMITH {
+    padding: 0
+}
+
+.sapMP13nContainer .p13nContainerDefaultList .sapMLIB{
+    padding: 1.5rem;
+}

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

@@ -25,5 +25,5 @@
 }
 
 .sapUiSizeCompact .sapMP13nDialog .sapMITH.sapMITBInLine .sapMITBHead {
-    padding-top: 1.25rem;
+    padding-top: 1.5rem;
 }

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

@@ -61,8 +61,8 @@
 	.sapUiIcon:after {
 		content: "";
 		position: absolute;
-		right: 0;
-		top: 0;
+		right: (@sapMPIPopoverCloseIconMargin * -1);
+		top: (@sapMPIPopoverCloseIconMargin * -1);
 		width: @sapMPIPopoverCloseIconWidth + (@sapMPIPopoverCloseIconMargin * 2);
 		height: @sapMPIPopoverCloseIconHeight + (@sapMPIPopoverCloseIconMargin * 2);
 	}
@@ -83,6 +83,7 @@
 	height: 100%;
 	-webkit-justify-content: flex-end;
 	justify-content: flex-end;
+	flex-shrink: 0;
 	border-top-left-radius: 0.5rem;
 	border-bottom-left-radius: 0.5rem;
 }

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

@@ -17,8 +17,6 @@
 .sapUiContainerContentPadding(~".sapMScrollCont", ~"> .sapMScrollContScroll");
 
 .sapMScrollCont:focus {
-	outline-width: 0.0625rem;
-	outline-color: @sapUiContentFocusColor;
-	outline-style: dotted;
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	outline-offset: 0.0625rem;
 }

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

@@ -12,6 +12,12 @@
 @_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;
+@_sap_m_SearchField_Border: 1px solid @sapUiFieldBorderColor;
+@_sap_m_SearchField_FocusOffset: 1px;
+@_sap_m_SearchField_FocusBorderRadius: unset;
+@_sap_m_SearchField_PlaceholderFontStyle: italic;
 
 .sapMSF {
 	position: relative;
@@ -36,13 +42,14 @@
 }
 
 html.sap-desktop .sapMFocus > .sapMSFF::before {
-	border: 1px dotted @sapUiContentFocusColor;
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	position: absolute;
 	content: " ";
-	top: 1px;
-	right: 1px;
-	bottom: 1px;
-	left: 1px;
+	top: @_sap_m_SearchField_FocusOffset;
+	right: @_sap_m_SearchField_FocusOffset;
+	left: @_sap_m_SearchField_FocusOffset;
+	bottom: @_sap_m_SearchField_FocusOffset;
+	border-radius: @_sap_m_SearchField_FocusBorderRadius;
 	z-index: 2;
 	pointer-events: none;
 }
@@ -86,7 +93,7 @@ input.sapMSFI[type="search"]:focus {
 	box-sizing: border-box;
 	height: @_sap_m_SearchField_FormHeight;
 	line-height: @_sap_m_SearchField_InputHeight;
-	border: 1px solid @sapUiFieldBorderColor;
+	border: @_sap_m_SearchField_Border;
 	background: @sapUiFieldBackground;
 	vertical-align: top;
 	width: 100%;
@@ -187,12 +194,12 @@ input.sapMSFI[type="search"]:focus {
 
 /* search icon in place of the reset button */
 :not(.sapMSFVal)>.sapMSFReload>.sapMSFR::after {
-	content: "\e00d";
+	content: @_sap_m_SearchField_SearchIcon;
 }
 
 /* search button */
 .sapMSFS::after {
-	content: "\e00d";
+	content: @_sap_m_SearchField_SearchIcon;
 }
 
 /* refresh icon in some cases */
@@ -202,15 +209,15 @@ input.sapMSFI[type="search"]:focus {
 
 /*grouping is not allowed here*/
 .sapMSFI::-webkit-input-placeholder {
-	color:		   @sapUiFieldPlaceholderTextColor;
-	font-size:	   @sapMFontMediumSize;
-	font-style:	   italic;
+	color: @_sap_m_SearchField_PlaceholderColor;
+	font-size: @sapMFontMediumSize;
+	font-style: @_sap_m_SearchField_PlaceholderFontStyle;
 }
 
 .sapMSFI::-moz-placeholder {
-	color:		   @sapUiFieldPlaceholderTextColor;
-	font-size:	   @sapMFontMediumSize;
-	font-style:	   italic;
+	color: @_sap_m_SearchField_PlaceholderColor;
+	font-size: @sapMFontMediumSize;
+	font-style: @_sap_m_SearchField_PlaceholderFontStyle;
 	opacity: 1; // in FF by default the opacity is 60%
 }
 

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

@@ -115,7 +115,7 @@ html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
 	color: @sapUiSegmentedButtonSelectedTextColor;
 	border-color: @sapUiSegmentedButtonSelectedHoverBorderColor;
 	.sapUiIcon{
-		color: @sapUiSegmentedButtonSelectedIconColor;
+		color: @sapUiButtonSelectedTextColor;
 	}
 }
 

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

@@ -26,13 +26,14 @@
 
 			.sapMSelectListLastCell {
 				display: block;
-				box-sizing: border-box
+				box-sizing: border-box;
 			}
 
 			.sapMSelectListFirstCell,
 			.sapMSelectListLastCell {
 				padding-top: 0.75rem;
 				padding-bottom: 0.75rem;
+				word-break: break-word;
 				&:empty {
 					height: 2.5rem;
 				}