@openui5/sap.m 1.136.1 → 1.138.0

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

@@ -1,19 +1,336 @@
-/* =========================== */
-/* CSS for control sap.m/Menu  */
-/* Base theme                  */
-/* =========================== */
+/* ==================================== */
+/* CSS for control sap.m/Menu  			*/
+/* Base theme                           */
+/* ==================================== */
+
+@_sap_m_Menu_ItmHeightCozy: 2.75rem;
+@_sap_m_Menu_ItmHeightCompact: 2rem;
+@_sap_m_Menu_ItmPaddingCozy: 0.625rem;
+@_sap_m_Menu_ItmPaddingCompact: 0.5rem;
+
+.sapMMenu {
+
+	max-width: 100%;
+	background-color: @sapUiGroupContentBackground;
+	cursor: default;
+	outline: none;
+	overflow: hidden;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	color: @sapUiListTextColor;
+	box-shadow: @sapUiContentShadow1;
+	border-radius: @sapUiElementBorderCornerRadius;
+
+	&.sapMPopover .sapMPopoverCont {
+		padding: 0;
+	}
+
+	.sapMMenuList {
+		padding: 0;
+		margin: 0;
+		display: block;
+		cursor: default;
+		color: @sapUiListTextColor;
+		font-size: @sapMFontMediumSize;
+		font-family: @sapUiFontFamily;
+	}
+
+	.sapMMenuItem {
+		display: flex;
+		height: @_sap_m_Menu_ItmHeightCozy;
+		white-space: nowrap;
+		position: relative;
+		align-items: center;
+		flex: 0 0 auto;
+		padding: 0 @_sap_m_Menu_ItmPaddingCozy;
+		-webkit-user-select: none; /* Safari */
+		-ms-user-select: none; /* IE 10 and IE 11 */
+		user-select: none; /* Standard syntax */
+		border-bottom: 0.0625rem solid transparent;
+	}
+
+	/* mobile view */
+	&.sapMDialog .sapMMenuItem {
+		padding: 0 0.875rem;
+	}
+
+	.sapMMenuItem:not(.sapMMenuItemDisabled) {
+		cursor: pointer;
+	}
+
+	.sapMMenuItem:hover {
+		color: @sapUiListTextColor;
+		background-color: @sapUiListHoverBackground;
+	}
+
+	.sapMMenuItem:focus {
+		outline: @sapContent_FocusWidth @sapContent_FocusStyle @sapUiContentFocusColor;
+		outline-offset: -3px;
+		color: @sapUiListTextColor;
+	}
+
+	.sapMMenuItem:hover {
+		background-color: @sapUiListHoverBackground;
+	}
+
+	.sapMMenuItem.sapMMenuItemDisabled {
+		color: @sapUiContentDisabledTextColor;
+	}
+
+	.sapMMenuItemText {
+		margin-inline-start: 0;
+		flex-grow: 1;
+		flex-shrink: 1;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.sapMMenuItemShortcut {
+		padding-inline-start: 1rem;
+		padding-inline-end: 0.25rem;
+		color: @sapContent_LabelColor;
+		font-weight: normal;
+		text-align: right;
+
+		&:empty {
+			padding-inline-start: 0;
+			padding-inline-end: 0;
+		}
+	}
+
+	.sapMMenuEndContent {
+		padding-inline-start: 0.5rem;
+	}
+
+	.sapMMenuItemSelected {
+		padding-inline-start: 0.5rem;
+		padding-inline-end: 0;
+		font-weight: normal;
+		text-align: center;
+		&::after {
+			color: @sapSelectedColor;
+			content: "\e05b";
+			font-family: 'SAP-icons';
+			outline: none;
+			line-height: inherit;
+			padding-inline-end: 0.125rem;
+			width: 2rem;
+			height: 2rem;
+		}
+	}
+
+	.sapMMenuItemIcon {
+		min-width: 1.125rem;
+		max-width: 1.125rem;
+		text-align: center;
+		color: @sapUiContentNonInteractiveIconColor;
+		padding-inline-end: 0.625rem;
+	}
+
+	/* mobile view */
+	&.sapMDialog .sapMMenuItemIcon {
+		min-width: 1rem;
+		max-width: 1rem;
+		padding-inline-end: 0.875rem;
+
+		&:empty {
+			min-width: 0;
+			width: 0;
+		}
+	}
+
+	.sapMMenuItemIcon > .sapUiIcon {
+		line-height: @_sap_m_Menu_ItmHeightCozy;
+		font-size: @_sap_m_Menu_ItmHeightCozy / 2 - 0.125rem;
+	}
+
+	.sapMMenuItemIcon > .sapUiIcon {
+		cursor: inherit;
+	}
+
+	.sapMMenuList .sapMMenuItemIcon .sapUiIcon {
+		font-size: 1rem;
+	}
+
+	.sapMMenuItemIcon > img {
+		max-width: 1rem;
+		max-height: 1rem;
+		vertical-align: middle;
+		padding-inline-start: 0;
+	}
+
+	.sapMMenuItemDisabled > .sapMMenuItemIcon > img {
+		opacity: 0.5;
+		filter: alpha(opacity=50);
+	}
+
+	.sapMMenuNoIcons > .sapMMenuItem > .sapMMenuItemIcon,
+	.sapMMenuNoIcons > div > .sapMMenuItem > .sapMMenuItemIcon {
+		width: 0px;
+		display: none;
+	}
+
+	.sapMMenuItemText {
+		white-space: nowrap;
+	}
+
+	.sapMMenuItemSubMenu {
+		min-width: 1.375rem;
+		max-width: 1.375rem;
+		justify-content: end;
+		text-align: end;
+		font-size: 0.75rem;
+		padding-inline-end: 0.25rem;
+	}
+
+	.sapMMenuItemSubMenu > div:after {
+		content: "\e066";
+		color: @sapUiContentNonInteractiveIconColor;
+		font-family: 'SAP-icons';
+		outline: none;
+		font-size: 1rem;
+	}
+
+	.sapMMenuSeparator {
+		position: relative;
+		height: 0.125rem;
+
+		hr {
+			display: inline-block;
+			margin: 0;
+			position: absolute;
+			left: 0;
+			right: 0;
+			margin-top: 1px;
+			margin-bottom: 1px;
+			border-width: 0;
+			border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
+			height: 1px;
+			color: @sapUiToolbarSeparatorColor;
+		}
+	}
+
+	.sapMMenuItem.sapMMenuItemSubMenuOpen,
+	.sapMMenuItem.sapMMenuItemSubMenuOpen:hover,
+	.sapMMenuItem.sapMMenuItemSubMenuOpen:focus {
+		background-color: @sapUiListSelectionBackgroundColor;
+	}
+
+	.sapMMenuItem.sapMMenuItemSubMenuOpen,
+	.sapMMenuItem.sapMMenuItemSubMenuOpen:hover,
+	.sapMMenuItem.sapMMenuItemSubMenuOpen:focus {
+		border-bottom: 1px solid @sapUiListSelectionBorderColor;
+	}
+
+	.sapMMenuItem:focus:active,
+	.sapMMenuItem.sapMMenuItemSubMenuOpen:focus:active {
+		color: @sapUiListActiveTextColor;
+		background-color: @sapUiListActiveBackground;
+	}
+
+	.sapMMenuItem.sapMMenuItemDisabled:hover,
+	.sapMMenuItem.sapMMenuItemDisabled:focus,
+	.sapMMenuItem.sapMMenuItemDisabled:focus:active {
+		color: @sapUiContentDisabledTextColor;
+		background-color: transparent;
+	}
+
+	.sapMMenuItem.sapMMenuItemDisabled .sapMMenuItemIcon {
+		color: @sapUiContentDisabledTextColor;
+	}
+
+	.sapMMenuItem:focus:active .sapMMenuItemIcon {
+		color: @sapUiListActiveTextColor;
+	}
+
+	.sapMMenuItem.sapMMenuItemDisabled:focus:active .sapMMenuItemIcon {
+		color: @sapUiContentDisabledTextColor;
+	}
+
+	.sapMMenuNoIcons .sapMMenuItemText {
+		padding-inline-start: 0;
+	}
+
+	.sapMMenuItem:focus .sapMMenuItemSubMenu > div:after {
+		color: @sapUiContentNonInteractiveIconColor;
+	}
+
+	.sapMMenuItem:focus:active .sapMMenuItemSubMenu > div:after {
+		color: @sapUiListActiveTextColor;
+	}
+
+	.sapMMenuItem .sapMMenuItemIcon + .sapMMenuItemText {
+		padding-inline-start: 0;
+	}
+
+	/* Compact size */
+	.sapUiSizeCompact {
+
+		.sapMMenu {
+			min-width: 50px;
+		}
+
+		.sapMMenuItem {
+			height: @_sap_m_Menu_ItmHeightCompact;
+			padding: 0 @_sap_m_Menu_ItmPaddingCompact;
+		}
+
+		.sapMMenuNoIcons.sapMMenuNoSubMenu > .sapMMenuItem > .sapMMenuItemText {
+			padding-inline-end: 0.75rem;
+		}
+
+		.sapMMenuList > .sapMMenuItem > .sapMMenuItemText {
+			padding-inline-start: 2rem;
+		}
+
+		.sapMMenuList > .sapMMenuItem > .sapMMenuItemIcon + .sapMMenuItemText {
+			padding-inline-start: 0rem;
+		}
+
+		.sapMMenuList.sapMMenuNoIcons > .sapMMenuItem > .sapMMenuItemText,
+		.sapMMenuList.sapMMenuNoIcons > .sapMMenuItem > .sapMMenuItemIcon + .sapMMenuItemText{
+			padding-inline-start: 0;
+		}
+
+		.sapMMenuItemSubMenu {
+			min-width: 1.5rem;
+			max-width: 1.5rem;
+		}
+
+		.sapMMenuItemIcon {
+			min-width: 1rem;
+			max-width: 1rem;
+			padding-inline-end: 0.5rem;
+		}
+
+		.sapMMenuItemIcon > .sapUiIcon {
+			line-height: @_sap_m_Menu_ItmHeightCompact;
+		}
+
+	}
 
-.sapMRespMenuDialog .sapMLIB {
-	border-bottom: none;
 }
 
-/* compact */
-.sapUiSizeCompact .sapMMenu.sapUiMnu {
-	min-width: 50px;
+/* mobile view */
+.sapMMenu.sapMDialog > header:last-of-type .sapMIBar {
+    box-shadow: inset 0 -1px #ebebeb;
 }
 
-.sapUiSizeCompact .sapMMenu .sapUiMnuItmIco > .sapUiIcon {
-	font-size: 1rem;
+.sap-phone .sapMMenu .sapMMenuItem:focus {
+	outline: none;
+	background-color: initial;
 }
 
-/* end compact */
+/* openAsContextMenu pointer */
+.sapMMenuContextMenuPointer {
+	display: block;
+	position: absolute;
+	inset-block-start: 0px;
+	inset-inline-start: 0px;
+	width: 0;
+	height: 0;
+	z-index: 100;
+	opacity: 0;
+	pointer-events: none;
+}

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

@@ -312,12 +312,13 @@ html.sap-desktop .sapUiFioriObjectPage > section {
 	}
 
 	.sapMPageWithHeader {
-
-		&.sapFShellBar-CTX > section {
+		.sapMPageHeader:has(.sapFShellBar) + section,
+		.sapMPageHeader:has([ui5-shellbar]) + section {
 			top: 3rem;
 		}
 
-		&.sapMPageWithSubHeader.sapFShellBar-CTX > section {
+		&.sapMPageWithSubHeader .sapMPageSubHeader:has(.sapFShellBar) + section,
+		&.sapMPageWithSubHeader .sapMPageSubHeader:has([ui5-shellbar]) + section {
 			top: 5rem;
 		}
 	}
@@ -348,4 +349,4 @@ Usually the Popover/Dialog does not have that much of a content and the scrollin
 */
 .sapMPopup-CTX .sapMPage > section.sapMPageEnableScrolling {
 	will-change: unset; /* fixes iOS and OS X issue - the content and the header sometimes get misplaced */
-}
+}

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

@@ -59,6 +59,7 @@
 		}
 
 		.sapMPanelWrappingDiv .sapUiIcon {
+			width: 2rem;
 			height: 1.5rem;
 			line-height: 1.5rem;
 		}
@@ -99,12 +100,16 @@
 		transform: translateY(-50%);
 		padding-left: 0.25rem;
 		padding-right: 0.25rem;
-		width: 2.75rem;
+		width: 2.5rem;
+
+		.sapMBtnInner {
+			min-width: 2rem;
+		}
 	}
 }
 
 .sapMPanelWrappingDiv .sapUiIcon {
-	width: 2.25rem;
+	width: 2rem;
 	height: 2.25rem;
 	line-height: 2.25rem;
 	position: absolute;

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

@@ -400,4 +400,41 @@
 			display: none;
 		}
 	}
+}
+
+.sapMPlanCal .sapMTblCellFocusable.sapMPlanCalAppRow:focus {
+	position: relative;
+	outline: none;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0.0625rem;
+		bottom: 0.0625rem;
+		right: 0.0625rem;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	}
+}
+
+.sapMPlanCal .sapMLIBFocusable:focus {
+	position: relative;
+	outline: none;
+
+	&.sapMListTblRow:not(.sapMTableRowCustomFocus)::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0.0625rem;
+		bottom: 0.0625rem;
+		right: 0.0625rem;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+		pointer-events: none;
+	}
+
+	.sapMListTblHighlightCell,
+	.sapMListTblNavigatedCell {
+		display: block;
+	}
+
 }

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

@@ -106,8 +106,7 @@ html.sap-tablet .sapMRI:focus {
 .sapMRI .sapMImg {
 	padding-right: @sapUiRIIconPaddingCozy;
 	height: @sapUiRIIconSizeCozy;
-	overflow: hidden;
-	vertical-align:top;
+	vertical-align: top;
 }
 
 .sapMRI .sapUiIcon:last-child,
@@ -207,4 +206,10 @@ html.sap-tablet .sapMRI:focus {
 	.sapMRIIconSel {
 		color: var(--sapTextColor);
 	}
+}
+
+.sapMRIReadOnly .sapMRIUnsel .sapMRIunratedIcon,
+.sapMRIDisplayOnly .sapMRIUnsel .sapMRIunratedIcon,
+.sapMRIDisabled .sapMRIUnsel .sapMRIunratedIcon {
+	vertical-align: baseline;
 }

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

@@ -120,10 +120,9 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	padding-left: 1rem;
 }
 
-/* 0.0625rem -> border-right width for highlight */
 .sapMListHighlight .sapMListTblHighlightCol {
-	width: 0.375rem + 0.0625rem;
-	min-width: 0.375rem + 0.0625rem;
+	width: 0.375rem;
+	min-width: 0.375rem;
 }
 
 .sapMListNavigated .sapMListTblNavigatedCol {
@@ -134,7 +133,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 .sapMListTblNavigatedCell {
 	padding: 0;
 	position: relative;
-	overflow: hidden;
+	overflow: visible;
 }
 
 /* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
@@ -175,11 +174,26 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	}
 }
 
-.sapMListTblSelCol,
-.sapMListTblHasNav .sapMListTblNavCol {
+.sapMListTblSelCol {
 	width: 3rem;
 }
 
+.sapMListTblHasNav .sapMListTblNavCol {
+	width: 2.5rem;
+}
+
+.sapMListTblActionsCol {
+	padding: 0;
+}
+
+.sapMTable1ActionsCol {
+	width: 2.75rem;
+}
+
+.sapMTable2ActionsCol {
+	width: 5.125rem;
+}
+
 .sapMLIB.sapMListTblRow {
 	border-bottom: 0;
 }
@@ -205,7 +219,9 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 }
 
 /* sticky headerToolbar, infoToolbar and column headers */
-.sapMSticky .sapMListTblHeader {
+/* sapMTableTHead --> Workaround for Safari: sticky positioning on <tr> elements is not applied to children */
+.sapMSticky .sapMListTblHeader,
+.sapMSticky .sapMTableTHead {
 	position: sticky;
 }
 
@@ -222,6 +238,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 /* .sapMSticky4 denotes that only the column headers are sticky */
 /* top: 0 sticky conditions : 1st sticky elements */
 .sapMSticky4 .sapMListTblHeader,
+.sapMSticky4 .sapMTableTHead,
 .sapMSticky5 > .sapMListHdr,
 .sapMSticky6 > .sapMListInfoTBarContainer,
 .sapMSticky7 > .sapMListHdr,
@@ -230,6 +247,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 .sapMSticky10 > .sapMListInfoTBarContainer,
 .sapMSticky11 > .sapMListHdr,
 .sapMSticky12 .sapMListTblHeader,
+.sapMSticky12 .sapMTableTHead,
 .sapMSticky13 > .sapMListHdr,
 .sapMSticky14 > .sapMListInfoTBarContainer,
 .sapMSticky15 > .sapMListHdr {
@@ -240,6 +258,8 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 /* top: 2rem sticky conditions : 2nd sticky elements */
 .sapMSticky6 .sapMListTblHeader,
 .sapMSticky14 .sapMListTblHeader,
+.sapMSticky6 .sapMTableTHead,
+.sapMSticky14 .sapMTableTHead,
 .sapMSticky10 .sapMGHLI {
 	z-index: 3;
 	top: 2rem;
@@ -247,11 +267,13 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 
 /* top: 3rem sticky conditions : 2nd sticky elements */
 .sapMSticky5 .sapMListTblHeader,
+.sapMSticky5 .sapMTableTHead,
 .sapMSticky7 > .sapMListInfoTBarContainer,
 .sapMSticky9 .sapMGHLI,
 .sapMSticky11 > .sapMListInfoTBarContainer,
 .sapMSticky12 .sapMGHLI,
 .sapMSticky13 .sapMListTblHeader,
+.sapMSticky13 .sapMTableTHead,
 .sapMSticky15 > .sapMListInfoTBarContainer {
 	z-index: 3;
 	top: var(--sapElement_LineHeight);
@@ -259,6 +281,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 
 /* top: 5rem conditions : 3rd sticky elements */
 .sapMSticky7 .sapMListTblHeader,
+.sapMSticky7 .sapMTableTHead,
 .sapMSticky11 .sapMGHLI,
 .sapMSticky14 .sapMGHLI,
 .sapMSticky15 .sapMListTblHeader {
@@ -283,6 +306,14 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 
 .sapUiSizeCompact {
 
+	.sapMTable1ActionsCol {
+		width: 2.5rem;
+	}
+
+	.sapMTable2ActionsCol {
+		width: 4.625rem;
+	}
+
 	& .sapMSticky12 .sapMGHLI {
 		top: 2rem;
 
@@ -503,14 +534,14 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 		right: 0;
 		z-index: 1;
 		pointer-events: none;
-		top: 1px; /* mimics outline-offset: -1px */
+		top: 0px;
 		bottom: 1px; /* mimics outline-offset: -1px */
 		border-top: @_sap_m_ListItemBase_Focus_Outline;
 		border-bottom: @_sap_m_ListItemBase_Focus_Outline;
 		margin-right: 1px; /* make the focus border clearly visible on all sides */
 	}
 
-	.sapMListTblHasPopin > &:not(.sapMGHLI) > :not(.sapMListTblCellNoData, .sapMListTblDummyCell:last-child, .sapMListTblNavigatedCell)::before {
+	.sapMListTblHasPopin > &:not(.sapMGHLI,.sapMListTblRowNoData) > ::before {
 		border-bottom: 0;
 		bottom: 0;
 	}
@@ -523,13 +554,13 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	& > .sapMTblFirstVisibleCell::before,
 	& + .sapMListTblSubRow > .sapMTblFirstVisibleCell::before {
 		border-left: @_sap_m_ListItemBase_Focus_Outline;
-		margin-left: 1px; /* mimics outline-offset */
+		margin-left: 1px !important; /* mimics outline-offset */
 	}
 
 	& > .sapMTblLastVisibleCell::before,
 	& + .sapMListTblSubRow > .sapMTblLastVisibleCell::before {
 		border-right: @_sap_m_ListItemBase_Focus_Outline;
-		margin-right: 1px; /* mimics outline-offset */
+		margin-right: 1px !important; /* mimics outline-offset */
 	}
 }
 

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

@@ -39,19 +39,6 @@
 		content: counter(steps-counter) '. ';
 	}
 
-	.sapMWizardNextButtonHidden {
-		bottom: -3rem;
-		opacity: 0;
-		animation-name: hideWizardButton;
-	}
-
-	.sapMWizardNextButtonVisible {
-		margin-top: 0.5rem;
-		bottom: 0;
-		opacity: 1;
-		animation-name: showWizardButton;
-	}
-
 	.sapMDialogSection {
 		height: auto;
 	}
@@ -77,37 +64,21 @@
 	min-height: ~"calc(100% - 1rem)"; /* 1rem is the margin from the top of the container*/
 }
 
-html[data-sap-ui-animation='on'] .sapMWizardNextButtonVisible,
-html[data-sap-ui-animation='on'] .sapMWizardNextButtonVisible {
-	animation-timing-function: linear;
-	animation-duration: @_sap_m_WizardStep_Animation_Duration;
-}
-
-@keyframes showWizardButton {
-
-	from {opacity: 0; bottom: -3rem;}
-
-	to {opacity: 1; bottom: 0rem;}
-}
-
-@keyframes hideWizardButton {
-
-	from {opacity: 1; bottom: 0rem;}
-
-	to {opacity: 0; bottom: -3rem;}
-}
-
-html.sap-desktop .sapMWizard .sapMWizardNextButtonVisible,
-html.sap-tablet .sapMWizard .sapMWizardNextButtonVisible {
-	display: block;
-}
+html.sap-desktop .sapMWizard .sapMWizardNextButton,
+html.sap-tablet .sapMWizard .sapMWizardNextButton {
+	& {
+		display: block;
+		opacity: 0;
+		transform: translateY(3rem);
+		transition: opacity @_sap_m_WizardStep_Animation_Duration ease, transform @_sap_m_WizardStep_Animation_Duration ease;
+	}
 
-html.sap-phone .sapMWizard {
+	&.sapMWizardNextButtonAnimated {
+		transform: translateY(0);
+		opacity: 1;
+	}
 
-	.sapMWizardNextButtonVisible {
-		position: fixed;
-		left: 50%;
-		transform: translate(-50%, 0);
-		bottom: 3rem;
+	&.sapMWizardNextButtonHidden {
+		display: none;
 	}
 }