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

OpenUI5 UI Library sap.m

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

.sapMRb {
	float: left;
	clear: left;
	outline: none;
	text-overflow: ellipsis;
	position: relative;
	white-space: nowrap;
	max-width: 100%;

	> .sapMLabel {
		max-width: calc(~"100% - 3rem");
		// some browsers [ie] calcs rems different than the others 0.0625 is caled as 1.04 px in IE
		padding-right: 1px;
	}
}

.sapMILI-CTX .sapMRb {
	float: right;
}

.sapMRbHasLabel .sapMRbB {
	width: 3rem;
}

.sapMRbB {
	display: inline-block; /* for ie*/
	font-size: 1rem; /* override font size of the message dialog */
}

.sapMRbB .sapMRbBOut {
	height: 1rem;
	width: 1rem;
	border: 0.125rem solid @sapUiFieldBorderColor;
	border-radius: 1rem;
	background-color: @sapUiFieldBackground;
	margin: 0.825rem;
	padding: 1px; /* using padding here so that margin won't collide */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.sapMRbBLabel {
	vertical-align: top;
	height: 3rem;
	line-height: 3rem;
	cursor: default;
}

.sapMRbB input {
	margin: 0; /* FF puts margin */
	-webkit-appearance: none;
	visibility: hidden;
}

.sapMRbB:focus {
	outline: none;
}

.sapMRb:focus:before {
	content: "";
	display: block;
	position: absolute;
	top: .625rem;
	bottom: .625rem;
	left: .625rem;
	right: .625rem;
	pointer-events: none;
}

.sapMRbBInn {
	background-color: transparent;
	-webkit-user-select: none;
	align-self: center;
}

.sapMRbB .sapMRbBInn {
	height: 0.625rem;
	width: 0.625rem;
	border-radius: 1rem;
}

.sapMRbHasLabel.sapMRb:focus:before {
	right: 0;
}

.sapMRbDis:focus:before {
	display: none;
}

.sapUiSizeCompact {
	.sapMRb:focus:before {
		top: .375rem;
		bottom: .375rem;
		left: .375rem;
		right: .325rem;
	}

	.sapMRbHasLabel .sapMRbB {
		width: 2rem;
	}

	.sapMRb > .sapMLabel {
		max-width: calc(~"100% - 2rem + 1px");
	}
}

.sapMRbHoverable:hover {
	border-color: @sapUiFieldHoverBorderColor;
	background-color: @sapUiFieldHoverBackground;
}

.sapMRbSel .sapMRbBInn {
	background-color: @sapUiSelected;
}

.sapMLIBActive .sapMRbSel .sapMRbBInn {
	background-color: @sapUiListActiveTextColor;
}

/* Read only */
.sapMRbRo .sapMRbBOut {
	background-color: @sapUiFieldReadOnlyBackground;
	border-color: @sapUiFieldReadOnlyBorderColor;
}

.sapMRbRo.sapMRbSel .sapMRbBInn {
	background-color: @sapUiContentNonInteractiveIconColor;
}

/* Compact size */
.sapUiSizeCompact{
	.sapMRb {
		height : 2rem;
	}

	.sapMRbB {
		font-size: 1rem; /* override font size of the message dialog */
	}

	.sapMRbB .sapMRbBOut {
		height: 1rem;
		width: 1rem;
		border-width: 0.125rem;
		margin: 0.5rem;
		box-sizing: border-box;
	}

	.sapMRbB .sapMRbBInn {
		height: 0.375rem;
		width: 0.375rem;
	}

	.sapMRbBLabel {
		line-height: 2rem;
		height: 2rem;
	}

	.sapMRbHasLabel.sapMRb:focus:before {
		right: 0;
	}
}

/* Condensed size */
.sapUiSizeCondensed.sapUiTable,
.sapUiSizeCondensed .sapUiTable {
	.sapMRb {
		height : 1.5rem;
		vertical-align: top;
	}

	.sapMRbB {
		font-size: 1rem; /* override font size of the message dialog */
		height: 1.375rem;
		width: 1.375rem;
	}

	.sapUiTableCell>.sapMRb>.sapMRbB{
			margin: 0 0.25rem; /* extra space in the condensed ULV */
	}

	.sapMRbB .sapMRbBOut {
		height: 0.75rem;
		width: 0.75rem;
		border-width: 1px;
		margin: 0.375rem;
	}

	.sapMRbB .sapMRbBInn {
		height: 0.25rem;
		width: 0.25rem;
		margin: 0.0625rem;
	}

	.sapMRbBLabel {
		line-height: 1.5rem;
		height: 1.5rem;
	}
}

/* When printing border is needed for the selection */
@media only print {
	.sapMRbBInn {
		box-sizing: border-box;
	}

	.sapMRbSel .sapMRbBInn {
		border-color: @sapUiSelected;
		border-style: solid;
		border-width: 5px;
	}

	.sapMRbRo.sapMRbSel .sapMRbBInn {
		border-color: @sapUiContentNonInteractiveIconColor;
	}

	.sapMLIBActive .sapMRbSel .sapMRbBInn {
		border-color: @sapUiListActiveTextColor;
	}

	/* Compact size */
	.sapUiSizeCompact{
		.sapMRbSel .sapMRbBInn {
			border-width: 3px;
		}
	}
}