Split customize styles checkbox and radio button from trendmicro-ui.

dist/css/trendmicro-ui.css

@@ -73,6 +73,14 @@ hr {
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
 }
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
 code,
 kbd,
 pre,
@@ -150,6 +158,12 @@ pre code {
   padding-left: 10px;
   padding-right: 10px;
 }
+.pull-left {
+  float: left !important;
+}
+.pull-right {
+  float: right !important;
+}
 @font-face {
   font-family: Interstate-ExtraLight;
   font-style: normal;
@@ -212,7 +226,6 @@ label {
 input[type="radio"],
 input[type="checkbox"] {
   margin: 4px 0 0;
-  margin-top: 1px 9;
   line-height: normal;
 }
 input[type="text"]:focus,
@@ -285,69 +298,47 @@ textarea.textarea-resizable {
 .checkbox-inline {
   position: relative;
   display: block;
-}
-.radio label,
-.radio-inline label,
-.checkbox label,
-.checkbox-inline label {
   min-height: 20px;
   padding: 0;
   margin-bottom: 0;
   cursor: pointer;
   color: #000;
   line-height: 20px;
 }
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="radio"],
+.checkbox-inline input[type="radio"],
+.radio input[type="checkbox"],
+.radio-inline input[type="checkbox"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  cursor: pointer;
+  margin-right: 8px;
+}
 input[type="radio"][disabled],
 input[type="checkbox"][disabled],
+input[type="radio"].disabled,
+input[type="checkbox"].disabled,
+fieldset[disabled] input[type="radio"],
+fieldset[disabled] input[type="checkbox"] {
+  cursor: not-allowed;
+}
 .radio[disabled],
 .radio-inline[disabled],
 .checkbox[disabled],
 .checkbox-inline[disabled],
-input[type="radio"].disabled,
-input[type="checkbox"].disabled,
 .radio.disabled,
 .radio-inline.disabled,
 .checkbox.disabled,
 .checkbox-inline.disabled,
-fieldset[disabled] input[type="radio"],
-fieldset[disabled] input[type="checkbox"],
 fieldset[disabled] .radio,
 fieldset[disabled] .radio-inline,
 fieldset[disabled] .checkbox,
 fieldset[disabled] .checkbox-inline {
+  color: rgba(0,0,0,0.4); /*opacity: .4;*/
   cursor: not-allowed;
 }
-input[type="radio"][disabled] label,
-input[type="checkbox"][disabled] label,
-.radio[disabled] label,
-.radio-inline[disabled] label,
-.checkbox[disabled] label,
-.checkbox-inline[disabled] label,
-input[type="radio"].disabled label,
-input[type="checkbox"].disabled label,
-.radio.disabled label,
-.radio-inline.disabled label,
-.checkbox.disabled label,
-.checkbox-inline.disabled label,
-fieldset[disabled] input[type="radio"] label,
-fieldset[disabled] input[type="checkbox"] label,
-fieldset[disabled] .radio label,
-fieldset[disabled] .radio-inline label,
-fieldset[disabled] .checkbox label,
-fieldset[disabled] .checkbox-inline label {
-  opacity: 0.4;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
-  filter: alpha(opacity=40);
-  cursor: not-allowed;
-}
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
-  position: absolute;
-  margin-left: -20px;
-  margin-top: 4px 9;
-}
 .radio + .radio,
 .checkbox + .checkbox {
   margin-top: 8px;
@@ -365,100 +356,6 @@ fieldset[disabled] .checkbox-inline label {
 .checkbox-inline + .checkbox-inline {
   margin-left: 16px;
 }
-.input-radio,
-.input-checkbox {
-  display: none;
-}
-.radio label:before,
-.radio-inline label:before {
-  border-radius: 50%;
-}
-.checkbox label:before,
-.checkbox-inline label:before {
-  border-radius: 2px;
-}
-.input-radio + label:before,
-.input-checkbox + label:before {
-  content: "";
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  margin-right: 8px;
-  border: 1px solid #999;
-  vertical-align: top;
-  margin-top: 3px;
-  background-color: #fff;
-}
-.radio .checked + label:before,
-.radio-inline .checked + label:before,
-.input-radio:checked + label:before {
-  content: "\2022";
-  color: #fff;
-  font-size: 16px;
-  text-align: center;
-  line-height: 14px;
-  border: 1px solid #0096cc;
-  background-color: #0096cc;
-  -webkit-transition: background-color 0.2s;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -ms-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-.checkbox .checked + label:before,
-.checkbox-inline .checked + label:before,
-.input-checkbox:checked + label:before {
-  content: "";
-  background-image: url("../images/icon/component_check.svg");
-  background-position: center;
-  border: 1px solid #0096cc;
-  background-color: #0096cc;
-  -webkit-transition: 0.2s;
-  -moz-transition: 0.2s;
-  -o-transition: 0.2s;
-  -ms-transition: 0.2s;
-  transition: 0.2s;
-}
-.checkbox-partial + label:before {
-  content: "\25A0";
-  color: #0096cc;
-  font-size: 13px;
-  text-align: center;
-  line-height: 10px;
-  -webkit-transition: 0.2s;
-  -moz-transition: 0.2s;
-  -o-transition: 0.2s;
-  -ms-transition: 0.2s;
-  transition: 0.2s;
-}
-.input-radio + label:hover::before,
-.input-checkbox + label:hover::before,
-.radio .hover + label:before,
-.radio-inline .hover + label:before,
-.checkbox .hover + label:before,
-.checkbox-inline .hover + label:before {
-  border: 1px solid #0096cc;
-}
-.input-radio:checked + label:hover::before,
-.radio .checked-hover + label:before,
-.radio .checked + label:hover::before,
-.radio-inline .checked-hover + label:before,
-.radio-inline .checked + label:hover::before,
-.input-checkbox:checked + label:hover::before,
-.checkbox .checked-hover + label:before,
-.checkbox .checked + label:hover::before,
-.checkbox-inline .checked-hover + label:before,
-.checkbox-inline .checked + label:hover::before {
-  border: 1px solid #33abd6;
-  background-color: #33abd6;
-}
-.radio .disabled + label:before,
-.radio-inline .disabled + label:before,
-.checkbox .disabled + label:before,
-.checkbox-inline .disabled + label:before {
-  border: 1px solid #999;
-  background-color: #ddd;
-}
 .form-group {
   margin-bottom: 12px;
 }