@openui5/sap.m 1.127.1 → 1.129.0

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

@@ -11,11 +11,11 @@
 @_sap_m_Dialog_InfoDesignBarHeight: 2rem;
 
 @_sap_m_Dialog_Padding: 1rem;
-@_sap_m_Dialog_NoStateHeaderShadow: inset 0 -0.0625rem @sapUiPageHeaderBorderColor;
-@_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.125rem @sapUiSuccessBorder;
-@_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.125rem @sapUiErrorBorder;
-@_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.125rem @sapUiWarningBorder;
-@_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.125rem @sapUiInformationBorder;
+@_sap_m_Dialog_NoStateHeaderShadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor);
+@_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.125rem var(--sapSuccessBorderColor);
+@_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.125rem var(--sapErrorBorderColor);
+@_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.125rem var(--sapWarningBorderColor);
+@_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.125rem var(--sapInformationBorderColor);
 @_sap_m_Dialog_HeaderFocusBorderRadius: 0px;
 @_sap_m_Dialog_HeaderFocusBorderBottomOffset: 3px;
 @_sap_m_Dialog_HeaderFocusBorderTopOffset: 2px;
@@ -29,33 +29,30 @@
 }
 
 .sapMDialog {
-	// scale(1) - Chrome does not clip children when transform is not applied resulting in non-visible border-radius
-	// translateZ(0px) - Safari Problem with z-index - After dialog was opened it was inserted behind the dark overlay
+	/* scale(1) - Chrome does not clip children when transform is not applied resulting in non-visible border-radius */
+	/* translateZ(0px) - Safari Problem with z-index - After dialog was opened it was inserted behind the dark overlay */
 	-webkit-transform: scale(1) translateZ(0px);
 	background-clip: padding-box;
 	min-height: 6rem;
 	outline: none;
-	overflow: hidden;
 	position: fixed !important;
 	display: flex !important;
 	flex-direction: column;
 	opacity: 0;
-	-webkit-transition: opacity .15s, left 0.2s, top 0.2s;
-	transition: opacity .15s, left 0.2s, top 0.2s;
-	border-radius: @sapUiElementBorderCornerRadius;
-	box-shadow: @sapUiContentShadow3;
+	transition: opacity 0.15s;
+	border-radius: var(--sapElement_BorderCornerRadius);
+	box-shadow: var(--sapContent_Shadow3);
 
 	&:not(.sapMDialogHighPixelDensity) {
-		//prevent blurring when the device pixel ration is 1 (not high density screens)
-		//this is done with style and not with media query for wider support
-		-webkit-filter: blur(0);
+		/* prevent blurring when the device pixel ration is 1 (not high density screens) */
+		/* this is done with style and not with media query for wider support */
 		filter: blur(0);
 	}
 }
 
 .sapMDialog > .sapMDialogSection {
 	max-width: 100%;
-	background: @sapUiGroupContentBackground;
+	background: var(--sapGroup_ContentBackground);
 }
 
 .sapMDialog .sapMDialogScrollCont > * {
@@ -65,19 +62,44 @@
 .sapMDialog.sapMDialogStretched {
 	bottom: 0 !important;
 	right: 0 !important;
-	height: auto !important; //this is for preventing inline size/width sizes set the width
-	width: auto !important; //this is for preventing inline size/height sizes set the height
-	min-width: 0 !important; //this is for preventing the dialog to hold it's width in small screens
-	min-height: 0 !important; //this is for preventing the dialog to hold it's width in small screens
+	height: auto !important; /* this is for preventing inline size/width sizes set the width */
+	width: auto !important; /* this is for preventing inline size/height sizes set the height */
+	min-width: 0 !important; /* this is for preventing the dialog to hold it's width in small screens */
+	min-height: 0 !important; /* this is for preventing the dialog to hold it's width in small screens */
 }
 
-// Removing borders, shadow, and rounded corners when the dialog is on fullscreen
+/* Removing borders, shadow, and rounded corners when the dialog is on fullscreen */
 html.sap-phone .sapMDialog.sapMDialogStretched {
 	border: none;
 	box-shadow: none;
 	border-radius: 0;
 }
 
+html:not(.sap-phone) .sapMDialog {
+
+	header .sapMHeader-CTX {
+		border-radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
+	}
+
+	&.sapMDialog-NoHeader header .sapMSubHeader-CTX {
+		border-radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
+	}
+
+	&.sapMDialog-NoHeader:not(.sapMDialogWithSubHeader) .sapMDialogSection {
+		border-top-right-radius: var(--sapElement_BorderCornerRadius);
+		border-top-left-radius: var(--sapElement_BorderCornerRadius);
+	}
+
+	footer .sapMFooter-CTX {
+		border-radius: 0 0 var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius);
+	}
+
+	&.sapMDialog-NoFooter .sapMDialogSection {
+		border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
+		border-bottom-left-radius: var(--sapElement_BorderCornerRadius);
+	}
+}
+
 html.sap-phone .sapMDialog {
 	min-width: 18rem;
 	overflow: hidden;
@@ -87,6 +109,7 @@ html.sap-phone .sapMDialog {
 		padding: 0 0.25rem;
 	}
 }
+
 html.sap-tablet .sapMDialog,
 html.sap-desktop .sapMDialog {
 	min-width: 20rem;
@@ -103,7 +126,7 @@ html.sap-desktop .sapMDialog {
 }
 
 .sapMDialogScroll {
-	display: inline-block; /*this is for horizontal scrolling enablement */
+	display: inline-block; /* this is for horizontal scrolling enablement */
 	height: auto;
 	width: 100%;
 	vertical-align: middle;
@@ -111,12 +134,14 @@ html.sap-desktop .sapMDialog {
 }
 
 .sapMDialog.sapMDialogVerticalScrollIncluded {
+
 	.sapMDialogScroll {
 		width: auto;
 	}
 
-	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. */
+	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;
 		padding-right: 0px !important;
 	}
@@ -142,6 +167,7 @@ html.sap-desktop .sapMDialog {
 }
 
 .sapMDialog.sapUiPopupWithPadding:not(.sapUiNoContentPadding) {
+
 	.sapMDialogScrollCont {
 		padding: @_sap_m_Dialog_Padding;
 
@@ -202,7 +228,7 @@ html.sap-desktop .sapMDialog {
 }
 
 .sapMDialog > header .sapMDialogTitleGroup .sapMTitle {
-	color: @sapUiPageHeaderTextColor;
+	color: var(--sapPageHeader_TextColor);
 	vertical-align: middle;
 }
 
@@ -251,7 +277,7 @@ html.sap-desktop .sapMDialog {
 			height: @_sap_m_Dialog_BarCompactHeight;
 
 			.sapMHeader-CTX,
-			.sapMSubHeader-CTX{
+			.sapMSubHeader-CTX {
 				height: @_sap_m_Dialog_BarCompactHeight;
 				padding-top: 0.25rem;
 				padding-bottom: 0.25rem;
@@ -283,24 +309,25 @@ html.sap-desktop .sapMDialog {
 	user-select: none;
 }
 
-.sapDialogDisableTransition {
-	transition: none;
-	-webkit-transition: none;
-}
-
-.sapMDialogResizeHandler {
-	bottom: 0;
-	cursor: se-resize;
+.sapMDialogResizeHandle {
 	position: absolute;
-	right: 0;
-	width: .5rem;
+	right: -0.5rem;
+	bottom: -0.5rem;
+	width: 1.5rem;
+	height: 1.5rem;
 	z-index: 2;
 	line-height: 1rem;
+	cursor: se-resize;
+	border-radius: 50%;
 
-	&:before {
-		left: 0;
+	.sapMDialogResizeHandleIcon {
 		position: relative;
+		left: 0;
 		top: 0;
+		width: 1rem;
+		height: 1rem;
+		color: var(--sapButton_Lite_TextColor);
+		cursor: inherit;
 	}
 }
 
@@ -311,6 +338,7 @@ html.sap-desktop .sapMDialog {
 	padding-top: @_sap_m_Dialog_BarHeight;
 
 	footer {
+
 		.sapMTB.sapMFooter-CTX {
 			border-bottom: none;
 		}
@@ -362,7 +390,7 @@ html.sap-desktop .sapMDialog {
 			bottom: @_sap_m_Dialog_HeaderFocusBorderBottomOffset;
 			right: @_sap_m_Dialog_HeaderFocusBorderRightOffset;
 			top: @_sap_m_Dialog_HeaderFocusBorderTopOffset;
-			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 			border-radius: @_sap_m_Dialog_HeaderFocusBorderRadius @_sap_m_Dialog_HeaderFocusBorderRadius 0 0;
 			pointer-events: none;
 		}
@@ -396,7 +424,7 @@ html.sap-desktop .sapMDialog {
 	}
 }
 
-//remove transition when animation is off
+/* remove transition when animation is off */
 html[data-sap-ui-animation='off'] .sapMDialog {
 	transition: none;
 }
@@ -410,8 +438,9 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 }
 
 .sapMDialogWarning > header {
+
 	.sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
-		color: @sapUiCriticalElement;
+		color: var(--sapCriticalElementColor);
 	}
 
 	& > div:last-of-type .sapMIBar {
@@ -422,7 +451,7 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 .sapMDialogError > header {
 
 	.sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
-		color: @sapUiNegativeElement;
+		color: var(--sapNegativeElementColor);
 	}
 
 	& > div:last-of-type .sapMIBar {
@@ -431,8 +460,9 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 }
 
 .sapMDialogSuccess > header {
+
 	.sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
-		color: @sapUiPositiveElement;
+		color: var(--sapPositiveElementColor);
 	}
 
 	& > div:last-of-type .sapMIBar {
@@ -443,7 +473,7 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 .sapMDialogInformation > header {
 
 	.sapMDialogTitleGroup .sapMDialogIcon.sapUiIcon {
-		color: @sapUiInformativeElement;
+		color: var(--sapInformativeElementColor);
 	}
 
 	& > div:last-of-type .sapMIBar {

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

@@ -4,20 +4,25 @@
 /* ============================================= */
 
 .sapMDynamicDateRangePopover {
+
 	section {
+
 		& > * {
 			box-sizing: border-box;
 			padding: 0 1rem;
 		}
+
 		& > .sapMLabel {
 			display: block;
 			margin: 0.75rem 0 0.25rem 0;
+
 			&.sapMDDRAdditionalLabel {
 				display: inline-block;
 				padding-left: 1.25rem;
 				padding-bottom: 0.25rem
 			}
 		}
+
 		& > .sapMLabel:first-child {
 			margin-top: 1rem;
 		}
@@ -35,16 +40,17 @@
 	}
 
 	&.sapMPage {
-		background-color: @sapGroup_ContentBackground;
+		background-color: var(--sapGroup_ContentBackground);
 	}
 
 	.sapMTB-Info-CTX.sapMIBar-CTX .sapMLabel {
-		color: @sapUiPageFooterTextColor;
+		color: var(--sapPageFooter_TextColor);
 		white-space: break-spaces;
 	}
 }
 
 .sapUiSizeCompact .sapMDynamicDateRangePopover {
+
 	.sapUiCalMonthPicker,
 	.sapUiCalYearPicker {
 		width: 100%;
@@ -54,6 +60,7 @@
 	.sapMPageFooter .sapMIBar {
 		height: 2rem;
 	}
+
 	section > .sapMLabel.sapMDDRAdditionalLabel {
 		padding-left: 0;
 	}
@@ -61,8 +68,7 @@
 
 .sapUiIcon.sapMDDRDateOption {
 	font-size: 1rem;
-
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 }
 
 .sapMDDRHiddenInput > .sapMInputBase {

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

@@ -9,9 +9,9 @@
 	word-wrap: break-word; /* works only if browser knows the width */
 	cursor: text;
 	font-size: @sapMFontMediumSize;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	line-height: normal;
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	max-width: 100%;
 
 	.sapMLnk {
@@ -55,7 +55,8 @@
 		margin: 0;
 	}
 }
-html[data-sap-ui-browser^="cr"] .sapUiFormEdit .sapMExText {
+
+html[data-sap-ui-browser^='cr'] .sapUiFormEdit .sapMExText {
 	line-height: 1.4375rem;
 }
 
@@ -74,7 +75,8 @@ html[data-sap-ui-browser^="cr"] .sapUiFormEdit .sapMExText {
 	padding-top: 0.3125rem;
 	padding-bottom: 0.3125rem;
 }
-html[data-sap-ui-browser^="cr"] .sapUiSizeCompact .sapUiFormEdit .sapMExText {
+
+html[data-sap-ui-browser^='cr'] .sapUiSizeCompact .sapUiFormEdit .sapMExText {
 	line-height: 1.375rem;
 }
 
@@ -84,4 +86,4 @@ html[data-sap-ui-browser^="cr"] .sapUiSizeCompact .sapUiFormEdit .sapMExText {
 
 .sapMShowEmpty-CTX .sapMExText .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
 	display: inline-block;
-}
+}

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

@@ -49,7 +49,7 @@ html.sap-desktop .sapMFFScrolling > .sapMFFHead {
 	line-height: 1rem;
 	position: absolute;
 	top: 0;
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 	padding: 1rem 0.4rem;
 }
 
@@ -85,6 +85,7 @@ html.sap-desktop .sapMFFScrolling.sapMFFNoScrollForward > .sapMFFArrowScrollRigh
 }
 
 .sapUiSizeCompact {
+
 	.sapMFFResetSpacer {
 		/* Space reserved at the end of the FacetFilter for placing the reset button */
 		margin-right: 2.5rem;
@@ -93,7 +94,7 @@ html.sap-desktop .sapMFFScrolling.sapMFFNoScrollForward > .sapMFFArrowScrollRigh
 }
 
 .sapMFF .sapMTB-Info-CTX .sapMBtnIcon .sapUiIcon {
-	color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_ContrastIconColor);
 }
 
 /* Move the reset button to the end of the toolbar */
@@ -105,21 +106,20 @@ html.sap-desktop .sapMFFScrolling.sapMFFNoScrollForward > .sapMFFArrowScrollRigh
     padding-right: 0;
 }
 
-
 .sapMFF .sapMTB-Info-CTX.sapMTB > .sapMBtn:hover {
-    background-color: @sapUiInfobarHoverBackground;
+    background-color: var(--sapInfobar_Hover_Background);
 }
 
 html.sap-desktop .sapMFFRefresh.sapMBtn:focus > .sapMFocusable {
-	outline-color: @sapUiContentContrastFocusColor;
+	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
 html.sap-desktop .sapMFF > .sapMTB-Info-CTX.sapMTB > .sapMFFRefresh.sapMBtn:focus .sapMBtnFocusDiv {
-	border-color: @sapUiContentContrastFocusColor;
+	border-color: var(--sapContent_ContrastFocusColor);
 }
 
 .sapMFF .sapMTB-Info-CTX.sapMTB > .sapMBtn:active {
-    background-color: @sapUiInfobarActiveBackground;
+    background-color: var(--sapInfobar_Active_Background);
 }
 
 .sapMFFCheckbar {
@@ -131,12 +131,12 @@ html.sap-desktop .sapMFF > .sapMTB-Info-CTX.sapMTB > .sapMFFRefresh.sapMBtn:focu
 }
 
 .sapMFF .sapMFFArrowScroll:hover {
-	background-color: @sapUiButtonLiteHoverBackground;
+	background-color: var(--sapButton_Lite_Hover_Background);
 }
 
 .sapMFF .sapMFFArrowScroll:active {
-	background-color: @sapUiButtonLiteActiveBackground;
-	color: @sapUiContentContrastIconColor;
+	background-color: var(--sapButton_Lite_Active_Background);
+	color: var(--sapContent_ContrastIconColor);
 }
 
 /* specific selector for the light facet filter text to use padding instead of margin,
@@ -145,6 +145,7 @@ html.sap-desktop .sapMFF > .sapMTB-Info-CTX.sapMTB > .sapMFFRefresh.sapMBtn:focu
 .sapMFF > .sapMIBar.sapMTB.sapMTB-Info-CTX {
 	padding-right: 0.5rem;
 	padding-left: 0.75rem;
+
 	.sapMText {
 		padding: 0.5rem 0.5rem 0.5rem 0;
 	}
@@ -152,12 +153,14 @@ html.sap-desktop .sapMFF > .sapMTB-Info-CTX.sapMTB > .sapMFFRefresh.sapMBtn:focu
 
 .sapMFFDialog,
 .sapMFFPop .sapMPopoverSubHeader {
+
 	.sapMFFCheckbar .sapMBarLeft {
 		padding-left: 0.1875rem;
 	}
 }
 
 .sapUiSizeCompact {
+
 	.sapMFFDialog .sapMFFCheckbar .sapMBarLeft,
 	.sapMFFPop .sapMPopoverSubHeader .sapMFFCheckbar .sapMBarLeft {
 		padding-left: 0.5rem;

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

@@ -3,27 +3,21 @@
 /* Base theme                             */
 /* ====================================== */
 
-/*
-	Fix alignment of the list item counter and force a min height.
-*/
+/* Fix alignment of the list item counter and force a min height. */
 .sapMFFLI {
-	display: -webkit-box;
 	display: flex;
 	min-height: 3rem;
 }
 
-/*
-	Fix alignment of the list item counter.
-*/
+/* Fix alignment of the list item counter. */
 .sapMFFLI > .sapMLIBContent {
 	text-overflow: ellipsis;
-	-webkit-box-align: center;
 	align-items: center;
 }
 
 .sapMFFLITitle {
-	font-size: @sapMFontLargeSize;
-	color: @sapUiListTextColor;
+	font-size: var(--sapFontLargeSize);
+	color: var(--sapList_TextColor);
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -32,12 +26,10 @@
 	word-wrap: break-word;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	-webkit-box-flex: 1;
 	flex: auto;
-	-webkit-box-align: center;
 	align-items: center;
 }
 
-.sapUiSizeCompact .sapMFFLITitle{
+.sapUiSizeCompact .sapMFFLITitle {
 	font-size: @sapMFontMediumSize;
 }

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

@@ -14,7 +14,7 @@
 }
 
 .sapMFF .sapMFFLRemoveIcon {
-	color: @sapUiButtonIconColor;
+	color: var(--sapButton_IconColor);
 	font-size: 0.875rem;
 	line-height: 2rem;
 	padding-bottom: 0.25rem;
@@ -26,7 +26,7 @@
 }
 
 .sapMFF .sapMFFLRemoveIcon:hover {
-	background-color: @sapUiButtonLiteHoverBackground;
+	background-color: var(--sapButton_Lite_Hover_Background);
 	border-radius: 0.2rem;
 }
 
@@ -38,11 +38,8 @@
 	padding-right: 0.25rem;
 }
 
-
-/*
-We need to toggle separate classes to show/hide the remove icon, otherwise
-clicking the icon does not remove the facet button in ie9
-*/
+/* We need to toggle separate classes to show/hide the remove icon, otherwise
+ clicking the icon does not remove the facet button in ie9 */
 .sapMFF .sapMFFLVisibleRemoveIcon {
 	visibility: visible;
 }
@@ -52,10 +49,10 @@ clicking the icon does not remove the facet button in ie9
 }
 
 .sapMFF .sapMFFLRemoveIcon:hover {
-	background-color: @sapUiButtonLiteHoverBackground;
+	background-color: var(--sapButton_Lite_Hover_Background);
 }
 
 .sapMFF .sapMFFLRemoveIcon:active {
-	background-color: @sapUiButtonLiteActiveBackground;
-	color: @sapUiContentContrastIconColor;
+	background-color: var(--sapButton_Lite_Active_Background);
+	color: var(--sapContent_ContrastIconColor);
 }

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

@@ -86,7 +86,7 @@
 }
 
 html.sap-desktop .sapMFC:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: @sapUiContentFocusColor @sapUiContentFocusStyle @sapUiContentFocusWidth;
 }
 
 html.sap-desktop .sapMFC:focus:not([tabindex]) {

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

@@ -4,7 +4,7 @@
 /* =================================== */
 
 .sapMFeedListItem {
-	display: block;
+	display: flex;
 }
 
 .sapMFeedListItem .sapUiSelectable > * {
@@ -105,7 +105,8 @@
 
 html.sap-tablet .sapMFeedListItemHasFigure,
 html.sap-desktop .sapMFeedListItemHasFigure {
-	margin-left: 3.75rem;
+	margin-left: 1rem;
+	width: 100%;
 }
 
 .sapMFeedListItemTextText {
@@ -265,20 +266,17 @@ html.sap-phone .sapMFeedListItemText {
 
 .sapMFeedListItemImageInactive:focus,
 .sapMFeedListItemImage:focus {
-	outline-style: dotted;
-	outline-color: @sapUiContentFocusColor;
-	outline-width: 0.0625rem;
+	outline: @sapUiContentFocusColor @sapUiContentFocusStyle @sapUiContentFocusWidth;
 }
 
 html.sap-tablet .sapMFeedListItem .sapMLnk:focus {
-	outline-style: dotted;
-	outline-color: @sapUiContentFocusColor;
-	outline-width: 0.0625rem;
+	outline: @sapUiContentFocusColor @sapUiContentFocusStyle @sapUiContentFocusWidth;
 }
 
 /* Allow image outline(-left) to be rendered completely */
 .sapMFeedListShowSeparatorsAll .sapMFeedListItem {
 	padding-left: 1rem;
+	padding-right: 1rem;
 }
 
 .sapMFeedListItemTitleDiv.sapMLIB {