@openui5/sap.m 1.131.1 → 1.132.0

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

@@ -57,7 +57,7 @@
 
 	overflow: hidden;
 
-	// TODO: Consider refactoring of the CSS of PlanningCalendar DatesRow CSS and fix the styles in one place
+	/* TODO: Consider refactoring of the CSS of PlanningCalendar DatesRow CSS and fix the styles in one place */
 	.sapUiCalItem:focus {
 		outline: 0.0625rem dotted;
 		outline-offset: -0.1875rem;
@@ -86,10 +86,10 @@
 	opacity: 1;
 }
 
-
 /*****************
 	GRID CONTENT
 *****************/
+
 /* ROW HEADERS */
 .sapMSinglePCGridContent {
 	display: flex;
@@ -183,13 +183,13 @@
 }
 
 .sapMSinglePCNowMarker::after {
-	content: "";
+	content: '';
 	border-top: 0.125rem solid;
 	flex: 1;
 }
 
 .sapMSinglePCColumnToday .sapMSinglePCRow::before {
-	content: "";
+	content: '';
 	box-sizing: border-box;
 	border: 0.063rem solid;
 	border-bottom: none;
@@ -202,37 +202,38 @@
 /* SELECTED COLUMNS */
 .sapMSinglePCGrid .sapUiCalColumnSelected,
 .sapMSinglePCGrid .sapUiCalColumnSelected.sapMSinglePCColumnWeekend {
-	background: @sapList_SelectionBackgroundColor;
+	background: var(--sapList_SelectionBackgroundColor);
 }
 
 .sapMSinglePCGrid .sapUiCalColumnSelected,
 .sapMSinglePCGrid .sapUiCalColumnSelected.sapMSinglePCColumnWeekend {
+
 	.sapMSinglePCRow::before {
 		top: -0.625rem;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 		right: 0;
-		border: 0.0625rem solid @sapList_SelectionBorderColor;
-		content: "";
+		border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+		content: '';
 		pointer-events: none;
 		border-top: none;
 		border-bottom: none;
 	}
 
 	.sapMSinglePCRow:last-child::before{
-		border-bottom: 0.0625rem solid @sapList_SelectionBorderColor;
+		border-bottom: 0.0625rem solid var(--sapList_SelectionBorderColor);
 	}
 
 	&.sapMSinglePCBlockersColumn::before {
 		position: absolute;
-		content: "";
+		content: '';
 		pointer-events: none;
 		top: 0;
 		bottom: 0;
 		left: 0;
 		right: 0;
-		border: 0.0625rem solid @sapList_SelectionBorderColor;
+		border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 		bottom: -0.0625rem;
 		border-bottom: none;
 	}
@@ -244,6 +245,7 @@
 }
 
 .sapMSinglePCGrid .sapUiCalColumnSelected.sapUiCalColumnSelectedStartColumn {
+
 	.sapMSinglePCRow::before {
 		border-right: none;
 	}
@@ -285,8 +287,9 @@
 	}
 
 	.sapUiCalendarApp {
+
 		&.sapUiCalendarAppSel::after {
-			content: "";
+			content: '';
 			position: absolute;
 			display: block;
 			top: 0;
@@ -294,12 +297,13 @@
 			right: 0;
 			left: 0;
 			z-index: 0;
-			color: @sapUiListActiveTextColor;
+			color: var(--sapList_Active_TextColor);
 			background-color: fade(@sapUiSelected, 90%);
 			border-radius: 0 0.125rem 0.125rem 0.125rem;
 		}
 
 		.sapUiCalendarAppCont {
+
 			.sapUiCalendarAppTitleWrapper,
 			.sapUiIcon,
 			.sapUiCalendarAppIcon,
@@ -311,47 +315,53 @@
 	}
 
 	.sapMSinglePCAppointmentWrap:focus {
+
 		.sapUiCalendarAppCont::after {
 			z-index: 1;
 		}
 	}
 }
 
-//space is needed for the day marker in day view when special dates
+/* space is needed for the day marker in day view when special dates */
 .sapMSpecialDaysInDayView .sapMSinglePCBlockers {
 	top: 0.3125rem;
 }
 
 html.sap-desktop {
+
 	.sapMSinglePCBlockersRow > .sapMSinglePCBlockersColumns > .sapMSinglePCBlockersColumn:focus::after,
 	.sapMSinglePCGridContent .sapMSinglePCColumns .sapMSinglePCRow:focus::after {
-		content: "";
+		content: '';
 		position: absolute;
 		top: 0.0625rem;
 		left: 0.0625rem;
 		right: 0.0625rem;
 		bottom: 0.0625rem;
-		border: 0.0625rem dotted @sapUiContentFocusColor;
+		border: 0.0625rem dotted var(--sapContent_FocusColor);
 		pointer-events: none;
 		z-index: 3;
 	}
 
 	.sapMSinglePCBlockers,
 	.sapMSinglePCAppointments {
+
 		.sapUiCalendarApp {
+
 			&:hover::after {
-				background-color: @sapUiListHoverBackground;
+				background-color: var(--sapList_Hover_Background);
 			}
 		}
 	}
 }
 
 .sapMSinglePCGrid {
+
 	.sapUiCalendarAppTitleWrapper,
 	.sapUiCalendarAppTitle,
 	.sapUiCalendarAppText {
 		width: 100%;
 		margin-right: 0.125rem;
+
 		& + .sapUiCalendarAppArrowIconRight {
 			margin-left: 0.25rem;
 		}
@@ -360,6 +370,7 @@ html.sap-desktop {
 
 .sapMSinglePCAppointments,
 .sapMSinglePCBlockersColumns {
+
 	.sapUiCalendarAppCont {
 		display: flex;
 	}
@@ -384,6 +395,7 @@ html.sap-desktop {
 }
 
 .sapMSinglePCBlockersColumns {
+
 	.sapUiCalendarAppCont {
 		align-items: center;
 	}
@@ -398,6 +410,7 @@ html.sap-desktop {
 }
 
 .sapMSinglePCAppointments {
+
 	.sapUiCalendarAppArrowIconLeft,
 	.sapUiCalendarAppArrowIconRight {
 		padding-top: 0.25rem;
@@ -405,7 +418,7 @@ html.sap-desktop {
 }
 
 .sapMSinglePCAppointmentWrap.sapUiCalendarRowApps {
-	// TODO: this styles will be removed when Appointments refactoring occured
+	/* TODO: this styles will be removed when Appointments refactoring occured */
 	box-sizing: border-box;
 	padding: 0.0625rem;
 	position: absolute;
@@ -414,14 +427,14 @@ html.sap-desktop {
 	&:focus {
 		outline: none;
 
-		.sapUiCalendarAppCont:after {
+		.sapUiCalendarAppCont::after {
 			position: absolute;
 			top: 0.0625rem;
 			left: 0.0625rem;
 			right: 0.0625rem;
 			bottom: 0.0625rem;
-			content: "";
-			border: 0.0625rem dotted @sapUiContentFocusColor;
+			content: '';
+			border: 0.0625rem dotted var(--sapContent_FocusColor);
 			pointer-events: none;
 		}
 	}
@@ -455,6 +468,7 @@ html.sap-desktop {
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp7,
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp8,
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp9 {
+
 			> .sapUiCalendarAppText,
 			> .sapUiCalendarAppTitle {
 				white-space: pre-line;
@@ -467,24 +481,31 @@ html.sap-desktop {
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp3 {
 			max-height: 3.25rem;
 		}
+
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp2{
 			max-height: 2.3rem;
 		}
+
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp1 {
 			max-height: 1.2rem;
 		}
+
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp4 {
 			max-height: 4.25rem;
 		}
+
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp5 {
 			max-height: 5.2rem;
 		}
+
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp6 {
 			max-height: 6.25rem;
 		}
+
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp7 {
 			max-height: 7.5rem;
 		}
+
 		.sapUiCalendarAppTitleWrapper.sapUiSPCAppLineClamp8 {
 			max-height: 8.3rem;
 		}
@@ -492,12 +513,15 @@ html.sap-desktop {
 }
 
 .sapUiSizeCompact {
+
 	.sapMSinglePCBlockersColumns .sapMSinglePCAppointmentWrap.sapUiCalendarRowApps .sapUiCalendarApp {
 		height: 1.438rem;
 	}
+
 	.sapMSinglePCAppointmentWrap.sapUiCalendarRowApps .sapUiCalendarApp .sapUiCalendarAppTitle {
 		padding-top: 0.1rem;
 	}
+
 	.sapMSinglePCGrid .sapUiCalendarAppIcon {
 		top: 0.1rem;
 	}
@@ -513,11 +537,11 @@ html.sap-desktop {
 
 .sapUiCalendarAppCont .sapUiIcon .sapUiCalendarAppArrowIcon {
 	font-size: 0.75rem;
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapMSinglePCGrid .sapUiCalendarRowApps {
-	// TODO: this styles will be removed when Appointments refactoring occured
+	/* TODO: this styles will be removed when Appointments refactoring occured */
 	position: absolute;
 	min-height: auto;
 	height: auto;
@@ -525,9 +549,9 @@ html.sap-desktop {
 }
 
 .sapMSinglePCGrid .sapUiAppCreate {
-	border-top: 0.125rem solid @sapUiContentForegroundBorderColor;
-	border-bottom: 0.125rem solid @sapUiContentForegroundBorderColor;
-	border-right: 0.125rem solid @sapUiContentForegroundBorderColor;
+	border-top: 0.125rem solid var(--sapContent_ForegroundBorderColor);
+	border-bottom: 0.125rem solid var(--sapContent_ForegroundBorderColor);
+	border-right: 0.125rem solid var(--sapContent_ForegroundBorderColor);
 }
 
 .sapMSinglePCColumnHeader.sapUiCalRow,
@@ -540,12 +564,15 @@ html.sap-desktop {
 }
 
 .sapUiSizeCompact {
+
 	.sapMSinglePCColumnHeader.sapUiCalRow,
 	.sapMSinglePCColumnHeader.sapUiCalRow .sapUiCalItem {
 		height:2rem;
 	}
-	// TODO: Consider refactoring of the CSS of PlanningCalendar DatesRow CSS and fix the styles in one place
+
+	/* TODO: Consider refactoring of the CSS of PlanningCalendar DatesRow CSS and fix the styles in one place */
 	.sapMSinglePCColumnHeader {
+
 		.sapUiCalItem {
 			display: flex;
 			flex-direction: row-reverse;
@@ -650,20 +677,23 @@ html.sap-desktop {
 }
 
 .calendarRowTypeColorMixIn(@class, @iitemtypeclass, @color, @bcolor){
+
 	.sapMSinglePCAppointments, .sapMSinglePCBlockers {
+
 		.@{class}.sapMSinglePCAppointmentWrap {
 			border-left-color: @color;
 		}
 	}
+
 	.sapMSinglePCBlockers, .sapMSinglePCAppointments {
 
 		&.sapUiCalendarRowVisFilled > .@{class}.sapUiCalendarRowApps > .sapUiCalendarApp:not(.sapUiCalendarAppSel) > .sapUiCalendarAppCont {
 			background-color: fade(@bcolor, 90%);
 		}
 	}
-	//Special Dates
+	/* Special Dates */
 	.sapMSinglePCGrid .@{iitemtypeclass} {
-		//day view
+		/* day view */
 		.sapMSinglePCBlockersColumn {
 			box-shadow: inset 0 0.25rem 0 @color;
 		}

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

@@ -30,14 +30,13 @@
 .sapMSPCMonthWeek > .sapMSPCMonthWeekNumber {
 	text-align: right;
 	box-sizing: border-box;
-
-	color: @sapUiBaseText;
-	font-family: @sapUiFontFamily;
+	color: var(--sapTextColor);
+	font-family: var(--sapFontFamily);
 	font-size: @sapMFontMediumSize;
-
 	background-color: lighten(@sapUiContentForegroundColor,7);
+
 	&:hover {
-		background-color: @sapList_Hover_Background;
+		background-color: var(--sapList_Hover_Background);
 		cursor: pointer;
 	}
 }
@@ -46,14 +45,11 @@
 	flex: 1 1;
 	display: flex;
 	flex-direction: column;
-
-	border-left: 0.0625rem solid @sapUiListBorderColor;
-	border-top: 0.0625rem solid @sapUiListBorderColor;
+	border-left: 0.0625rem solid var(--sapList_BorderColor);
+	border-top: 0.0625rem solid var(--sapList_BorderColor);
 	box-sizing: border-box;
-	background-color: @sapUiListBackground;
-
+	background-color: var(--sapList_Background);
 	position: relative;
-
 	outline: none;
 }
 
@@ -76,26 +72,27 @@
 }
 
 .sapMSPCMonthDay.nonWorkingTimeframe {
-	background-color: @sapUiListAlternatingBackground;
+	background-color: var(--sapList_AlternatingBackground);
 }
 
 .sapMSPCMonthNowMarker {
-	border: 0.125rem solid @sapUiLegendCurrentDateTime;
+	border: 0.125rem solid var(--sapLegend_CurrentDateTime);
 	pointer-events: none;
 	height: inherit;
+
 	.sapMSPCMonthDayNumber {
 		padding-top: 0.4rem;
 	}
 }
 
 html.sap-desktop .sapMSPCMonthDay.sapMSPCMonthDayToday:focus .sapMSPCMonthNowMarker::after {
-	content: "";
+	content: '';
 	position: absolute;
 	top: 0.0625rem;
 	left: 0.0625rem;
 	right: 0.0625rem;
 	bottom: 0.0625rem;
-	border: 0.0625rem dotted @sapUiContentFocusColor;
+	border: 0.0625rem dotted var(--sapContent_FocusColor);
 	pointer-events: none;
 	z-index: 3;
 }
@@ -111,9 +108,8 @@ html.sap-desktop .sapMSPCMonthDay.sapMSPCMonthDayToday:focus .sapMSPCMonthNowMar
 	padding-top: 0.5rem;
 	padding-right: 0.375rem;
 	box-sizing: border-box;
-
-	color: @sapUiBaseText;
-	font-family: @sapUiFontFamily;
+	color: var(--sapTextColor);
+	font-family: var(--sapFontFamily);
 	font-size: @sapMFontMediumSize;
 }
 
@@ -160,7 +156,7 @@ html.sap-desktop .sapMSPCMonthDay.sapMSPCMonthDayToday:focus .sapMSPCMonthNowMar
 
 .sapMSPCMonthGrid .sapUiCalendarAppIcon + .sapUiCalendarAppTitle,
 .sapMSPCMonthGrid .sapUiCalendarAppIcon + .sapUiCalendarAppTitle + .sapUiCalendarAppText {
-  padding-left: 0.375rem;
+	padding-left: 0.375rem;
 }
 
 .sapMSPCMonthGrid .sapUiCalendarAppIcon {
@@ -168,42 +164,43 @@ html.sap-desktop .sapMSPCMonthDay.sapMSPCMonthDayToday:focus .sapMSPCMonthNowMar
 }
 
 html.sap-desktop .sapMSPCMonthDay:not(.sapMSPCMonthDayToday):focus::after {
-  content: "";
-  position: absolute;
-  top: 0.0625rem;
-  left: 0.0625rem;
-  right: 0.0625rem;
-  bottom: 0.0625rem;
-  border: 0.0625rem dotted @sapUiContentFocusColor;
-  pointer-events: none;
-  z-index: 3;
+	content: '';
+	position: absolute;
+	top: 0.0625rem;
+	left: 0.0625rem;
+	right: 0.0625rem;
+	bottom: 0.0625rem;
+	border: 0.0625rem dotted var(--sapContent_FocusColor);
+	pointer-events: none;
+	z-index: 3;
 }
 
 .sapMSPCMonthDay.sapMSPCMonthDaySelected.sapMSPCMonthDayToday .sapMSPCMonthNowMarker::before {
-	content: "";
+	content: '';
 	position: absolute;
 	top: 0.165rem;
 	left: 0.165rem;
 	right: 0.165rem;
 	bottom: 0.165rem;
-	border: 0.0625rem solid @sapList_SelectionBorderColor;
+	border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 	pointer-events: none;
 	z-index: 3;
 }
 
 .sapMSPCMonthDay.sapMSPCMonthDaySelected:not(.sapMSPCMonthDayToday) {
-	border: 0.0625rem solid @sapList_SelectionBorderColor;
+	border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 }
 
 .sapMSPCMonthDay.sapMSPCMonthDaySelected {
-	background: @sapList_SelectionBackgroundColor;
+	background: var(--sapList_SelectionBackgroundColor);
 }
 
 .sapMSPCMonthDay.sapMSPCMonthDaySelected:hover {
-	background: @sapList_Hover_SelectionBackground;
+	background: var(--sapList_Hover_SelectionBackground);
 }
 
 .sapUiSizeCompact {
+
 	.sapMSPCMonthDay {
 		height: 7.875rem;
 		min-width: 2.3125rem;
@@ -224,7 +221,9 @@ html.sap-desktop .sapMSPCMonthDay:not(.sapMSPCMonthDayToday):focus::after {
 	}
 
 	.sapMSPCMonthGrid {
+
 		.sapUiCalendarAppCont {
+
 			.sapUiCalendarAppArrowIcon {
 				top: 0;
 				left: 0;
@@ -232,6 +231,7 @@ html.sap-desktop .sapMSPCMonthDay:not(.sapMSPCMonthDayToday):focus::after {
 			}
 		}
 	}
+
 	.sapMSPCMonthGrid .sapUiCalendarAppIcon {
 		top: initial;
 	}
@@ -243,7 +243,9 @@ html.sap-desktop .sapMSPCMonthDay:not(.sapMSPCMonthDayToday):focus::after {
 }
 
 .sapMSPCMonthGrid {
+
 	.sapUiCalendarAppCont {
+
 		.sapUiCalendarAppArrowIcon {
 			top: 0;
 			left: 0;
@@ -262,6 +264,7 @@ html.sap-desktop .sapMSPCMonthDaysapMSPCMonthGrid .specialDateIndicator {
 }
 
 html.sap-phone {
+
 	.sapMSPCMonthGrid > :not(.sapMSinglePCGridContent) {
 		margin-left: 0;
 	}
@@ -279,11 +282,12 @@ html.sap-phone {
 		height: 6.125rem;
 
 		.sapMSPCMonthDay {
-				height: 100%;
-			}
+			height: 100%;
+		}
 	}
 
 	.sapUiSizeCompact {
+
 		.sapMSPCMonthDays.sapMSPCMonthDaysMax0,
 		.sapMSPCMonthDays.sapMSPCMonthDaysMax1,
 		.sapMSPCMonthDays.sapMSPCMonthDaysMax2 {
@@ -305,16 +309,20 @@ html.sap-phone {
 }
 
 @media (max-width: 42rem) {
+
 	.sapMSPCMonthWeek > .sapMSPCMonthWeekNumber {
 		width: 10%;
 	}
+
 	.sapMSPCMonthDay {
 		width: 12.8571%;
 	}
-	.sapMSPCMonthGrid .sapMSPCMonthDayNames>.sapUiCalWH {
+
+	.sapMSPCMonthGrid .sapMSPCMonthDayNames > .sapUiCalWH {
 		min-width: 12.8571%;
 		width: 12.8571%;
 	}
+
 	.sapMSPCMonthGrid > :not(.sapMSinglePCGridContent) {
 		margin-left: 10%;
 	}

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

@@ -7,6 +7,10 @@
 @_sap_m_Table_CustomFocusMargin: 1px;
 @sapUiElementLineHeightSticky13: @sapUiElementLineHeight * 2;
 @sapUiElementLineHeightSticky15: (@sapUiElementLineHeight * 2) + 2rem;
+@sapUiSizeCompactElementLineHeightSticky15: (@sapUiElementLineHeight * 2) + 1.2rem;
+@sapUiSizeCompactElementLineHeightSticky14: @sapUiElementLineHeight + 1.25rem;
+@sapUiSizeCompactElementLineHeightSticky13: @sapUiElementLineHeight  + 1.95rem;
+@sapUiSizeCompactElementLineHeightSticky12: 2rem;
 
 .sapMListTbl {
 	width: 100%;
@@ -171,13 +175,12 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 .sapMListTblCell.sapMListTblCellNoData {
 	font-size: 1rem;
 	padding-top: .75rem;
+	padding-right: 1rem;
 	padding-bottom: .75rem;
-	line-height: 1.6;
 	border-bottom: 1px solid @sapUiListBorderColor;
-}
-
-.sapMListTblCell.sapMListTblCellNoData {
-	padding-right: 1rem;
+	&.sapMListTblCellNoIllustratedMessage {
+		line-height: 1.6;
+	}
 }
 
 .sapMListTblSelCol,
@@ -287,6 +290,37 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	top: @sapUiElementLineHeightSticky15;
 }
 
+.sapUiSizeCompact {
+	& .sapMSticky12 .sapMGHLI {
+		top: @sapUiSizeCompactElementLineHeightSticky12;
+		/* only first child needs 1px more which prevents (tiny) double borders through stacking the following groupHeaders */
+		&:first-child {
+			top: @sapUiSizeCompactElementLineHeightSticky12 + 0.0625rem;
+		}
+	}
+	& .sapMSticky13 .sapMGHLI {
+		top: @sapUiSizeCompactElementLineHeightSticky13;
+		/* only first child needs 2px more which prevents (tiny) double borders through stacking the following groupHeaders */
+		&:first-child {
+			top: @sapUiSizeCompactElementLineHeightSticky13 + 0.125rem;
+		}
+	}
+	& .sapMSticky14 .sapMGHLI {
+		top: @sapUiSizeCompactElementLineHeightSticky14;
+		/* only first child needs 1px more which prevents (tiny) double borders through stacking the following groupHeaders */
+		&:first-child {
+			top: @sapUiSizeCompactElementLineHeightSticky14 + 0.0625rem;
+		}
+	}
+	& .sapMSticky15 .sapMGHLI {
+		top: @sapUiSizeCompactElementLineHeightSticky15;
+		/* only first child needs 2px more which prevents (tiny) double borders through stacking the following groupHeaders */
+		&:first-child {
+			top: @sapUiSizeCompactElementLineHeightSticky15 + 0.125rem;
+		}
+	}
+}
+
 /* define outline for the block layer */
 .sapMListTblCnt > .sapMTableOverlay:focus {
 	outline: @_sap_m_ListItemBase_Focus_Outline;
@@ -476,7 +510,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 		margin-right: @_sap_m_Table_CustomFocusMargin; // make the focus border clearly visible on all sides
 	}
 
-	.sapMListTblHasPopin > &:not(.sapMGHLI) > :not(.sapMListTblCellNoData,.sapMListTblDummyCell:last-child)::before {
+	.sapMListTblHasPopin > &:not(.sapMGHLI) > :not(.sapMListTblCellNoData,.sapMListTblDummyCell:last-child,.sapMListTblNavigatedCell)::before {
 		border-bottom: 0;
 		bottom: 0;
 	}

package/src/sap/m/themes/base/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */