X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=scss%2Froojs-bootstrap%2Fcheckbox.scss;fp=scss%2Froojs-bootstrap%2Fcheckbox.scss;h=910a753fc5f2fcc7277e15989752c59082ccddcf;hp=bfed23fe8ad2ce057c2283490437de5b94b7bf70;hb=bcc05f004771488d31e56e450a82aa3745a0af23;hpb=3ad50dae56f93f0d8f813ce1f3b24ebe2510d350 diff --git a/scss/roojs-bootstrap/checkbox.scss b/scss/roojs-bootstrap/checkbox.scss index bfed23fe8a..910a753fc5 100644 --- a/scss/roojs-bootstrap/checkbox.scss +++ b/scss/roojs-bootstrap/checkbox.scss @@ -14,7 +14,9 @@ -ms-user-select: none; user-select: none; } + .checkbox label::after { + display: inline-block; position: absolute; width: 16px; @@ -25,16 +27,19 @@ 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-size: 18px; padding-top: 0px; - font-family: 'Font Awesome 5 Free 400'; + font-family: 'Font Awesome 5 Free'; font-weight: 900; color: $brand-success; - content: "\f14a"; } + content: "\f14a"; +} .checkbox input[type="checkbox"]:not(:checked) + label::after { font-size: 18px; padding-top: 0px; @@ -44,41 +49,31 @@ .checkbox input[type="checkbox"]:disabled + label { opacity: 0.65; } -.checkbox input[type="checkbox"]:disabled + label::before { - background-color: $gray-lighter; +.checkbox input[type="checkbox"]:disabled + label::after { + color: $gray-lighter !important; /* overrides primary etc.. */ 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; } + color: $brand-danger;} -.checkbox-info input[type="checkbox"]:checked + label::before { - background-color: $brand-info; - border-color: $brand-info; } + .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.. */