@openui5/sap.m 1.131.1 → 1.132.0

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

@@ -4,7 +4,7 @@
 /* ====================================== */
 
 .sapMSegB {
-	margin: 0; /*To override the native browser margin*/
+	margin: 0; /* To override the native browser margin */
 	padding: 0;
 	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 	border: none;
@@ -29,6 +29,7 @@
 }
 
 .sapMSegB .sapMSegBBtn {
+
 	.sapMSegBBtnInner {
 		text-overflow: ellipsis;
 		overflow: hidden;
@@ -46,16 +47,18 @@
 		border: 1px solid @sapUiSegmentedButtonBorderColor;
 		background-color: @sapUiSegmentedButtonBackground;
 	}
+
 	&:not(.sapMSegBBtnMixed) .sapMImg {
 		padding-left: 0.75rem;
 		padding-right: 0.75rem;
 	}
+
 	&:not(.sapMSegBBtnMixed) .sapMBtnIcon {
 		margin-right: 0;
 	}
 }
 
-// Adding margin to be displayed correct in sap.m.Bar
+/* Adding margin to be displayed correct in sap.m.Bar */
 .sapMBar .sapMSegB {
 	margin-left: 0.250rem;
 }
@@ -78,6 +81,7 @@ html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
 
 /* style for icon and text usage */
 .sapMSegB.sapMSegBIcons {
+
 	.sapMSegBBtn:not(.sapMSegBBtnMixed) .sapMSegBBtnInner {
 		padding: 0; /*BCP: 1580200804*/
 		margin-right: 0;
@@ -91,7 +95,7 @@ html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
 
 .sapMSegB img {
 	margin: 0;
-	pointer-events: none; /*To disable the save image menu on ios*/
+	pointer-events: none; /* To disable the save image menu on ios */
 	line-height: 2.375rem;
 	max-height:  2.375rem;
 	vertical-align: middle;
@@ -103,19 +107,20 @@ html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
 
 .sapMSegBBtn.sapMSegBBtnDis .sapMSegBBtnInner {
 	text-shadow: none;
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .sapMSegBBtn:not(.sapMSegBBtnDis) .sapUiIcon {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .sapMSegBBtn.sapMSegBBtnSel .sapMSegBBtnInner {
 	background: @sapUiSegmentedButtonSelectedBackground;
 	color: @sapUiSegmentedButtonSelectedTextColor;
 	border-color: @sapUiSegmentedButtonSelectedHoverBorderColor;
-	.sapUiIcon{
-		color: @sapUiButtonSelectedTextColor;
+
+	.sapUiIcon {
+		color: var(--sapButton_Selected_TextColor);
 	}
 }
 
@@ -123,7 +128,8 @@ html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
 .sapMSegBBtnFocusable.sapMBtnActive .sapMSegBBtnInner {
 	background: @sapUiSegmentedButtonActiveBackground;
 	color: @sapUiSegmentedButtonActiveTextColor;
-	.sapUiIcon{
+
+	.sapUiIcon {
 		color: @sapUiSegmentedButtonActiveIconColor;
 	}
 }
@@ -155,10 +161,12 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 	width: auto;
 }
 
-html[data-sap-ui-os^="iOS"] {
+html[data-sap-ui-os^='iOS'] {
+
 	header,
 	footer,
 	.sapMBar {
+
 		.sapMSegB {
 			line-height: 1.5rem;
 			display: inline-block;
@@ -168,6 +176,7 @@ html[data-sap-ui-os^="iOS"] {
 
 /* Compact size */
 .sapUiSizeCompact {
+
 	.sapMSegB {
 		height: 2rem;
 		padding: 0;
@@ -191,6 +200,7 @@ html[data-sap-ui-os^="iOS"] {
 	}
 
 	.sapMSegBIcons:not(.sapMSegBBtnMixed) {
+
 		.sapMImg,
 		.sapUiIcon {
 			padding-left: 0.4375rem;
@@ -199,7 +209,9 @@ html[data-sap-ui-os^="iOS"] {
 	}
 
 	.sapMSegBIcons {
+
 		.sapMSegBBtn.sapMSegBBtnMixed {
+
 			.sapMImg,
 			.sapUiIcon {
 				padding-left: 0;
@@ -226,10 +238,13 @@ html[data-sap-ui-os^="iOS"] {
 	}
 
 	.sapMSegB {
+
 		.sapMBtnIconLeft {
 			margin-left: 0;
 		}
+
 		&.sapMSegBIcons .sapMSegBBtnMixed {
+
 			img {
 				padding: 0;
 			}
@@ -238,7 +253,8 @@ html[data-sap-ui-os^="iOS"] {
 }
 
 /* Android size compact fix */
-html[data-sap-ui-os^="Android"] {
+html[data-sap-ui-os^='Android'] {
+
 	.sapUiSizeCompact .sapMSegBBtn .sapUiIcon {
 		line-height: 1.6rem;
 	}

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

@@ -6,9 +6,7 @@
 @_sap_m_SelectList_ItemHeight: 2.5rem;
 @_sap_m_SelectList_ItemCompactHeight: 2rem;
 
-/* ------------------------------ */
-/* commons styles                 */
-/* ------------------------------ */
+/* commons styles */
 
 .sapMSelectList,
 .sapMSelectListItemBase {
@@ -21,28 +19,24 @@
 	pointer-events: none;
 }
 
-/* ------------------------------ */
-/* list                           */
-/* ------------------------------ */
+/* list */
 
 .sapMSelectList {
 	margin: 0;
 	padding: 0;
 	outline: none;
 	list-style-type: none;
-	background: @sapUiListBackground;
+	background: var(--sapList_Background);
 }
 
-/* ------------------------------ */
-/* item                           */
-/* ------------------------------ */
+/* item */
 
 .sapMSelectListItemBase {
 	outline: none;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	color: @sapUiListTextColor;
+	color: var(--sapList_TextColor);
 	font-size: @sapMFontMediumSize;
 	height: @_sap_m_SelectList_ItemHeight;
 	cursor: pointer;
@@ -76,7 +70,7 @@ li.sapMSelectListItemBaseInvisible {
 
 /* hover */
 .sapMSelectListItemBaseHoverable:hover {
-	background: @sapUiListHoverBackground;
+	background: var(--sapList_Hover_Background);
 }
 
 /* hover selected */
@@ -87,8 +81,8 @@ li.sapMSelectListItemBaseInvisible {
 /* pressed and pressed selected */
 :not(.sapMSelectListItemBaseDisabled).sapMSelectListItemBase.sapMSelectListItemBasePressed,
 :not(.sapMSelectListItemBaseDisabled).sapMSelectListItemBase.sapMSelectListItemBasePressed.sapMSelectListItemBaseSelected {
-	color: @sapUiListActiveTextColor;
-	background: @sapUiListActiveBackground;
+	color: var(--sapList_Active_TextColor);
+	background: var(--sapList_Active_Background);
 }
 
 /* focus */
@@ -97,17 +91,13 @@ html.sap-desktop .sapMSelectListItemBase:focus {
 	outline-offset: -2px;
 }
 
-/* ------------------------------ */
-/* row                            */
-/* ------------------------------ */
+/* row */
 
 .sapMSelectListRow {
 	display: table-row;
 }
 
-/* ------------------------------ */
-/* cell                           */
-/* ------------------------------ */
+/* cell */
 
 .sapMSelectListCell {
 	display: table-cell;
@@ -115,25 +105,20 @@ html.sap-desktop .sapMSelectListItemBase:focus {
 	padding-left: 1rem;
 }
 
-
 .sapMSelectListLastCell {
 	text-align: right;
 	padding-right: 1rem;
 }
 
-/* ------------------------------ */
-/* separator                      */
-/* ------------------------------ */
+/* separator */
 
 .sapMSelectListSeparatorItem {
-	border: 1px solid @sapUiListBorderColor;
+	border: 1px solid var(--sapList_BorderColor);
 }
 
 /* compact size  */
 
-/* ------------------------------ */
-/* commons styles                 */
-/* ------------------------------ */
+/* commons styles */
 
 .sapUiSizeCompact .sapMSelectListItemBase {
 	height: @_sap_m_SelectList_ItemCompactHeight;

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

@@ -7,12 +7,12 @@
 @_sap_m_Shell_AppWidthLimitBy2: @_sap_m_Shell_AppWidthLimit / 2;
 @_sap_m_Shell_AppWidthLimitPlusPadding: @_sap_m_Shell_AppWidthLimit + 16px;
 
-@_sap_m_Shell_AppHeight: 3333px; // Ux decision: never show the header, so make this value large enough even for zoom-out cases
-@_sap_m_Shell_HeaderHeight: 68px; // should be 4.25rem
+@_sap_m_Shell_AppHeight: 3333px; /* Ux decision: never show the header, so make this value large enough even for zoom-out cases */
+@_sap_m_Shell_HeaderHeight: 68px; /* should be 4.25rem */
 @_sap_m_Shell_MinHeightForHeader: (@_sap_m_Shell_AppHeight + @_sap_m_Shell_HeaderHeight);
 
-@_sap_m_Shell_MinWidthForLogoAside: 1480px;     // = @_sap_m_Shell_AppWidthLimit + 200; but additions do not work in LESS for media query arguments
-@_sap_m_Shell_MinWidthForBigLogoAside: 1680px;  // = @_sap_m_Shell_AppWidthLimit + 400; but additions do not work in LESS for media query arguments
+@_sap_m_Shell_MinWidthForLogoAside: 1480px; /* = @_sap_m_Shell_AppWidthLimit + 200; but additions do not work in LESS for media query arguments */
+@_sap_m_Shell_MinWidthForBigLogoAside: 1680px; /* = @_sap_m_Shell_AppWidthLimit + 400; but additions do not work in LESS for media query arguments */
 
 .sapMShell {
 	width: 100%;
@@ -28,7 +28,7 @@
 	width: 100%;
 	height: 4px;
 	z-index: 2; /* to lift it above the CenterBox shadow and SplitApp */
-	background-color: @sapUiBrand;
+	background-color: var(--sapBrandColor);
 }
 
 /* this "sapMBrandingBar-CTX" CSS class can be set by any container control that comes with its own branding bar, so any shell inside will not display its branding bar */
@@ -89,14 +89,13 @@
 	margin: 0 auto;
 }
 
-
 /* modifications for taller screens */
 
 @media (min-height: @_sap_m_Shell_MinHeightForHeader) { /* 1500px plus 96px for header */
+
 	html.sap-desktop .sapMShellLogo {
 		position: absolute;
 		float: left;
-		display: -webkit-flex;
 		display: flex;
 		height: 40px;
 		margin: 0.75em;
@@ -113,8 +112,8 @@
 		display: block;
 		position: relative;
 		height: 4.25rem;
-		color: @sapUiPageHeaderTextColor;
-		border-bottom: 1px solid @sapUiShellBorderColor;
+		color: var(--sapPageHeader_TextColor);
+		border-bottom: 1px solid var(--sapShell_BorderColor);
 	}
 
 	html.sap-desktop .sapMShellHeaderText {
@@ -139,14 +138,14 @@
 		cursor: pointer;
 		padding: 0.75em 0.57em; /* text size is 14px here... */
 	}
-	
+
 	html.sap-desktop .sapMShellHeaderLogout:focus {
 		outline: none;
 	}
-	
+
 	html.sap-desktop .sapMShellHeaderLogout:active {
-		background-color: @sapUiButtonActiveBackground;
-		color: @sapUiButtonActiveTextColor;
+		background-color: var(--sapButton_Active_Background);
+		color: var(--sapButton_Active_TextColor);
 		outline: none;
 	}
 
@@ -156,19 +155,19 @@
 		bottom: 0;
 		height: auto !important; /* important because overwritten by SplitApp/App control */
 	}
-	
+
 	.sapMShellHeader {
 		border-top: 4px solid transparent;
 	}
 }
 
 @media (min-height: 769px) and (max-width: 640px) { /* logo would appear above but the window is really slim */
-	html.sap-desktop  .sapMShellLogo {
+
+	html.sap-desktop .sapMShellLogo {
 		display: none;
 	}
 }
 
-
 /* modifications for wider screens */
 
 @media (min-width: @_sap_m_Shell_AppWidthLimit) {
@@ -186,12 +185,14 @@
 }
 
 @media (min-width: @_sap_m_Shell_AppWidthLimit) {
+
 	html.sap-desktop .sapMShellAppWidthLimited .sapMShellHeader {
 		padding: 0;
 	}
 }
 
 @media (min-width: @_sap_m_Shell_MinWidthForLogoAside) {
+
 	html.sap-desktop .sapMShellAppWidthLimited .sapMShellLogo {
 		position: absolute;
 		opacity: 1;
@@ -212,6 +213,7 @@
 }
 
 @media (min-width: @_sap_m_Shell_MinWidthForBigLogoAside) {
+
 	html.sap-desktop .sapMShellAppWidthLimited .sapMShellLogo {
 		width: 160px;
 		margin: 2rem;
@@ -228,6 +230,6 @@
 }
 
 html.sap-desktop .sapMShellHeaderText {
-	font-size: @sapMFontHeader2Size;
-	color: @sapUiShellTextColor;
+	font-size: var(--sapFontHeader2Size);
+	color: var(--sapShell_TextColor);
 }

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

@@ -5,28 +5,31 @@
 
 @_sap_m_PlanningCalendarHeader_ActionsToolbarHeight_Compact: 3rem;
 @_sap_m_PlanningCalendarHeader_ActionsToolbarHeight: 2.75rem;
-@_sap_m_SinglePlanningCalendarGrid_HoursBackground: @sapUiListBackground;
+@_sap_m_SinglePlanningCalendarGrid_HoursBackground: var(--sapList_Background);
 
-.sapMPCHead, .sapMSinglePCColumnHeader{
-	position: -webkit-sticky;
+.sapMPCHead,
+.sapMSinglePCColumnHeader {
 	position: sticky;
 	z-index: 4;
 }
 
 .sapMSinglePCStickyAll {
+
 	.sapMPCHead {
 		top: 0;
 	}
 }
 
 .sapMSinglePCStickyNavBarAndColHeaders {
+
 	.sapMPCHead {
 		top: -@_sap_m_PlanningCalendarHeader_ActionsToolbarHeight;
 	}
 
-	// If the actions toolbar are hidden, then the navigation toolbar will
-	// be on top by default.
+	/* If the actions toolbar are hidden, then the navigation toolbar will */
+	/* be on top by default. */
 	&.sapMSinglePCActionsHidden {
+
 		.sapMPCHead {
 			top: 0;
 		}
@@ -34,20 +37,21 @@
 }
 
 .sapUiSizeCompact {
+
 	.sapMSinglePCStickyNavBarAndColHeaders {
+
 		.sapMPCHead {
 			top: -@_sap_m_PlanningCalendarHeader_ActionsToolbarHeight_Compact;
 		}
 	}
 }
 
-
 html.sap-desktop .sapMSinglePC .sapUiCalItem:not(.sapUiCalItemSel):hover {
-  background-color: darken(@sapUiContentForegroundColor,5);
+	background-color: darken(@sapUiContentForegroundColor,5);
 }
 
 html.sap-desktop .sapMSinglePC .sapUiCalItem:not(.sapUiCalItemSel) :not(.sapUiCalWeekNum):hover {
-  background-color: transparent;
+	background-color: transparent;
 }
 
 .sapMSinglePCGridContent {