com.phloxui/styles/lib/component/dataview/input/SimpleRadioButtons.less

PhloxUI Ng2+ Framework

phx-simple-radio-btns {
	&.disabled {
		input[type="button"]:disabled + label:before {
			font-family: "PhloxGlyphicons";
			content: "O";
			color: rgba(red(#000), green(#000), blue(#000), 0.38);
			cursor: default;
		}

		input[type="button"]:checked:disabled + label:before {
			font-family: "PhloxGlyphicons";
			content: "Q";
			color: rgba(red(#000), green(#000), blue(#000), 0.38);
		}

		.radio > label {
			color: rgba(red(#000), green(#000), blue(#000), 0.38);
		}

		.description {
			color: extract(@CLR_1, 5);
			font-size: 8.91pt;
		}
	}

	.phx-simple-radio-btns {
		width: 100%;
		position: relative;

		// input[type="radio"] {
		// 	display:none;
		// }
		
		// input[type="radio"] :focus {
		// 	& + label {
		// 		border: @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		// 	}
		// }

		// input[type="radio"] + label{
		// 	display: inline-flex;
		// 	align-items: center;
		// }
		
		// input[type="radio"] + label:before {
		// 	display: inline-flex;
		// 	align-items: center;
		// 	margin-right: @SIMPLE_RADIO_MARGIN_RIGHT;
		// 	font-family: "PhloxGlyphicons";
		// 	cursor: pointer;
		// 	content: "O";
		// 	color: @CLR_BRAND;
		// 	font-size: @SIMPLE_RADIO_FONT_SIZE;
		// 	font-style: normal;
		// }

		// input[type="radio"]:checked + label:before {
		// 	content: "Q";
		// }

		input[type="button"] {
			display: block;
			width: 0;
			height: 0;
			padding: 0;
			border: 0;
		}

		input[type="button"]:focus + label:before {
			font-weight: 1000;
		}

		input[type="button"] + label{
			display: inline-flex;
			align-items: center;
		}

		input[type="button"] + label:before {
			display: inline-flex;
			align-items: center;
			margin-right: @SIMPLE_RADIO_MARGIN_RIGHT;
			font-family: "PhloxGlyphicons";
			cursor: pointer;
			content: "O";
			color: @CLR_BRAND;
			font-size: @SIMPLE_RADIO_FONT_SIZE;
			font-style: normal;
		}

		input[type="button"]._selected + label:before {
			content: "Q";
		}

		>.radio-group{
			height: 100%;

			>div {
				float: left;
				text-align: center;
				margin: 0;
			}

		// destroy boostrap style
		.radio input[type="button"], .radio-inline input[type="button"] {
			margin-left: 0;
		}

			.radio{
				margin-right: @COMPONENT_RADIO_ITEM_MARGIN_RIGHT;

				>label {
					padding-right: @COMPONENT_RADIO_LABEL_PADDING_RIGHT;
					padding-left: 0;	
					font-style: italic;
				}
			}
		}

		.description.normal {
			color: extract(@CLR_1, 5);
			font-size: 8.91pt;
		}
	}
}