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

PhloxUI Ng2+ Framework

// .ua-chrome {
// 	.phx-simple-radio-btns{
//     input[type=radio] + label:before {
//
//     }
//
//     input[type=radio]:checked + label:before {
//       padding-top: @SIMPLE_RADIO_POINT_TOP_GOOGLE;
//     }
//   }
// }

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

		input[type=radio] + label:before {
			font-family: "PhloxGlyphicons";
			content: "S";
			color: @CLR_DISABLED_BG;
			cursor: default;
			// background-color: @CLR_DISABLED_BG;
		}

		input[type=radio]:checked + label:before {
			content: "S";
			// background-color: @CLR_DISABLED_BG;
		}
	}
}

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

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

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

    input[type=radio] + label:before {
		    // content: "";
		    // display: inline-block;
		    // width: @SIMPLE_RADIO_WIDTH;
		    // height: @SIMPLE_RADIO_HEIGHT;
		    // vertical-align:middle;
		    // margin-right: @SIMPLE_RADIO_MARGIN_RIGHT;
		    // background-color: extract(@CLR_1, 9);
		    // border-radius: @SIMPLE_RADIO_BORDER_RADIUS;
        // border: @SIMPLE_RADIO_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
        // margin-bottom: 2pt;

				display: inline-flex;
				align-items: center;
				margin-right: @SIMPLE_RADIO_MARGIN_RIGHT;
				font-family: "PhloxGlyphicons";
				cursor: pointer;
				content: "P";
				color: @CLR_BRAND;
		}

    input[type=radio]:checked + label:before {
		    // content: "\2022"; /* Bullet */
		    // color: @CLR_BRAND_FONT;
		    // background-color: @CLR_BRAND;
		    // font-size: @SIMPLE_RADIO_POINT_SIZE;
		    // text-align:center;
		    // line-height: @SIMPLE_RADIO_POINT_LINE_HEIGHT;
        // border: 0;
        // margin-bottom: 2pt;

				// display: inline-flex;
				// align-items: center;
				// font-family: "PhloxGlyphicons";
				// cursor: pointer;
				content: "T";
				// color:@CLR_BRAND;
		}

    >.radio-group{
    	height: 100%;

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

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

	    .radio{
	    	margin-right: @COMPONENT_RADIO_ITEM_MARGIN_RIGHT;

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