@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);

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

.sapMBarLeft.sapMBarContainer.sapMBarEmpty,
.sapMBarMiddle.sapMBarContainer.sapMBarEmpty,
.sapMBarRight.sapMBarContainer.sapMBarEmpty {
	padding: 0;
}

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

.sapMBarRight {
	text-align: end;
	right: 0px;
}

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

.sapMBarLeft > .sapMBarChild,
.sapMBarRight > .sapMBarChild {
	flex-shrink: 0;
}

.sapMBarLeft > .sapMBarChild.sapMPI,
.sapMBarRight > .sapMBarChild.sapMPI {
	flex-shrink: 1;
}

.sapMBarLeft {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
}

.sapMBarPH {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sapMBarRight {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
}

/* Compact size */
.sapUiSizeCompact {

	.sapMBar {
		height: 2rem;
		line-height: 2rem;
	}

	.sapMBarLeft,
	.sapMBarRight,
	.sapMBarPH {
		height: 2rem;
		line-height: 2rem;
	}
}

.sapMBarRight > .sapMBarChild:not(.sapMTB) {
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
}

.sapUiSizeCompact {

	.sapMBarRight > .sapMBarChild:not(.sapMTB) {
		margin-bottom: 0;
		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;

	.sapMObjectAttributeDiv .sapMText {
		vertical-align: text-top;
	}
}

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

.sapMIBar > .sapMBarLeft > .sapMBarChild.sapMGenericTag:last-child {
	margin-right: 0.0625rem;
}

/* Bar Title Alignment */
.sapMBarTitleAlignStart .sapMBarPH {
	justify-content: flex-start;
}

html[data-sap-ui-browser^="ff"].sap-desktop .sapMBarTitleAlignStart .sapMBarPH {
	justify-content: start;
}