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

PhloxUI Ng2+ Framework

// check box
.ua-chrome {
	.phx-checkbox{
    input[type=checkbox] + label:before {

    }

    input[type=checkbox]:checked + label:before {
      font-size: @CHECKBOX_POINT_SIZE_GOOGLE;
      padding-top: @CHECKBOX_POINT_TOP_GOOGLE;
    }
  }
}

phx-checkbox {
	&.disabled {
		input[type=checkbox] + label:before {
			color: @CLR_DISABLED_FONT;
			background-color: @CLR_DISABLED_BG;
		}

		input[type=checkbox]:checked + label:before {
			color: @CLR_DISABLED_FONT;
			background-color: @CLR_DISABLED_BG;
		}
	}
}

.phx-checkbox {

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

	input[type=checkbox] + label:before {
		 content: "";
		 display: inline-block;
		 width: @CHECKBOX_WIDTH;
		 height: @CHECKBOX_HEIGHT;
		 vertical-align:middle;
		 margin-right: @CHECKBOX_MARGIN_RIGHT;
		 background-color: extract(@CLR_1, 9);
		 border-radius: @CHECKBOX_BORDER_RADIUS;
     border: @CHECKBOX_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
     margin-bottom: 2pt;
	}

	input[type=checkbox]:checked + label:before {
		 content:"\2714"; /* Tick */
		 color: @CLR_BRAND_FONT;
		 background-color: @CLR_BRAND;
		 text-align:center;
		 line-height:@CHECKBOX_LINE_HEIGHT;
     border: 0;
     font-size: @CHECKBOX_POINT_SIZE;
	}

	input[type="checkbox"][readonly] {
	  pointer-events: none;
	}
}