@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_NavigationSeparatorBackgroundColor: @sapUiGroupContentBorderColor;
@_sap_tnt_SideNavigation_NavigationSeparatorHeight: 1px;

.sapTntSideNavigation {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  box-sizing: border-box;
  overflow: hidden;
  background: @sapUiListBackground;
  border-right: 1px solid @sapUiGroupContentBorderColor;
}

.sapTntSideNavigation {
  width: 15rem;
}

.sapTntSideNavigation.sapTntSideNavigationNotExpandedWidth {
  width: 3rem;
}

.sapTntSideNavigationNotExpanded {

	.sapTntNavLIText, .sapTntNavLIExpandIcon  {
		display: none;
	}
	.sapTntSideNavigationSeparator {
		margin: 0.25rem 0.5rem 0.25rem 0.5rem;
	}

	.sapTntSideNavigationFlexible {
		padding-right: 3rem;
		width: 6rem;
	}

	.sapTnTNavLINotExpandedTriangle:not(.sapTntNavLIItemDisabled):after {
		content: "";
		width: 0;
		height: 0;
		border-left: 0.375rem solid transparent;
		border-bottom: 0.375rem solid @sapUiContentIconColor;
		position:absolute;
		right: 0.1875rem;
		bottom:0.125rem;
	}
}

.sapTntSideNavigationFlexible {
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-flex-basis: 100%;
	flex-basis: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	outline: none;
}

.sapTntSideNavigationSeparator {
	margin: 0.25rem 0.875rem 0.25rem 0.875rem;
	height: @_sap_tnt_SideNavigation_NavigationSeparatorHeight;
	min-height: @_sap_tnt_SideNavigation_NavigationSeparatorHeight;
	background-color: @_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor;
}

.sapTntSideNavigationFixed {
  position: relative;
}

.sapTntSideNavigationVerticalScrolling {
  overflow-y: auto;
  overflow-x: hidden;
  height: 10rem;
}

/* Styles for layout with arrows
   ========================================================================== */

.sapTntSideNavigationScrollIcon {
  display: none;
  padding: 0.6875rem 0;
  outline: none;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  user-select: none;
  color: @sapUiContentIconColor;
}

.sapTntSideNavigationScrollIcon.sapUiIcon:focus {
  outline: none;
}

.sapTntSideNavigationScrollIconDisabled {
  cursor: auto;
}

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

.sapTntSideNavigationScrollIconDown {
  border-top: 1px solid @sapUiListBorderColor;
}

.sapTntSideNavigationScrollIcon:not(.sapTntSideNavigationScrollIconDisabled):hover {
  background-color: @sapUiListHoverBackground;
}

.sapTntSideNavigationScrollIcon:not(.sapTntSideNavigationScrollIconDisabled):active {
  background-color: @sapUiListActiveBackground;
  color: @sapUiListActiveTextColor;
}

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

.sapUiSizeCompact {

  .sapTntSideNavigationNotExpanded {

    .sapTntSideNavigationSeparator {
     	margin: 0.25rem 0.5rem 0.25rem 0.5rem;
    }
  }

  .sapTntSideNavigationSeparator {
	margin: 0.25rem 0.5rem 0.25rem 0.5rem;
  }

  .sapTntSideNavigationScrollIcon {
    padding: 0.5rem 0;
  }
}