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

OpenUI5 UI Library sap.m

/**
 * @file
 * @deprecated as of version 1.112, together with sap.m.MessagePage
 */
/* ================================== */
/* CSS for control sap.m/MessagePage  */
/* Base theme                         */
/* ================================== */

/* MessagePage general styles */
.sapMMessagePage {
	width: 100%;
	height: 100%;
	background: var(--sapBackgroundColor);
	position: relative;
}

.sapMMessagePageInner {
	box-sizing: border-box;
	display: flex;
	padding: 1rem;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
}

/* Allow MessagePage to be positioned inside ObjectPage */
.sapUxAPBlockContainer .sapMMessagePageInner {
	position: static;
}

.sapMMessagePageContentWrapper {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateY(-1rem);
	width: 30rem;
	max-width: 100%;
}

.sapMMessagePage > .sapMBar + .sapMMessagePageInner {
	top: 3rem;
}

/* MessagePage inner controls styles */
.sapMMessagePage {

	.sapMMessagePageInner {

		.sapMMessagePageIcon.sapUiIcon::before {
			font-size: 6rem;
			color: var(--sapContent_NonInteractiveIconColor);
		}

		& > .sapMMessagePageContentWrapper > * {
			max-width: 100%;
		}
	}

	.sapMMessagePageMainText {
		font-size: 1.5rem;
		line-height: 2rem;
		margin-top: 1rem;
	}

	.sapMText.sapMMessagePageMainText {
		color: var(--sapGroup_TitleTextColor);
		font-size: var(--sapFontHeader2Size);
	}

	.sapMMessagePageDescription {
		font-size: 1rem;
		margin-top: 1rem;

		.sapMLnk {
			font-size: 1rem;
		}
	}

	.sapMText.sapMMessagePageDescription {
		color: var(--sapContent_LabelColor);
		font-size: var(--sapFontHeader5Size);
	}

	.sapMMessagePageButtonsWrapper {
		margin-top: 2rem;
		text-align: center;
	}

	.sapMBtn {
		margin: 0 0.25rem;
	}
}

.sapUiSizeCompact .sapMMessagePage > .sapMBar {
	height: 2.5rem;

	.sapMBarPH,
	.sapMBarLeft {
		height: 2.5rem;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	.sapMBarMiddle {
		height: 2.5rem;
	}

	& + .sapMMessagePageInner {
		top: 2.5rem;
	}
}