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

OpenUI5 UI Library sap.m

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

.sapMMsgStrip {
	border: 1px solid;
	border-radius: 0.1875rem;
	box-sizing: border-box;
	font-size: 0.875rem;
	font-weight: normal;
	padding: 0.4375rem 1rem;
	position: relative;
	min-height: 2rem;

	&[data-sap-ui-ms-closable='true'] > .sapMMsgStripMessage {
		margin-right: 1rem;
	}
}

html[data-sap-ui-animation='on'] {
	.sapMMsgStrip {
		-webkit-transition: opacity 0.2s;
		transition: opacity 0.2s;
	}

	.sapMMsgStripCloseButton {
		-webkit-transition: color 0.1s;
		transition: color 0.1s;
	}
}

.sapMMsgStripClosing {
	opacity: 0;
}

.sapMMsgStripIcon {
	position: absolute;
	left: 0;
	width: 2.5rem;
	font-size: 1rem;
	text-align: center;

	& ~ .sapMMsgStripMessage {
		margin-left: 1.5rem;
	}
}

.sapMMsgStripMessage {
	max-height: 10rem;
	overflow: auto;

	& > .sapMText,
	& > .sapMLnk {
		display: inline;
	}

	& > .sapMLnk {
		margin-left: 0.25rem;
	}

	& > .sapMText {
		line-height: 1.2;
	}

}

.sapMMsgStripCloseButton {
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	width: 1.625rem;
	height: 1.625rem;
	position: absolute;
	top: 0.125rem;
	right: 0.125rem;
	box-sizing: border-box;
	font-family: 'SAP-icons';
	font-size: 0.75rem;
	cursor: pointer;

	&:focus {
		outline: 0;
	}

	&::-moz-focus-inner {
		border: 0;
	}

	&::before {
		content: "";
		position: absolute;
		top: -25%;
		bottom: -25%;
		left: -25%;
		right: -25%;
	}

	&::after {
		content: '\e03e';
		position: absolute;
	}
}

.sapMMsgStripInformation {
	background-color: @sapUiNeutralBG;
	border-color: @sapUiNeutralBorder;
	color: @sapUiBaseText;

	& .sapMMsgStripIcon {
		color: @sapUiNeutralElement;
	}
}

.sapMMsgStripSuccess {
	background-color: @sapUiSuccessBG;
	border-color: @sapUiSuccessBorder;
	color: @sapUiBaseText;

	& .sapMMsgStripIcon {
		color: @sapUiPositiveElement;
	}
}

.sapMMsgStripWarning {
	background-color: @sapUiWarningBG;
	border-color: @sapUiWarningBorder;
	color: @sapUiBaseText;

	& .sapMMsgStripIcon {
		color: @sapUiCriticalElement;
	}
}

.sapMMsgStripError {
	background-color: @sapUiErrorBG;
	border-color: @sapUiErrorBorder;
	color: @sapUiBaseText;

	& .sapMMsgStripIcon {
		color: @sapUiNegativeElement;
	}
}