X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=less%2Froojs-bootstrap%2Fcheckbox.less;h=6d66d901082b04832b69d2212f2b47e22d06d7b7;hb=651f848704e718f07988f402a4edc61346823f41;hp=33c2cd114d79e8f4cb85b1777ab0bb3a1229c196;hpb=d49ca3e5c3320e2e05a9c7cb6fbdcd76df797cad;p=roojs1 diff --git a/less/roojs-bootstrap/checkbox.less b/less/roojs-bootstrap/checkbox.less index 33c2cd114d..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-lighter-80; - border-radius: 3px; - background-color: @white; - -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: @white; } + 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: @white; } - -.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: @white; } + 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: @white; } + 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; + +}