@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;
	}
}

/* IE mobile and desctop ignores outline-offset. Use an overlay: */
html[data-sap-ui-browser^="ie"] {
	.sapMSegBBtn:focus {
		outline: none;
		position: relative;
	}
	.sapMSegBBtn:not(.sapMSegBBtnDis):focus:before {
		content: " ";
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border: 0.125rem dotted @sapUiContentFocusColor;
		pointer-events: none;
	}
	.sapMSegBBtn:last-child:focus {
		margin-right: 0;
	}
}

/* Android 4.1 to 4.3 focus fix */
html[data-sap-ui-os^="Android4.1"][data-sap-ui-browser^="an"],
html[data-sap-ui-os^="Android4.2"][data-sap-ui-browser^="an"],
html[data-sap-ui-os^="Android4.3"][data-sap-ui-browser^="an"] {
	.sapMSegBBtn:not(.sapMSegBBtnSel):focus {
		background-color: transparent;
	}
	.sapMSegBBtnSel:focus {
		background-color: @sapUiSegmentedButtonSelectedBackground;
	}
}

/* Android size compact fix */
html[data-sap-ui-os^="Android4.1"][data-sap-ui-browser^="an"] {
	.sapUiSizeCompact .sapMSegBBtn img {
		padding-bottom: 0.256rem;
	}
}