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

OpenUI5 UI Library sap.m

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

.sapMHdrCntr {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.sapMHdrCntr.Horizontal {
	max-width: 100%;

	&.sapMHdrCntrSnapToRow {

		.sapMScrollContScroll {
			display: inline-flex;

			.sapMHdrCntrItemCntr > * {
				min-height: 100%;
			}
		}
	}
}

.sapMHdrCntr.Vertical {
	max-height: 100%;
}

/* initial condition for hide and display arrow button container*/
.sapMHdrCntrBtnCntr {
	display: none;
}

.sapMHdrCntrBtnCntr.Horizontal {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2.5rem;

	&.sapMHdrCntrLeft {
		left: 0.25rem;
	}

	&.sapMHdrCntrRight {
		right: 0.25rem;
	}
}

.sapUiSizeCompact .sapMHdrCntrBtnCntr.Horizontal {

	&.sapMHdrCntrLeft {
		left: 0;
	}

	&.sapMHdrCntrRight {
		right: 0;
	}
}

html.sap-phone .sapMHdrCntrBtnCntr.Horizontal,
html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Horizontal {
	width: 1.5rem;

	&.sapMHdrCntrLeft {
		left: 0;
	}

	&.sapMHdrCntrRight {
		right: 0;
	}
}

.sapMHdrCntrBtnCntr.Vertical {
	position: absolute;
	left: 0;
	right: 0;
	height: 2.5rem;

	&.sapMHdrCntrLeft {
		top: 0.25rem;
	}

	&.sapMHdrCntrRight {
		bottom: 0.25rem;
	}
}

html.sap-phone .sapMHdrCntrBtnCntr.Vertical,
html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Vertical {
	height: 1.5rem;

	&.sapMHdrCntrLeft {
		top: 0;
	}

	&.sapMHdrCntrRight {
		bottom: 0;
	}
}

.sapMHdrCntrBtnCntr.Horizontal > .sapMHdrCntrBtn {
	position: absolute;
	top: 50%;
	margin-top: -1.5rem;
	min-width: 1.375rem;
}

.sapUiSizeCompact .sapMHdrCntrBtnCntr.Horizontal > .sapMHdrCntrBtn {
	right: 0.25rem;
	margin-top: -1rem;
}

html.sap-phone .sapMHdrCntrBtnCntr.Horizontal > .sapMHdrCntrBtn,
html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Horizontal > .sapMHdrCntrBtn {
	margin-top: -0.6rem;
	font-size: 1rem;
}

.sapMHdrCntrBtnCntr.Vertical > .sapMHdrCntrBtn {
	position: absolute;
	height: 2.5rem;
	left: 50%;
	margin-left: -1.5rem;
	padding: 0;
}

html.sap-phone .sapMHdrCntrBtnCntr.Vertical > .sapMHdrCntrBtn,
html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Vertical > .sapMHdrCntrBtn {
	margin-left: -0.375rem;
	font-size: 1rem;
	height: 1.375rem;
}

.sapMHdrCntrBtnCntr.Vertical > .sapMHdrCntrBtn.sapMHdrCntrRight {
	bottom: 0;
}

.sapMHdrCntrCntr.Horizontal {
	white-space: nowrap;
}

.sapUiSizeCompact .sapMHrdrLeftPadding .sapMHdrCntrCntr.Horizontal {
	padding-left: 2.5rem;
}

.sapMHrdrLeftPadding .sapMHdrCntrCntr.Horizontal {
	padding-left: 3rem;
}

.sapUiSizeCompact .sapMHrdrRightPadding .sapMHdrCntrCntr.Horizontal {
	padding-right: 2.5rem;
}

.sapMHrdrRightPadding .sapMHdrCntrCntr.Horizontal {
	padding-right: 3rem;
}

html.sap-phone .sapMHrdrLeftPadding .sapMHdrCntrCntr.Horizontal,
html.sap-tablet:not(.sap-desktop) .sapMHrdrLeftPadding .sapMHdrCntrCntr.Horizontal {
	padding-left: 1.5rem;
}

html.sap-phone .sapMHrdrRightPadding .sapMHdrCntrCntr.Horizontal,
html.sap-tablet:not(.sap-desktop) .sapMHrdrRightPadding .sapMHdrCntrCntr.Horizontal {
	padding-right: 1.5rem;
}

.sapMHdrCntrCntr.Vertical {
	height: 100%;
	box-sizing: border-box;
}

.sapMHrdrTopPadding .sapMHdrCntrCntr.Vertical {
	padding-top: 3rem;
}

.sapUiSizeCompact .sapMHrdrTopPadding .sapMHdrCntrCntr.Vertical {
	padding-top: 2.5rem;
}

.sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertical {
	padding-bottom: 3rem;
}

.sapUiSizeCompact .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertical {
	padding-bottom: 2.5rem;
}

html.sap-phone .sapMHrdrTopPadding .sapMHdrCntrCntr.Vertical,
html.sap-tablet:not(.sap-desktop) .sapMHrdrTopPadding .sapMHdrCntrCntr.Vertical {
	padding-top: 1.5rem;
}

html.sap-phone .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertical,
html.sap-tablet:not(.sap-desktop) .sapMHrdrBottomPadding .sapMHdrCntrCntr.Vertical {
	padding-bottom: 1.5rem;
}

.sapMHdrCntr .sapMScrollContScroll:focus {
	outline: none;
}

.sapMHrdrCntrInner {
	border: 1px solid transparent;
	position: relative;
	vertical-align: top;
	margin: 0.0625rem;
	padding: 0 0.375rem 0 0.375rem;
	overflow: visible;
}

.sapMHdrCntrCntr.Vertical .sapMHrdrCntrInner {
	float: left;
	clear: left;
}

.sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:not(div:first-of-type) {
	margin-left: 1rem;
}

.sapMHdrCntrCntr.Vertical .sapMHrdrCntrInner:not(div:first-of-type) {
	margin-top: 1rem;
}

.sapMHrdrCntrDvdrs .sapMHrdrCntrInner:not(:first-child)::after {
	content: '';
	position: absolute;
	box-sizing: border-box;
	display: inline-block;
}

.sapMHrdrCntrDvdrs.Horizontal .sapMHrdrCntrInner::after {
	top: 0.375rem;
	bottom: 0.375rem;
	left: -0.6rem;
	border-left: 1px solid var(--sapList_BorderColor);
}

.sapMHrdrCntrDvdrs.Vertical .sapMHrdrCntrInner::after {
	left: 0.5rem;
	right: 0.5rem;
	top: -0.6rem;
	border-top: 1px solid var(--sapList_BorderColor);
}

.sapMKTileBorder {
	display: none;
}

.sapMHdrPddngRight2 {
	padding-right: 2rem;
}

.sapMHdrPddngRight0 {
	padding-right: 0;
}

.sapMHdrPddngLeft2 {
	padding-left: 2rem;
}

.sapMHdrPddngleft0 {
	padding-left: 0;
}

.sapMHdrCntrItemCntr {
	display: inline-block;
}

.sapMHdrCntrBGTransparent {
	background-color: var(--sapObjectHeader_Background);
}

.sapMHdrCntrBGSolid {
	background-color: var(--sapObjectHeader_Background);
}

.sapMHdrCntrBGTranslucent {
	background-color: var(--sapObjectHeader_Background);
}

html.sap-desktop .sapMHrdrCntrInner:focus {
  outline: none;
}
html.sap-desktop .sapMHrdrCntrInner:focus-visible {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	outline-offset: -2px;
}

@media (min-width:320px) and (max-width:599px) {

	.sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
		margin-left: 0 !important;
		padding: 0 0.5rem 0 0.5rem !important;
	}

	.sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:last-of-type {
		padding-right: 1rem !important;
	}

	.sapMHrdrCntrDvdrs.Horizontal .sapMHrdrCntrInner::after {
		left: 0.4rem;
		border-left: 1px solid var(--sapList_BorderColor);
	}

	html[dir=rtl] .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
		margin-right: 0 !important;
		padding: 0 0.5rem 0 0.5rem !important;
	}

	html[dir=rtl] .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:last-of-type {
		padding-left: 1rem !important;
	}
}