@openui5/sap.m/src/sap/m/themes/sap_hcb/SegmentedButton.less

OpenUI5 UI Library sap.m

/* ====================================== */
/* CSS for control sap.m/SegmentedButton  */
/* High Contrast Black theme              */
/* ====================================== */

.sapMSegBBtn {
	margin-right: 0;
	-webkit-tap-highlight-color: transparent;
	&:first-child {
		border-top-left-radius: 0.375rem;
		border-bottom-left-radius: 0.375rem;
	}
	&:last-child {
		border-top-right-radius: 0.375rem;
		border-bottom-right-radius: 0.375rem;
	}
	&.sapMSegBBtnDis {
		background-color: @sapUiSegmentedButtonBackground;
		border-color: @sapUiHcReducedForeground;
		color: @sapUiContentDisabledTextColor;
		&.sapMSegBBtnSel {
			background-color: @sapUiHcReducedBackground;
			color: @sapUiHcReducedAltForeground;
		}
		&:last-child {
			border-color: @sapUiHcReducedForeground;
		}
	}
	&.sapMSegBBtnSel:focus:not(.sapMSegBBtnDis) {
		border-radius: 0;
	}
}

.sapMSegB {
	.sapMSegBBtn {
		&:not(:last-child) {
			border-right: 1px solid transparent;
		}
		+ .sapMSegBBtn.sapMSegBBtnFocusable:focus {
			border-right: 1px solid transparent;
		}
		&:last-child:not(.sapMSegBBtnDis) {
			border-right: 1px solid @sapUiSegmentedButtonBorderColor;
		}
		&.sapMSegBBtnDis:last-child {
			border-right: 1px solid @sapUiHcReducedForeground;
		}
	}
}

/* Fix for disabled button border nested between active buttons */
.sapMSegBBtn.sapMSegBBtnFocusable + .sapMSegBBtnDis {
	opacity: 1;
	border-left: 1px solid @sapUiSegmentedButtonBorderColor;
	border-top-color: @sapUiHcReducedForeground;
	border-bottom-color: @sapUiHcReducedForeground;
	color: @sapUiContentDisabledTextColor;
	&.sapMSegBBtnSel {
		background-color: @sapUiHcReducedBackground;
		color: @sapUiHcReducedAltForeground;
	}
}

/* Custom focus outline: */
.sapMSegBBtnFocusable {
	&:focus {
		outline: 0.125rem dotted @sapUiContentFocusColor;
		outline-offset: -0.125rem;
		border: 1px solid transparent;
	}
	&.sapMSegBBtnSel:focus {
		border: 1px solid transparent;
	}
	&:active + .sapMSegBBtn,
	&:focus + .sapMSegBBtn {
		border-left: 1px solid transparent;
		&:not(:last-child) {
			border-left: 1px solid transparent;
		}
		&:last-child {
			border-left: 1px solid transparent;
		}
	}
	&.sapMSegBBtnSel:focus + .sapMSegBBtn {
		border-left: 1px solid transparent;
	}
}