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

PhloxUI Ng2+ Framework

phx-component-radio-btns {
	&.disabled {

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

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

		.phx-string-data-view.dirty {
			color: rgba(red(#000), green(#000), blue(#000), 0.38);
		}

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

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

    >.radio-group{
		height: 100%;

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

		// input[type=radio] {
		//     display:none;
		// }

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

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

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

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

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