@openui5/sap.tnt/src/sap/tnt/themes/sap_hcb/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: @sapUiGroupContentBorderColor;
@_sap_tnt_SideNavigation_NavigationSeparatorRadius: unset;
@_sap_tnt_SideNavigation_NavigationSeparatorHeight: 1px;
@_sap_tnt_SideNavigation_TriangleColor: @sapUiContentIconColor;
@_sap_tnt_SideNavigation_BorderRight: 1px solid @sapUiGroupContentBorderColor;
@_sap_tnt_SideNavigation_BorderRadius: 0;
@_sap_tnt_SideNavigation_PhoneBorderRadius: 0;
@_sap_tnt_SideNavigation_BoxShadow: none;
@_sap_tnt_SideNavigation_TriangleDisplay: block;
@_sap_tnt_SideNavigation_PhoneWidth: @_sap_tnt_SideNavigation_Width;

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

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

html.sap-phone,
html.sap-tablet:not(html.sap-combi) {
	.sapTntSideNavigation {
		border-radius: @_sap_tnt_SideNavigation_PhoneBorderRadius;
	}
}

html.sap-phone {
	.sapTntSideNavigation {
		width: @_sap_tnt_SideNavigation_PhoneWidth;
	}
}

.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;
}

html.sap-desktop:not(.sapUiNativeScrollbars) .sapTntSideNavigation ::-webkit-scrollbar {
	border-radius: @_sap_tnt_SideNavigation_BorderRadius;
}

/*  Compact size
   ========================================================================== */

.sapUiSizeCompact {
	.sapTntSideNavigationNotExpanded {
		.sapTntSideNavigationSeparator {
			margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
		}
	}

	.sapTntSideNavigationSeparator {
		margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
	}
}