Skip to content

Commit

Permalink
More robust way to hide native checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilafian
dpilafian committed Apr 26, 2024
1 parent 4ccd5c0 commit 9bcb416
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 67 deletions.
17 changes: 10 additions & 7 deletions src/templates/to-do-checklist.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
<ol class=to-do-checklist data-on-click=app.saveChecklist>
<li id=phone> <label><span>Set your mobile device to metric</span> <input type=checkbox></label></li>
<li id=car> <label><span>Set the temperature display in your car to Celsius (&deg;C)</span> <input type=checkbox></label></li>
<li id=home> <label><span>Set your home thermostat to Celsius (&deg;C)</span> <input type=checkbox></label></li>
<li id=refrigerator> <label><span>Set your refrigerator to Celsius (&deg;C)</span> <input type=checkbox></label></li>
<li id=tape-measure> <label><span>Buy a <a href={{webRoot}}/products>metric only tape measure</a></span> <input type=checkbox></label></li>
<li id=kitchen-scale><label><span>Buy a <a href={{webRoot}}/products>kitchen scale</a> that displays grams</span> <input type=checkbox></label></li>
<li id=bathroom> <label><span>Set your bathroom scale to kilograms (kg)</span> <input type=checkbox></label></li>
<li id=phone> <p>Set your mobile device to metric</p> <label><input type=checkbox><b></b></label></li>
<li id=car> <p>Set the display in your car to Celsius (&deg;C)</p> <label><input type=checkbox><b></b></label></li>
<li id=home> <p>Set your home thermostat to Celsius (&deg;C)</p> <label><input type=checkbox><b></b></label></li>
<li id=refrigerator> <p>Set your refrigerator to Celsius (&deg;C)</p> <label><input type=checkbox><b></b></label></li>
<li id=tape-measure> <p>Buy a <a href={{webRoot}}/products>metric only tape measure</a></p> <label><input type=checkbox><b></b></label></li>
<li id=kitchen-scale><p>Buy a <a href={{webRoot}}/products>kitchen scale</a> that displays grams (g)</p> <label><input type=checkbox><b></b></label></li>
<li id=bathroom> <p>Set your bathroom scale to kilograms (kg)</p> <label><input type=checkbox><b></b></label></li>
<li id=helpful> <p>Click "Helpful" for a review of a good metric product</p> <label><input type=checkbox><b></b></label></li>
<li id=review> <p>Leave a positive review for a good metric product</p> <label><input type=checkbox><b></b></label></li>
<li id=recipe> <p>Follow a <a href=https://pilafian.org/dem/pilaf>metric recipe</a> to prepare a dish</p><label><input type=checkbox><b></b></label></li>
</ol>
126 changes: 66 additions & 60 deletions src/website/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,102 +172,108 @@ table.big-table {
}
}
}

ol.to-do-checklist {
@rowHeight: 2.6rem;
list-style: none;
counter-reset: item;
li { //row
li { //row (task item)
counter-increment: item;
display: flex;
align-items: center;
padding: 0px (@rowHeight / 2) 0px 0px;
text-indent: 0px;
color: dimgray;
background-color: gainsboro;
padding: 0px;
margin-bottom: 15px;
transition: all 500ms;
cursor: default;
&:hover {
color: black;
background-color: silver;
}
&::before { //circle with number
&::before { //number circle
content: counter(item);
display: inline-block;
width: @rowHeight;
height: @rowHeight;
line-height: @rowHeight;
font-size: @rowHeight * 0.6;
font-weight: bold;
text-align: center;
color: white;
background: deepskyblue;
border-radius: 100%;
margin-right: 10px;
outline: 10px solid white;
.toDoChecklistCircle(@rowHeight);
}
p { //task text
flex-grow: 1;
text-align: left;
font-size: @rowHeight * 0.4;
padding: 0px (@rowHeight * 0.8) 0px 10px;
margin: 0px;
a:visited {
color: dimgray;
}
a:hover {
color: white;
}
}
label {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
span { //task text
font-size: @rowHeight * 0.4;
text-align: left;
padding: 0px (@rowHeight / 2) 0px 10px;
.MobileMode({ padding-right: 10px });
padding-right: 10px; //checkbox right gap
cursor: pointer;
input[type=checkbox] {
width: 0px;
height: 0px;
margin: 0px;
a:visited {
color: dimgray;
}
a:hover {
color: white;
}
opacity: 0;
}
input[type=checkbox] {
input[type=checkbox]:checked + b::after {
opacity: 1;
}
b { //custom checkbox
position: relative;
font-size: @rowHeight;
margin: 0px;
transform: translateX(-9999px); //hide native component on mobile
&::before, &::after { //custom checkbox and checkmark
transform: translateX(9999px);
position: absolute;
&::before { //empty "unchecked" checkbox
.toDoChecklistCheckbox(@rowHeight);
content: "";
top: -(@rowHeight * 0.2);
left: -(@rowHeight * 0.2);
width: (@rowHeight * 0.5);
height: (@rowHeight * 0.5);
line-height: (@rowHeight * 0.4);
font-size: (@rowHeight * 0.8);
background-color: white;
border: 4px solid gray;
border-radius: 25%;
margin: 0px;
.MobileMode({
top: -(@rowHeight * 0.15);
left: -(@rowHeight * 0.0);
width: (@rowHeight * 0.4);
height: (@rowHeight * 0.4);
line-height: (@rowHeight * 0.3);
font-size: (@rowHeight * 0.6);
});
}
&::after {
content: "\2714"; //heavy checkmark (✔)
text-align: center;
&::after { //heavy checkmark
.toDoChecklistCheckbox(@rowHeight);
content: "\2714"; //character: ✔
color: white;
background-color: royalblue;
border-color: royalblue;
opacity: 0;
transition: opacity 500ms;
}
&:checked::after {
opacity: 1;
}
}
}
}
}
.toDoChecklistCircle(@height) {
display: inline-block;
flex-shrink: 0;
width: @height;
height: @height;
line-height: @height;
font-size: @rowHeight * 0.6;
font-weight: bold;
text-align: center;
color: white;
background: deepskyblue;
border-radius: 100%;
margin-right: 10px;
outline: 10px solid white;
}
.toDoChecklistCheckbox(@height) {
position: absolute;
top: -(@height * 0.33);
right: 0px;
width: (@height * 0.5);
height: (@height * 0.5);
line-height: (@height * 0.4);
font-size: (@height * 0.8);
text-align: center;
background-color: white;
border: 4px solid gray;
border-radius: 25%;
margin: 0px;
@supports (-webkit-touch-callout: none) { //fix oversized font on iOS
line-height: (@height * 0.5);
font-size: (@height * 0.4);
}
}

// Responsive Design
.MobileMode({
Expand Down

0 comments on commit 9bcb416

Please sign in to comment.