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

OpenUI5 UI Library sap.tnt

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

@_sap_tnt_SideNavigation_Width: 15rem;
@_sap_tnt_SideNavigation_CollapsedWidth: 3rem;
@_sap_tnt_SideNavigation_NavigationSeparatorMargin: 0.25rem 0.875rem 0.25rem 0.875rem;
@_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed: 0.25rem 0.5rem 0.25rem 0.5rem;
@_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor: var(--sapGroup_ContentBorderColor);
@_sap_tnt_SideNavigation_NavigationSeparatorRadius: unset;
@_sap_tnt_SideNavigation_NavigationSeparatorHeight: 1px;
@_sap_tnt_SideNavigation_TriangleColor: var(--sapContent_IconColor);
@_sap_tnt_SideNavigation_BorderRight: 1px solid var(--sapGroup_ContentBorderColor);
@_sap_tnt_SideNavigation_BoxShadow: none;
@_sap_tnt_SideNavigation_TriangleDisplay: block;

.sapTntSideNavigation {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background: var(--sapList_Background);
	border-right: @_sap_tnt_SideNavigation_BorderRight;
	min-width: @_sap_tnt_SideNavigation_Width;
	box-shadow: @_sap_tnt_SideNavigation_BoxShadow;
	max-width: 100%;
	width: @_sap_tnt_SideNavigation_Width;
	transition: width 0.3s, min-width 0.3s;
	height: 100%;
}

.sapTntSideNavigationDesignPlain {
	border-right: none;
	box-shadow: none;
}

html[data-sap-ui-animation='off'] .sapTntSideNavigation {
	transition: none;
}

.sapTntToolPage-LayoutS .sapTntSideNavigation {
	width: ~"100% !important";
}


.sapTntSideNavigation.sapTntSideNavigationNotExpandedWidth {
	min-width: @_sap_tnt_SideNavigation_CollapsedWidth;
	width: @_sap_tnt_SideNavigation_CollapsedWidth;
}

.sapTntSideNavigationNotExpanded {

	.sapTntSideNavigationSeparator {
		margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
	}

	.sapTntNLINotExpandedTriangle:not(.sapTntNLIDisabled):after {
		display: @_sap_tnt_SideNavigation_TriangleDisplay;
		content: '';
		width: 0;
		height: 0;
		border-left: 0.375rem solid transparent;
		border-bottom: 0.375rem solid @_sap_tnt_SideNavigation_TriangleColor;
		position:absolute;
		right: 0.1875rem;
		bottom:0.125rem;
	}
}

.sapTntSideNavigationFlexible {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	position: relative;
	box-sizing: border-box;
	outline: none;
}

.sapTntSideNavigationFlexibleContent {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.sapTntSideNavigationSeparator {
	margin: @_sap_tnt_SideNavigation_NavigationSeparatorMargin;
	height: @_sap_tnt_SideNavigation_NavigationSeparatorHeight;
	min-height: @_sap_tnt_SideNavigation_NavigationSeparatorHeight;
	background-color: @_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor;
	border-radius: @_sap_tnt_SideNavigation_NavigationSeparatorRadius;
}

.sapTntSideNavigationFixed {
	position: relative;
}

/* Compact size */
.sapUiSizeCompact {

	.sapTntSideNavigationNotExpanded {

		.sapTntSideNavigationSeparator {
			margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
		}
	}

	.sapTntSideNavigationSeparator {
		margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
	}
}