f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 21:53:26 +00:00
Code Issues Packages Releases Activity

Create a more beautiful checkbox

Browse Source 
The browser's default checkbox is too ugly, especially in dark mode
This commit is contained in:
Cotes Chung
2020-12-14 00:24:33 +08:00
parent d0a8d072fd
commit d61446fafc
6 changed files with 65 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
assets/css/_addon/main.scss
View File

@@ -864,16 +864,46 @@ div.post-content .table-wrapper {
ul {
&.task-list, &:not([class]) {
padding-left: 2rem;
.task-list-item {
list-style-type: none;
}
input[type=checkbox] {
margin: 0 .5rem .25rem -1.3rem;
vertical-align: middle;
}
}
// attribute 'hide-bullet' added by JS
.task-list-item[hide-bullet] {
list-style-type: none;
> span { // <span> created by JS
border: 1px solid var(--checkbox-color);
background-color: var(--checkbox-bg);
border-radius: 4px;
margin: 0 .5rem .2rem -1.5rem;
vertical-align: middle;
height: 1rem;
width: 1rem;
display: inline-block;
&[checked] {
background-color: var(--checkbox-checked-bg);
&::after {
content: "";
width: 5px;
height: 9px;
position: relative;
bottom: 9px;
left: 5px;
background: var(--checkbox-checked-bg);
display: inline-block;
border: solid var(--checkbox-checked-color); // the hook symbol
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(1);
}
}
}
} // .task-list-item
input[type=checkbox] {
display: none;
}
} // ul
} // .post-content