* From https://github.com/flatlogic/awesome-bootstrap-checkbox
*
*/
-.checkbox label {
+.checkbox label.box-label {
display: inline-block;
position: relative;
padding-left: 5px;
-ms-user-select: none;
user-select: none;
}
-.checkbox label::before {
- content: "";
- display: inline-block;
- position: absolute;
- width: 17px;
- height: 17px;
- left: 0;
- margin-left: -20px;
- border: 1px solid @gray-lighter;
- border-radius: 3px;
- background-color: #fff;
- -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
- -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
- transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
display: inline-block;
position: absolute;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
- color: #555555; }
+ color: @gray;
+}
+
.checkbox input[type="checkbox"] {
- display: none; }
+ display: none;
+}
.checkbox input[type="checkbox"]:checked + label::after {
- font-family: 'FontAwesome';
- content: "\f00c"; }
+ font-size: 18px;
+ padding-top: 0px;
+ font-family: 'Font Awesome 5 Free 400';
+ font-weight: 900;
+ color: @brand-success;
+ content: "\f14a"; }
+.checkbox input[type="checkbox"]:not(:checked) + label::after {
+ font-size: 18px;
+ padding-top: 0px;
+ font-family: 'Font Awesome 5 Free 400';
+ font-weight: 900;
+ content: "\f0c8"; }
+
.checkbox input[type="checkbox"]:disabled + label {
opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before {
- background-color: #eeeeee;
+ background-color: @gray-lighter;
cursor: not-allowed; }
.checkbox.checkbox-circle label::before {
border-radius: 50%; }
.checkbox-primary input[type="checkbox"]:checked + label::before {
- background-color: #428bca;
- border-color: #428bca; }
+ background-color: @brand-primary;
+ border-color: @brand-primary; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
- color: #fff; }
+ color: @body-bg; }
.checkbox-danger input[type="checkbox"]:checked + label::before {
- background-color: #d9534f;
- border-color: #d9534f; }
+ background-color: @brand-danger;
+ border-color: @brand-danger; }
.checkbox-danger input[type="checkbox"]:checked + label::after {
- color: #fff; }
+ color: @body-bg; }
.checkbox-info input[type="checkbox"]:checked + label::before {
- background-color: #5bc0de;
- border-color: #5bc0de; }
+ background-color: @brand-info;
+ border-color: @brand-info; }
.checkbox-info input[type="checkbox"]:checked + label::after {
- color: #fff; }
+ color: @body-bg; }
.checkbox-warning input[type="checkbox"]:checked + label::before {
- background-color: #f0ad4e;
- border-color: #f0ad4e; }
+ background-color: @brand-warning;
+ border-color: @brand-warning; }
.checkbox-warning input[type="checkbox"]:checked + label::after {
- color: #fff; }
+ color: @body-bg; }
.checkbox-success input[type="checkbox"]:checked + label::before {
- background-color: #5cb85c;
- border-color: #5cb85c; }
+ background-color: @brand-success;
+ border-color: @brand-success; }
.checkbox-success input[type="checkbox"]:checked + label::after {
- color: #fff; }
+ color: @body-bg; }
/* before is the outer cicle */
/* after is the inner circle.. */
height: 17px;
left: 0;
margin-left: -20px;
- border: 1px solid #cccccc;
+ border: 1px solid @gray-light;
border-radius: 50%;
- background-color: #fff;
+ background-color: @body-bg;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out; }
top: 3px;
margin-left: -20px;
border-radius: 50%;
- background-color: #fff;
+ background-color: @body-bg;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
- background-color: #555555;
+ background-color: @gray;
}
.radio input[type="radio"]:disabled + label {
opacity: 0.65; }
cursor: not-allowed; }
.radio-primary input[type="radio"] + label::after {
- background-color: #fff; }
+ background-color: @body-bg; }
.radio-primary input[type="radio"]:checked + label::before {
- border-color: #428bca; }
+ border-color: @brand-primary; }
.radio-primary input[type="radio"]:checked + label::after {
- background-color: #428bca; }
+ background-color: @brand-primary; }
.radio-danger input[type="radio"] + label::after {
- background-color: #d9534f; }
+ background-color: @brand-danger; }
.radio-danger input[type="radio"]:checked + label::before {
- border-color: #d9534f; }
+ border-color: @brand-danger; }
.radio-danger input[type="radio"]:checked + label::after {
- background-color: #d9534f; }
+ background-color: @brand-danger; }
.radio-info input[type="radio"] + label::after {
- background-color: #fff;
+ background-color: @body-bg;
}
.radio-info input[type="radio"]:checked + label::before {
- border-color: #5bc0de; }
+ border-color: @brand-info; }
.radio-info input[type="radio"]:checked + label::after {
- background-color: #5bc0de; }
+ background-color: @brand-info; }
.radio-warning input[type="radio"] + label::after {
- background-color: #fff; }
+ background-color: @body-bg; }
.radio-warning input[type="radio"]:checked + label::before {
- border-color: #f0ad4e; }
+ border-color: @brand-warning; }
.radio-warning input[type="radio"]:checked + label::after {
- background-color: #f0ad4e; }
+ background-color: @brand-warning; }
.radio-success input[type="radio"] + label::after {
- background-color: #fff; }
+ background-color: @body-bg; }
.radio-success input[type="radio"]:checked + label::before {
- border-color: #5cb85c; }
+ border-color: @brand-success; }
.radio-success input[type="radio"]:checked + label::after {
- background-color: #5cb85c; }
+ background-color: @brand-success; }
.checkbox.checkbox-inline,
.radio.radio-inline {
margin-top: 0;
-}
\ No newline at end of file
+}
+
+.form-group.checkbox {
+ padding-bottom:25px;
+ margin-top: 0;
+
+}