Simplify checkbox with fontawesome icon
This commit is contained in:
parent
0225d28fd3
commit
cb984aa021
4 changed files with 10 additions and 31 deletions
|
@ -870,37 +870,16 @@ div.post-content .table-wrapper {
|
|||
.task-list-item[hide-bullet] {
|
||||
list-style-type: none;
|
||||
|
||||
> span { // <span> created by JS
|
||||
border: 1px solid var(--checkbox-color);
|
||||
background-color: var(--main-wrapper-bg);
|
||||
border-radius: 50%;
|
||||
margin: 0 .5rem .2rem -1.5rem;
|
||||
> i { // checkbox icon
|
||||
margin: 0 .4rem .2rem -1.4rem;
|
||||
vertical-align: middle;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
display: inline-block;
|
||||
|
||||
&[checked] {
|
||||
background-color: var(--checkbox-checked-color);
|
||||
border-color: var(--checkbox-checked-color);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
position: relative;
|
||||
bottom: 9px;
|
||||
left: 5px;
|
||||
background: var(--checkbox-checked-color);
|
||||
display: inline-block;
|
||||
border: solid var(--main-wrapper-bg); // the hook symbol
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg) scale(1);
|
||||
}
|
||||
color: var(--checkbox-color);
|
||||
&.checked {
|
||||
color: var(--checkbox-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
} // .task-list-item
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
margin: 0 .5rem .2rem -1.3rem;
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
--btn-box-shadow: var(--main-wrapper-bg);
|
||||
--card-header-bg: rgb(51, 50, 50);
|
||||
--label-color: rgb(108, 117, 125);
|
||||
--checkbox-color: var(--text-color);
|
||||
--checkbox-color: rgb(118 120 121);
|
||||
--checkbox-checked-color: var(--link-color);
|
||||
|
||||
/* Sidebar */
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
--btn-backtotop-border-color: #f1f1f1;
|
||||
--btn-box-shadow: #eaeaea;
|
||||
--checkbox-color: darkgrey;
|
||||
--checkbox-checked-color: #2796ff;
|
||||
--checkbox-checked-color: #07a8f7;
|
||||
|
||||
|
||||
/* Sidebar */
|
||||
|
|
|
@ -6,7 +6,7 @@ $(function() {
|
|||
/* hide browser default checkbox */
|
||||
$("input[type=checkbox]").addClass("unloaded");
|
||||
/* create checked checkbox */
|
||||
$("input[type=checkbox][checked]").before("<span checked></span>");
|
||||
$("input[type=checkbox][checked]").before("<i class=\"fas fa-check-circle checked\"></i>");
|
||||
/* create normal checkbox */
|
||||
$("input[type=checkbox]:not([checked])").before("<span></span>");
|
||||
$("input[type=checkbox]:not([checked])").before("<i class=\"far fa-circle\"></i>");
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue