X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=less%2Froojs-bootstrap%2Fcheckbox.less;h=477821fe5e86125dc7ab2b11f902652e8c9dbe79;hp=22140a2d84405e4733655cd086b12ce844550f62;hb=07830f57369f060d2684d2efc7e7bea00fe9e0e4;hpb=482b6b35b2db732ca2c79704e767932c1aa6c660 diff --git a/less/roojs-bootstrap/checkbox.less b/less/roojs-bootstrap/checkbox.less index 22140a2d84..477821fe5e 100644 --- a/less/roojs-bootstrap/checkbox.less +++ b/less/roojs-bootstrap/checkbox.less @@ -3,7 +3,7 @@ * From https://github.com/flatlogic/awesome-bootstrap-checkbox * */ -.checkbox label { +.checkbox label.box-label { display: inline-block; position: relative; padding-left: 5px; @@ -14,20 +14,6 @@ -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: @white-base; - -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; @@ -39,49 +25,55 @@ padding-left: 3px; padding-top: 1px; font-size: 11px; - color: @gray; } + 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'; /* change the font - uses the filled one */ + 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; - cursor: not-allowed; } + +.checkbox input[type="checkbox"]:disabled + label::after { + 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; } + .checkbox-primary input[type="checkbox"]:checked + label::after { - color: #fff; } + color: @brand-primary; } -.checkbox-danger input[type="checkbox"]:checked + label::before { - background-color: #d9534f; - border-color: #d9534f; } + .checkbox-danger input[type="checkbox"]:checked + label::after { - color: #fff; } - -.checkbox-info input[type="checkbox"]:checked + label::before { - background-color: #5bc0de; - border-color: #5bc0de; } + color: @brand-danger; } + .checkbox-info input[type="checkbox"]:checked + label::after { - color: #fff; } + color: @brand-info; } -.checkbox-warning input[type="checkbox"]:checked + label::before { - background-color: #f0ad4e; - border-color: #f0ad4e; } + .checkbox-warning input[type="checkbox"]:checked + label::after { - color: #fff; } + color: @brand-warning; } -.checkbox-success input[type="checkbox"]:checked + label::before { - background-color: #5cb85c; - border-color: #5cb85c; } + .checkbox-success input[type="checkbox"]:checked + label::after { - color: #fff; } + color: @brand-success;} /* before is the outer cicle */ /* after is the inner circle.. */ @@ -100,9 +92,9 @@ 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; } @@ -116,7 +108,7 @@ 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); @@ -134,7 +126,7 @@ -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; } @@ -142,44 +134,50 @@ 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; + +}