@openui5/sap.tnt 1.114.2 → 1.114.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.tnt",
-  "version": "1.114.2",
+  "version": "1.114.4",
   "description": "OpenUI5 UI Library sap.tnt",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,7 +14,7 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.m": "1.114.2",
-    "@openui5/sap.ui.core": "1.114.2"
+    "@openui5/sap.m": "1.114.4",
+    "@openui5/sap.ui.core": "1.114.4"
   }
 }

package/src/sap/tnt/.library

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.114.2</version>
+  <version>1.114.4</version>
 
   <documentation>SAPUI5 library with responsive controls.</documentation>
 

package/src/sap/tnt/InfoLabel.js

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.114.2
+	 * @version 1.114.4
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/NavigationList.js

@@ -41,7 +41,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.114.2
+		 * @version 1.114.4
 		 *
 		 * @constructor
 		 * @public
@@ -338,6 +338,7 @@ sap.ui.define([
 		NavigationList.prototype._openPopover = function (source, list) {
 
 			var that = this;
+			var $sourceItem = source.$().find(".sapTntNavLIItem").addClass("sapTntNavLIActive");
 			var selectedItem = list.getSelectedItem();
 			if (selectedItem && list.isGroupSelected) {
 				selectedItem = null;
@@ -352,14 +353,14 @@ sap.ui.define([
 					if (that._popover) {
 						that._popover.destroy();
 						that._popover = null;
+						$sourceItem.removeClass("sapTntNavLIActive");
 					}
 				},
 				content: list,
 				ariaLabelledBy: InvisibleText.getStaticId("sap.tnt", "NAVIGATION_LIST_DIALOG_TITLE")
-			}).addStyleClass('sapContrast sapContrastPlus');
+			}).addStyleClass('sapContrast sapContrastPlus sapTntNavLIPopover');
 
 			popover._adaptPositionParams = this._adaptPopoverPositionParams;
-
 			popover.openBy(source);
 		};
 

package/src/sap/tnt/NavigationListItem.js

@@ -32,7 +32,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 		 * @extends sap.ui.core.Item
 		 *
 		 * @author SAP SE
-		 * @version 1.114.2
+		 * @version 1.114.4
 		 *
 		 * @constructor
 		 * @public
@@ -108,7 +108,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 		NavigationListItem.expandIcon = 'sap-icon://navigation-right-arrow';
 		NavigationListItem.collapseIcon = 'sap-icon://navigation-down-arrow';
-
+		NavigationListItem.selectionIndicatorIcon = 'sap-icon://circle-task-2';
 
 		NavigationListItem._getInvisibleText = function() {
 			if (!this._invisibleText) {
@@ -523,7 +523,8 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 					role: 'treeitem',
 					selected: false,
 					roledescription: this._resourceBundleTNTLib.getText("NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE_ITEM")
-				};
+				},
+				expanderVisible = this.getItems().length > 0 && this.getHasExpander();
 
 			rm.openStart("div");
 
@@ -544,6 +545,10 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 				rm.class("sapTntNavLIItemSelected");
 			}
 
+			if (expanderVisible) {
+				rm.class("sapTntNavLIItemWithExpander");
+			}
+
 			// checking if there are items level 2 in the NavigationListItem
 			// if yes - there is need of aria-expanded property
 			if (isListExpanded) {
@@ -590,10 +595,11 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 			if (control.getExpanded()) {
 				var expandIconControl = this._getExpandIconControl();
-				expandIconControl.setVisible(this.getItems().length > 0 && this.getHasExpander());
+				expandIconControl.setVisible(expanderVisible);
 				expandIconControl.setSrc(this.getExpanded() ? NavigationListItem.collapseIcon : NavigationListItem.expandIcon);
 				expandIconControl.setTooltip(this._getExpandIconTooltip(!this.getExpanded()));
 				this._renderText(rm);
+				rm.icon(NavigationListItem.selectionIndicatorIcon, ["sapTntNavLISelectionIndicator"]);
 				rm.renderControl(expandIconControl);
 			}
 
@@ -738,8 +744,8 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 			rm.openEnd();
 
-
 			this._renderText(rm);
+			rm.icon("sap-icon://circle-task-2", ["sapTntNavLISelectionIndicator"]);
 
 			rm.close('a');
 

package/src/sap/tnt/SideNavigation.js

@@ -42,13 +42,12 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.114.2
+		 * @version 1.114.4
 		 *
 		 * @constructor
 		 * @public
 		 * @since 1.34
 		 * @alias sap.tnt.SideNavigation
-		 * @see {@link fiori:https://experience.sap.com/fiori-design-web/side-navigation/ Side Navigation}
 		 */
 		var SideNavigation = Control.extend('sap.tnt.SideNavigation', /** @lends sap.t.SideNavigation.prototype */ {
 			metadata: {

package/src/sap/tnt/ToolHeader.js

@@ -34,14 +34,17 @@ sap.ui.define([
 	 * @class
 	 *
 	 * The ToolHeader control is a horizontal container that is most
-	 * commonly used to display buttons, labels, and other various input controls.
+	 * commonly used to display buttons, texts, and other various input controls.
 	 * <h3>Overview</h3>
 	 * The ToolHeader control is based on {@link sap.m.OverflowToolbar}. It contains clearly structured menus of commands that are available across the various apps within the same tool layout.
 	 * <h3>Usage</h3>
 	 * <ul>
+	 * <li>This control is specialized for administrative applications. For other types of applications use: {@link sap.m.Shell}</li>
 	 * <li>If an app implements side navigation in addition to the tool header menu, the menu icon must be the first item on the left-hand side of the tool header.</li>
 	 * <li>The app menu and the side navigation must not have any dependencies and must work independently.</li>
 	 * </ul>
+	 * <h4>Horizon theme specifics</h4>
+	 * Only the following controls are supported: sap.m.Button, sap.m.Image, sap.m.Title, sap.m.Text, sap.m.SearchField, sap.m.Avatar.
 	 * <h4>Fiori 3 theme specifics</h4>
 	 * In Fiori 3 Default theme the ToolHeader is with dark design unlike most of the other controls. This defines the usage of limited controls inside it, which will result in good design combination.<br/>
 	 * The ToolHeader stylizes the contained controls with the Shell color parameters, to match the dark design requirement. However, that's not a dark theme.<br/><br/>
@@ -120,13 +123,12 @@ sap.ui.define([
 	* @implements sap.tnt.IToolHeader
 	*
 	* @author SAP SE
-	* @version 1.114.2
+	* @version 1.114.4
 	*
 	* @constructor
 	* @public
 	* @since 1.34
 	* @alias sap.tnt.ToolHeader
-	* @see {@link fiori:https://experience.sap.com/fiori-design-web/tool-header/ Tool Header}
 	*/
 	var ToolHeader = OverflowToolbar.extend("sap.tnt.ToolHeader", /** @lends sap.tnt.ToolHeader.prototype */ {
 		metadata: {

package/src/sap/tnt/ToolHeaderUtilitySeparator.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.114.2
+	 * @version 1.114.4
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/ToolPage.js

@@ -7,12 +7,14 @@
 // Provides control sap.t.ToolPage.
 sap.ui.define([
 	"./library",
+	"sap/m/library",
 	"sap/ui/base/ManagedObjectObserver",
 	"sap/ui/core/Control",
 	"sap/ui/Device",
 	"sap/ui/core/ResizeHandler",
 	"./ToolPageRenderer"
 ], function (library,
+			 mLibrary,
 			 ManagedObjectObserver,
 			 Control,
 			 Device,
@@ -20,11 +22,14 @@ sap.ui.define([
 			 ToolPageRenderer) {
 	"use strict";
 
+	// shortcut for sap.m.PageBackgroundDesign
+	var PageBackgroundDesign = mLibrary.PageBackgroundDesign;
+
 	/**
 	 * Constructor for a new ToolPage.
 	 *
 	 * @param {string} [sId] ID for the new control, generated automatically if no id is given
- * @param {object} [mSettings] Initial settings for the new control
+	 * @param {object} [mSettings] Initial settings for the new control
 	 *
 	 * @class
 	 * The ToolPage is a layout control, used to create a basic tools app that has a header, side navigation and contents area.
@@ -36,7 +41,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.114.2
+	 * @version 1.114.4
 	 *
 	 * @constructor
 	 * @public
@@ -51,7 +56,18 @@ sap.ui.define([
 				 * Indicates if the side menu is expanded.
 				 * Overrides the <code>expanded</code> property of the <code>sideContent</code> aggregation.
 				 */
-				sideExpanded: {type: "boolean", group: "Misc", defaultValue: true}
+				sideExpanded: {type: "boolean", group: "Misc", defaultValue: true},
+
+				/**
+				 * Specifies the content background design.
+				 * @public
+				 * @since 1.115
+				 */
+				contentBackgroundDesign: {
+					type: "sap.m.PageBackgroundDesign",
+					group: "Appearance",
+					defaultValue: PageBackgroundDesign.Standard
+				}
 			},
 			aggregations: {
 				/**

package/src/sap/tnt/ToolPageRenderer.js

@@ -41,9 +41,13 @@ sap.ui.define([
 
 		if (oHeader || oSubHeader) {
 			oRM.openStart("div")
-				.class("sapTntToolPageHeaderWrapper")
-				.openEnd();
+				.class("sapTntToolPageHeaderWrapper");
+
+			if (oHeader && oSubHeader) {
+				oRM.class("sapTntToolPageHeaderWithSubHeaderWrapper");
+			}
 
+			oRM.openEnd();
 			oRM.openStart("header").openEnd();
 		}
 
@@ -123,7 +127,10 @@ sap.ui.define([
 			return;
 		}
 
-		oRM.openStart("div", oControl.getId() + "-main").class("sapTntToolPageMain").openEnd();
+		oRM.openStart("div", oControl.getId() + "-main")
+			.class("sapTntToolPageMain")
+			.class("sapTntToolPageMainBackground-" + oControl.getContentBackgroundDesign())
+			.openEnd();
 
 			oRM.openStart("div").class("sapTntToolPageMainContent").openEnd();
 

package/src/sap/tnt/library.js

@@ -17,13 +17,13 @@ sap.ui.define(["sap/ui/core/library", "sap/m/library"],
 	 * @namespace
 	 * @alias sap.tnt
 	 * @author SAP SE
-	 * @version 1.114.2
+	 * @version 1.114.4
 	 * @since 1.36
 	 * @public
 	 */
 	var thisLib = sap.ui.getCore().initLibrary({
 		name : "sap.tnt",
-		version: "1.114.2",
+		version: "1.114.4",
 		dependencies : ["sap.ui.core", "sap.m"],
 		designtime: "sap/tnt/designtime/library.designtime",
 		types: [

package/src/sap/tnt/themes/base/NavigationList.less

@@ -8,18 +8,57 @@
 @_sap_tnt_NavigationList_IconFontSize: 1rem;
 @_sap_tnt_NavigationList_ExpandIconColor: @sapUiContentIconColor;
 @_sap_tnt_NavigationList_ItemHeight: 3rem;
+@_sap_tnt_NavigationList_ItemBorder: none;
+@_sap_tnt_NavigationList_LastItemBorder: none;
+@_sap_tnt_NavigationList_HoverItemBorder: none;
+@_sap_tnt_NavigationList_ItemBorderRadius: 0;
+@_sap_tnt_NavigationList_ItemBottomMargin: 0;
+@_sap_tnt_NavigationList_ItemBottomMarginCompact: 0;
+@_sap_tnt_NavigationList_ItemTransition: none;
 @_sap_tnt_NavigationList_NoIconsGroupPadding: 1rem;
 @_sap_tnt_NavigationList_NoIconsNestedItemPadding: 1rem;
-@_sap_tnt_NavigationList_ItemFocusBorder: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+@_sap_tnt_NavigationList_ItemFocusBorderOffset: 1px;
 @_sap_tnt_NavigationList_SelectedItemBorderColor: @sapUiListSelectionBorderColor;
+@_sap_tnt_NavigationList_SelectedItemBorder: 1px solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
+@_sap_tnt_NavigationList_Collapsed_SelectedItemBorder: 1px solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
 @_sap_tnt_NavigationList_Collapsed_SelectedGroupBorderColor: @_sap_tnt_NavigationList_SelectedItemBorderColor;
 @_sap_tnt_NavigationList_Collapsed_GroupBorderColor: @sapUiListBorderColor;
+@_sap_tnt_NavigationList_GroupIconWidth: @_sap_tnt_NavigationList_CollapsedWidth;
+@_sap_tnt_NavigationList_GroupBorder: 1px solid @sapUiListBorderColor;
 @_sap_tnt_NavigationList_GroupBottomBorderColor: @sapUiListBorderColor;
+@_sap_tnt_NavigationList_GroupTextWeight: unset;
+@_sap_tnt_NavigationList_GroupBottomMarginInPopup: 0;
+@_sap_tnt_NavigationList_Padding: 0;
+@_sap_tnt_NavigationList_PaddingCompact: 0;
+@_sap_tnt_NavigationList_ParentPopupPadding: 0;
+@_sap_tnt_NavigationList_ParentPopupBorderRadius: @sapUiPopoverBorderCornerRadius;
+@_sap_tnt_NavigationList_PopupItemPadding: 0 1rem;
+@_sap_tnt_NavigationList_PopupIconWidth: 1rem;
+@_sap_tnt_NavigationList_PopupBoxShadow: @sapUiContentShadow2;
+@_sap_tnt_NavigationList_PopupArrowBoxShadow: @sapUiContentShadow2;
+@_sap_tnt_NavigationList_PopupTitleTextSize: @sapMFontMediumSize;
+@_sap_tnt_NavigationList_PopupTitleLineHeight: normal;
+@_sap_tnt_NavigationList_SelectionIndicatorDisplay: none;
 
 .sapTntNavLI {
 	margin: 0;
-	padding: 0;
+	padding: @_sap_tnt_NavigationList_Padding;
 	list-style: none;
+	box-sizing: border-box;
+	overflow: hidden auto;
+}
+
+.sapTntNavLI.sapTntNavLICollapsed {
+	overflow: visible hidden;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.sapTnTNavLIOverflow {
+	flex: 1;
+	display: flex;
+	flex-direction: column-reverse;
 }
 
 .sapTntNavLI ul {
@@ -31,10 +70,11 @@
 .sapTntNavLIItem {
 	width : 100%;
 	height: @_sap_tnt_NavigationList_ItemHeight;
-
 	box-sizing: border-box;
 	cursor: pointer;
 	background-color: @sapUiListBackground;
+	border-radius: @_sap_tnt_NavigationList_ItemBorderRadius;
+	transition: @_sap_tnt_NavigationList_ItemTransition;
 
 	span {
 		cursor: pointer;
@@ -73,17 +113,42 @@
 	}
 }
 
+.sapTntNavLIGroupItem {
+	border-bottom: @_sap_tnt_NavigationList_ItemBorder;
+
+	&:hover,
+	&:active,
+	.sapTntNavLIPopover &:last-child:hover,
+	.sapTntNavLIPopover &:last-child:active {
+		border-bottom: @_sap_tnt_NavigationList_HoverItemBorder;
+	}
+}
+
+.sapTntNavLIPopover .sapTntNavLIGroupItem:last-child {
+	border-bottom: @_sap_tnt_NavigationList_LastItemBorder;
+}
+
 .sapTntNavLIText {
 	flex: 1;
 	min-width: 0;
 }
 
+.sapTntNavLIPopover .sapTntNavLIPopup.sapTntNavLI {
+	padding: @_sap_tnt_NavigationList_ParentPopupPadding;
+
+	.sapTntNavLIItem.sapTntNavLIGroup {
+		margin-bottom: @_sap_tnt_NavigationList_GroupBottomMarginInPopup;
+	}
+}
+
 .sapTntNavLIPopup .sapTntNavLIGroupItem .sapMText {
-	padding: 0 1rem;
+	padding: @_sap_tnt_NavigationList_PopupItemPadding;
 }
 
 .sapTntNavLIPopup .sapTntNavLIGroup .sapMText {
 	margin: 0 1rem 0 0;
+	font-size: @_sap_tnt_NavigationList_PopupTitleTextSize;
+	line-height: @_sap_tnt_NavigationList_PopupTitleLineHeight;
 }
 
 .sapTntNavLI {
@@ -101,24 +166,28 @@
 	}
 }
 
+.sapTnTNavLIHiddenItem {
+	display: none;
+}
+
 .sapTntNavLIPopup {
 	span.sapTntNavLIGroupIcon {
-		width: 1rem;
+		width: @_sap_tnt_NavigationList_PopupIconWidth;
+		min-width: @_sap_tnt_NavigationList_PopupIconWidth;
 		visibility: hidden;
-		min-width: 1rem;
 	}
 
 	img.sapTntNavLIGroupIcon {
-		width: 1rem;
+		width: @_sap_tnt_NavigationList_PopupIconWidth;
+		min-width: @_sap_tnt_NavigationList_PopupIconWidth;
 		visibility: hidden;
-		min-width: 1rem;
 		padding: 0;
 	}
 }
 
 .sapTntNavLI .sapTntNavLIExpandIcon {
 	min-width: 2rem;
-	padding: 0.75rem 0;
+	// padding: 0.75rem 0;
 	font-size: 0.875rem;
 
 	pointer-events: all;
@@ -143,7 +212,11 @@
 }
 
 .sapTntNavLIGroup {
-	border-bottom: 1px solid @sapUiListBorderColor;
+	border-bottom: @_sap_tnt_NavigationList_GroupBorder;
+
+	.sapTntNavLIText {
+		font-weight: @_sap_tnt_NavigationList_GroupTextWeight;
+	}
 }
 
 .sapTntNavLI:not(.sapTntNavLIPopup) .sapTntNavLIGroup[aria-expanded="true"] {
@@ -158,6 +231,7 @@
 	background-color: @sapUiListHoverBackground;
 }
 
+.sapTntNavLIItem:not(.sapTntNavLIItemDisabled).sapTntNavLIActive,
 .sapTntNavLI .sapTntNavLIGroup.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):active,
 .sapTntNavLI .sapTntNavLIGroupItem.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):active{
 	background-color: @sapUiListActiveBackground;
@@ -171,12 +245,38 @@
 	}
 }
 
+.sapTntNavLISelectionIndicator {
+	display: @_sap_tnt_NavigationList_SelectionIndicatorDisplay;
+	opacity: 0;
+	font-size: 0.5rem;
+	color: @sapUiListSelectionBorderColor;
+}
 
 .sapTntNavLIItemSelected.sapTntNavLIItem,
 .sapTntNavLIItemSelected .sapTntNavLIGroup,
 .sapTntNavLIItemSelected.sapTntNavLIGroupItem,
 .sapTntNavLIItemSelected.sapTntNavLIGroupItem.sapTntNavLIItem {
 	background-color: @sapUiListSelectionBackgroundColor;
+
+	.sapTntNavLISelectionIndicator {
+		opacity: 1;
+	}
+}
+
+.sapTntNavLIGroup.sapTntNavLIItemWithExpander {
+	.sapTntNavLISelectionIndicator {
+		margin: 0 0 0 0.5rem;
+	}
+}
+
+.sapTntNavLIGroup:not(.sapTntNavLIItemWithExpander) {
+	.sapTntNavLISelectionIndicator {
+		margin: 0 0.5rem;
+	}
+}
+
+.sapTntNavLIGroupItem .sapTntNavLISelectionIndicator {
+	margin: 0 0.5rem;
 }
 
 .sapTntNavLIItemSelected .sapTntNavLIItem:hover,
@@ -185,16 +285,36 @@
 	background-color: @sapUiListSelectionHoverBackground;
 }
 
-.sapTntNavLI:not(.sapTntNavLIPopup) .sapTntNavLIGroupItem.sapTntNavLIItem:last-child {
-	border-bottom: 1px solid @sapUiListBorderColor;
+.sapTntNavLI:not(.sapTntNavLIPopup) {
+	.sapTntNavLIGroupItem.sapTntNavLIItem:last-child {
+		border-bottom: @_sap_tnt_NavigationList_GroupBorder;
+
+		&.sapTntNavLIItemSelected {
+			border-color: @sapUiListSelectionBorderColor;
+		}
+	}
 
-	&.sapTntNavLIItemSelected {
-		border-color: @sapUiListSelectionBorderColor;
+	li:not(:last-of-type) .sapTntNavLIItem {
+		margin-bottom: @_sap_tnt_NavigationList_ItemBottomMargin;
 	}
 }
 
-.sapTntNavLIItemSelected:not(.sapTntNavLIItemDisabled) {
-	border-bottom: 1px solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
+.sapTntNavLI:not(.sapTntNavLICollapsed) .sapTntNavLIItemSelected:not(.sapTntNavLIItemDisabled) {
+	border-bottom: @_sap_tnt_NavigationList_SelectedItemBorder;
+}
+
+.sapTntNavLICollapsed .sapTntNavLIItemSelected:not(.sapTntNavLIItemDisabled) {
+	border-bottom: none;
+
+	// create the selection indicator with pseudo element, in order to avoid it having border-radius
+	&::after {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		border-bottom: @_sap_tnt_NavigationList_Collapsed_SelectedItemBorder;
+	}
 }
 
 .sapTntNavLICollapsed,
@@ -211,26 +331,27 @@
 
 .sapTntNavLI li:focus .sapTntNavLIItem::before,
 .sapTntNavLIItem:focus::before {
-	border: @_sap_tnt_NavigationList_ItemFocusBorder;
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	position: absolute;
 	content: " ";
-	top: 1px;
-	right: 1px;
-	bottom: 1px;
-	left: 1px;
+	top: @_sap_tnt_NavigationList_ItemFocusBorderOffset;
+	right: @_sap_tnt_NavigationList_ItemFocusBorderOffset;
+	bottom: @_sap_tnt_NavigationList_ItemFocusBorderOffset;
+	left: @_sap_tnt_NavigationList_ItemFocusBorderOffset;
 	z-index: 2;
 	pointer-events: none;
+	border-radius: @_sap_tnt_NavigationList_ItemBorderRadius;
 }
 
 // NavigationList with icons
 .sapTntNavLI:not(.sapTntNavLINoIcons) {
 
 	span.sapTntNavLIGroupIcon {
-		width: @_sap_tnt_NavigationList_CollapsedWidth;
+		width: @_sap_tnt_NavigationList_GroupIconWidth;
 	}
 
 	.sapTntNavLIGroupItem .sapMText {
-		padding-left: @_sap_tnt_NavigationList_CollapsedWidth;
+		padding-left: @_sap_tnt_NavigationList_GroupIconWidth;
 	}
 }
 
@@ -247,9 +368,28 @@
 	}
 }
 
+.sapTntNavLIPopover {
+	&.sapMPopover {
+		box-shadow: @_sap_tnt_NavigationList_PopupBoxShadow;
+		border-radius: @_sap_tnt_NavigationList_ParentPopupBorderRadius;
+
+		.sapMPopoverCont {
+			border-radius: @_sap_tnt_NavigationList_ParentPopupBorderRadius;
+		}
+	}
+
+	.sapMPopoverArr:after {
+		box-shadow: @_sap_tnt_NavigationList_PopupArrowBoxShadow;
+	}
+}
+
 /* Compact size */
 .sapUiSizeCompact {
 
+	.sapTntNavLI {
+		padding: @_sap_tnt_NavigationList_PaddingCompact;
+	}
+
 	.sapTntNavLIItem {
 		height: 2rem;
 	}
@@ -279,7 +419,13 @@
 	.sapTntNavLI:not(.sapTntNavLINoIcons) {
 
 		span.sapTntNavLIGroupIcon {
-			width: @_sap_tnt_NavigationList_CollapsedWidth;
+			width: @_sap_tnt_NavigationList_GroupIconWidth;
+		}
+	}
+
+	.sapTntNavLI:not(.sapTntNavLIPopup) {
+		li:not(:last-of-type) .sapTntNavLIItem {
+			margin-bottom: @_sap_tnt_NavigationList_ItemBottomMarginCompact;
 		}
 	}
 }