@openui5/sap.m 1.131.1 → 1.132.0

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

@@ -3,24 +3,22 @@
 /* Base theme                               */
 /* ======================================== */
 
-@sapMPIPopoverCloseIconWidth: 1.4375rem;
-@sapMPIPopoverCloseIconHeight: 1.375rem;
-@sapMPIPopoverCloseIconMargin: 0.125rem;
-@sapMPITextLeftTextThreshold: @sapUiContentContrastTextThreshold;
+@_sap_m_ProgressIndicator_PopoverCloseIconWidth: 1.4375rem;
+@_sap_m_ProgressIndicator_PopoverCloseIconHeight: 1.375rem;
+@_sap_m_ProgressIndicator_PopoverCloseIconMargin: 0.125rem;
+@_sap_m_ProgressIndicator_TextLeftTextThreshold: @sapUiContentContrastTextThreshold;
 
 .sapMPI {
+
 	&.sapMPIHoverable:hover {
 		cursor: pointer;
 	}
 
-	display: -webkit-box;
-	display: -webkit-flex;
 	display: flex;
-
-	-webkit-flex-direction: row;
+	flex-direction: row;
 	box-sizing: border-box;
 	outline: none;
-	background: @sapUiFieldBackground;
+	background: var(--sapField_Background);
 	width: 100%;
 	height: 1.5rem;
 	min-width: 6rem;
@@ -33,7 +31,7 @@
 }
 
 .sapMPIPopover {
-	min-height: @sapMPIPopoverCloseIconHeight;
+	min-height: @_sap_m_ProgressIndicator_PopoverCloseIconHeight;
 
 	.sapMPopoverScroll {
 		padding-left: 0.5rem;
@@ -48,40 +46,35 @@
 	}
 
 	.sapUiIcon {
-		width: @sapMPIPopoverCloseIconWidth;
-		height: @sapMPIPopoverCloseIconHeight;
-		line-height: @sapMPIPopoverCloseIconHeight;
-		font-size: @sapFontSmallSize;
-		color: @sapContent_IconColor;
+		width: @_sap_m_ProgressIndicator_PopoverCloseIconWidth;
+		height: @_sap_m_ProgressIndicator_PopoverCloseIconHeight;
+		line-height: @_sap_m_ProgressIndicator_PopoverCloseIconHeight;
+		font-size: var(--sapFontSmallSize);
+		color: var(--sapContent_IconColor);
 		flex-shrink: 0;
-		margin: @sapMPIPopoverCloseIconMargin;
+		margin: @_sap_m_ProgressIndicator_PopoverCloseIconMargin;
 	}
 
-	/* Additional touch area for the close icon/button required by ACC standards*/
-	.sapUiIcon:after {
-		content: "";
+	/* Additional touch area for the close icon/button required by ACC standards */
+	.sapUiIcon::after {
+		content: '';
 		position: absolute;
-		right: (@sapMPIPopoverCloseIconMargin * -1);
-		top: (@sapMPIPopoverCloseIconMargin * -1);
-		width: @sapMPIPopoverCloseIconWidth + (@sapMPIPopoverCloseIconMargin * 2);
-		height: @sapMPIPopoverCloseIconHeight + (@sapMPIPopoverCloseIconMargin * 2);
+		right: (@_sap_m_ProgressIndicator_PopoverCloseIconMargin * -1);
+		top: (@_sap_m_ProgressIndicator_PopoverCloseIconMargin * -1);
+		width: @_sap_m_ProgressIndicator_PopoverCloseIconWidth + (@_sap_m_ProgressIndicator_PopoverCloseIconMargin * 2);
+		height: @_sap_m_ProgressIndicator_PopoverCloseIconHeight + (@_sap_m_ProgressIndicator_PopoverCloseIconMargin * 2);
 	}
 }
 
 .sapMPIBar,
 .sapMPIBarRemaining {
-	display: -webkit-box;
-	display: -webkit-flex;
 	display: flex;
 	min-width: 0;
-
-	-webkit-align-items: center;
 	align-items: center;
 }
 
 .sapMPIBar {
 	height: 100%;
-	-webkit-justify-content: flex-end;
 	justify-content: flex-end;
 	flex-shrink: 0;
 	border-top-left-radius: 0.5rem;
@@ -93,13 +86,12 @@
 }
 
 .sapMPIBarRemaining {
-	-webkit-flex-grow: 1;
 	flex-grow: 1;
 	border-top-right-radius: 0.5rem;
 	border-bottom-right-radius: 0.5rem;
-	border-top: 1px solid @sapUiFieldBorderColor;
-	border-right: 1px solid @sapUiFieldBorderColor;
-	border-bottom: 1px solid @sapUiFieldBorderColor;
+	border-top: 1px solid var(--sapField_BorderColor);
+	border-right: 1px solid var(--sapField_BorderColor);
+	border-bottom: 1px solid var(--sapField_BorderColor);
 }
 
 .sapMPIBarDisabled {
@@ -113,22 +105,22 @@
 }
 
 .sapMPIText {
-	font-family: @sapUiFontFamily;
-	font-size: @sapMFontSmallSize;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
 	font-weight: normal;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
-	color: @sapUiContentForegroundTextColor;
+	color: var(--sapContent_ForegroundTextColor);
 }
 
 .sapMPIDisplayOnly .sapMPIText {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	font-size: 0.6875rem;
 }
 
 .sapMPITextLeft {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 	padding-right: 0.5rem;
 	display: none;
 }
@@ -157,58 +149,58 @@
 }
 
 .sapMPIBarNeutral {
-	background: @sapUiNeutralElement;
+	background: var(--sapNeutralElementColor);
 }
 
 .sapMPIBarPositive {
-	background: @sapUiPositiveElement;
+	background: var(--sapPositiveElementColor);
 }
 
 .sapMPIBarNegative {
-	background: @sapUiNegativeElement;
+	background: var(--sapNegativeElementColor);
 }
 
 .sapMPIBarCritical {
-	background: @sapUiCriticalElement;
+	background: var(--sapCriticalElementColor);
 }
 
 .sapMPIBarInformation {
-	background: @sapUiInformativeElement;
+	background: var(--sapInformativeElementColor);
 }
 
 .sapMPIDisplayOnly:not(.sapMPIBarDisabled) .sapMPIBarNeutral {
-	background: @sapUiBaseText;
+	background: var(--sapTextColor);
 }
 
 /* Progress Indicator Remaining Bar */
 .sapMPIValueMin .sapMPIBarRemaining {
 	border-radius: 0.5rem;
-	border: 1px solid @sapUiFieldBorderColor;
+	border: 1px solid var(--sapField_BorderColor);
 }
 
 /* Progress Indicator Value Text */
 .sapMPIBarNeutral .sapMPIText.sapMPITextLeft {
-	color: contrast(@sapUiNeutralElement, @sapUiContentContrastTextColor, @sapUiBaseText, @sapMPITextLeftTextThreshold);
+	color: contrast(@sapUiNeutralElement, @sapUiContentContrastTextColor, @sapUiBaseText, @_sap_m_ProgressIndicator_TextLeftTextThreshold);
 }
 
 .sapMPIBarPositive .sapMPIText.sapMPITextLeft {
-	color: contrast(@sapUiPositiveElement, @sapUiContentContrastTextColor, @sapUiBaseText, @sapMPITextLeftTextThreshold);
+	color: contrast(@sapUiPositiveElement, @sapUiContentContrastTextColor, @sapUiBaseText, @_sap_m_ProgressIndicator_TextLeftTextThreshold);
 }
 
 .sapMPIBarNegative .sapMPIText.sapMPITextLeft {
-	color: contrast(@sapUiNegativeElement, @sapUiContentContrastTextColor, @sapUiBaseText, @sapMPITextLeftTextThreshold);
+	color: contrast(@sapUiNegativeElement, @sapUiContentContrastTextColor, @sapUiBaseText, @_sap_m_ProgressIndicator_TextLeftTextThreshold);
 }
 
 .sapMPIBarCritical .sapMPIText.sapMPITextLeft {
-	color: contrast(@sapUiCriticalElement, @sapUiContentContrastTextColor, @sapUiBaseText, @sapMPITextLeftTextThreshold);
+	color: contrast(@sapUiCriticalElement, @sapUiContentContrastTextColor, @sapUiBaseText, @_sap_m_ProgressIndicator_TextLeftTextThreshold);
 }
 
 .sapMPIBarInformation .sapMPIText.sapMPITextLeft {
-	color: contrast(@sapUiHighlight, @sapUiContentContrastTextColor, @sapUiBaseText, @sapMPITextLeftTextThreshold);
+	color: contrast(@sapUiHighlight, @sapUiContentContrastTextColor, @sapUiBaseText, @_sap_m_ProgressIndicator_TextLeftTextThreshold);
 }
 
 .sapMPIBarInformation.sapMPIDisplayOnly .sapMPIText.sapMPITextLeft {
-	color: contrast(@sapUiBaseText, @sapUiContentContrastTextColor, @sapUiBaseText, @sapMPITextLeftTextThreshold);
+	color: contrast(@sapUiBaseText, @sapUiContentContrastTextColor, @sapUiBaseText, @_sap_m_ProgressIndicator_TextLeftTextThreshold);
 }
 
 /* Compact */

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

@@ -9,8 +9,8 @@
 	font-size: 0.875rem;
 	overflow: hidden;
 	cursor: pointer;
-	color: @sapUiContentLabelColor;
-	background-color: @sapUiGroupContentBackground;
+	color: var(--sapContent_LabelColor);
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapMPullDownNontouch {
@@ -22,13 +22,13 @@
 }
 
 .sapMPullDownNontouch:focus {
-	outline: 0.0625rem dotted @sapUiContentFocusColor;
+	outline: 0.0625rem dotted var(--sapContent_FocusColor);
 	outline-offset: -0.1875rem;
 }
 
 .sapMPullDownTouch {
 	min-height: 3rem;
-	border-bottom: 1px solid @sapUiGroupContentBorderColor;
+	border-bottom: 1px solid var(--sapGroup_ContentBorderColor);
 }
 
 /* make place for the busy indicator */
@@ -64,7 +64,7 @@
 .sapMPullDownTouch > .sapMPullDownText {
 	font-weight: normal;
 	font-size: @sapMFontMediumSize;
-	color: @sapUiListTextColor;
+	color: var(--sapList_TextColor);
 }
 
 .sapMPullDownTouch > .sapMPullDownText,
@@ -74,7 +74,7 @@
 	text-align: center;
 	line-height: 1.3rem;
 	box-sizing: border-box;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 }
 
 .sapMPullDownNontouch > .sapMPullDownText {
@@ -85,11 +85,11 @@
 
 .sapMPullDownInfo {
 	vertical-align: middle;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiContentLabelColor;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapContent_LabelColor);
 }
 
-.sapMPullDownNontouch > .sapMPullDownIcon {   /* circle arrows */
+.sapMPullDownNontouch > .sapMPullDownIcon { /* circle arrows */
 	vertical-align: middle;
 }
 
@@ -104,10 +104,11 @@
 
 .sapMPullDown > .sapMPullDownIcon::before {
 	display: inline-block;
-	font-family: SAP-icons;
+	font-family: var(--sapContent_IconFontFamily);
 	speak: none;
 	float: left;
 }
+
 .sapMPullDown.sapMLoading .sapMPullDownIcon::before {
 	visibility: hidden;
 }
@@ -118,24 +119,18 @@
 	line-height: 1rem;
 	bottom: 1.5rem;
 }
-.sapMPullDownTouch > .sapMPullDownIcon::before {  /* animated arrow */
+
+.sapMPullDownTouch > .sapMPullDownIcon::before { /* animated arrow */
 	font-size: 2em;
-	color: @sapUiHighlight;
+	color: var(--sapHighlightColor);
 	content: '\e089';
-
-	-webkit-transform-origin: center center;
-	-webkit-transition-duration: 250ms;
-	-webkit-transition-property: -webkit-transform;
-
-	transfrom-origin: center center;
+	transform-origin: center center;
 	transition-duration: 250ms;
 	transition-property: transform;
-
-	-webkit-transform: rotate(0deg);
 	transform: rotate(0deg);
 }
+
 .sapMPullDownTouch.sapMFlip .sapMPullDownIcon::before {
-	-webkit-transform: rotate(-180deg);
 	transform: rotate(-180deg);
 }
 
@@ -148,9 +143,11 @@
 	line-height: 1rem;
 	bottom: 1rem;
 }
+
 .sapMPullDownNontouch .sapMPullDownBusy {
 	bottom: 0.5rem;
 }
+
 .sapMPullDown.sapMLoading .sapMPullDownBusy {
 	display: block;
 }

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

@@ -11,8 +11,8 @@
 @_sap_m_QuickViewCard_PagePadding: 0;
 
 @_sap_m_QuickView_TitleMarginBottom: 0.5rem;
-@_sap_m_QuickView_TitleFontSize: @sapMFontHeader5Size;
-@_sap_m_QuickView_FormTitleFontSize: @sapMFontHeader5Size;
+@_sap_m_QuickView_TitleFontSize: var(--sapFontHeader5Size);
+@_sap_m_QuickView_FormTitleFontSize: var(--sapFontHeader5Size);
 
 .sapMQuickView .sapMNav,
 .sapMQuickViewCard .sapMNav {
@@ -20,7 +20,7 @@
 }
 
 .sapMQuickViewCard .sapUiHLayoutChildWrapper a {
-	margin-right: 1px; // this is needed for the focus to be visible on the right side (BCP 1980423560)
+	margin-right: 1px; /* this is needed for the focus to be visible on the right side (BCP 1980423560) */
 }
 
 .sapMQuickViewCard.sapMQuickViewCardNoScroll {
@@ -28,6 +28,7 @@
 }
 
 .sapMQuickViewPage {
+
 	.sapUiHLayout.sapUiHLayoutNoWrap .sapUiHLayoutChildWrapper {
 		max-width: 100%;
 	}
@@ -90,6 +91,7 @@ html.sap-tablet .sapMQuickViewPage.sapMPage > header {
 	bottom: 0;
 	font-size: 16px;
 }
+
 .sapUiSizeCompact .sapMQuickView.sapMPopover header.sapMBar {
 	height: 2.5rem;
 }
@@ -180,7 +182,6 @@ html.sap-phone .sapMQuickViewPage .sapUiHLayout {
 }
 
 .sapMQuickViewPage .sapUiVltCell {
-	display: -webkit-box;
 	display: flex;
 }
 
@@ -202,7 +203,7 @@ html.sap-phone .sapMQuickViewPage .sapUiHLayout {
 	margin-right: 3px;
 }
 
-.sapMQuickViewPage div[class*="sapUiRespGrid"] > div[class*="sapUiRespGridSpan"] {
+.sapMQuickViewPage div[class*='sapUiRespGrid'] > div[class*='sapUiRespGridSpan'] {
 	overflow: visible;
 }
 
@@ -212,41 +213,41 @@ html.sap-phone .sapMQuickViewPage .sapUiHLayout {
 
 html.sap-desktop .sapMQuickViewHeader,
 html.sap-tablet .sapMQuickViewHeader {
-	font-size: @sapMFontHeader5Size;
+	font-size: var(--sapFontHeader5Size);
 }
 
 .sapUiSizeCompact .sapMQuickView.sapMPopover .sapMQuickViewTitle {
-	font-size: @sapMFontHeader6Size;
+	font-size: var(--sapFontHeader6Size);
 }
 
 .sapMQuickViewPage h3,
 .sapMQuickViewPage .sapUiForm .sapUiFormTitle {
-	font-family: @sapUiFontHeaderFamily;
+	font-family: var(--sapFontHeaderFamily);
 	font-size: @_sap_m_QuickView_FormTitleFontSize;
 	font-weight: @sapUiFontHeaderWeight;
 	line-height: normal;
-	color: @sapUiGroupTitleTextColor;
+	color: var(--sapGroup_TitleTextColor);
 	padding-left: 0;
 }
 
 .sapMQuickViewPage .sapUiVltCell .sapMLnk {
-	font-family: @sapUiFontHeaderFamily;
-	font-size: @sapMFontHeader5Size;
+	font-family: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader5Size);
 	font-weight: @sapUiFontHeaderWeight;
 	line-height: normal;
 	white-space: normal;
-	color: @sapUiLink;
+	color: var(--sapLinkColor);
 
 	&:active {
-		color: @sapUiLinkActive;
+		color: var(--sapLink_Active_Color);
 	}
 
 	&:visited {
-		color: @sapUiLinkVisited;
+		color: var(--sapLink_Visited_Color);
 	}
 
 	&hover:not(.sapMLnkDsbl) {
-		color: @sapUiLinkHover;
+		color: var(--sapLink_Hover_Color);
 	}
 }
 
@@ -255,13 +256,13 @@ html.sap-tablet .sapMQuickViewHeader {
 }
 
 .sapMQuickViewPage .sapUiVlt .sapMText {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapMFontMediumSize;
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapMQuickViewPage .sapMFlexItem:last-child {
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 }
 
 .sapMQuickViewPage .sapUiIcon:focus,
@@ -287,7 +288,8 @@ html.sap-tablet.sap-ios .sapMPanel .sapMQuickViewCard {
 
 /* Compact size */
 .sapUiSizeCompact {
+
 	.sapMQuickViewPage.sapMPage > header.sapMPageHeader {
 		height: 2.5rem;
 	}
-}
+}