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

OpenUI5 UI Library sap.m

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

.sapMCb.sapMCbWarn .sapMCbBg {
	background-color: @sapUiFieldWarningBackground;
	border: 0.125rem dashed @sapUiFieldWarningColor;
}

.sapMCb.sapMCbErr .sapMCbBg {
	background-color: @sapUiFieldInvalidBackground;
	border: 0.125rem dashed @sapUiFieldInvalidColor;
}

.sapMCb.sapMCbBgDis.sapMCbWarn .sapMCbBg.sapMCbMarkChecked:before {
	color: @sapUiFieldWarningColor;
}

.sapMCb.sapMCbBgDis.sapMCbErr .sapMCbBg {
	border-color: @sapUiHcReducedForeground;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldInvalidColor;
	}
}

.sapUiForm .sapMCbBg { /* In forms, align left with '0.125rem' ( the focus width) */
	left: 0.125rem;
}

.sapMCbBg.sapMCbMarkChecked:before {
	color: @sapUiContentIconColor;
}

.sapMCbBg > input {
	left: 0;
	-webkit-appearance: none;
	visibility: hidden;
}

html[data-sap-ui-browser^=ff] .sapMCbBg > input {
	/* in FF the input needs to be positioned exactly behind the visible checkbox for the focus outline */
	position: absolute;
}

/* CheckBox focus */
html.sap-desktop {
	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus > .sapMCbBg {
		outline-color: @sapUiContentFocusColor;
		outline-width: 0.125rem;
		outline-style: dotted;
	}

	.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
		content: "";
		display: block;
		position: absolute;
		top: 0.6875rem;
		bottom: 0.6875rem;
		left: 0.6875rem;
		right: -1px; /* Cb in HCB the outline should have offset 0 from the control */
		border: 0.125rem dotted @sapUiContentFocusColor;
	}

	.sapUiForm .sapMCb:not(.sapMCbBgDis):focus:before {
		left: -1px; /* Cb in SimpleForm: left and right border adjustment */
		right: 0.125rem;
	}
}

.sapMCb:not(.sapMCbWarn):not(.sapMCbErr) .sapMCbBg.sapMCbHoverable:hover {
	background-color: @sapUiSelected;
}

/* disabled state */
.sapMCbBgDis > .sapMCbBg {
	border-color: @sapUiHcReducedForeground;
	background-color: @sapUiHcReducedBackground;
}

.sapMCbBgDis > .sapMCbBg.sapMCbMarkChecked:before {
	color: @sapUiHcReducedForeground;
}

.sapMCb:focus,
.sapMCbBgDis > .sapMCbBg:focus {
	outline: 0;
}

.sapMCbBgDis > .sapMCbLabel {
	color: @sapUiContentDisabledTextColor;
}

/* Compact size */
.sapUiSizeCompact {
	.sapUiForm .sapMCbBg { /* In forms, align left with '0.125rem' ( the focus width) */
		left: 0.125rem;
	}
}

html.sap-desktop {
	.sapUiSizeCompact {
		.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
			top:0.365rem;
			bottom: 0.365rem;
			left: 0.365rem;
		}

		.sapUiSimpleForm .sapMCb:not(.sapMCbBgDis):focus:before {
			left: 0;
		}
	}
}