@openui5/sap.m/src/sap/m/themes/base/Bar.less

OpenUI5 UI Library sap.m

/* ========================== */
/* CSS for control sap.m/Bar  */
/* Base theme                 */
/* ========================== */

@_sap_m_Bar_AppHeight: 3333px; // Ux decision: never show the header, so make this value large enough even for zoom-out cases
@_sap_m_Bar_HeaderHeight: 68px; // should be 4.25rem
@_sap_m_Bar_MinHeightForHeader: (@_sap_m_Bar_AppHeight + @_sap_m_Bar_HeaderHeight);

.sapMBarShadow(@color) {
	box-shadow: inset 0 -0.0625rem @color;
}

.sapMBar {
	display: block;
	width: 100%;
	position: relative;
	height: 3rem;
	line-height: 3rem;
	color: @sapUiPageHeaderTextColor;
	background-color: @sapUiPageHeaderBackground;
	/* 1px down white shadow with 50% opacity */
	text-shadow: @sapUiShadowText;
	/* 1px inside border line at the bottom of a bar */
	.sapMBarShadow(@sapUiPageHeaderBorderColor);
}

.sapMBarContainer {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* fix for ff */
html[data-sap-ui-browser^="ff"].sap-desktop {
	.sapMBarContainer {
		display: flex;
		align-items: center;
	}

	.sapMBarPH {
		justify-content: center;
	}

	.sapMBarRight {
		justify-content: flex-end;
	}

	.sapMBarContainer > .sapMBarChild {
		flex : none;
	}

	.sapMBarContainer > .sapMButton,
	.sapMBarContainer > .sapMText,
	.sapMBarContainer > .sapMLabel {
		flex : initial;
	}
}


.sapMBarLeft,
.sapMBarRight {
	position: absolute;
	height: 100%;
}

.sapMBarLeft {
	left: 0px;
}

/* IE / Edge does not support "text-align: end" */
/* use "right" and "left" instead        */
.sapMBarRight {
	text-align: right;
	right: 0px;
}

.sapMBarRight.sapMRTL {
	text-align: left;
}

.sapMBarPH {
	display: inline-block;
	height: 3rem;
	vertical-align: top;
}

.sapMBarMiddle {
	text-align: center;
	width: 100%;
	height: 0px;
	top: 0px;
	left: 0px;
}

.sapMBar .sapMLabel,
.sapMBar .sapMLnk {
	display: inline;
}

.sapMBarFlexBoxWidth100 {
	width: 100%;
}

/* select control in a bar */
.sapMBar .sapMSlt {
	vertical-align: top;
}

.sapMBar:active {
	text-shadow: none;
}

/* this "sapMBrandingBar-CTX" CSS class can be set by any container control that comes with its own branding bar, so any pages inside will not display their branding bar */
.sapMBrandingBar-CTX .sapMBar.sapMPageHeader:before,
/* since Shell may run without sap.m and we can run without the shell this selector is currently in our lib */
.sapUiUfdShell .sapMBar.sapMPageHeader:before {
	display: none;
}

@media (min-height: @_sap_m_Bar_MinHeightForHeader) {
	/* Shell draws its own branding bar */
	.sap-desktop .sapMShell .sapMBar.sapMPageHeader:before {
		display: none;
	}
}

.sapMBar .sapMBarLeft > .sapMImg,
.sapMBar .sapMBarPH > .sapMImg,
.sapMBar .sapMBarRight > .sapMImg {
	vertical-align: middle;
}

/* Compact size */
.sapUiSizeCompact{
	.sapMBar {
		height: 2rem;
	}
	.sapMBarLeft, .sapMBarRight, .sapMBarPH {
		height: 2rem;
		line-height: 2rem;
	}
}

/*don't use margins on the childs to keep the calculation of the bar correct*/
.sapMBarRight,
.sapMBarRight > .sapMBarChild:last-child {
	margin-right: 0;
}

.sapMBarLeft,
.sapMIBar.sapMBar .sapMBarChild:first-child {
	margin-left: 0;
}

/*To replace margins, add padding to the containers*/
.sapMBarRight,
.sapMBarLeft,
.sapMBarPH {
	box-sizing: border-box;
}

.sapMBarRight,
.sapMBarPH {
	padding-right: 0.25rem;
}

.sapMBarLeft,
.sapMBarPH {
	padding-left: 0.25rem;
}

.sapMIBar > .sapMBarLeft > .sapMBarChild:last-child,
.sapMIBar .sapMBarPH > .sapMBarChild:last-child {
	margin-right: 0;
}