asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Simplify checkbox with fontawesome icon

Browse source
This commit is contained in:
Cotes Chung 2020-12-15 15:20:03 +08:00
parent 0225d28fd3
commit cb984aa021
4 changed files with 10 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
assets/css/_addon/main.scss
View file

@ -870,37 +870,16 @@ div.post-content .table-wrapper {
.task-list-item[hide-bullet] { .task-list-item[hide-bullet] {
list-style-type: none; list-style-type: none;
> span { // <span> created by JS > i { // checkbox icon
border: 1px solid var(--checkbox-color); margin: 0 .4rem .2rem -1.4rem;
background-color: var(--main-wrapper-bg);
border-radius: 50%;
margin: 0 .5rem .2rem -1.5rem;
vertical-align: middle; vertical-align: middle;
height: 1rem; color: var(--checkbox-color);
width: 1rem; &.checked {
display: inline-block; color: var(--checkbox-checked-color);
&[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);
}
} }
} }
} // .task-list-item }
input[type=checkbox] { input[type=checkbox] {
margin: 0 .5rem .2rem -1.3rem; margin: 0 .5rem .2rem -1.3rem;

2
assets/css/_colors/dark-typography.scss
View file

@ -32,7 +32,7 @@
--btn-box-shadow: var(--main-wrapper-bg); --btn-box-shadow: var(--main-wrapper-bg);
--card-header-bg: rgb(51, 50, 50); --card-header-bg: rgb(51, 50, 50);
--label-color: rgb(108, 117, 125); --label-color: rgb(108, 117, 125);
--checkbox-color: var(--text-color); --checkbox-color: rgb(118 120 121);
--checkbox-checked-color: var(--link-color); --checkbox-checked-color: var(--link-color);
/* Sidebar */ /* Sidebar */

2
assets/css/_colors/light-typography.scss
View file

@ -26,7 +26,7 @@
--btn-backtotop-border-color: #f1f1f1; --btn-backtotop-border-color: #f1f1f1;
--btn-box-shadow: #eaeaea; --btn-box-shadow: #eaeaea;
--checkbox-color: darkgrey; --checkbox-color: darkgrey;
--checkbox-checked-color: #2796ff; --checkbox-checked-color: #07a8f7;
/* Sidebar */ /* Sidebar */

4
assets/js/_commons/checkbox.js
View file

@ -6,7 +6,7 @@ $(function() {
/* hide browser default checkbox */ /* hide browser default checkbox */
$("input[type=checkbox]").addClass("unloaded"); $("input[type=checkbox]").addClass("unloaded");
/* create checked checkbox */ /* 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 */ /* create normal checkbox */
$("input[type=checkbox]:not([checked])").before("<span></span>"); $("input[type=checkbox]:not([checked])").before("<i class=\"far fa-circle\"></i>");
}); });