@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%;
}

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

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

.sapMHdrCntrBtnCntr.Horizontal {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 2.5rem;
	&.sapMHdrCntrLeft {
		left: 0.25rem;
	}
	&.sapMHdrCntrRight {
		right: 0.25rem;
	}
}

.sapUiSizeCompact .sapMHdrCntrBtnCntr.Horizontal {
	&.sapMHdrCntrLeft {
		left: 0rem;
	}
	&.sapMHdrCntrRight {
		right: 0rem;
	}
}

html.sap-phone .sapMHdrCntrBtnCntr.Horizontal,
html.sap-tablet:not(.sap-desktop) .sapMHdrCntrBtnCntr.Horizontal {
	width: 1.5rem;
	&.sapMHdrCntrLeft {
		left: 0rem;
	}
	&.sapMHdrCntrRight {
		right: 0rem;
	}
}

.sapMHdrCntrBtnCntr.Vertical {
	position: absolute;
	left: 0px;
	right: 0px;
	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: 0rem;
	}
	&.sapMHdrCntrRight {
		bottom: 0rem;
	}
}

.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: 0px;
}

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: 0px;
}

.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: 0rem 0.375rem 0rem 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 @sapUiListBorderColor;
}

.sapMHrdrCntrDvdrs.Vertical .sapMHrdrCntrInner::after {
	left: 0.5rem;
	right: 0.5rem;
	top: -0.6rem;
	border-top: 1px solid @sapUiListBorderColor;
}

.sapMKTileBorder {
	display: none;
}

.sapMHdrPddngRight2 {
	padding-right: 2rem;
}

.sapMHdrPddngRight0 {
	padding-right: 0rem;
}

.sapMHdrPddngLeft2 {
	padding-left: 2rem;
}

.sapMHdrPddngleft0 {
	padding-left: 0rem;
}
.sapMHdrCntrItemCntr {
	display: inline-block;
}

.sapMHdrCntrBGTransparent {
	background-color: @sapUiObjectHeaderBackground;
}

.sapMHdrCntrBGSolid {
	background-color: @sapUiObjectHeaderBackground;
}

.sapMHdrCntrBGTranslucent {
	background-color: @sapUiObjectHeaderBackground;
}

html.sap-desktop .sapMHrdrCntrInner:focus {
	outline: none;
	border: 1px dotted @sapUiContentFocusColor;
}

@media (min-width:320px) and (max-width:599px){
    .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
		margin-left: 0rem !important;
		padding: 0rem 0.5rem 0rem 0.5rem !important;
	}
	
	.sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:last-of-type {
		padding-right: 1rem !important;
	}

	.sapMHrdrCntrDvdrs.Horizontal .sapMHrdrCntrInner::after {
		left: 0.4rem;
		border-left: 1px solid @sapUiListBorderColor;
	}
	
	html[dir=rtl] .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner {
		margin-right: 0rem !important;
		padding: 0rem 0.5rem 0rem 0.5rem !important;
	}
	
	html[dir=rtl]  .sapMHdrCntrCntr.Horizontal .sapMHrdrCntrInner:last-of-type {
		padding-left: 1rem !important;
	}
}