@openui5/sap.tnt
Version:
OpenUI5 UI Library sap.tnt
113 lines (95 loc) • 3.19 kB
text/less
/* ======================================= */
/* 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;
}
}