@openui5/themelib_sap_belize 1.124.1 → 1.125.0

package/src/sap/m/themes/sap_belize_base/Button.less

@@ -0,0 +1,742 @@
+/* ============================= */
+/* CSS for control sap.m/Button  */
+/* Base theme                    */
+/* ============================= */
+
+.sapMBtn {
+	height:           3rem;
+	margin:           0;
+	padding:          0.250rem 0;
+	vertical-align:   top;
+	border:           none;
+	/* should be always transparent since this is the background of the clickable area */
+	background-color: transparent;
+}
+
+.sapMBtn:focus {
+	outline:          none;
+}
+.sapMBtn::-moz-focus-inner {
+	padding: 0;
+	border: 0
+}
+.sapMBtn:not(.sapMBtnDisabled) {
+	cursor: pointer;
+}
+
+/* override the default cursor of .sapUiIcon */
+.sapMBtn .sapMBtnIcon {
+	cursor: inherit;
+}
+
+.sapMBtnBase {
+	position: relative;
+}
+
+.sapMBtn .sapMBtnInner {
+	display: flex;
+	justify-content: center;
+}
+
+.sapMBtn .sapMBtnContent {
+	display: inline-block;
+	flex-shrink: 1;
+}
+
+/* --------------------- */
+/* Inner area            */
+/* --------------------- */
+.sapMBtnInner {
+	vertical-align:   top;
+	-webkit-appearance: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
+	box-sizing: border-box;
+
+	font-family: @sapUiFontFamily;
+	font-size: 0.875rem;
+
+	height: @sapUiElementHeight;
+	min-width: 2.500rem;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	position: relative;
+
+	background-color: @sapUiButtonBackground;
+	border:           0.0625rem solid @sapUiButtonBorderColor;
+	border-radius:    0.2rem;
+	color:            @sapUiButtonTextColor;
+	text-shadow:      @sapUiShadowText;
+}
+
+.sapMBtnInner::-moz-focus-inner {
+	border: 0;
+}
+.sapMBtnInner:focus,
+.sapMBtnContent>span:focus {
+	outline: none;
+}
+
+/* paddings depends on the presence and placement of text and icons */
+.sapMBtnInner.sapMBtnText {
+	padding-left: 0.75rem;
+	padding-right: 0.75rem;
+}
+
+/* ------------------- */
+/* Content area        */
+/* ------------------- */
+.sapMBtnContent {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	vertical-align: top;
+	line-height: 2.375rem;
+}
+/* unstyled button content line height should be normal on iOS devices to fit into the button */
+html[data-sap-ui-os^="iOS"] .sapMBtnBase:not(.sapMBtn) .sapMBtnContent {
+	line-height: normal;
+}
+
+/* ------------------- */
+/* Button Icon         */
+/* ------------------- */
+.sapMBtnIcon {
+	font-size:        1.375rem;
+	line-height:      2.375rem;
+	width:            2.375rem;
+	text-align:       center;
+	margin:           0;
+	padding:          0;
+	vertical-align:   top;
+	max-height:       2.375rem;
+	color:            @sapUiButtonIconColor;
+}
+
+
+.sapMBtnInner .sapMBtnIcon.sapMImg {
+	height: 2.375rem;
+	max-width: 2.375rem;
+	width: auto;
+}
+
+/* ------------------------------------------------ */
+/* Buttons in a Bar                                 */
+/* (add separators, remove top/bottom border)       */
+/* ------------------------------------------------ */
+
+.sapMIBar .sapMBtnInner {
+	vertical-align:   top;
+}
+
+/* ------------------------------------------------ */
+/* Compact size                                     */
+/* ------------------------------------------------ */
+
+.sapUiSizeCompact {
+	.sapMBtn {
+		height:           2.000rem;
+		padding:          0.1875rem 0;
+	}
+
+	.sapMBtnInner {
+		height:           @sapUiElementCompactHeight;
+		min-width:        2.0rem;
+	}
+
+	.sapMBtnContent {
+		line-height:      1.500rem;
+	}
+
+	.sapMBtnIcon {
+		line-height:      1.500rem;
+		width:            1.000rem;
+		font-size:        1.000rem;
+		max-height:       1.500rem;
+	}
+
+	.sapMBtnInner > img {
+		height:           1.250rem;
+		width:            auto;
+		max-width:        1.250rem;
+		margin-left:      0rem;
+		margin-right:     0rem;
+	}
+}
+
+/* ------------------------------------------------ */
+/* Condensed size                                   */
+/* ------------------------------------------------ */
+
+.sapUiSizeCondensed .sapUiTableDataCell {
+	.sapMBtn {
+		height: 1.375rem;
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+	.sapMBtnInner {
+		height:           1.375rem;
+		min-width:        2.0rem;
+	}
+	.sapMBtnInner.sapMBtnText,
+	.sapMBtnInner1.sapMBtnIconFirst:not(.sapMBtnBack) {
+		padding-left: 0.4375rem;
+		padding-right: 0.4375rem;
+	}
+
+	.sapMBtnInner > img {
+		height:           1.250rem;
+		width:            auto;
+		max-width:        1.250rem;
+		margin-left:      0.250rem;
+		margin-right:     0.250rem;
+	}
+	.sapMIBar-CTX .sapMBtnInner {
+		margin:           0;
+	}
+	.sapMBtnIcon {
+		line-height:      1.250rem;
+		font-size:        1.000rem;
+		max-height:       1.250rem;
+		width:            1.000rem;
+		min-width:        1.000rem;
+	}
+
+	.sapMBtnContent {
+		line-height:      1.250rem;
+	}
+}
+
+/* ---------------------------------------------------------------------*/
+/* Disabled, hover and active states:                                   */
+/* ---------------------------------------------------------------------*/
+
+.sapMBtnDisabled {
+	text-shadow:      none;
+	cursor:           default;
+}
+
+.sapMBtn:hover > .sapMBtnHoverable {
+	background-image: none;
+	background-color: @sapUiButtonHoverBackground;
+	border-color: @sapUiButtonHoverBorderColor;
+}
+
+.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent) {
+	&.sapMBtnDefault,
+	&.sapMBtnBack,
+	&.sapMBtnGhost {
+		color: @sapUiButtonHoverTextColor;
+		.sapUiIcon {
+			color: @sapUiButtonHoverTextColor;
+		}
+	}
+}
+
+:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive {
+	background-image: none;
+	background-color: @sapUiButtonActiveBackground;
+	border-color:     @sapUiButtonActiveBorderColor;
+	color:            @sapUiButtonActiveTextColor;
+	text-shadow:      none;
+}
+
+:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive .sapMBtnIcon {
+	color:            @sapUiButtonActiveTextColor;
+}
+
+/* ---------------------------------------------------------------------*/
+/* Special buttons have the same look on a page and in a header/footer. */
+/* ---------------------------------------------------------------------*/
+
+span.sapMBtnInner.sapMBtnAccept {
+	background-image: none;
+	background-color: @sapUiButtonAcceptBackground;
+	border-color:     @sapUiButtonAcceptBorderColor;
+	color:            @sapUiButtonAcceptTextColor;
+
+	.sapUiIcon {
+		color: @sapUiButtonAcceptTextColor;
+	}
+}
+
+span.sapMBtnInner.sapMBtnAttention {
+	background-image: none;
+	background-color: @sapUiButtonAttentionBackground;
+	border-color: @sapUiButtonAttentionBorderColor;
+	color: @sapUiButtonAttentionTextColor;
+
+	.sapUiIcon {
+		color: @sapUiButtonAttentionTextColor;
+	}
+}
+
+:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAccept:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
+	color: @sapUiButtonAcceptTextColor;
+}
+
+:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAttention:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
+	color: @sapUiButtonAttentionTextColor;
+}
+
+.sapMBtn:hover > .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed) {
+	background-color: @sapUiButtonAcceptHoverBackground;
+	border-color:     @sapUiButtonAcceptHoverBorderColor;
+	color: @sapUiButtonAcceptHoverTextColor;
+
+	bdi {
+		color: @sapUiButtonAcceptHoverTextColor;
+	}
+}
+
+.sapMBtn:hover > .sapMBtnHoverable.sapMBtnAttention:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed) {
+	background-color: @sapUiButtonAttentionHoverBackground;
+	border-color: @sapUiButtonAttentionHoverBorderColor;
+	color: @sapUiButtonAttentionHoverTextColor;
+
+	bdi {
+		color: @sapUiButtonAttentionHoverTextColor;
+	}
+}
+
+.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnHoverable.sapMBtnAttention:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAttention:hover:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed) .sapUiIcon,
+:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAttention:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed):hover > .sapMBtnIcon {
+	color: @sapUiButtonAttentionHoverTextColor;
+}
+
+.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAccept:hover:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed) .sapUiIcon,
+:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnAccept:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed):hover > .sapMBtnIcon {
+	color: @sapUiButtonAcceptHoverTextColor;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAccept.sapMBtnActive {
+	background-color: @sapUiButtonAcceptActiveBackground;
+	border-color:     @sapUiButtonAcceptActiveBorderColor;
+	text-shadow: none;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnAttention.sapMBtnActive {
+	background-color: @sapUiButtonAttentionActiveBackground;
+	border-color: @sapUiButtonAttentionActiveBorderColor;
+	text-shadow: none;
+}
+
+/* ---------------------------------------- */
+
+span.sapMBtnInner.sapMBtnReject {
+	background-image: none;
+	background-color: @sapUiButtonRejectBackground;
+	border-color:     @sapUiButtonRejectBorderColor;
+	color:            @sapUiButtonRejectTextColor;
+
+	.sapUiIcon {
+		color: @sapUiButtonRejectTextColor;
+	}
+}
+
+:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnReject:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon {
+	color:            @sapUiButtonRejectTextColor;
+}
+
+.sapMBtn:hover > .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+	background-color: @sapUiButtonRejectHoverBackground;
+	border-color:     @sapUiButtonRejectHoverBorderColor;
+	color: @sapUiButtonRejectHoverTextColor;
+
+	bdi {
+		color: @sapUiButtonRejectHoverTextColor;
+	}
+}
+
+.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnHoverable.sapMBtnReject:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnReject:hover:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed) .sapUiIcon,
+:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnReject:not(.sapMBtnActive):not(.sapMBtnDisabled):not(.sapMToggleBtnPressed):hover > .sapMBtnIcon {
+	color: @sapUiButtonRejectHoverTextColor;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnReject.sapMBtnActive {
+	background-color: @sapUiButtonRejectActiveBackground;
+	border-color:     @sapUiButtonRejectActiveBorderColor;
+	text-shadow: none;
+}
+
+/* ---------------------------------------- */
+
+span.sapMBtnInner.sapMBtnEmphasized {
+	background-image: none;
+	background-color: @sapUiButtonEmphasizedBackground;
+	border-color:     @sapUiButtonEmphasizedBorderColor;
+	color:            @sapUiButtonEmphasizedTextColor;
+	text-shadow:      0 0 0.125rem @sapUiButtonEmphasizedTextShadow;
+
+	.sapUiIcon, sapMBtnIcon {
+		color: @sapUiButtonEmphasizedTextColor;
+	}
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive > .sapMBtnIcon {
+	color: @sapUiButtonEmphasizedActiveTextColor;
+}
+
+.sapMBtn:hover > .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
+	background-color: @sapUiButtonEmphasizedHoverBackground;
+	border-color:     @sapUiButtonEmphasizedHoverBorderColor;
+	color: @sapUiButtonEmphasizedHoverTextColor;
+
+	.sapMBtnIcon {
+		color: @sapUiButtonEmphasizedHoverTextColor;
+	}
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
+	background-color: @sapUiButtonEmphasizedActiveBackground;
+	border-color:     @sapUiButtonEmphasizedActiveBorderColor;
+	text-shadow:      none;
+	font-weight: @sapUiButtonEmphasizedFontWeight;
+	color: @sapUiButtonEmphasizedTextColor;
+
+	bdi {
+		color: @sapUiButtonActiveTextColor;
+	}
+
+}
+
+.sapMBtn .sapMBtnCritical,
+.sapContrast span.sapMBtnInner.sapMBtnCritical{
+	background: @sapUiButtonCriticalBackground;
+	border-color: @sapUiButtonCriticalBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonCriticalTextColor;
+	}
+}
+
+.sapMBtn .sapMBtnNegative,
+.sapContrast span.sapMBtnInner.sapMBtnNegative{
+	background: @sapUiButtonNegativeBackground;
+	border-color: @sapUiButtonNegativeBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonNegativeTextColor;
+	}
+}
+
+.sapMBtn .sapMBtnSuccess,
+.sapContrast span.sapMBtnInner.sapMBtnSuccess{
+	background: @sapUiButtonSuccessBackground;
+	border-color: @sapUiButtonSuccessBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonSuccessTextColor;
+	}
+}
+
+.sapMBtn .sapMBtnNeutral,
+.sapContrast span.sapMBtnInner.sapMBtnNeutral{
+	background: @sapUiButtonNeutralBackground;
+	border-color: @sapUiButtonNeutralBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonNeutralTextColor;
+	}
+}
+
+.sapMBtn .sapMBtnCritical.sapMBtnInner,
+.sapMBtn .sapMBtnNegative.sapMBtnInner,
+.sapMBtn .sapMBtnSuccess.sapMBtnInner,
+.sapMBtn .sapMBtnNeutral.sapMBtnInner{
+	text-shadow: @sapUiContentContrastTextShadow;
+}
+
+.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnCritical{
+	background: @sapUiButtonCriticalHoverBackground;
+	border-color: @sapUiButtonCriticalHoverBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonCriticalHoverTextColor;
+	}
+}
+
+.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnNegative{
+	background: @sapUiButtonNegativeHoverBackground;
+	border-color: @sapUiButtonNegativeHoverBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonNegativeHoverTextColor;
+	}
+}
+
+.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnSuccess{
+	background: @sapUiButtonSuccessHoverBackground;
+	border-color: @sapUiButtonSuccessHoverBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonSuccessHoverTextColor;
+	}
+}
+
+.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnNeutral{
+	background: @sapUiButtonNeutralHoverBackground;
+	border-color: @sapUiButtonNeutralHoverBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonNeutralHoverTextColor;
+	}
+}
+
+.sapMBtn:not(.sapMBtnDisabled) .sapMBtnCritical.sapMBtnActive{
+	background: @sapUiButtonCriticalActiveBackground;
+	border-color: @sapUiButtonCriticalActiveBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonCriticalActiveTextColor;
+	}
+}
+
+.sapMBtn:not(.sapMBtnDisabled) .sapMBtnNegative.sapMBtnActive{
+	background: @sapUiButtonNegativeActiveBackground;
+	border-color: @sapUiButtonNegativeActiveBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonNegativeActiveTextColor;
+	}
+}
+
+.sapMBtn:not(.sapMBtnDisabled) .sapMBtnSuccess.sapMBtnActive{
+	background: @sapUiButtonSuccessActiveBackground;
+	border-color: @sapUiButtonSuccessActiveBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonSuccessActiveTextColor;
+	}
+}
+
+.sapMBtn:not(.sapMBtnDisabled) .sapMBtnNeutral.sapMBtnActive{
+	background: @sapUiButtonNeutralActiveBackground;
+	border-color: @sapUiButtonNeutralActiveBorderColor;
+	.sapMBtnContent,
+	.sapMBtnIcon {
+		color: @sapUiButtonNeutralActiveTextColor;
+	}
+}
+
+/* ---------------------------------------------------------------------*/
+/* Styles for buttons in Toolbar of type Info.                          */
+/* ---------------------------------------------------------------------*/
+
+.sapMTB-Info-CTX .sapMBtnInner,
+.sapMTB-Info-CTX .sapMBtnInner:hover {
+	color: @sapUiInfobarTextColor;
+	text-shadow: none;
+}
+
+.sapMIBar-CTX .sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) bdi {
+	color: @sapUiContentContrastIconColor;
+}
+
+.sapMTB-Info-CTX .sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) bdi,
+.sapMTB-Info-CTX .sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) .sapUiIcon {
+	color: @sapUiListTextColor;
+}
+
+/* Button, used as a focus dom ref for active toolbar */
+
+.sapUiSizeCompact .sapMTBActiveButton,
+.sapMTBActiveButton {
+	position: absolute;
+	left: -1000000px;
+	top: -1000000px;
+	width: 0;
+	height: 0;
+	opacity: 0;
+	z-index: -1;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------*/
+/* Transparent buttons looks like normal one in a header/footer.        */
+/* The following rules are overridden in a bar below:                   */
+/* ---------------------------------------------------------------------*/
+
+.sapMBtnBack,
+.sapMBtnTransparent {
+	background-image: none;
+	background-color: @sapUiButtonLiteBackground;
+	border-color:     @sapUiButtonLiteBorderColor;
+	color:            @sapUiButtonLiteTextColor;
+}
+
+.sapMBtnGhost {
+	background-image: none;
+	border-color: fade(@sapUiButtonLiteTextColor, 50);
+	background-color: transparent;
+	color: @sapUiButtonLiteTextColor;
+}
+
+.sapMBtnGhost.sapMBtnInner {
+	text-shadow: @sapUiShadowText;
+}
+
+:not(.sapMBtnDisabled) .sapMBtnBack > .sapMBtnIcon,
+:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon,
+:not(.sapMBtnDisabled) .sapMBtnGhost > .sapMBtnIcon {
+	color:            @sapUiButtonIconColor;
+}
+
+.sapMBtn:hover > .sapMBtnBack.sapMBtnHoverable {
+	background-color: @sapUiButtonLiteHoverBackground;
+	border-color:     @sapUiButtonLiteHoverBorderColor;
+}
+
+.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) {
+	color: @sapUiButtonLiteHoverTextColor;
+	.sapUiIcon {
+		color: @sapUiButtonLiteHoverTextColor;
+	}
+}
+
+.sapMBtn:hover:not(.sapMBtnDisabled) > .sapMBtnHoverable.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+*.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed) > .sapMBtnIcon,
+:not(.sapMBtnDisabled):not(.sapMSBActive) > span.sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive):not(.sapMToggleBtnPressed):hover > .sapMBtnIcon {
+	color:@sapUiButtonLiteHoverTextColor;
+}
+
+.sapMBtn:hover > .sapMBtnGhost.sapMBtnHoverable {
+	background-color: fade(@sapUiButtonLiteTextColor, 20);
+}
+
+:not(.sapMBtnDisabled) > .sapMBtnBack.sapMBtnActive,
+:not(.sapMBtnDisabled):hover > .sapMBtnBack.sapMBtnActive,
+:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnActive,
+:not(.sapMBtnDisabled):hover > .sapMBtnTransparent.sapMBtnActive,
+:not(.sapMBtnDisabled) > .sapMBtnGhost.sapMBtnActive,
+:not(.sapMBtnDisabled):hover > .sapMBtnGhost.sapMBtnActive {
+	background-color: @sapUiButtonLiteActiveBackground;
+	border-color:     @sapUiButtonLiteActiveBorderColor;
+	text-shadow:      none;
+}
+
+/* Transparent button in Light Info toolbar/Facet filter */
+.sapMTB-Info-CTX {
+	:not(.sapMBtnDisabled) .sapMBtnBack > .sapMBtnIcon,
+	:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon,
+	:not(.sapMBtnDisabled) .sapMBtnGhost > .sapMBtnIcon {
+		color: @sapUiInfobarTextColor;
+	}
+}
+
+/* ----------------------------------------------------------------- */
+/* Default type Buttons in a Toolbar should be styled as transparent */
+/* ----------------------------------------------------------------- */
+
+/* transparent Toolbar Context */
+.sapMTB-Transparent-CTX .sapMBtnDefault {
+	background-image: none;
+	background: @sapUiButtonLiteBackground;
+}
+.sapMTB-Transparent-CTX .sapMBtn:hover > .sapMBtnDefault.sapMBtnHoverable {
+	background: @sapUiButtonLiteHoverBackground;
+}
+
+/* ------------------------------------------------ */
+/* Compact size                                     */
+/* ------------------------------------------------ */
+
+.sapUiSizeCompact {
+	.sapMBtnInner {
+		text-shadow:      none;
+	}
+
+	.sapMBtnGhost {
+		text-shadow: @sapUiShadowText;
+	}
+
+	.sapMBar-CTX .sapMBtnDefault.sapMBtnInner:not(.sapMBtnDisabled) {
+		margin:           0;
+		border-color:     transparent;
+	}
+
+	.sapMBar-CTX .sapMBtnInner.sapMBtnGhost:not(.sapMBtnDisabled) {
+		border-color: fade(@sapUiButtonLiteTextColor, 50)
+	}
+
+	.sapMBtnFocusDiv {
+		left:             0;
+		top:              0;
+		right:            0;
+		bottom:           0;
+		border-radius:    0;
+	}
+}
+
+/* ------------------------------------------------ */
+/* Condensed size                                   */
+/* ------------------------------------------------ */
+
+.sapUiSizeCondensed .sapUiTableDataCell {
+	.sapMBtnInner {
+		text-shadow:      none;
+	}
+	.sapMBar-CTX .sapMBtnInner {
+		border-color:     transparent;
+	}
+	.sapMBtnContent {
+		line-height:      1.250rem;
+	}
+	.sapMBtnFocusDiv {
+		left:             0;
+		top:              0;
+		right:            0;
+		bottom:           0;
+		border-radius:    0;
+	}
+}
+
+/* ----------------------*/
+/* Badges                */
+/* ----------------------*/
+
+.sapMBtn {
+	overflow: visible;
+	.sapMBadge {
+		&.sapMBadgeTopRight .sapMBadgeIndicator {
+			z-index: 1;
+			top: -0.3125rem;
+			right: -0.4375rem;
+		}
+		.sapMBadgeIndicator:after {
+			text-overflow: clip;
+			height: 0.875rem;
+			line-height: 0.875rem;
+			padding: 0 0.1875rem;
+			background-color: @sapUiContentBadgeBackground;
+			border-color: @sapUiContentBadgeBackground;
+			color: @sapUiContentBadgeTextColor;
+		}
+	}
+}
+
+.sapUiSizeCompact {
+	.sapMBtn {
+		.sapMBadgeTopRight.sapMBadge {
+			&.sapMBtnIconFirst:not(.sapMBtnText) {
+				padding: 0 0.4375rem;
+			}
+			.sapMBadgeIndicator {
+				line-height: 2rem;
+				display: inline-block;
+				position: relative;
+				top: 0.25rem;
+				right: -0.25rem;
+				padding-right: 0.0625rem;
+
+			}
+		}
+	}
+}