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

OpenUI5 UI Library sap.m

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

.sapMMenuBtn {
	display: inline-block;
	width: auto;
	max-width: 100%;
}

.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner {
	text-align: left;
	padding-right: 2rem;
	position: relative;
	padding-left: 0.625rem;
}

.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner:not(.sapMBtnText) {
	padding-right: 1.4375rem;
}

.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
	font-family: var(--sapContent_IconFontFamily);
	content: '\e1ef';
	display: inline-block;
	font-size: 0.75rem;
	height: 2.125rem;
	line-height: 2.125rem;
	padding-right: 0.75rem;
	padding-left: 0.5625rem;
	color: var(--sapButton_IconColor);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner::after {
	color: var(--sapButton_Hover_TextColor);
}

.sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner {
	background-image: none;
	text-shadow: none;
	background-color: var(--sapButton_Active_Background);
	border-color: var(--sapButton_Active_BorderColor);
}

.sapUiSizeCompact {

	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner {
		padding-right: 1.625rem;
		padding-left: 0.5rem;
	}

	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner:not(.sapMBtnText) {
		padding-right: 1.25rem;
	}

	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
		height: 1.5rem;
		line-height: 1.5rem;
		padding-right: 0.5rem;
		padding-left: 0.375rem;
	}
}

/* type Emphasized */
.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnEmphasized::after {
	color: var(--sapButton_Emphasized_TextColor);
	text-shadow: var(--sapButton_Emphasized_TextShadow);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnEmphasized::after {
	color: var(--sapButton_Emphasized_Hover_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnEmphasized.sapMBtnActive::after {
	text-shadow: none;
}

/* type Accept */
.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnAccept::after {
	color: var(--sapButton_Accept_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnAccept::after {
	color: var(--sapButton_Accept_Hover_TextColor);
}

/* type Attention */
.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnAttention::after {
	color: var(--sapButton_Attention_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnAttention::after {
	color: var(--sapButton_Attention_Hover_TextColor);
}

/* type Reject */
.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnReject::after {
	color: var(--sapButton_Reject_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnReject::after {
	color: var(--sapButton_Reject_Hover_TextColor);
}

/* type Default, Transparent(header) */
.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnActive::after {
	color: var(--sapButton_Active_TextColor);
}

/* Transparent(footer) */
.sapMIBar-CTX.sapMFooter-CTX .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
	text-shadow: var(--sapButton_Emphasized_TextShadow);
}

.sapMFooter-CTX .sapMMenuBtn .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
	text-shadow: none;
}

.sapMIBar-CTX.sapMFooter-CTX .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnActive::after {
	text-shadow: none;
}

.sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnReject {
	background-color: var(--sapButton_Reject_Active_Background);
	border-color: var(--sapButton_Reject_Active_BorderColor);
}

.sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAccept {
	background-color: var(--sapButton_Accept_Active_Background);
	border-color: var(--sapButton_Accept_Active_BorderColor);
}

.sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAttention {
	background-color: var(--sapButton_Attention_Active_Background);
	border-color: var(--sapButton_Attention_Active_BorderColor);
}

.sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnEmphasized {
	background-color: var(--sapButton_Emphasized_Active_Background);
	border-color: var(--sapButton_Emphasized_Active_BorderColor);
}

.sapMMenuBtn.sapMMenuBtnSplit .sapMSBActive:not(.sapMBtnDisabled) > .sapMBtnInner .sapMBtnIcon {
	color: var(--sapButton_Active_TextColor);
}

.sapMMenuBtn .sapMBtn .sapMBtnInner {
	display: flex;
}

.sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner.sapMBtnIconFirst .sapMBtnIcon {
	padding-right: 0.375rem;
}

.sapMMenuBtn .sapMBtn .sapMBtnInner.sapMBtnText:not(.sapMBtnIconFirst) .sapMBtnContent {
	width: 100%;
}

.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnCritical::after {
	color: var(--sapButton_Critical_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnCritical::after {
	color: var(--sapButton_Critical_Hover_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnNegative::after {
	color: var(--sapButton_Negative_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnNegative::after {
	color: var(--sapButton_Negative_Hover_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnSuccess::after {
	color: var(--sapButton_Success_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnSuccess::after {
	color: var(--sapButton_Success_Hover_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnNeutral::after {
	color: var(--sapButton_Neutral_TextColor);
}

.sapMMenuBtn.sapMMenuBtnRegular:hover .sapMBtnInner.sapMBtnNeutral::after {
	color: var(--sapButton_Neutral_Hover_TextColor);
}