X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=less%2Froojs-bootstrap%2Fcheckbox.less;h=e167aaff9192a739367805244141de5d8f925ea6;hb=c67d22ee674cbff9c6bee36c1af870e134af451d;hp=7a91d806a7329ffb27190641680042b19ca8fc21;hpb=73098b0371067fedf7e2c21f40cd1b80e6409974;p=roojs1 diff --git a/less/roojs-bootstrap/checkbox.less b/less/roojs-bootstrap/checkbox.less index 7a91d806a7..e167aaff91 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,12 +25,26 @@ 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 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 { @@ -53,35 +53,39 @@ .checkbox.checkbox-circle label::before { border-radius: 50%; } -.checkbox-primary input[type="checkbox"]:checked + label::before { +.checkbox-primary input[type="checkbox"]:checked + label::after { background-color: @brand-primary; border-color: @brand-primary; } .checkbox-primary input[type="checkbox"]:checked + label::after { - color: @white; } + color: @body-bg; } -.checkbox-danger input[type="checkbox"]:checked + label::before { +.checkbox-danger input[type="checkbox"]:checked + label::after { background-color: @brand-danger; border-color: @brand-danger; } .checkbox-danger input[type="checkbox"]:checked + label::after { - color: @white; } + color: @body-bg; } -.checkbox-info input[type="checkbox"]:checked + label::before { +.checkbox-info input[type="checkbox"]:checked + label::after +{ background-color: @brand-info; - border-color: @brand-info; } -.checkbox-info input[type="checkbox"]:checked + label::after { - color: @white; } + border-color: @brand-info; +} +.checkbox-info input[type="checkbox"]:checked + label::after +{ + color: @body-bg; +} -.checkbox-warning input[type="checkbox"]:checked + label::before { +.checkbox-warning input[type="checkbox"]:checked + label::after { background-color: @brand-warning; border-color: @brand-warning; } .checkbox-warning input[type="checkbox"]:checked + label::after { - color: @white; } + color: @body-bg; } -.checkbox-success input[type="checkbox"]:checked + label::before { +.checkbox-success input[type="checkbox"]:checked + label::after { background-color: @brand-success; border-color: @brand-success; } .checkbox-success input[type="checkbox"]:checked + label::after { - color: @white; } + color: @body-bg; } /* before is the outer cicle */ /* after is the inner circle.. */ @@ -100,9 +104,9 @@ height: 17px; left: 0; margin-left: -20px; - border: 1px solid @gray-lighter-80; + border: 1px solid @gray-light; border-radius: 50%; - background-color: @white; + 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 +120,7 @@ top: 3px; margin-left: -20px; border-radius: 50%; - background-color: @white; + background-color: @body-bg; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); @@ -138,19 +142,19 @@ } .radio input[type="radio"]:disabled + label { opacity: 0.65; } -.radio input[type="radio"]:disabled + label::before { +.radio input[type="radio"]:disabled + label::after { cursor: not-allowed; } .radio-primary input[type="radio"] + label::after { - background-color: @white; } -.radio-primary input[type="radio"]:checked + label::before { + background-color: @body-bg; } +.radio-primary input[type="radio"]:checked + label::after { border-color: @brand-primary; } .radio-primary input[type="radio"]:checked + label::after { background-color: @brand-primary; } .radio-danger input[type="radio"] + label::after { background-color: @brand-danger; } -.radio-danger input[type="radio"]:checked + label::before { +.radio-danger input[type="radio"]:checked + label::after { border-color: @brand-danger; } .radio-danger input[type="radio"]:checked + label::after { background-color: @brand-danger; } @@ -158,28 +162,34 @@ .radio-info input[type="radio"] + label::after { - background-color: @white; + background-color: @body-bg; } -.radio-info input[type="radio"]:checked + label::before { +.radio-info input[type="radio"]:checked + label::after { border-color: @brand-info; } .radio-info input[type="radio"]:checked + label::after { background-color: @brand-info; } .radio-warning input[type="radio"] + label::after { - background-color: @white; } -.radio-warning input[type="radio"]:checked + label::before { + background-color: @body-bg; } +.radio-warning input[type="radio"]:checked + label::after { border-color: @brand-warning; } .radio-warning input[type="radio"]:checked + label::after { background-color: @brand-warning; } .radio-success input[type="radio"] + label::after { - background-color: @white; } -.radio-success input[type="radio"]:checked + label::before { - border-color: #5cb85c; } + background-color: @body-bg; } .radio-success input[type="radio"]:checked + label::after { - background-color: #5cb85c; } + border-color: @brand-success; } +.radio-success input[type="radio"]:checked + label::after { + 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; + +}