@openui5/sap.tnt/src/sap/tnt/themes/base/NavigationList.less

OpenUI5 UI Library sap.tnt

/* ======================================= */
/* CSS for control sap.tnt/NavigationList  */
/* Base theme                              */
/* ======================================= */

@_sap_tnt_NavigationList_CollapsedWidth: 3rem;
@_sap_tnt_NavigationList_IconColor: @sapUiContentIconColor;
@_sap_tnt_NavigationList_IconFontSize: 1rem;
@_sap_tnt_NavigationList_ExpandIconColor: @sapUiContentIconColor;
@_sap_tnt_NavigationList_ItemHeight: 3rem;
@_sap_tnt_NavigationList_NoIconsGroupPadding: 1rem;
@_sap_tnt_NavigationList_NoIconsNestedItemPadding: 1rem;
@_sap_tnt_NavigationList_ItemFocusBorder: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
@_sap_tnt_NavigationList_SelectedItemBorderColor: @sapUiListSelectionBorderColor;
@_sap_tnt_NavigationList_Collapsed_SelectedGroupBorderColor: @_sap_tnt_NavigationList_SelectedItemBorderColor;
@_sap_tnt_NavigationList_Collapsed_GroupBorderColor: @sapUiListBorderColor;
@_sap_tnt_NavigationList_GroupBottomBorderColor: @sapUiListBorderColor;

.sapTntNavLI {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sapTntNavLI ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sapTntNavLIItem {
	width : 100%;
	height: @_sap_tnt_NavigationList_ItemHeight;

	box-sizing: border-box;
	cursor: pointer;
	background-color: @sapUiListBackground;

	span {
		cursor: pointer;
	}

	&.sapTntNavLIItemDisabled {
		cursor: auto;
	  	opacity: @sapContent_DisabledOpacity;

		span {
			cursor: auto;
		}
	}

	.sapMText {
		color: @sapUiListTextColor;
	}

	.sapTntNavLIGroupIcon {
		color: @_sap_tnt_NavigationList_IconColor;
		font-size: @_sap_tnt_NavigationList_IconFontSize;
	}

	.sapTntNavLIExpandIcon {
		color: @_sap_tnt_NavigationList_ExpandIconColor;
	}

	a {
		width : 100%;
		height: 100%;
		text-decoration: none;
		outline: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.sapTntNavLIText {
	flex: 1;
	min-width: 0;
}

.sapTntNavLIPopup .sapTntNavLIGroupItem .sapMText {
	padding: 0 1rem;
}

.sapTntNavLIPopup .sapTntNavLIGroup .sapMText {
	margin: 0 1rem 0 0;
}

.sapTntNavLI {
	span.sapTntNavLIGroupIcon {
		outline: none;
		-webkit-user-select: none; /* Chrome all / Safari all */
		-moz-user-select: none; /* Firefox all */
		user-select: none;
	}

	img.sapTntNavLIGroupIcon {
		height: 1.125rem;
		width: 1.125rem;
		padding: 0.6875rem 0.9375rem;
	}
}

.sapTntNavLIPopup {
	span.sapTntNavLIGroupIcon {
		width: 1rem;
		visibility: hidden;
		min-width: 1rem;
	}

	img.sapTntNavLIGroupIcon {
		width: 1rem;
		visibility: hidden;
		min-width: 1rem;
		padding: 0;
	}
}

.sapTntNavLI .sapTntNavLIExpandIcon {
	min-width: 2rem;
	padding: 0.75rem 0;
	font-size: 0.875rem;

	pointer-events: all;

	outline: none;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	user-select: none;
}

.sapTntNavLIHiddenGroupItems {
	display: none;
}

.sapTntNavLICollapsed {
	width: @_sap_tnt_NavigationList_CollapsedWidth;
}

.sapTntNavLI li,
.sapTntNavLIItem {
	position: relative;
}

.sapTntNavLIGroup {
	border-bottom: 1px solid @sapUiListBorderColor;
}

.sapTntNavLI:not(.sapTntNavLIPopup) .sapTntNavLIGroup[aria-expanded="true"] {
	border-color: @_sap_tnt_NavigationList_GroupBottomBorderColor;
}

.sapTntNavLICollapsed .sapTntNavLIGroup {
	border-color: @_sap_tnt_NavigationList_Collapsed_GroupBorderColor;
}

.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):hover {
	background-color: @sapUiListHoverBackground;
}

.sapTntNavLI .sapTntNavLIGroup.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):active,
.sapTntNavLI .sapTntNavLIGroupItem.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):active{
	background-color: @sapUiListActiveBackground;

	.sapMText {
		color: @sapUiListActiveTextColor;
	}

	.sapUiIcon {
		color: @sapUiListActiveTextColor;
	}
}


.sapTntNavLIItemSelected.sapTntNavLIItem,
.sapTntNavLIItemSelected .sapTntNavLIGroup,
.sapTntNavLIItemSelected.sapTntNavLIGroupItem {
	background-color: @sapUiListSelectionBackgroundColor;
}

.sapTntNavLIItemSelected .sapTntNavLIItem:hover,
.sapTntNavLIItemSelected.sapTntNavLIItem.sapTntNavLIGroup:hover,
.sapTntNavLIItemSelected.sapTntNavLIGroupItem.sapTntNavLIGroupItem:hover {
	background-color: @sapUiListSelectionHoverBackground;
}

.sapTntNavLI:not(.sapTntNavLIPopup) .sapTntNavLIGroupItem.sapTntNavLIItem:last-child {
	border-bottom: 1px solid @sapUiListBorderColor;

	&.sapTntNavLIItemSelected {
		border-color: @sapUiListSelectionBorderColor;
	}
}

.sapTntNavLIItemSelected:not(.sapTntNavLIItemDisabled) {
	border-bottom: 1px solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
}

.sapTntNavLICollapsed,
.sapTntNavLIPopup {
	.sapTntNavLIGroup.sapTntNavLIItemSelected {
		border-color: @_sap_tnt_NavigationList_Collapsed_SelectedGroupBorderColor;
	}
}

.sapTntNavLI li:focus,
.sapTntNavLIItem:focus {
	outline: none;
}

.sapTntNavLI li:focus .sapTntNavLIItem::before,
.sapTntNavLIItem:focus::before {
	border: @_sap_tnt_NavigationList_ItemFocusBorder;
	position: absolute;
	content: " ";
	top: 1px;
	right: 1px;
	bottom: 1px;
	left: 1px;
	z-index: 2;
	pointer-events: none;
}

// NavigationList with icons
.sapTntNavLI:not(.sapTntNavLINoIcons) {

	span.sapTntNavLIGroupIcon {
		width: @_sap_tnt_NavigationList_CollapsedWidth;
	}

	.sapTntNavLIGroupItem .sapMText {
		padding-left: @_sap_tnt_NavigationList_CollapsedWidth;
	}
}

// NavigationList without icons
.sapTntNavLI.sapTntNavLINoIcons:not(.sapTntNavLIPopup) {

	.sapTntNavLIGroup {
		padding-left: @_sap_tnt_NavigationList_NoIconsGroupPadding;
	}

	// nested items
	.sapTntNavLIGroupItem .sapMText {
		padding-left: @_sap_tnt_NavigationList_NoIconsNestedItemPadding;
	}
}

/* Compact size */
.sapUiSizeCompact {

	.sapTntNavLIItem {
		height: 2rem;
	}

	.sapTntNavLIPopup .sapTntNavLIGroupItem .sapMText {
		padding: 0 0.5rem;
	}

	.sapTntNavLIPopup .sapTntNavLIGroup .sapMText {
		margin: 0 0.5rem 0 0;
	}

	.sapTntNavLI.sapTntNavLIPopup span.sapTntNavLIGroupIcon {
		padding: 0.5rem 0;
	}

	.sapTntNavLI img.sapTntNavLIGroupIcon {
	  padding: 0.5rem 0.4375rem;
	}

	.sapTntNavLIPopup span.sapTntNavLIGroupIcon {
		width: 0.5rem;
	  	min-width: 0.5rem;
	}

	// NavigationList with icons
	.sapTntNavLI:not(.sapTntNavLINoIcons) {

		span.sapTntNavLIGroupIcon {
			width: @_sap_tnt_NavigationList_CollapsedWidth;
		}
	}
}