X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=less%2Froojs-bootstrap%2Fcheckbox.less;h=6d66d901082b04832b69d2212f2b47e22d06d7b7;hb=651f848704e718f07988f402a4edc61346823f41;hp=be3d18836fc20d915556536f584048c78142faf4;hpb=69265aa239c0bfb0aa034f408e19202490436d4b;p=roojs1 diff --git a/less/roojs-bootstrap/checkbox.less b/less/roojs-bootstrap/checkbox.less index be3d18836f..6d66d90108 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-light; - border-radius: 3px; - background-color: @body-bg; - -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'; + 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'; /* change the font - uses the filled one */ + font-weight: 900; + content: "\f0c8"; } + .checkbox input[type="checkbox"]:disabled + label { opacity: 0.65; } -.checkbox input[type="checkbox"]:disabled + label::before { - background-color: @gray-lighter; - 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: @brand-primary; - border-color: @brand-primary; } + .checkbox-primary input[type="checkbox"]:checked + label::after { - color: @body-bg; } + color: @brand-primary; } -.checkbox-danger input[type="checkbox"]:checked + label::before { - background-color: @brand-danger; - border-color: @brand-danger; } + .checkbox-danger input[type="checkbox"]:checked + label::after { - color: @body-bg; } - -.checkbox-info input[type="checkbox"]:checked + label::before { - background-color: @brand-info; - border-color: @brand-info; } + color: @brand-danger; } + .checkbox-info input[type="checkbox"]:checked + label::after { - color: @body-bg; } + color: @brand-info; } -.checkbox-warning input[type="checkbox"]:checked + label::before { - background-color: @brand-warning; - border-color: @brand-warning; } + .checkbox-warning input[type="checkbox"]:checked + label::after { - color: @body-bg; } + color: @brand-warning; } -.checkbox-success input[type="checkbox"]:checked + label::before { - background-color: @brand-success; - border-color: @brand-success; } + .checkbox-success input[type="checkbox"]:checked + label::after { - color: @body-bg; } + color: @brand-success;} /* before is the outer cicle */ /* after is the inner circle.. */ @@ -182,4 +174,10 @@ .checkbox.checkbox-inline, .radio.radio-inline { margin-top: 0; -} \ No newline at end of file +} + +.form-group.checkbox { + padding-bottom:25px; + margin-top: 0; + +}